github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): split up FormElementEditModeHeader components

Browse Source
This commit is contained in:
psychedelicious
2025-02-21 15:16:58 +10:00
committed by Kent Keirsey
parent e9e2bab4ee
commit 3045cd7b3a
1 changed files with 47 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/FormElementEditModeHeader.tsx
View File

@@ -5,14 +5,13 @@ import { ContainerElementSettings } from 'features/nodes/components/sidePanel/bu
import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts'; import { useDepthContext } from 'features/nodes/components/sidePanel/builder/contexts';
import { NodeFieldElementSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementSettings'; import { NodeFieldElementSettings } from 'features/nodes/components/sidePanel/builder/NodeFieldElementSettings';
import { formElementRemoved } from 'features/nodes/store/workflowSlice'; import { formElementRemoved } from 'features/nodes/store/workflowSlice';
import { type FormElement, isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow'; import type { FormElement } from 'features/nodes/types/workflow';
import { isContainerElement, isNodeFieldElement } from 'features/nodes/types/workflow';
import { startCase } from 'lodash-es'; import { startCase } from 'lodash-es';
import { memo, useCallback, useMemo } from 'react'; import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiXBold } from 'react-icons/pi'; import { PiXBold } from 'react-icons/pi';
import { useIsRootElement } from './dnd-hooks';
const sx: SystemStyleObject = { const sx: SystemStyleObject = {
w: 'full', w: 'full',
ps: 2, ps: 2,
@@ -26,56 +25,62 @@ const sx: SystemStyleObject = {
'&[data-depth="0"]': { bg: 'baseAlpha.100' }, '&[data-depth="0"]': { bg: 'baseAlpha.100' },
'&[data-depth="1"]': { bg: 'baseAlpha.150' }, '&[data-depth="1"]': { bg: 'baseAlpha.150' },
'&[data-depth="2"]': { bg: 'baseAlpha.200' }, '&[data-depth="2"]': { bg: 'baseAlpha.200' },
'&[data-is-root="false"]': { cursor: 'grab' },
}; };
export const FormElementEditModeHeader = memo( export const FormElementEditModeHeader = memo(
forwardRef(({ element }: { element: FormElement }, ref) => { forwardRef(({ element }: { element: FormElement }, ref) => {
const { t } = useTranslation();
const depth = useDepthContext(); const depth = useDepthContext();
const dispatch = useAppDispatch();
const isRootElement = useIsRootElement(element.id);
const removeElement = useCallback(() => {
if (isRootElement) {
return;
}
dispatch(formElementRemoved({ id: element.id }));
}, [dispatch, element.id, isRootElement]);
const label = useMemo(() => {
if (isRootElement) {
return 'Root Container';
}
if (isContainerElement(element) && element.data.layout === 'column') {
return `Container (column layout)`;
}
if (isContainerElement(element) && element.data.layout === 'row') {
return `Container (row layout)`;
}
return startCase(element.type);
}, [element, isRootElement]);
return ( return (
<Flex ref={ref} sx={sx} data-depth={depth} data-is-root={isRootElement}> <Flex ref={ref} sx={sx} data-depth={depth}>
<Text fontWeight="semibold" noOfLines={1} wordBreak="break-all" userSelect="none"> <Label element={element} />
{label}
</Text>
<Spacer /> <Spacer />
{isContainerElement(element) && !isRootElement && <ContainerElementSettings element={element} />} {isContainerElement(element) && <ContainerElementSettings element={element} />}
{isNodeFieldElement(element) && <NodeFieldElementSettings element={element} />} {isNodeFieldElement(element) && <NodeFieldElementSettings element={element} />}
{!isRootElement && ( <RemoveElementButton element={element} />
<IconButton
tooltip={t('common.delete')}
aria-label={t('common.delete')}
onClick={removeElement}
icon={<PiXBold />}
variant="link"
size="sm"
alignSelf="stretch"
colorScheme="error"
/>
)}
</Flex> </Flex>
); );
}) })
); );
FormElementEditModeHeader.displayName = 'FormElementEditModeHeader'; FormElementEditModeHeader.displayName = 'FormElementEditModeHeader';
const RemoveElementButton = memo(({ element }: { element: FormElement }) => {
const { t } = useTranslation();
const dispatch = useAppDispatch();
const removeElement = useCallback(() => {
dispatch(formElementRemoved({ id: element.id }));
}, [dispatch, element.id]);
return (
<IconButton
tooltip={t('common.delete')}
aria-label={t('common.delete')}
onClick={removeElement}
icon={<PiXBold />}
variant="link"
size="sm"
alignSelf="stretch"
colorScheme="error"
/>
);
});
RemoveElementButton.displayName = 'RemoveElementButton';
const Label = memo(({ element }: { element: FormElement }) => {
const label = useMemo(() => {
if (isContainerElement(element) && element.data.layout === 'column') {
return `Container (column layout)`;
}
if (isContainerElement(element) && element.data.layout === 'row') {
return `Container (row layout)`;
}
return startCase(element.type);
}, [element]);
return (
<Text fontWeight="semibold" noOfLines={1} wordBreak="break-all" userSelect="none">
{label}
</Text>
);
});
Label.displayName = 'Label';