diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx index 531f43d66..bb8fd477a 100644 --- a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectForm.tsx @@ -2,13 +2,15 @@ import styled from '@emotion/styled'; import { IconPlus } from '@/ui/display/icon'; import { Button } from '@/ui/input/button/components/Button'; -import { TextInput } from '@/ui/input/components/TextInput'; import { mainColors, ThemeColor } from '@/ui/theme/constants/colors'; -export type SettingsObjectFieldSelectFormValues = { - color: ThemeColor; - text: string; -}[]; +import { + SettingsObjectFieldSelectFormOption, + SettingsObjectFieldSelectFormOptionRow, +} from './SettingsObjectFieldSelectFormOptionRow'; + +export type SettingsObjectFieldSelectFormValues = + SettingsObjectFieldSelectFormOption[]; type SettingsObjectFieldSelectFormProps = { onChange: (values: SettingsObjectFieldSelectFormValues) => void; @@ -35,21 +37,6 @@ const StyledRows = styled.div` gap: ${({ theme }) => theme.spacing(1)}; `; -const StyledRow = styled.div` - align-items: center; - display: flex; - height: ${({ theme }) => theme.spacing(6)}; - padding: ${({ theme }) => theme.spacing(1)} 0; -`; - -const StyledOptionInput = styled(TextInput)` - flex: 1 0 auto; - - & input { - height: ${({ theme }) => theme.spacing(2)}; - } -`; - const StyledButton = styled(Button)` border-bottom: 0; border-left: 0; @@ -75,16 +62,24 @@ export const SettingsObjectFieldSelectForm = ({ Options {values.map((value, index) => ( - - { - const nextValues = [...values]; - nextValues.splice(index, 1, { ...values[index], text }); - onChange(nextValues); - }} - /> - + { + const nextValues = [...values]; + nextValues.splice(index, 1, optionValue); + onChange(nextValues); + }} + onRemove={ + values.length > 1 + ? () => { + const nextValues = [...values]; + nextValues.splice(index, 1); + onChange(nextValues); + } + : undefined + } + value={value} + /> ))} diff --git a/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx new file mode 100644 index 000000000..c3207ed15 --- /dev/null +++ b/front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx @@ -0,0 +1,86 @@ +import { useMemo } from 'react'; +import styled from '@emotion/styled'; +import { v4 } from 'uuid'; + +import { IconDotsVertical, IconTrash } from '@/ui/display/icon'; +import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; +import { TextInput } from '@/ui/input/components/TextInput'; +import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; +import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; +import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; +import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; +import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; +import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; +import { ThemeColor } from '@/ui/theme/constants/colors'; + +export type SettingsObjectFieldSelectFormOption = { + color: ThemeColor; + text: string; +}; + +type SettingsObjectFieldSelectFormOptionRowProps = { + onChange: (value: SettingsObjectFieldSelectFormOption) => void; + onRemove?: () => void; + value: SettingsObjectFieldSelectFormOption; +}; + +const StyledRow = styled.div` + align-items: center; + display: flex; + height: ${({ theme }) => theme.spacing(6)}; + padding: ${({ theme }) => theme.spacing(1)} 0; +`; + +const StyledOptionInput = styled(TextInput)` + flex: 1 0 auto; + margin-right: ${({ theme }) => theme.spacing(2)}; + + & input { + height: ${({ theme }) => theme.spacing(2)}; + } +`; + +export const SettingsObjectFieldSelectFormOptionRow = ({ + onChange, + onRemove, + value, +}: SettingsObjectFieldSelectFormOptionRowProps) => { + const dropdownScopeId = useMemo(() => `select-field-option-row-${v4()}`, []); + + const { closeDropdown } = useDropdown({ dropdownScopeId }); + + return ( + + onChange({ ...value, text })} + /> + + } + dropdownComponents={ + + + {!!onRemove && ( + { + onRemove(); + closeDropdown(); + }} + /> + )} + + + } + /> + + + ); +};