fix: orgsidebar progress

juspay · Jan 24, 2025 · 66f3f7b · 66f3f7b
1 parent 8c0b560
commit 66f3f7b
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 51 deletions.
diff --git a/src/components/InlineEditInput.res b/src/components/InlineEditInput.res
@@ -1,14 +1,6 @@
 module HoverInline = {
   @react.component
-  let make = (
-    ~customStyle="",
-    ~leftIcon,
-    ~value,
-    ~showSubText,
-    ~subText,
-    ~onHoverEdit,
-    ~leftActionButtons,
-  ) => {
+  let make = (~customStyle="", ~leftIcon, ~value, ~subText, ~onHoverEdit, ~leftActionButtons) => {
     <div
       className={`group relative font-medium inline-flex gap-4 items-center justify-between px-4 py-2 w-full bg-white rounded-md  ${customStyle}`}>
       <div className="flex gap-2">
@@ -17,7 +9,7 @@ module HoverInline = {
         </RenderIf>
         <div className="flex flex-col gap-1 ml-1">
           <p className="text-sm"> {React.string(value)} </p>
-          <RenderIf condition={showSubText}>
+          <RenderIf condition={subText->LogicUtils.isNonEmptyString}>
             <span className="text-xs text-gray-500"> {subText->React.string} </span>
           </RenderIf>
         </div>
@@ -35,7 +27,6 @@ module HoverInline = {
 let make = (
   ~index=0,
   ~labelText="",
-  ~showSubText=false,
   ~subText="",
   ~customStyle="",
   ~onHoverEdit=true,
@@ -47,6 +38,7 @@ let make = (
   ~showEditIcon=true,
   ~handleEdit: option<option<int> => unit>=?,
   ~currentlyEditingId=None,
+  ~closeOnOutsideClick=true,
 ) => {
   let (isEditingInLine, setIsEditing) = React.useState(_ => currentlyEditingId->Option.isSome)
   let (value, setValue) = React.useState(_ => labelText)
@@ -59,12 +51,19 @@ let make = (
     | None => ()
     }
     switch handleEdit {
-    | Some(func) => func(Some(index))
+    | Some(func) => func(None)
     | None => ()
     }
     setIsEditing(_ => false)
   }
 
+  React.useEffect(() => {
+    if labelText->String.length > 0 {
+      setValue(_ => labelText)
+    }
+    None
+  }, [labelText])
+
   let handleCancel = () => {
     setValue(_ => labelText)
     setIsEditing(_ => false)
@@ -116,7 +115,9 @@ let make = (
         </button>
       </RenderIf>
       <RenderIf condition={customIconComponent->Option.isSome}>
-        {customIconComponent->Option.getOr(React.null)}
+        <div className="flex items-center justify-center w-4 h-4">
+          {customIconComponent->Option.getOr(React.null)}
+        </div>
       </RenderIf>
     </div>
 
@@ -133,8 +134,8 @@ let make = (
     }}>
     {if isEditingInLine {
       <div
-        className={`group relative flex items-center bg-white  focus-within:ring-1 focus-within:ring-primary rounded-md text-md ${customStyle}`}>
-        <div className="flex-1">
+        className={`group relative flex items-center bg-white focus-within:ring-1 focus-within:ring-primary rounded-md text-md ${customStyle}`}>
+        <div className={`flex-1 `}>
           <input
             type_="text"
             value
@@ -148,7 +149,7 @@ let make = (
       </div>
     } else {
       <RenderIf condition={currentlyEditingId->Option.isNone}>
-        <HoverInline customStyle leftIcon value showSubText subText onHoverEdit leftActionButtons />
+        <HoverInline customStyle leftIcon value subText onHoverEdit leftActionButtons />
       </RenderIf>
     }}
   </div>

diff --git a/src/screens/Sidebar/OrgSidebar.res b/src/screens/Sidebar/OrgSidebar.res
@@ -4,16 +4,11 @@ module OrgTile = {
     ~orgID: string,
     ~isActive,
     ~orgSwitch,
-    ~onEdit,
     ~orgName: string,
     ~index: int,
     ~currentlyEditingId: option<int>,
     ~handleIdUnderEdit,
   ) => {
-    let {
-      globalUIConfig: {sidebarColor: {backgroundColor, secondaryTextColor, hoverColor}},
-    } = React.useContext(ThemeProvider.themeContext)
-
     let (orgList, _) = Recoil.useRecoilState(HyperswitchAtom.orgListAtom)
     let {
       globalUIConfig: {sidebarColor: {backgroundColor, primaryTextColor, secondaryTextColor}},
@@ -36,29 +31,38 @@ module OrgTile = {
     let hoverLable1 = currentlyEditingId->Option.isSome ? `` : `group/parent`
     let hoverInput2 =
       currentlyEditingId->Option.isSome ? `` : `opacity-0 group-hover/parent:opacity-100`
-
+    let wrapperCss = switch (currentlyEditingId, isActive) {
+    | (Some(_), true) =>
+      `absolute left-full top-0 z-50 ${backgroundColor.sidebarSecondary} p-2 rounded-md`
+    | (None, _) =>
+      `absolute ${backgroundColor.sidebarSecondary} border border-transparent left-full top-0 rounded-md ${hoverInput2} shadow-lg z-50 p-2 hello`
+    | (Some(_), false) => ""
+    }
     <div
-      className={`w-8 h-8 border relative  cursor-pointer flex items-center justify-center rounded-md shadow-md ${hoverLable1} ${isActive
-          ? `bg-white/20 ${primaryTextColor} border-sidebar-secondaryTextColor`
-          : ` ${secondaryTextColor} hover:bg-white/10 border-sidebar-secondaryTextColor/30`}`}>
-      <span className="text-xs font-medium"> {displayText->React.string} </span>
+      onClick={_ => orgSwitch(orgID)->ignore}
+      className={`w-10 h-10 flex items-center justify-center relative cursor-pointer ${hoverLable1} `}>
       <div
-        className={`absolute ${backgroundColor.sidebarSecondary} border border-transparent left-[3rem] top-0 rounded-lg  ${hoverInput2} shadow-lg z-50 p-2 `}>
-        <InlineEditInput
-          index
-          labelText={orgID}
-          subText={"organization"}
-          showSubText=true
-          customStyle={` p-3 ${backgroundColor.sidebarSecondary} min-w-[250px]transition-all duration-200 ease-in-out `}
-          onHoverEdit=false
-          customInputStyle={`${backgroundColor.sidebarSecondary} min-w-[250px] h-4`}
-          customIconComponent={<OMPSwitchHelper.OMPCopyTextCustomComp
-            displayValue=" " copyValue=Some({orgID})
-          />}
-          showEditIcon=isActive
-          handleEdit=handleIdUnderEdit
-          currentlyEditingId
-        />
+        className={`w-8 h-8 border  cursor-pointer flex items-center justify-center rounded-md shadow-md  ${isActive
+            ? `bg-white/20 ${primaryTextColor} border-sidebar-secondaryTextColor`
+            : ` ${secondaryTextColor} hover:bg-white/10 border-sidebar-secondaryTextColor/30`}`}>
+        <span className="text-xs font-medium"> {displayText->React.string} </span>
+        <div className={wrapperCss}>
+          <InlineEditInput
+            index
+            labelText={orgName}
+            subText={"organization"}
+            customStyle={` p-3 ${backgroundColor.sidebarSecondary} min-w-64 transition-all duration-300 ease-in-out `}
+            onHoverEdit=false
+            customInputStyle={`${backgroundColor.sidebarSecondary} text-sm `}
+            customIconComponent={<OMPSwitchHelper.OMPCopyTextCustomComp
+              displayValue=" " copyValue=Some({orgID})
+            />}
+            showEditIcon=isActive
+            handleEdit=handleIdUnderEdit
+            currentlyEditingId
+            closeOnOutsideClick=true
+          />
+        </div>
       </div>
     </div>
   }
@@ -75,7 +79,6 @@ module EditState = {
       <InlineEditInput
         labelText
         subText={"organization"}
-        showSubText=true
         customStyle={` p-3 ${backgroundColor.sidebarSecondary} min-w-[250px]transition-all duration-200 ease-in-out `}
         onHoverEdit=false
         customInputStyle={`${backgroundColor.sidebarSecondary} min-w-[250px] h-4`}
@@ -256,11 +259,6 @@ let make = () => {
     None
   }, [])
 
-  let onEditClick = e => {
-    setShowEditOrgModal(_ => true)
-    e->ReactEvent.Mouse.stopPropagation
-  }
-
   let orgSwitch = async value => {
     try {
       setShowSwitchingOrg(_ => true)
@@ -277,12 +275,12 @@ let make = () => {
   }
   let (currentlyEditingId, setUnderEdit) = React.useState(_ => None)
   let handleIdUnderEdit = (selectedEditId: option<int>) => {
-    Js.log2(selectedEditId, "LOG LOG")
     setUnderEdit(_ => selectedEditId)
   }
+
   <div className={`${backgroundColor.sidebarNormal} p-2 border-r border-secondary`}>
     // the org tiles
-    <div className="flex flex-col gap-2 m-1 mt-4 items-center justify-center shadow-sm ">
+    <div className="flex flex-col gap-4 m-1 mt-4 items-center justify-center shadow-sm ">
       {orgList
       ->Array.toSorted((org1, org2) => {
         if org1.id === orgId {
@@ -298,7 +296,6 @@ let make = () => {
           orgID={org.id}
           isActive={org.id === orgId}
           orgSwitch
-          onEdit=onEditClick
           orgName={org.name}
           index={i}
           handleIdUnderEdit