feat: disable autocomplete option (#186)

feat: disable autocomplete option
dd3tech · Feb 29, 2024 · 41c7bd7 · 41c7bd7
1 parent 2f9587b
commit 41c7bd7
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 6 deletions.
diff --git a/src/components/AutoComplete/AutoComplete.test.tsx b/src/components/AutoComplete/AutoComplete.test.tsx
@@ -189,6 +189,23 @@ describe('<AutoComplete />', () => {
       expect(getByRole('panel').className).toContain('hidden')
     })
 
+    it('should disable list option', () => {
+      const onSelected = vi.fn()
+      const { getAllByRole } = render(
+        <AutoComplete
+          onSelectItem={onSelected}
+          items={[
+            ...testProjectData,
+            { id: 6, name: 'Palapas 30', disabled: true }
+          ]}
+        />
+      )
+
+      fireEvent.click(getAllByRole('row')[5])
+
+      expect(onSelected).not.toHaveBeenCalled()
+    })
+
     describe('should respects the componentsProps if passed', () => {
       it('canFindText is working', () => {
         const canFindText = 'no hay coincidencias'

diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx
@@ -8,12 +8,14 @@ import ChevronDownIcon from '@heroicons/react/outline/ChevronDownIcon'
 import Divider from 'components/Divider'
 import Text from 'components/Typography'
 import Input, { InputProps } from '../Form/Input'
+import { Flex } from '..'
 
 import { composeClasses } from 'lib/classes'
 
 type Item = {
   name: string
   id: string | number
+  disabled?: boolean
 }
 
 export interface AutoCompleteProps extends InputProps {
@@ -156,14 +158,24 @@ function AutoComplete({
                 <li
                   className="block"
                   role="row"
-                  onClick={() => handleSelectedItem(item as Item)}
+                  onClick={() => {
+                    if (item?.disabled) return
+                    handleSelectedItem(item as Item)
+                  }}
                   key={item.id || key}
                 >
-                  <div className="flex items-center justify-between h-auto p-1 mt-1 mb-1 cursor-pointer">
+                  <Flex
+                    justifyContent="between"
+                    alignItems="center"
+                    className={composeClasses(
+                      item?.disabled && 'text-gray-400 cursor-not-allowed',
+                      'h-auto p-1 mt-1 mb-1 cursor-pointer'
+                    )}
+                  >
                     <Text variant="p" className="font-semibold">
                       {item?.name}
                     </Text>
-                  </div>
+                  </Flex>
                   <Divider light={isSelect} />
                 </li>
               ))}

diff --git a/src/stories/AutoComplete.stories.tsx b/src/stories/AutoComplete.stories.tsx
@@ -8,9 +8,9 @@ export default {
 } as ComponentMeta<typeof AutoCompleteComponent>
 
 const testProjectData = [
-  { id: 1, name: 'Veracruz 45' },
+  { id: 1, name: 'Veracruz 45', disabled: true },
   { id: 2, name: 'México 45' },
-  { id: 3, name: 'Xalapa' },
+  { id: 3, name: 'Xalapa', disabled: true },
   { id: 4, name: 'Queretaro 34' },
   { id: 5, name: 'Guadalajara 102' }
 ]
@@ -62,8 +62,9 @@ AutoComplete.args = {
   canFindText: 'sin coincidencias',
   isCloseOnBlur: true,
   loadingText: 'Cargando...',
+  items: testProjectData,
   placeholder: 'search project',
-  disabled: true,
+  disabled: false,
   variant: 'success',
   label: 'Find your project'
 }