From d282810e53b3969da69909155f3bed100f48f7fd Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Tue, 13 Jun 2023 01:30:53 +1200 Subject: [PATCH] cleanup: Remove IAICustomSelect and port types --- .../src/common/components/IAICustomSelect.tsx | 256 ------------------ .../common/components/IAIMantineSelect.tsx | 6 + .../parameters/ParamControlNetModel.tsx | 6 +- .../ParamControlNetProcessorSelect.tsx | 24 +- .../system/components/ModelSelect.tsx | 35 +-- 5 files changed, 44 insertions(+), 283 deletions(-) delete mode 100644 invokeai/frontend/web/src/common/components/IAICustomSelect.tsx diff --git a/invokeai/frontend/web/src/common/components/IAICustomSelect.tsx b/invokeai/frontend/web/src/common/components/IAICustomSelect.tsx deleted file mode 100644 index 1d9ae763b1..0000000000 --- a/invokeai/frontend/web/src/common/components/IAICustomSelect.tsx +++ /dev/null @@ -1,256 +0,0 @@ -import { CheckIcon, ChevronUpIcon } from '@chakra-ui/icons'; -import { - Box, - Flex, - FormControl, - FormControlProps, - FormLabel, - Grid, - GridItem, - List, - ListItem, - Text, - Tooltip, - TooltipProps, -} from '@chakra-ui/react'; -import { autoUpdate, offset, shift, useFloating } from '@floating-ui/react-dom'; -import { useSelect } from 'downshift'; -import { isString } from 'lodash-es'; -import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; - -import { memo, useLayoutEffect, useMemo } from 'react'; -import { getInputOutlineStyles } from 'theme/util/getInputOutlineStyles'; - -export type ItemTooltips = { [key: string]: string }; - -export type IAICustomSelectOption = { - value: string; - label: string; - tooltip?: string; -}; - -type IAICustomSelectProps = { - label?: string; - value: string; - data: IAICustomSelectOption[] | string[]; - onChange: (v: string) => void; - withCheckIcon?: boolean; - formControlProps?: FormControlProps; - tooltip?: string; - tooltipProps?: Omit; - ellipsisPosition?: 'start' | 'end'; - isDisabled?: boolean; -}; - -const IAICustomSelect = (props: IAICustomSelectProps) => { - const { - label, - withCheckIcon, - formControlProps, - tooltip, - tooltipProps, - ellipsisPosition = 'end', - data, - value, - onChange, - isDisabled = false, - } = props; - - const values = useMemo(() => { - return data.map((v) => { - if (isString(v)) { - return { value: v, label: v }; - } - return v; - }); - }, [data]); - - const stringValues = useMemo(() => { - return values.map((v) => v.value); - }, [values]); - - const valueData = useMemo(() => { - return values.find((v) => v.value === value); - }, [values, value]); - - const { - isOpen, - getToggleButtonProps, - getLabelProps, - getMenuProps, - highlightedIndex, - getItemProps, - } = useSelect({ - items: stringValues, - selectedItem: value, - onSelectedItemChange: ({ selectedItem: newSelectedItem }) => { - newSelectedItem && onChange(newSelectedItem); - }, - }); - - const { refs, floatingStyles, update } = useFloating({ - // whileElementsMounted: autoUpdate, - middleware: [offset(4), shift({ crossAxis: true, padding: 8 })], - }); - - useLayoutEffect(() => { - if (isOpen && refs.reference.current && refs.floating.current) { - return autoUpdate(refs.reference.current, refs.floating.current, update); - } - }, [isOpen, update, refs.floating, refs.reference]); - - const labelTextDirection = useMemo(() => { - if (ellipsisPosition === 'start') { - return document.dir === 'rtl' ? 'ltr' : 'rtl'; - } - - return document.dir; - }, [ellipsisPosition]); - - return ( - - {label && ( - { - refs.floating.current && refs.floating.current.focus(); - }} - > - {label} - - )} - - - - {valueData?.label} - - - - - - {isOpen && ( - - - {values.map((v, index) => { - const isSelected = value === v.value; - const isHighlighted = highlightedIndex === index; - const fontWeight = isSelected ? 700 : 500; - const bg = isHighlighted - ? 'base.700' - : isSelected - ? 'base.750' - : undefined; - return ( - - - {withCheckIcon ? ( - - - {isSelected && } - - - - {v.label} - - - - ) : ( - - {v.label} - - )} - - - ); - })} - - - )} - - - ); -}; - -export default memo(IAICustomSelect); diff --git a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx index 2b880d5765..118dcae29f 100644 --- a/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx +++ b/invokeai/frontend/web/src/common/components/IAIMantineSelect.tsx @@ -2,6 +2,12 @@ import { Tooltip } from '@chakra-ui/react'; import { Select, SelectProps } from '@mantine/core'; import { memo } from 'react'; +export type IAISelectDataType = { + value: string; + label: string; + tooltip?: string; +}; + type IAISelectProps = SelectProps & { tooltip?: string; }; diff --git a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx index d5d86dd3ef..a9525a0450 100644 --- a/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx +++ b/invokeai/frontend/web/src/features/controlNet/components/parameters/ParamControlNetModel.tsx @@ -3,9 +3,9 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import IAICustomSelect, { IAICustomSelectOption, } from 'common/components/IAICustomSelect'; +import IAIMantineSelect from 'common/components/IAIMantineSelect'; import IAISelect from 'common/components/IAISelect'; import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; -import IAIMantineSelect from 'common/components/IAIMantineSelect'; import { CONTROLNET_MODELS, ControlNetModelName, @@ -22,7 +22,7 @@ type ParamControlNetModelProps = { const selector = createSelector(configSelector, (config) => { return map(CONTROLNET_MODELS, (m) => ({ - key: m.label, + label: m.label, value: m.type, })).filter((d) => !config.sd.disabledControlNetModels.includes(d.value)); }); @@ -50,7 +50,7 @@ const ParamControlNetModel = (props: ParamControlNetModelProps) => { return ( ({ - value: p.type, - key: p.label, -})).sort((a, b) => +const CONTROLNET_PROCESSOR_TYPES: IAISelectDataType[] = map( + CONTROLNET_PROCESSORS, + (p) => ({ + value: p.type, + label: p.label, + tooltip: p.description, + }) +).sort((a, b) => // sort 'none' to the top - a.value === 'none' ? -1 : b.value === 'none' ? 1 : a.key.localeCompare(b.key) + a.value === 'none' + ? -1 + : b.value === 'none' + ? 1 + : a.label.localeCompare(b.label) ); const selector = createSelector(configSelector, (config) => { diff --git a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx index 3f76aa0251..a0293361da 100644 --- a/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx +++ b/invokeai/frontend/web/src/features/system/components/ModelSelect.tsx @@ -1,12 +1,13 @@ import { createSelector } from '@reduxjs/toolkit'; import { isEqual } from 'lodash-es'; -import { ChangeEvent, memo, useCallback } from 'react'; +import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; import { RootState } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { IAICustomSelectOption } from 'common/components/IAICustomSelect'; -import IAIMantineSelect from 'common/components/IAIMantineSelect'; +import IAIMantineSelect, { + IAISelectDataType, +} from 'common/components/IAIMantineSelect'; import { generationSelector } from 'features/parameters/store/generationSelectors'; import { modelSelected } from 'features/parameters/store/generationSlice'; import { selectModelsAll, selectModelsById } from '../store/modelSlice'; @@ -17,11 +18,11 @@ const selector = createSelector( const selectedModel = selectModelsById(state, generation.model); const modelData = selectModelsAll(state) - .map((m) => ({ + .map((m) => ({ value: m.name, - key: m.name, + label: m.name, })) - .sort((a, b) => a.key.localeCompare(b.key)); + .sort((a, b) => a.label.localeCompare(b.label)); // const modelData = selectModelsAll(state) // .map((m) => ({ // value: m.name, @@ -45,21 +46,21 @@ const ModelSelect = () => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const { selectedModel, modelData } = useAppSelector(selector); - const handleChangeModel = useCallback( - (e: ChangeEvent) => { - dispatch(modelSelected(e.target.value)); - }, - [dispatch] - ); // const handleChangeModel = useCallback( - // (v: string | null | undefined) => { - // if (!v) { - // return; - // } - // dispatch(modelSelected(v)); + // (e: ChangeEvent) => { + // dispatch(modelSelected(e.target.value)); // }, // [dispatch] // ); + const handleChangeModel = useCallback( + (v: string | null) => { + if (!v) { + return; + } + dispatch(modelSelected(v)); + }, + [dispatch] + ); return (