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

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

View File

@ -15,7 +15,7 @@ import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEP
import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
import { useStandaloneAccordionToggle } from 'features/settingsAccordions/hooks/useStandaloneAccordionToggle';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { memo, useEffect, useMemo } from 'react';
import { memo, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useGetModelConfigQuery } from 'services/api/endpoints/models';
@ -63,17 +63,11 @@ export const AdvancedSettingsAccordion = memo(() => {
);
const badges = useAppSelector(selectBadges);
const { t } = useTranslation();
const { isOpen, onToggle, onClose } = useStandaloneAccordionToggle({
id: 'advanced-settings',
const { isOpen, onToggle } = useStandaloneAccordionToggle({
id: `'advanced-settings-${activeTabName}`,
defaultIsOpen: false,
});
useEffect(() => {
if (activeTabName === 'upscaling') {
onClose();
}
}, [activeTabName, onClose]);
return (
<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">

View File

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

View File

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