diff --git a/src/components/app-button-menu/AppButtonMenu.tsx b/src/components/app-button-menu/AppButtonMenu.tsx index 33dcea531..f0f197709 100644 --- a/src/components/app-button-menu/AppButtonMenu.tsx +++ b/src/components/app-button-menu/AppButtonMenu.tsx @@ -35,6 +35,7 @@ interface AppButtonMenuProps extends Omit { valueField?: keyof T showNoneProperty?: boolean customSx?: { root?: SxProps } + disabled?: boolean } const AppButtonMenu = >({ @@ -51,13 +52,24 @@ const AppButtonMenu = >({ const { t } = useTranslation() const [inputValue, setInputValue] = useState('') const [selectedNames, setSelectedNames] = useState([]) + const [, setIsNoneSelectedNames] = useState(false) const { anchorEl, openMenu, renderMenu } = useMenu() const onMenuItemClick = (item: string, id: string) => { - if (selectedNames.includes(item)) { - setSelectedItems(selectedItems.filter((selected) => selected !== id)) + if (item === 'No category') { + if (selectedNames.includes(item)) { + setIsNoneSelectedNames(false) + setSelectedItems([]) + } else { + setIsNoneSelectedNames(true) + setSelectedItems([id]) + } } else { - setSelectedItems([...selectedItems, id]) + if (selectedNames.includes(item)) { + setSelectedItems(selectedItems.filter((selected) => selected !== id)) + } else { + setSelectedItems([...selectedItems, id]) + } } } @@ -87,9 +99,12 @@ const AppButtonMenu = >({ const menuItems = filteredItems.map((item) => { const field = String(valueField ? (item as T)[valueField] : item) const id = item._id + const isDisabled = + selectedNames.includes('No category') && field !== 'No category' return ( onMenuItemClick(field, id)} > diff --git a/src/components/app-select-button/AppSelectButton.tsx b/src/components/app-select-button/AppSelectButton.tsx index 299ec8c3a..34821a0f8 100644 --- a/src/components/app-select-button/AppSelectButton.tsx +++ b/src/components/app-select-button/AppSelectButton.tsx @@ -6,17 +6,19 @@ import { styles } from '~/components/app-select-button/AppSelectButton.styles' interface AppSelectButtonProps { onMenuItemClick: () => void checked: boolean + disabled?: boolean children: ReactNode } const AppSelectButton: FC = ({ checked, children, - onMenuItemClick + onMenuItemClick, + disabled = false }) => { return ( - - + + {children} )