add disabled support

factorialco · Mar 3, 2025 · 159dde6 · 159dde6
1 parent 73ce880
commit 159dde6
Show file tree

Hide file tree

Showing 9 changed files with 61 additions and 16 deletions.
diff --git a/lib/experimental/Forms/AvatarNameSelector/AvatarNameListItem/index.tsx b/lib/experimental/Forms/AvatarNameSelector/AvatarNameListItem/index.tsx
@@ -20,6 +20,7 @@ interface Props {
   singleSelector?: boolean
   goToFirst?: () => void
   goToLast?: () => void
+  disabled?: boolean
 }
 
 export function focusNextFocusable(
@@ -66,6 +67,7 @@ export const AvatarNameListItemSingleContent = ({
   goToFirst,
   goToLast,
   singleSelector = false,
+  disabled = false,
 }: Props) => {
   const nameParts = entity.name.split(" ")
   const firstName = nameParts[0] || ""
@@ -74,7 +76,7 @@ export const AvatarNameListItemSingleContent = ({
   const handleLabelClick = (ev: React.MouseEvent<HTMLLabelElement>) => {
     ev.preventDefault()
     ev.stopPropagation()
-
+    if (disabled) return
     if (selected) {
       onRemove(entity)
     } else {
@@ -86,6 +88,7 @@ export const AvatarNameListItemSingleContent = ({
     if (ev.key === "Enter" || ev.key === " ") {
       ev.preventDefault()
       ev.stopPropagation()
+      if (disabled) return
       if (!selected) {
         onSelect(entity)
       } else if (selected) {
@@ -133,6 +136,7 @@ export const AvatarNameListItemSingleContent = ({
 
         <Checkbox
           checked={selected}
+          disabled={disabled}
           onClick={(ev) => {
             ev.preventDefault()
           }}
@@ -174,6 +178,7 @@ const AvatarNameListItem = ({
   hideLine = false,
   showGroupIcon = false,
   singleSelector = false,
+  disabled = false,
 }: {
   entity: AvatarNamedEntity
   groupView: boolean
@@ -190,6 +195,7 @@ const AvatarNameListItem = ({
   hideLine?: boolean
   goToFirst?: () => void
   goToLast?: () => void
+  disabled?: boolean
 }) => {
   if (!groupView) {
     return (
@@ -203,6 +209,7 @@ const AvatarNameListItem = ({
         singleSelector={singleSelector}
         goToFirst={goToFirst}
         goToLast={goToLast}
+        disabled={disabled}
       />
     )
   }
@@ -215,6 +222,7 @@ const AvatarNameListItem = ({
     } else if (ev.key === "Enter") {
       ev.preventDefault()
       ev.stopPropagation()
+      if (disabled) return
       if (!selected || partialSelected) {
         onSelect(entity)
       } else if (selected) {
@@ -232,6 +240,7 @@ const AvatarNameListItem = ({
   }
 
   const handleGroupClick = (ev: React.MouseEvent) => {
+    if (disabled) return
     if (singleSelector) return
     if (selected) onRemove(entity)
     else onSelect(entity)
@@ -275,6 +284,7 @@ const AvatarNameListItem = ({
           </div>
           <Checkbox
             checked={checked}
+            disabled={disabled}
             onClick={handleGroupClick}
             indeterminate={partialSelected}
             className={cn(

diff --git a/lib/experimental/Forms/AvatarNameSelector/AvatarNameListTag/index.tsx b/lib/experimental/Forms/AvatarNameSelector/AvatarNameListTag/index.tsx
@@ -8,9 +8,11 @@ import { AvatarNamedSubEntity } from "../types"
 export const AvatarNameListTag = ({
   entity,
   onRemove,
+  disabled = false,
 }: {
   entity: AvatarNamedSubEntity
   onRemove: (entity: AvatarNamedSubEntity) => void
+  disabled?: boolean
 }) => {
   return (
     <div className="pr-2 pt-1.5">
@@ -28,12 +30,14 @@ export const AvatarNameListTag = ({
           />
         }
         right={
-          <Icon
-            icon={Cross}
-            size="sm"
-            className="cursor-pointer text-f1-icon-secondary"
-            onClick={() => onRemove?.(entity)}
-          />
+          !disabled && (
+            <Icon
+              icon={Cross}
+              size="sm"
+              className="cursor-pointer text-f1-icon-secondary"
+              onClick={() => onRemove?.(entity)}
+            />
+          )
         }
         text={entity.subName}
       />

diff --git a/...orms/AvatarNameSelector/AvatarNameSelectorContent/AvatarNameSelectorMainContent/index.tsx b/...orms/AvatarNameSelector/AvatarNameSelectorContent/AvatarNameSelectorMainContent/index.tsx
@@ -38,6 +38,7 @@ export const AvatarNameSelectorMainContent = ({
   className,
   singleSelector = false,
   loading = false,
+  disabled = false,
 }: {
   groupView: boolean
   entities: AvatarNamedEntity[]
@@ -57,7 +58,7 @@ export const AvatarNameSelectorMainContent = ({
   onClear: () => void
   onSelectAll: () => void
   onSearch: (search: string) => void
-  selectedEntities: AvatarNamedEntity[]
+  selectedEntities?: AvatarNamedEntity[]
   onGroupChange: (key: string | null) => void
   onToggleExpand: (entity: AvatarNamedEntity) => void
   notFoundTitle: string
@@ -68,6 +69,7 @@ export const AvatarNameSelectorMainContent = ({
   clearLabel?: string
   singleSelector?: boolean
   loading?: boolean
+  disabled?: boolean
 }) => {
   const ref = React.useRef<HTMLDivElement | null>(null)
 
@@ -112,15 +114,17 @@ export const AvatarNameSelectorMainContent = ({
   const itemRenderer = useCallback(
     (vi: VirtualItem) => {
       const entity = entities[vi.index]
-      const selectedEntity = selectedEntities.find((el) => el.id === entity.id)
+      const selectedEntity = (selectedEntities ?? []).find(
+        (el) => el.id === entity.id
+      )
       const selectedSubItems = (entity.subItems ?? []).filter((subItem) =>
         selectedEntity?.subItems?.some(
           (selectedSubItem) => selectedSubItem.subId === subItem.subId
         )
       )
       const selected = groupView
         ? (entity.subItems?.length ?? 0) === selectedSubItems.length
-        : !!selectedEntities.find((el) => el.id === entity.id)
+        : !!(selectedEntities ?? []).find((el) => el.id === entity.id)
       const partialSelected = groupView
         ? !selected && selectedSubItems.length > 0
         : selected
@@ -142,10 +146,12 @@ export const AvatarNameSelectorMainContent = ({
           singleSelector={singleSelector}
           goToFirst={goToFirst}
           goToLast={goToLast}
+          disabled={disabled}
         />
       )
     },
     [
+      disabled,
       entities,
       goToFirst,
       goToLast,
@@ -208,7 +214,7 @@ export const AvatarNameSelectorMainContent = ({
           subItems: subItem.subItems,
           expanded: subItem.expanded,
         }
-        const selectedEntity = selectedEntities.find(
+        const selectedEntity = (selectedEntities ?? []).find(
           (el) => el.id === recoveredEntity.id
         )
         const selectedSubItems = (recoveredEntity?.subItems ?? []).filter(
@@ -240,10 +246,11 @@ export const AvatarNameSelectorMainContent = ({
             goToFirst={goToFirst}
             goToLast={goToLast}
             hideLine={vi.index === flattenedList.length - 1}
+            disabled={disabled}
           />
         )
       }
-      const selectedParentEntity = selectedEntities.find(
+      const selectedParentEntity = (selectedEntities ?? []).find(
         (el) => el.id === parent.id
       )
       const selectedSubItems = (parent?.subItems ?? []).filter((subItem) =>
@@ -287,6 +294,7 @@ export const AvatarNameSelectorMainContent = ({
       onSelect,
       onRemove,
       groups,
+      disabled,
       onToggleExpand,
       selectedGroup,
       onSubItemSelect,
@@ -366,7 +374,7 @@ export const AvatarNameSelectorMainContent = ({
                 height={384}
                 itemCount={totalFlattenedItems}
                 itemSize={(index) =>
-                  flattenedList[index].parent === null ? 39 : 36
+                  flattenedList[index].parent === null ? 37 : 36
                 }
                 renderer={itemFlattenedRenderer}
                 ref={ref}
@@ -380,6 +388,7 @@ export const AvatarNameSelectorMainContent = ({
           <div className="flex flex-1 justify-between p-2">
             {selectAllLabel && (
               <Button
+                disabled={disabled}
                 variant="outline"
                 size="sm"
                 onClick={onSelectAll}
@@ -392,7 +401,9 @@ export const AvatarNameSelectorMainContent = ({
               <Button
                 variant="ghost"
                 size="sm"
-                disabled={selectedEntities.length === 0}
+                disabled={
+                  disabled || !selectedEntities || selectedEntities.length === 0
+                }
                 onClick={onClear}
                 title={clearLabel + ` (${totalFilteredEntities})`}
               >

diff --git a/...AvatarNameSelector/AvatarNameSelectorContent/AvatarNameSelectorSecondaryContent/index.tsx b/...AvatarNameSelector/AvatarNameSelectorContent/AvatarNameSelectorSecondaryContent/index.tsx
@@ -14,6 +14,7 @@ export const AvatarNameSelectorSecondaryContent = ({
   onRemove,
   selectedEntities,
   selectedLabel,
+  disabled = false,
 }: {
   groupView: boolean
   onRemove: (entity: AvatarNamedEntity) => void
@@ -23,6 +24,7 @@ export const AvatarNameSelectorSecondaryContent = ({
   ) => void
   selectedEntities: AvatarNamedEntity[]
   selectedLabel?: string
+  disabled?: boolean
 }) => {
   const flattenedList = useMemo<FlattenedItem[]>(() => {
     return !groupView
@@ -74,6 +76,7 @@ export const AvatarNameSelectorSecondaryContent = ({
             return (
               <AvatarNameListTag
                 entity={current.subItem}
+                disabled={disabled}
                 onRemove={() =>
                   current.parent
                     ? onSubItemRemove?.(current.parent, current.subItem)

diff --git a/lib/experimental/Forms/AvatarNameSelector/AvatarNameSelectorContent/index.tsx b/lib/experimental/Forms/AvatarNameSelector/AvatarNameSelectorContent/index.tsx
@@ -52,6 +52,7 @@ export const AvatarNameSelectorContent = ({
   selectedLabel?: string
   singleSelector?: boolean
   loading?: boolean
+  disabled?: boolean
 }) => {
   const blockSecondaryContent =
     (width ?? totalDefaultWidth) < breakpointToShowEmployeeList
@@ -79,6 +80,7 @@ export const AvatarNameSelectorContent = ({
           onSubItemRemove={onSubItemRemove}
           selectedEntities={selectedEntities}
           selectedLabel={selectedLabel}
+          disabled={props.disabled}
         />
       </div>
       <motion.div
@@ -95,6 +97,7 @@ export const AvatarNameSelectorContent = ({
           selectedEntities={selectedEntities}
           singleSelector={singleSelector}
           loading={loading}
+          disabled={props.disabled}
         />
       </motion.div>
     </div>

diff --git a/lib/experimental/Forms/AvatarNameSelector/AvatarNameSelectorTrigger/index.tsx b/lib/experimental/Forms/AvatarNameSelector/AvatarNameSelectorTrigger/index.tsx
@@ -1,6 +1,7 @@
 import { Icon } from "@/components/Utilities/Icon"
 import { PersonAvatar } from "@/experimental/exports"
 import { ChevronDown } from "@/icons/app"
+import { cn } from "@/lib/utils"
 import { useMemo } from "react"
 import {
   AvatarNamedEntity,
@@ -12,9 +13,11 @@ export const AvatarNameSelectorTrigger = ({
   placeholder,
   selected,
   selectedAvatarName,
+  disabled = false,
 }: {
   placeholder: string
   selected: string
+  disabled?: boolean
   selectedAvatarName: AvatarNamedEntity[]
 }) => {
   const groupView = useMemo(
@@ -43,7 +46,12 @@ export const AvatarNameSelectorTrigger = ({
   }, [groupView, selectedAvatarName])
 
   return (
-    <div className="flex cursor-pointer justify-between rounded border border-solid border-f1-border p-2">
+    <div
+      className={cn(
+        "flex cursor-pointer justify-between rounded border border-solid border-f1-border p-2",
+        disabled ? "to-f1-background-secondary" : ""
+      )}
+    >
       <span className="my-auto pl-1 text-f1-foreground-secondary">
         {flattenedList.length === 0 ? (
           placeholder

diff --git a/lib/experimental/Forms/AvatarNameSelector/index.stories.tsx b/lib/experimental/Forms/AvatarNameSelector/index.stories.tsx
@@ -32,6 +32,7 @@ const defaultArgs: AvatarNameSelectorMultipleProps = {
   clearLabel: "Clear",
   selectedLabel: "selected",
   notFoundTitle: "No results found",
+  disabled: false,
   notFoundSubtitle: "Try searching with a different term.",
   groups: [
     { label: "None", value: "all", type: "avatar" },

diff --git a/lib/experimental/Forms/AvatarNameSelector/index.tsx b/lib/experimental/Forms/AvatarNameSelector/index.tsx
@@ -68,6 +68,7 @@ export const AvatarNameSelector = ({
   width,
   loading = false,
   singleSelector = false,
+  disabled = false,
   children,
   ...props
 }: AvatarNameSelectorProps & { children?: React.ReactNode }) => {
@@ -355,21 +356,23 @@ export const AvatarNameSelector = ({
           notFoundTitle={notFoundTitle}
           notFoundSubtitle={notFoundSubtitle}
           width={containerWidth - 2}
+          disabled={disabled}
         />
       </div>
     )
   }
 
   return (
     <Popover {...props} onOpenChange={onOpenChange}>
-      <PopoverTrigger className="w-full">
+      <PopoverTrigger className="w-full" disabled={disabled}>
         {children ? (
           children
         ) : (
           <AvatarNameSelectorTrigger
             placeholder={triggerPlaceholder}
             selected={triggerSelected}
             selectedAvatarName={selectedEntities}
+            disabled={disabled}
           />
         )}
       </PopoverTrigger>
@@ -403,6 +406,7 @@ export const AvatarNameSelector = ({
           notFoundTitle={notFoundTitle}
           notFoundSubtitle={notFoundSubtitle}
           width={width}
+          disabled={disabled}
         />
       </PopoverContent>
     </Popover>

diff --git a/lib/experimental/Forms/AvatarNameSelector/types.ts b/lib/experimental/Forms/AvatarNameSelector/types.ts
@@ -30,6 +30,7 @@ interface AvatarNameSelectorCommonProps
   notFoundTitle: string
   notFoundSubtitle: string
   onGroupChange: (value: string | null) => void
+  disabled?: boolean
   zIndex?: number
   loading?: boolean
   searchPlaceholder?: string