fix: fix linkage style not updating in form (#5539)

* refactor: update useDataFormItemProps hook
* refactor: update useDataFormItemProps hook to handle null values in form and subForm
This commit is contained in:
Sheldon Guo 2024-10-30 10:11:37 +08:00 committed by GitHub
parent 7323cefcdd
commit 0c034c104e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 7 deletions

View File

@ -7,11 +7,18 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useForm } from '@formily/react';
import { useCollectionRecordData } from '../../../../../data-source/collection-record/CollectionRecordProvider';
import { useSatisfiedActionValues } from '../../../../../schema-settings/LinkageRules/useActionValues';
import { useFormBlockContext } from '../../../../../block-provider';
import { useSubFormValue } from '../../../../../schema-component/antd/association-field/hooks';
export function useDataFormItemProps() {
const data = useCollectionRecordData();
const { valueMap: style } = useSatisfiedActionValues({ category: 'style', formValues: data });
const record = useCollectionRecordData();
const { form } = useFormBlockContext();
const subForm = useSubFormValue();
const { valueMap: style } = useSatisfiedActionValues({
category: 'style',
formValues: subForm?.formValue || form?.values || record,
form,
});
return { wrapperStyle: style };
}

View File

@ -7,7 +7,9 @@
* For more information, please refer to: https://www.nocobase.com/agreement.
*/
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { uid } from '@formily/shared';
import { Form, onFormValuesChange } from '@formily/core';
import { useVariables, useLocalVariables } from '../../variables';
import { useFieldSchema } from '@formily/react';
import { LinkageRuleCategory, LinkageRuleDataKeyMap } from './type';
@ -18,11 +20,13 @@ export function useSatisfiedActionValues({
category = 'default',
rules,
schema,
form,
}: {
category: `${LinkageRuleCategory}`;
formValues: Record<string, any>;
rules?: any;
schema?: any;
form?: Form;
}) {
const [valueMap, setValueMap] = useState({});
const fieldSchema = useFieldSchema();
@ -30,8 +34,7 @@ export function useSatisfiedActionValues({
const localVariables = useLocalVariables({ currentForm: { values: formValues } as any });
const localSchema = schema ?? fieldSchema;
const linkageRules = rules ?? localSchema[LinkageRuleDataKeyMap[category]];
useEffect(() => {
const compute = useCallback(() => {
if (linkageRules && formValues) {
getSatisfiedValueMap({ rules: linkageRules, variables, localVariables })
.then((valueMap) => {
@ -43,6 +46,22 @@ export function useSatisfiedActionValues({
throw new Error(err.message);
});
}
}, [variables, localVariables, formValues, linkageRules]);
}, [variables, localVariables, linkageRules, formValues]);
useEffect(() => {
compute();
}, [compute]);
useEffect(() => {
if (form) {
const id = uid();
form.addEffects(id, () => {
onFormValuesChange(() => {
compute();
});
});
return () => {
form.removeEffects(id);
};
}
}, [form, compute]);
return { valueMap };
}