feat: disabled option

CheesecakeLabs · Jan 24, 2024 · df6e774 · df6e774
1 parent 51a004e
commit df6e774
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 5 deletions.
diff --git a/frontend/src/components/templates/vault-create/index.tsx b/frontend/src/components/templates/vault-create/index.tsx
@@ -19,6 +19,7 @@ import { SelectCategory } from './select-category'
 export interface IOption {
   readonly label: string
   readonly value: number
+  readonly disabled: boolean
 }
 
 interface IVaultCreateTemplate {

diff --git a/frontend/src/components/templates/vault-create/select-category/index.tsx b/frontend/src/components/templates/vault-create/select-category/index.tsx
@@ -14,9 +14,14 @@ interface ISelectCategory {
   clearErrors?(): void
 }
 
-const createOption = (label: string, value: number): IOption => ({
+const createOption = (
+  label: string,
+  value: number,
+  disabled?: boolean
+): IOption => ({
   label,
   value: value,
+  disabled: disabled ?? false,
 })
 
 export const SelectCategory: React.FC<ISelectCategory> = ({
@@ -47,10 +52,11 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
   }
 
   useEffect(() => {
-    const ops = vaultCategories?.map(
+    let ops = vaultCategories?.map(
       (vaultCategory: Hooks.UseVaultsTypes.IVaultCategory) =>
         createOption(vaultCategory.name, vaultCategory.id)
     )
+    ops = [...(ops || []), createOption('Type to create...', 0, true)]
     setOptions(ops || [])
   }, [vaultCategories])
 
@@ -62,13 +68,18 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
       onCreateOption={handleVaultCategory}
       options={options}
       value={value}
+      isOptionDisabled={(option): boolean => option.disabled}
       onChange={(newValue): void => {
         if (clearErrors) clearErrors()
         setCategorySelected(newValue)
       }}
       defaultValue={
         categorySelected
-          ? { value: categorySelected.value, label: categorySelected.label }
+          ? {
+              value: categorySelected.value,
+              label: categorySelected.label,
+              disabled: false,
+            }
           : undefined
       }
       styles={{
@@ -83,9 +94,10 @@ export const SelectCategory: React.FC<ISelectCategory> = ({
           ...base,
           backgroundColor: colorMode === 'dark' ? '#303448' : undefined,
         }),
-        option: (styles, { isFocused, isSelected }) => ({
+        option: (styles, { isFocused, isSelected, isDisabled }) => ({
           ...styles,
           color: colorMode === 'dark' ? 'white' : 'black',
+          opacity: isDisabled ? '0.5' : undefined,
           background: isFocused
             ? colorMode === 'dark'
               ? '#292d3e'

diff --git a/frontend/src/components/templates/vault-detail/components/header/index.tsx b/frontend/src/components/templates/vault-detail/components/header/index.tsx
@@ -59,7 +59,7 @@ const Form: React.FC<IHeader> = ({
 }) => {
   const [categorySelected, setCategorySelected] = useState<
     IOption | null | undefined
-  >(category && { label: category?.name, value: category?.id })
+  >(category && { label: category?.name, value: category?.id, disabled: false })
 
   const [name, setName] = useState<string | undefined>(vault.name)