From 2a89a5f0f4a219cc87c29111fbd9d4767ce51015 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 28 Mar 2022 17:56:51 +0200 Subject: [PATCH 1/3] feat(core-blocks): CB-1656 make selected items in combobox disabled --- .../core-blocks/src/FormControls/Combobox.tsx | 22 +++++++++++++++---- .../ServerConfigurationDriversForm.tsx | 5 ++--- 2 files changed, 20 insertions(+), 7 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 71982ebe72..94b9fb29cc 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -16,6 +16,7 @@ import { useStyles } from '@cloudbeaver/core-theming'; import { filterLayoutFakeProps } from '../Containers/filterLayoutFakeProps'; import type { ILayoutSizeProps } from '../Containers/ILayoutSizeProps'; +import { getComputed } from '../getComputed'; import { Icon } from '../Icon'; import { IconOrImage } from '../IconOrImage'; import { baseFormControlStyles, baseValidFormControlStyles } from './baseFormControlStyles'; @@ -132,6 +133,7 @@ type BaseProps = Omit, valueSelector: (item: TValue) => string; titleSelector?: (item: TValue) => string | undefined; iconSelector?: (item: TValue) => string | React.ReactElement | undefined; + stateSelector?: (item: TValue) => boolean; onSwitch?: (state: boolean) => void; }; @@ -173,6 +175,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ valueSelector = v => v, iconSelector, titleSelector, + stateSelector, onChange = () => { }, onSelect, onSwitch, @@ -194,6 +197,19 @@ export const Combobox: ComboboxType = observer(function Combobox({ } const [searchValue, setSearchValue] = useState(null); + + const filteredItems = getComputed(() => { + const result = items.filter( + item => !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) + ); + + if (stateSelector) { + return result.sort((a, b) => Number(stateSelector(a)) - Number(stateSelector(b))); + } + + return result; + }); + let value: string | number | readonly string[] | undefined = controlledValue ?? defaultValue ?? undefined; if (state && name !== undefined && name in state) { @@ -208,10 +224,6 @@ export const Combobox: ComboboxType = observer(function Combobox({ inputValue = searchValue; } - const filteredItems = items.filter( - item => !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) - ); - function handleClick() { if (!searchable) { if (menu.visible) { @@ -362,6 +374,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ : (filteredItems.map((item, index) => { const icon = iconSelector?.(item); const title = titleSelector?.(item); + const selected = stateSelector?.(item); return ( handleSelect(event.currentTarget.id)} > {iconSelector && ( diff --git a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationDriversForm.tsx b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationDriversForm.tsx index b29d084fea..91661dc6ff 100644 --- a/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationDriversForm.tsx +++ b/webapp/packages/plugin-administration/src/ConfigurationWizard/ServerConfiguration/ServerConfigurationDriversForm.tsx @@ -35,9 +35,7 @@ export const ServerConfigurationDriversForm = observer(function ServerCon const translate = useTranslate(); const driversResource = useMapResource(ServerConfigurationDriversForm, DBDriverResource, CachedMapAllKey); - const drivers = driversResource.resource.values - .filter(driver => !serverConfig.disabledDrivers?.includes(driver.id)) - .sort(driversResource.resource.compare); + const drivers = driversResource.resource.values.slice().sort(driversResource.resource.compare); const tags: ITag[] = driversResource.resource.get(resourceKeyList(serverConfig.disabledDrivers || [])) .filter(Boolean) @@ -72,6 +70,7 @@ export const ServerConfigurationDriversForm = observer(function ServerCon keySelector={item => item.id} valueSelector={value => value.name || value.id} iconSelector={value => value.icon} + stateSelector={item => serverConfig.disabledDrivers?.includes(item.id) ?? false} items={drivers} placeholder={translate('administration_disabled_drivers_search_placeholder')} searchable From 33b4660cd3f323a0b7ea7a29128cfee5a17224d2 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 28 Mar 2022 19:41:25 +0200 Subject: [PATCH 2/3] feat(core-blocks): CB-1656 naming --- .../packages/core-blocks/src/FormControls/Combobox.tsx | 10 +++++----- .../ServerConfigurationDriversForm.tsx | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 94b9fb29cc..5f2258d551 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -133,7 +133,7 @@ type BaseProps = Omit, valueSelector: (item: TValue) => string; titleSelector?: (item: TValue) => string | undefined; iconSelector?: (item: TValue) => string | React.ReactElement | undefined; - stateSelector?: (item: TValue) => boolean; + isDisabled?: (item: TValue) => boolean; onSwitch?: (state: boolean) => void; }; @@ -175,7 +175,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ valueSelector = v => v, iconSelector, titleSelector, - stateSelector, + isDisabled, onChange = () => { }, onSelect, onSwitch, @@ -203,8 +203,8 @@ export const Combobox: ComboboxType = observer(function Combobox({ item => !searchValue || valueSelector(item).toUpperCase().includes(searchValue.toUpperCase()) ); - if (stateSelector) { - return result.sort((a, b) => Number(stateSelector(a)) - Number(stateSelector(b))); + if (isDisabled) { + return result.sort((a, b) => Number(isDisabled(a)) - Number(isDisabled(b))); } return result; @@ -374,7 +374,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ : (filteredItems.map((item, index) => { const icon = iconSelector?.(item); const title = titleSelector?.(item); - const selected = stateSelector?.(item); + const selected = isDisabled?.(item); return ( (function ServerCon keySelector={item => item.id} valueSelector={value => value.name || value.id} iconSelector={value => value.icon} - stateSelector={item => serverConfig.disabledDrivers?.includes(item.id) ?? false} + isDisabled={item => serverConfig.disabledDrivers?.includes(item.id) ?? false} items={drivers} placeholder={translate('administration_disabled_drivers_search_placeholder')} searchable From 48d006daaad78f06c6e1dd378a5adfe772f6aa89 Mon Sep 17 00:00:00 2001 From: Naumov Alexey Date: Mon, 28 Mar 2022 19:43:43 +0200 Subject: [PATCH 3/3] feat(core-blocks): CB-1656 change variable name --- webapp/packages/core-blocks/src/FormControls/Combobox.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx index 5f2258d551..c075253b74 100644 --- a/webapp/packages/core-blocks/src/FormControls/Combobox.tsx +++ b/webapp/packages/core-blocks/src/FormControls/Combobox.tsx @@ -374,7 +374,7 @@ export const Combobox: ComboboxType = observer(function Combobox({ : (filteredItems.map((item, index) => { const icon = iconSelector?.(item); const title = titleSelector?.(item); - const selected = isDisabled?.(item); + const disabled = isDisabled?.(item); return ( handleSelect(event.currentTarget.id)} > {iconSelector && (