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

feat(ui): support min and max length for image collections

Browse Source
This commit is contained in:
psychedelicious
2024-11-16 13:42:54 -08:00
parent a08e61184a
commit c813fa3fc0
3 changed files with 100 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent.tsx
View File

@@ -47,6 +47,19 @@ export const ImageFieldCollectionInputComponent = memo(
[dispatch, field.name, nodeId]
);
const isInvalid = useMemo(() => {
if (!field.value) {
if (fieldTemplate.required) {
return true;
}
} else if (fieldTemplate.minLength !== undefined && field.value.length < fieldTemplate.minLength) {
return true;
} else if (fieldTemplate.maxLength !== undefined && field.value.length > fieldTemplate.maxLength) {
return true;
}
return false;
}, [field.value, fieldTemplate.maxLength, fieldTemplate.minLength, fieldTemplate.required]);
return (
<Flex
position="relative"
@@ -57,17 +70,17 @@ export const ImageFieldCollectionInputComponent = memo(
alignItems="stretch"
justifyContent="center"
>
{field.value.length === 0 && (
{(!field.value || field.value.length === 0) && (
<UploadMultipleImageButton
w="full"
h="auto"
isError={fieldTemplate.required}
isError={isInvalid}
onUpload={onUpload}
fontSize={24}
variant="outline"
/>
)}
{field.value.length > 0 && (
{field.value && field.value.length > 0 && (
<>
<Grid className="nopan" w="full" h="full" templateColumns="repeat(3, 1fr)" gap={2}>
{field.value.map(({ image_name }) => (