feat: add 'hideSelected' prop to hide all the already selected resour…

…ces in the overlay
commercelayer · May 22, 2024 · f256aea · f256aea
1 parent af0e6bc
commit f256aea
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 4 deletions.
diff --git a/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx b/packages/app-elements/src/ui/forms/InputResourceGroup/FullList.tsx
@@ -8,7 +8,7 @@ import { type OverlayProps } from '#ui/internals/Overlay'
 import { ResourceList } from '#ui/resources/ResourceList'
 import { type ListableResourceType, type QueryFilter } from '@commercelayer/sdk'
 import isEmpty from 'lodash/isEmpty'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { InputCheckboxGroupItem } from '../InputCheckboxGroup/InputCheckboxGroupItem'
 import {
   computeLabelWithSelected,
@@ -71,6 +71,10 @@ export interface FullListProps {
    * Show icon in checkbox selectors
    */
   showCheckboxIcon?: boolean
+  /**
+   * Hide selected items
+   */
+  hideSelected?: boolean
 }
 
 export function FullList({
@@ -82,11 +86,15 @@ export function FullList({
   searchBy,
   sortBy,
   title,
-  showCheckboxIcon = true
+  showCheckboxIcon = true,
+  hideSelected = false
 }: FullListProps): JSX.Element {
   const { values, toggleValue } = useToggleCheckboxValues(defaultValues)
   const [filters, setFilters] = useState<QueryFilter>({})
   const [search, setSearch] = useState<string>('')
+
+  const initialValues = useMemo(() => defaultValues, [])
+
   const selectedCount = values.length
 
   useEffect(() => {
@@ -129,8 +137,13 @@ export function FullList({
             <Text weight='semibold'>
               {computeLabelWithSelected({
                 label: title,
-                selectedCount,
-                totalCount
+                selectedCount: hideSelected
+                  ? selectedCount - initialValues.length
+                  : selectedCount,
+                totalCount:
+                  hideSelected && totalCount != null
+                    ? totalCount - initialValues.length
+                    : totalCount
               })}
             </Text>
           )}
@@ -150,6 +163,11 @@ export function FullList({
               fieldForLabel,
               fieldForValue
             })
+
+            if (hideSelected && initialValues.includes(item.value)) {
+              return null
+            }
+
             return (
               <InputCheckboxGroupItem
                 isLoading={isLoading}

diff --git a/packages/app-elements/src/ui/forms/InputResourceGroup/InputResourceGroup.tsx b/packages/app-elements/src/ui/forms/InputResourceGroup/InputResourceGroup.tsx
@@ -64,6 +64,7 @@ export const InputResourceGroup: React.FC<InputResourceGroupProps> = ({
   filters = {},
   hideWhenSingleItem,
   showCheckboxIcon = true,
+  hideSelected = false,
   title
 }) => {
   const { values, toggleValue, setValues } =
@@ -177,6 +178,7 @@ export const InputResourceGroup: React.FC<InputResourceGroupProps> = ({
           searchBy={searchBy}
           sortBy={sortBy}
           title={title}
+          hideSelected={hideSelected}
           showCheckboxIcon={showCheckboxIcon}
         />
       </InputWrapper>

diff --git a/packages/docs/src/stories/forms/ui/InputResourceGroup.stories.tsx b/packages/docs/src/stories/forms/ui/InputResourceGroup.stories.tsx
@@ -49,6 +49,10 @@ Default.args = {
   previewLimit: 3
 }
 
+/**
+ * The `useInputResourceGroupOverlay` can be used when you need to select one or more resources and link them to another resource.
+ * By default you can always select or deselect a resource from the overlay.
+ */
 export const UseInputResourceGroupOverlay: StoryFn = () => {
   const [values, setValues] = useState<string[]>([])
   const {
@@ -89,3 +93,48 @@ export const UseInputResourceGroupOverlay: StoryFn = () => {
     </TokenProvider>
   )
 }
+
+/**
+ * The `hideSelected` prop hides all the already selected resources in the overlay.
+ */
+export const HideSelected: StoryFn = () => {
+  const [values, setValues] = useState<string[]>(['dlQbPhNNop', 'AlRevhXQga'])
+  const {
+    InputResourceGroupOverlay,
+    closeInputResourceGroupOverlay,
+    openInputResourceGroupOverlay
+  } = useInputResourceGroupOverlay()
+  return (
+    <TokenProvider kind='integration' appSlug='orders' devMode>
+      <CoreSdkProvider>
+        <pre>{JSON.stringify(values, undefined, 2)}</pre>
+        <InputResourceGroupOverlay
+          defaultValues={values}
+          onChange={setValues}
+          resource='markets'
+          fieldForLabel='name'
+          fieldForValue='id'
+          searchBy='name_cont'
+          sortBy={{ attribute: 'name', direction: 'asc' }}
+          title='Markets'
+          hideSelected
+          footer={
+            <Button
+              fullWidth
+              type='button'
+              onClick={() => {
+                closeInputResourceGroupOverlay()
+                alert(JSON.stringify(values, undefined, 2))
+              }}
+            >
+              Add
+            </Button>
+          }
+        />
+        <Spacer top='8'>
+          <Button onClick={openInputResourceGroupOverlay}>Add</Button>
+        </Spacer>
+      </CoreSdkProvider>
+    </TokenProvider>
+  )
+}