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

per(ui): move field desc content to own component

Browse Source
This commit is contained in:
psychedelicious
2025-02-17 08:04:36 +10:00
parent 6bebd2bfc8
commit 65eabde297
1 changed files with 29 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldDescriptionPopover.tsx
View File

@@ -21,15 +21,7 @@ type Props = {
};
export const InputFieldDescriptionPopover = memo(({ nodeId, fieldName }: Props) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const description = useInputFieldDescription(nodeId, fieldName);
const onChange = useCallback(
(e: ChangeEvent<HTMLTextAreaElement>) => {
dispatch(fieldDescriptionChanged({ nodeId, fieldName, val: e.target.value }));
},
[dispatch, fieldName, nodeId]
);
return (
<Popover isLazy lazyBehavior="unmount">
@@ -44,21 +36,38 @@ export const InputFieldDescriptionPopover = memo(({ nodeId, fieldName }: Props)
/>
</PopoverTrigger>
<PopoverContent p={2} w={256}>
<FormControl orientation="vertical">
<FormLabel>{t('nodes.description')}</FormLabel>
<Textarea
className="nodrag nopan nowheel"
fontSize="sm"
value={description ?? ''}
onChange={onChange}
p={2}
resize="none"
rows={5}
/>
</FormControl>
<Content nodeId={nodeId} fieldName={fieldName} />
</PopoverContent>
</Popover>
);
});
InputFieldDescriptionPopover.displayName = 'InputFieldDescriptionPopover';
const Content = memo(({ nodeId, fieldName }: Props) => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const description = useInputFieldDescription(nodeId, fieldName);
const onChange = useCallback(
(e: ChangeEvent<HTMLTextAreaElement>) => {
dispatch(fieldDescriptionChanged({ nodeId, fieldName, val: e.target.value }));
},
[dispatch, fieldName, nodeId]
);
return (
<FormControl orientation="vertical">
<FormLabel>{t('nodes.description')}</FormLabel>
<Textarea
className="nodrag nopan nowheel"
fontSize="sm"
value={description ?? ''}
onChange={onChange}
p={2}
resize="none"
rows={5}
/>
</FormControl>
);
});
Content.displayName = 'Content';