Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

track accordions in tabs separately so open/close state isnt shared

Browse Source
This commit is contained in:
Mary Hipp 2024-07-25 09:35:01 -04:00 committed by psychedelicious
parent b32aa1c77f
commit 269fe2e3bb
3 changed files with 7 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/features/settingsAccordions/components/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx
View File

@ -15,7 +15,7 @@ import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEP
import { selectGenerationSlice } from 'features/parameters/store/generationSlice'; import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useEffect, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useGetModelConfigQuery } from 'services/api/endpoints/models'; import { useGetModelConfigQuery } from 'services/api/endpoints/models';
@ -63,17 +63,11 @@ export const AdvancedSettingsAccordion = memo(() => {
); );
const badges = useAppSelector(selectBadges); const badges = useAppSelector(selectBadges);
const { t } = useTranslation(); const { t } = useTranslation();
const { isOpen, onToggle, onClose } = useStandaloneAccordionToggle({ const { isOpen, onToggle } = useStandaloneAccordionToggle({
id: 'advanced-settings', id: `'advanced-settings-${activeTabName}`,
defaultIsOpen: false, defaultIsOpen: false,
}); });
useEffect(() => {
if (activeTabName === 'upscaling') {
onClose();
}
}, [activeTabName, onClose]);
return ( return (
<StandaloneAccordion label={t('accordions.advanced.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}> <StandaloneAccordion label={t('accordions.advanced.title')} badges={badges} isOpen={isOpen} onToggle={onToggle}>
<Flex gap={4} alignItems="center" p={4} flexDir="column" data-testid="advanced-settings-accordion"> <Flex gap={4} alignItems="center" p={4} flexDir="column" data-testid="advanced-settings-accordion">

16
invokeai/frontend/web/src/features/settingsAccordions/components/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx
View File

@ -16,7 +16,7 @@ import { useExpanderToggle } from 'features/settingsAccordions/hooks/useExpander
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle'; import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { filter } from 'lodash-es'; import { filter } from 'lodash-es';
import { memo, useEffect, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig'; import { useSelectedModelConfig } from 'services/api/hooks/useSelectedModelConfig';
@ -43,21 +43,11 @@ export const GenerationSettingsAccordion = memo(() => {
id: 'generation-settings-advanced', id: 'generation-settings-advanced',
defaultIsOpen: false, defaultIsOpen: false,
}); });
const { const { isOpen: isOpenAccordion, onToggle: onToggleAccordion } = useStandaloneAccordionToggle({
isOpen: isOpenAccordion, id: `generation-settings-${activeTabName}`,
onToggle: onToggleAccordion,
onClose: onCloseAccordion,
} = useStandaloneAccordionToggle({
id: 'generation-settings',
defaultIsOpen: activeTabName !== 'upscaling', defaultIsOpen: activeTabName !== 'upscaling',
}); });
useEffect(() => {
if (activeTabName === 'upscaling') {
onCloseAccordion();
}
}, [activeTabName, onCloseAccordion]);
return ( return (
<StandaloneAccordion <StandaloneAccordion
label={t('accordions.generation.title')} label={t('accordions.generation.title')}

5
invokeai/frontend/web/src/features/settingsAccordions/hooks/useStandaloneAccordionToggle.ts
View File

@ -19,8 +19,5 @@ export const useStandaloneAccordionToggle = (arg: UseStandaloneAccordionToggleAr
dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen })); dispatch(accordionStateChanged({ id: arg.id, isOpen: !isOpen }));
}, [arg.id, dispatch, isOpen]); }, [arg.id, dispatch, isOpen]);
const onClose = useCallback(() => { return { isOpen, onToggle };
dispatch(accordionStateChanged({ id: arg.id, isOpen: false }));
}, [arg.id, dispatch]);
return { isOpen, onToggle, onClose };
}; };