From a8191ed26f6c40ff27dcc5a07cb7b3938b5e5e89 Mon Sep 17 00:00:00 2001 From: Junyi Date: Tue, 6 Jun 2023 23:04:13 +0700 Subject: [PATCH] fix(plugin-formula): fix result component caused page crash (#1996) --- .../src/client/components/Formula/Result.tsx | 38 +++++++++++++------ .../src/client/components/Formula/index.tsx | 2 +- 2 files changed, 28 insertions(+), 12 deletions(-) diff --git a/packages/plugins/formula-field/src/client/components/Formula/Result.tsx b/packages/plugins/formula-field/src/client/components/Formula/Result.tsx index 89eef2a77..a89d957b4 100644 --- a/packages/plugins/formula-field/src/client/components/Formula/Result.tsx +++ b/packages/plugins/formula-field/src/client/components/Formula/Result.tsx @@ -1,10 +1,18 @@ +import React, { useState } from 'react'; import { onFormValuesChange } from '@formily/core'; +import { toJS } from '@formily/reactive'; import { useFieldSchema, useFormEffects, useForm } from '@formily/react'; -import { Checkbox, DatePicker, InputNumber, Input as InputString, useCollection, useCollectionManager } from '@nocobase/client'; +import { + Checkbox, + DatePicker, + InputNumber, + Input as InputString, + useCollection, + useCollectionManager, + useFormBlockContext, +} from '@nocobase/client'; import { Evaluator, evaluators } from '@nocobase/evaluators/client'; import { Registry, toFixedByStep } from '@nocobase/utils/client'; -import cloneDeep from 'lodash/cloneDeep'; -import React from 'react'; import { toDbType } from '../../../utils'; @@ -31,17 +39,23 @@ function useTargetCollectionField() { return getCollectionField(`${collection.name}.${paths[paths.length - 1]}`); } -export const Result = (props) => { +export function Result(props) { const { value, ...others } = props; const fieldSchema = useFieldSchema(); - const { name, dataType, expression, engine = 'math.js' } = useTargetCollectionField() ?? {}; + const { dataType, expression, engine = 'math.js' } = useTargetCollectionField() ?? {}; + const [editingValue, setEditingValue] = useState(value); const { evaluate } = (evaluators as Registry).get(engine); + const formBlockContext = useFormBlockContext(); useFormEffects(() => { onFormValuesChange((form) => { - if ((fieldSchema.name as string).indexOf('.') >= 0) { + if ( + (fieldSchema.name as string).indexOf('.') >= 0 || + !formBlockContext?.form || + formBlockContext.form?.readPretty + ) { return; } - const scope = cloneDeep(form.values); + const scope = toJS(form.values); let v; try { v = evaluate(expression, scope); @@ -49,14 +63,16 @@ export const Result = (props) => { } catch (error) { v = null; } - if ((v == null && value == null) || JSON.stringify(v) === JSON.stringify(value)) { + if ((v == null && editingValue == null) || JSON.stringify(v) === JSON.stringify(editingValue)) { return; } - form.setValuesIn(name, v); + setEditingValue(v); }); }); const Component = TypedComponents[dataType] ?? InputString; - return ; -}; + return ( + + ); +} export default Result; diff --git a/packages/plugins/formula-field/src/client/components/Formula/index.tsx b/packages/plugins/formula-field/src/client/components/Formula/index.tsx index ddecd1b3d..267330456 100644 --- a/packages/plugins/formula-field/src/client/components/Formula/index.tsx +++ b/packages/plugins/formula-field/src/client/components/Formula/index.tsx @@ -1,4 +1,4 @@ -import { connect, mapReadPretty } from '@formily/react'; +import { connect } from '@formily/react'; import Expression from './Expression'; import Result from './Result';