mirror of
https://github.com/nocobase/nocobase
synced 2024-11-15 06:55:50 +00:00
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:
parent
b64ce6a2b3
commit
8b64a559e4
@ -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>
|
||||
);
|
||||
},
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user