From df6e774c2b2142e3025463431dd8e04f1294d311 Mon Sep 17 00:00:00 2001
From: Lucas Magnus <lucasmagnusdasilva@gmail.com>
Date: Wed, 24 Jan 2024 18:03:56 -0300
Subject: [PATCH] feat: disabled option

---
 .../templates/vault-create/index.tsx          |  1 +
 .../vault-create/select-category/index.tsx    | 20 +++++++++++++++----
 .../vault-detail/components/header/index.tsx  |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/templates/vault-create/index.tsx b/frontend/src/components/templates/vault-create/index.tsx
index 8496437c..ce7b9424 100644
--- 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
index e62bea44..368e25f6 100644
--- 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
index 6d5d331a..44d38eae 100644
--- 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)