From 0606637a73caced25cc884f3a1fc70af7b0a3586 Mon Sep 17 00:00:00 2001 From: Junyi Date: Mon, 19 Jun 2023 20:47:29 +0700 Subject: [PATCH] fix(plugin-formula): fix formula field effect and read-pretty component (#2076) --- .../antd/checkbox/Checkbox.tsx | 17 +++++++----- .../antd/date-picker/DatePicker.tsx | 3 +++ .../antd/input-number/InputNumber.tsx | 10 +++++-- .../src/schema-component/antd/input/Input.tsx | 2 ++ .../src/client/components/Formula/Result.tsx | 27 +++++++++++-------- 5 files changed, 40 insertions(+), 19 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx b/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx index 332868f4c..06cec6e6e 100644 --- a/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx +++ b/packages/core/client/src/schema-component/antd/checkbox/Checkbox.tsx @@ -10,6 +10,14 @@ import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip'; type ComposedCheckbox = React.FC & { Group?: React.FC; __ANT_CHECKBOX?: boolean; + ReadPretty?: React.FC; +}; + +const ReadPretty = (props) => { + if (props.value) { + return ; + } + return props.showUnchecked ? : null; }; export const Checkbox: ComposedCheckbox = connect( @@ -23,14 +31,11 @@ export const Checkbox: ComposedCheckbox = connect( value: 'checked', onInput: 'onChange', }), - mapReadPretty((props) => { - if (props.value) { - return ; - } - return props.showUnchecked ? : null; - }), + mapReadPretty(ReadPretty), ); +Checkbox.ReadPretty = ReadPretty; + Checkbox.__ANT_CHECKBOX = true; Checkbox.Group = connect( diff --git a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx index 09623d118..e7b5d7433 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/DatePicker.tsx @@ -14,6 +14,7 @@ interface IDatePickerProps { } type ComposedDatePicker = React.FC & { + ReadPretty?: React.FC; RangePicker?: React.FC; }; @@ -40,6 +41,8 @@ export const DatePicker = (props) => { return <_DatePicker {...props} />; }; +DatePicker.ReadPretty = ReadPretty.DatePicker; + DatePicker.RangePicker = function RangePicker(props) { const { t } = useTranslation(); const { utc = true } = useDatePickerContext(); diff --git a/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx b/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx index 288347c3d..812437425 100644 --- a/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx +++ b/packages/core/client/src/schema-component/antd/input-number/InputNumber.tsx @@ -1,9 +1,13 @@ import { connect, mapReadPretty } from '@formily/react'; -import { InputNumber as AntdNumber } from 'antd'; +import { InputNumber as AntdNumber, InputNumberProps } from 'antd'; import React from 'react'; import { ReadPretty } from './ReadPretty'; -export const InputNumber = connect((props) => { +type ComposedInputNumber = React.FC & { + ReadPretty?: React.FC; +}; + +export const InputNumber: ComposedInputNumber = connect((props) => { const { onChange, ...others } = props; const handleChange = (v) => { onChange(parseFloat(v)); @@ -11,4 +15,6 @@ export const InputNumber = connect((props) => { return ; }, mapReadPretty(ReadPretty)); +InputNumber.ReadPretty = ReadPretty; + export default InputNumber; diff --git a/packages/core/client/src/schema-component/antd/input/Input.tsx b/packages/core/client/src/schema-component/antd/input/Input.tsx index ba2acd08c..52e971a81 100644 --- a/packages/core/client/src/schema-component/antd/input/Input.tsx +++ b/packages/core/client/src/schema-component/antd/input/Input.tsx @@ -7,6 +7,7 @@ import { JSONTextAreaProps, Json } from './Json'; import { ReadPretty } from './ReadPretty'; type ComposedInput = React.FC & { + ReadPretty: React.FC; TextArea: React.FC; URL: React.FC; JSON: React.FC; @@ -39,6 +40,7 @@ export const Input: ComposedInput = Object.assign( ), URL: connect(AntdInput, mapReadPretty(ReadPretty.URL)), JSON: connect(Json, mapReadPretty(ReadPretty.JSON)), + ReadPretty: ReadPretty.Input, }, ); 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 a89d957b4..46b56f8ac 100644 --- a/packages/plugins/formula-field/src/client/components/Formula/Result.tsx +++ b/packages/plugins/formula-field/src/client/components/Formula/Result.tsx @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import { onFormValuesChange } from '@formily/core'; +import React, { useState, useEffect } from 'react'; +import { onFormInputChange } from '@formily/core'; import { toJS } from '@formily/reactive'; import { useFieldSchema, useFormEffects, useForm } from '@formily/react'; import { @@ -17,13 +17,13 @@ import { Registry, toFixedByStep } from '@nocobase/utils/client'; import { toDbType } from '../../../utils'; const TypedComponents = { - boolean: Checkbox, - integer: InputNumber, - bigInt: InputNumber, - double: InputNumber, - decimal: InputNumber, - date: DatePicker, - string: InputString, + boolean: Checkbox.ReadPretty, + integer: InputNumber.ReadPretty, + bigInt: InputNumber.ReadPretty, + double: InputNumber.ReadPretty, + decimal: InputNumber.ReadPretty, + date: DatePicker.ReadPretty, + string: InputString.ReadPretty, }; function useTargetCollectionField() { @@ -46,8 +46,13 @@ export function Result(props) { const [editingValue, setEditingValue] = useState(value); const { evaluate } = (evaluators as Registry).get(engine); const formBlockContext = useFormBlockContext(); + + useEffect(() => { + setEditingValue(value); + }, [value]); + useFormEffects(() => { - onFormValuesChange((form) => { + onFormInputChange((form) => { if ( (fieldSchema.name as string).indexOf('.') >= 0 || !formBlockContext?.form || @@ -63,7 +68,7 @@ export function Result(props) { } catch (error) { v = null; } - if ((v == null && editingValue == null) || JSON.stringify(v) === JSON.stringify(editingValue)) { + if (v == null && editingValue == null) { return; } setEditingValue(v);