fix(plugin-formula): fix formula field effect and read-pretty component (#2076)

This commit is contained in:
Junyi 2023-06-19 20:47:29 +07:00 committed by GitHub
parent 44549fdfee
commit 0606637a73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 40 additions and 19 deletions

View File

@ -10,6 +10,14 @@ import { EllipsisWithTooltip } from '../input/EllipsisWithTooltip';
type ComposedCheckbox = React.FC<CheckboxProps> & {
Group?: React.FC<CheckboxGroupProps>;
__ANT_CHECKBOX?: boolean;
ReadPretty?: React.FC<CheckboxProps>;
};
const ReadPretty = (props) => {
if (props.value) {
return <CheckOutlined style={{ color: '#52c41a' }} />;
}
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : 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 <CheckOutlined style={{ color: '#52c41a' }} />;
}
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : null;
}),
mapReadPretty(ReadPretty),
);
Checkbox.ReadPretty = ReadPretty;
Checkbox.__ANT_CHECKBOX = true;
Checkbox.Group = connect(

View File

@ -14,6 +14,7 @@ interface IDatePickerProps {
}
type ComposedDatePicker = React.FC<AntdDatePickerProps> & {
ReadPretty?: React.FC<AntdDatePickerProps>;
RangePicker?: React.FC<AntdRangePickerProps>;
};
@ -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();

View File

@ -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<InputNumberProps> & {
ReadPretty?: React.FC<InputNumberProps>;
};
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 <AntdNumber onChange={handleChange} {...others} />;
}, mapReadPretty(ReadPretty));
InputNumber.ReadPretty = ReadPretty;
export default InputNumber;

View File

@ -7,6 +7,7 @@ import { JSONTextAreaProps, Json } from './Json';
import { ReadPretty } from './ReadPretty';
type ComposedInput = React.FC<InputProps> & {
ReadPretty: React.FC<InputProps>;
TextArea: React.FC<TextAreaProps>;
URL: React.FC<InputProps>;
JSON: React.FC<JSONTextAreaProps>;
@ -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,
},
);

View File

@ -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<Evaluator>).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);