From 84a4836ab74dc877e457283e052b60fc6a990837 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Wed, 17 Jan 2024 15:09:44 -0500 Subject: [PATCH] change actions to be for any InvExpander or InvSingleAccordion that has id passed in --- .../components/InvExpander/InvExpander.tsx | 12 ++++++++--- .../common/components/InvExpander/types.ts | 1 + .../InvSingleAccordion/InvSingleAccordion.tsx | 9 ++++++-- .../components/InvSingleAccordion/types.ts | 2 +- .../src/features/parameters/store/actions.ts | 11 ++++------ .../AdvancedSettingsAccordion.tsx | 21 +++---------------- .../GenerationSettingsAccordion.tsx | 17 +++------------ .../ImageSettingsAccordion.tsx | 17 +++------------ 8 files changed, 31 insertions(+), 59 deletions(-) diff --git a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx index 9940ce9841..c734375fb8 100644 --- a/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx +++ b/invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx @@ -6,6 +6,8 @@ import { InvText } from 'common/components/InvText/wrapper'; import { t } from 'i18next'; import { useCallback } from 'react'; import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi'; +import { useAppDispatch } from '../../../app/store/storeHooks'; +import { expanderToggled } from '../../../features/parameters/store/actions'; const buttonStyles: SystemStyleObject = { color: 'base.400', @@ -24,14 +26,18 @@ export const InvExpander = ({ children, label = t('common.advancedOptions'), defaultIsOpen = false, - onClick, + id, }: InvExpanderProps) => { const { isOpen, onToggle } = useDisclosure({ defaultIsOpen }); + const dispatch = useAppDispatch(); const onToggleExpander = useCallback(() => { - onClick && onClick(isOpen); + if (id) { + dispatch(expanderToggled({ id, isOpen })); + } + onToggle(); - }, [onClick, onToggle, isOpen]); + }, [id, dispatch, onToggle, isOpen]); return ( diff --git a/invokeai/frontend/web/src/common/components/InvExpander/types.ts b/invokeai/frontend/web/src/common/components/InvExpander/types.ts index 3b34bc421c..ed6973578c 100644 --- a/invokeai/frontend/web/src/common/components/InvExpander/types.ts +++ b/invokeai/frontend/web/src/common/components/InvExpander/types.ts @@ -4,4 +4,5 @@ export type InvExpanderProps = PropsWithChildren<{ label?: string; defaultIsOpen?: boolean; onClick?: (isOpen: boolean) => void; + id?: string; }>; diff --git a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx b/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx index 7408d1a6c6..0c99164093 100644 --- a/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx +++ b/invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx @@ -7,11 +7,16 @@ import { import { memo, useCallback } from 'react'; import type { InvSingleAccordionProps } from './types'; +import { singleAccordionExpanded } from '../../../features/parameters/store/actions'; +import { useAppDispatch } from '../../../app/store/storeHooks'; export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => { + const dispatch = useAppDispatch(); const handleAccordionClick = useCallback( - (isExpanded: boolean) => { - props.onClick && props.onClick(isExpanded); + (isOpen: boolean) => { + if (props.id) { + dispatch(singleAccordionExpanded({ id: props.id, isOpen })); + } }, [props] ); diff --git a/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts b/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts index 6d66d0baa7..2e763809e4 100644 --- a/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts +++ b/invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts @@ -4,5 +4,5 @@ export type InvSingleAccordionProps = PropsWithChildren<{ label: string; badges?: (string | number)[]; defaultIsOpen?: boolean; - onClick?: (isOpen?: boolean) => void; + id?: string; }>; diff --git a/invokeai/frontend/web/src/features/parameters/store/actions.ts b/invokeai/frontend/web/src/features/parameters/store/actions.ts index 7b54787efb..b54b2b48d1 100644 --- a/invokeai/frontend/web/src/features/parameters/store/actions.ts +++ b/invokeai/frontend/web/src/features/parameters/store/actions.ts @@ -9,13 +9,10 @@ export const modelSelected = createAction( 'generation/modelSelected' ); -export const imageAdvancedOptionsExpanded = createAction( - 'parameters/imageAdvancedOptionsExpanded' +export const expanderToggled = createAction<{ id: string, isOpen: boolean }>( + 'parameters/expanderToggled' ); -export const generationAdvancedOptionsExpanded = createAction( - 'parameters/generationAdvancedOptionsExpanded' +export const singleAccordionExpanded = createAction<{ id: string, isOpen: boolean }>( + 'parameters/singleAccordionExpanded' ); -export const advancedPanelExpanded = createAction( - 'parameters/advancedPanelExpanded' -); diff --git a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx index 6b25e87edf..26a1edc1fc 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx @@ -1,6 +1,6 @@ import { Flex } from '@chakra-ui/layout'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useAppSelector } from 'app/store/storeHooks'; import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; import type { InvLabelProps } from 'common/components/InvControl/types'; import { InvSingleAccordion } from 'common/components/InvSingleAccordion/InvSingleAccordion'; @@ -10,9 +10,8 @@ import ParamSeamlessXAxis from 'features/parameters/components/Seamless/ParamSea import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSeamlessYAxis'; import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect'; import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision'; -import { advancedPanelExpanded } from 'features/parameters/store/actions'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; -import { memo, useCallback } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; const labelProps: InvLabelProps = { @@ -52,23 +51,9 @@ const selectBadges = createMemoizedSelector( export const AdvancedSettingsAccordion = memo(() => { const badges = useAppSelector(selectBadges); const { t } = useTranslation(); - const dispatch = useAppDispatch(); - - const onAccordionClick = useCallback( - (isOpen?: boolean) => { - if (!isOpen) { - dispatch(advancedPanelExpanded()); - } - }, - [dispatch] - ); return ( - + diff --git a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx index 076cea04a6..0159969a1c 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx @@ -1,6 +1,6 @@ import { Flex } from '@chakra-ui/layout'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useAppSelector } from 'app/store/storeHooks'; import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; import type { InvLabelProps } from 'common/components/InvControl/types'; import { InvExpander } from 'common/components/InvExpander/InvExpander'; @@ -20,10 +20,9 @@ import ParamCFGScale from 'features/parameters/components/Core/ParamCFGScale'; import ParamScheduler from 'features/parameters/components/Core/ParamScheduler'; import ParamSteps from 'features/parameters/components/Core/ParamSteps'; import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect'; -import { generationAdvancedOptionsExpanded } from 'features/parameters/store/actions'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { size } from 'lodash-es'; -import { memo, useCallback } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; const labelProps: InvLabelProps = { @@ -48,16 +47,6 @@ const badgesSelector = createMemoizedSelector( export const GenerationSettingsAccordion = memo(() => { const { t } = useTranslation(); const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector); - const dispatch = useAppDispatch(); - - const onToggleExpander = useCallback( - (isOpen?: boolean) => { - if (!isOpen) { - dispatch(generationAdvancedOptionsExpanded()); - } - }, - [dispatch] - ); return ( { - + diff --git a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx index 10b7d0e710..d1f1b62871 100644 --- a/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx +++ b/invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx @@ -1,6 +1,6 @@ import { Flex } from '@chakra-ui/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useAppSelector } from 'app/store/storeHooks'; import { InvControlGroup } from 'common/components/InvControl/InvControlGroup'; import type { InvLabelProps } from 'common/components/InvControl/types'; import { InvExpander } from 'common/components/InvExpander/InvExpander'; @@ -16,10 +16,9 @@ import ImageToImageStrength from 'features/parameters/components/ImageToImage/Im import { ParamSeedNumberInput } from 'features/parameters/components/Seed/ParamSeedNumberInput'; import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSeedRandomize'; import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle'; -import { imageAdvancedOptionsExpanded } from 'features/parameters/store/actions'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; -import { memo, useCallback } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { ImageSizeCanvas } from './ImageSizeCanvas'; @@ -74,16 +73,6 @@ const scalingLabelProps: InvLabelProps = { export const ImageSettingsAccordion = memo(() => { const { t } = useTranslation(); const { badges, activeTabName } = useAppSelector(selector); - const dispatch = useAppDispatch(); - - const onToggleExpander = useCallback( - (isOpen?: boolean) => { - if (!isOpen) { - dispatch(imageAdvancedOptionsExpanded()); - } - }, - [dispatch] - ); return ( { ) : ( )} - +