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

change actions to be for any InvExpander or InvSingleAccordion that has id passed in

Browse Source
This commit is contained in:
Mary Hipp 2024-01-17 15:09:44 -05:00 committed by psychedelicious
parent dbd6c9c6ed
commit 84a4836ab7
8 changed files with 31 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx
View File

@ -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 (
<Flex flexDir="column" w="full">

1
invokeai/frontend/web/src/common/components/InvExpander/types.ts
View File

@ -4,4 +4,5 @@ export type InvExpanderProps = PropsWithChildren<{
label?: string;
defaultIsOpen?: boolean;
onClick?: (isOpen: boolean) => void;
id?: string;
}>;

9
invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx
View File

@ -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]
);

2
invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts
View File

@ -4,5 +4,5 @@ export type InvSingleAccordionProps = PropsWithChildren<{
label: string;
badges?: (string | number)[];
defaultIsOpen?: boolean;
onClick?: (isOpen?: boolean) => void;
id?: string;
}>;

11
invokeai/frontend/web/src/features/parameters/store/actions.ts
View File

@ -9,13 +9,10 @@ export const modelSelected = createAction<MainModelField>(
'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'
);

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

@ -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 (
<InvSingleAccordion
label={t('accordions.advanced.title')}
badges={badges}
onClick={onAccordionClick}
>
<InvSingleAccordion label={t('accordions.advanced.title')} badges={badges}>
<Flex gap={4} alignItems="center" p={4} flexDir="column">
<Flex gap={4} w="full">
<ParamVAEModelSelect />

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

@ -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 (
<InvSingleAccordion
@ -78,7 +67,7 @@ export const GenerationSettingsAccordion = memo(() => {
<ParamMainModelSelect />
<SyncModelsIconButton />
</Flex>
<InvExpander onClick={onToggleExpander}>
<InvExpander>
<Flex gap={4} flexDir="column" pb={4}>
<InvControlGroup labelProps={labelProps}>
<ParamScheduler />

17
invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx
View File

@ -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 (
<InvSingleAccordion
@ -97,7 +86,7 @@ export const ImageSettingsAccordion = memo(() => {
) : (
<ImageSizeLinear />
)}
<InvExpander onClick={onToggleExpander}>
<InvExpander>
<Flex gap={4} pb={4} flexDir="column">
<Flex gap={4} alignItems="center">
<ParamSeedNumberInput />