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 = ({ @@ -47,10 +52,11 @@ export const SelectCategory: React.FC = ({ } 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 = ({ 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 = ({ ...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 = ({ }) => { 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(vault.name)