fix: form performance (#2047)

* fix: form performance

* fix: refresh when the targetKeyValue change

---------

Co-authored-by: chenos <chenlinxh@gmail.com>
This commit is contained in:
jack zhang 2023-06-14 19:29:29 +08:00 committed by GitHub
parent b64ce6a2b3
commit 8b64a559e4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 21 additions and 4 deletions

View File

@ -162,7 +162,7 @@ export const Action: ComposedAction = observer(
>
{popover && <RecursionField basePath={field.address} onlyRenderProperties schema={fieldSchema} />}
{!popover && renderButton()}
{!popover && props.children}
{!popover && <div onClick={(e) => e.stopPropagation()}>{props.children}</div>}
</ActionContextProvider>
);
},

View File

@ -14,17 +14,33 @@ export const AssociationFieldProvider = observer(
const collectionField = useMemo(
() => getCollectionJoinField(fieldSchema['x-collection-field']),
// eslint-disable-next-line react-hooks/exhaustive-deps
[fieldSchema['x-collection-field'], fieldSchema.name],
);
const isFileCollection = useMemo(
() => getCollection(collectionField?.target)?.template === 'file',
// eslint-disable-next-line react-hooks/exhaustive-deps
[fieldSchema['x-collection-field']],
);
const currentMode = useMemo(
() => fieldSchema['x-component-props']?.mode || (isFileCollection ? 'FileManager' : 'Select'),
// eslint-disable-next-line react-hooks/exhaustive-deps
[fieldSchema['x-component-props']?.mode],
);
const targetKeyValue = useMemo(() => {
if (!field.value) return '';
if (['belongsTo', 'hasOne'].includes(collectionField.type)) {
return field.value[collectionField.targetKey] ?? '';
}
if (['belongsToMany', 'hasMany'].includes(collectionField.type)) {
if (Array.isArray(field.value)) {
return field.value.map((v) => v[collectionField.targetKey] ?? '').join(',');
}
}
return '';
}, [collectionField, field.value]);
const [loading, setLoading] = useState(true);
useEffect(() => {
@ -67,7 +83,8 @@ export const AssociationFieldProvider = observer(
}
}
setLoading(false);
}, [currentMode, collectionField, JSON.stringify(field.value)]);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentMode, collectionField, targetKeyValue]);
if (loading) {
return null;

View File

@ -46,7 +46,7 @@ const ToManyNester = observer(
allowed = !value?.[options.targetKey];
}
return (
<>
<React.Fragment key={index}>
<div style={{ textAlign: 'right' }}>
{field.editable && allowMultiple && (
<Tooltip key={'add'} title={t('Add new')}>
@ -88,7 +88,7 @@ const ToManyNester = observer(
</div>
<RecursionField onlyRenderProperties basePath={field.address.concat(index)} schema={fieldSchema} />
<Divider />
</>
</React.Fragment>
);
})}
</Card>