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> & { type ComposedCheckbox = React.FC<CheckboxProps> & {
Group?: React.FC<CheckboxGroupProps>; Group?: React.FC<CheckboxGroupProps>;
__ANT_CHECKBOX?: boolean; __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( export const Checkbox: ComposedCheckbox = connect(
@ -23,14 +31,11 @@ export const Checkbox: ComposedCheckbox = connect(
value: 'checked', value: 'checked',
onInput: 'onChange', onInput: 'onChange',
}), }),
mapReadPretty((props) => { mapReadPretty(ReadPretty),
if (props.value) {
return <CheckOutlined style={{ color: '#52c41a' }} />;
}
return props.showUnchecked ? <CloseOutlined style={{ color: '#ff4d4f' }} /> : null;
}),
); );
Checkbox.ReadPretty = ReadPretty;
Checkbox.__ANT_CHECKBOX = true; Checkbox.__ANT_CHECKBOX = true;
Checkbox.Group = connect( Checkbox.Group = connect(

View File

@ -14,6 +14,7 @@ interface IDatePickerProps {
} }
type ComposedDatePicker = React.FC<AntdDatePickerProps> & { type ComposedDatePicker = React.FC<AntdDatePickerProps> & {
ReadPretty?: React.FC<AntdDatePickerProps>;
RangePicker?: React.FC<AntdRangePickerProps>; RangePicker?: React.FC<AntdRangePickerProps>;
}; };
@ -40,6 +41,8 @@ export const DatePicker = (props) => {
return <_DatePicker {...props} />; return <_DatePicker {...props} />;
}; };
DatePicker.ReadPretty = ReadPretty.DatePicker;
DatePicker.RangePicker = function RangePicker(props) { DatePicker.RangePicker = function RangePicker(props) {
const { t } = useTranslation(); const { t } = useTranslation();
const { utc = true } = useDatePickerContext(); const { utc = true } = useDatePickerContext();

View File

@ -1,9 +1,13 @@
import { connect, mapReadPretty } from '@formily/react'; import { connect, mapReadPretty } from '@formily/react';
import { InputNumber as AntdNumber } from 'antd'; import { InputNumber as AntdNumber, InputNumberProps } from 'antd';
import React from 'react'; import React from 'react';
import { ReadPretty } from './ReadPretty'; 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 { onChange, ...others } = props;
const handleChange = (v) => { const handleChange = (v) => {
onChange(parseFloat(v)); onChange(parseFloat(v));
@ -11,4 +15,6 @@ export const InputNumber = connect((props) => {
return <AntdNumber onChange={handleChange} {...others} />; return <AntdNumber onChange={handleChange} {...others} />;
}, mapReadPretty(ReadPretty)); }, mapReadPretty(ReadPretty));
InputNumber.ReadPretty = ReadPretty;
export default InputNumber; export default InputNumber;

View File

@ -7,6 +7,7 @@ import { JSONTextAreaProps, Json } from './Json';
import { ReadPretty } from './ReadPretty'; import { ReadPretty } from './ReadPretty';
type ComposedInput = React.FC<InputProps> & { type ComposedInput = React.FC<InputProps> & {
ReadPretty: React.FC<InputProps>;
TextArea: React.FC<TextAreaProps>; TextArea: React.FC<TextAreaProps>;
URL: React.FC<InputProps>; URL: React.FC<InputProps>;
JSON: React.FC<JSONTextAreaProps>; JSON: React.FC<JSONTextAreaProps>;
@ -39,6 +40,7 @@ export const Input: ComposedInput = Object.assign(
), ),
URL: connect(AntdInput, mapReadPretty(ReadPretty.URL)), URL: connect(AntdInput, mapReadPretty(ReadPretty.URL)),
JSON: connect(Json, mapReadPretty(ReadPretty.JSON)), JSON: connect(Json, mapReadPretty(ReadPretty.JSON)),
ReadPretty: ReadPretty.Input,
}, },
); );

View File

@ -1,5 +1,5 @@
import React, { useState } from 'react'; import React, { useState, useEffect } from 'react';
import { onFormValuesChange } from '@formily/core'; import { onFormInputChange } from '@formily/core';
import { toJS } from '@formily/reactive'; import { toJS } from '@formily/reactive';
import { useFieldSchema, useFormEffects, useForm } from '@formily/react'; import { useFieldSchema, useFormEffects, useForm } from '@formily/react';
import { import {
@ -17,13 +17,13 @@ import { Registry, toFixedByStep } from '@nocobase/utils/client';
import { toDbType } from '../../../utils'; import { toDbType } from '../../../utils';
const TypedComponents = { const TypedComponents = {
boolean: Checkbox, boolean: Checkbox.ReadPretty,
integer: InputNumber, integer: InputNumber.ReadPretty,
bigInt: InputNumber, bigInt: InputNumber.ReadPretty,
double: InputNumber, double: InputNumber.ReadPretty,
decimal: InputNumber, decimal: InputNumber.ReadPretty,
date: DatePicker, date: DatePicker.ReadPretty,
string: InputString, string: InputString.ReadPretty,
}; };
function useTargetCollectionField() { function useTargetCollectionField() {
@ -46,8 +46,13 @@ export function Result(props) {
const [editingValue, setEditingValue] = useState(value); const [editingValue, setEditingValue] = useState(value);
const { evaluate } = (evaluators as Registry<Evaluator>).get(engine); const { evaluate } = (evaluators as Registry<Evaluator>).get(engine);
const formBlockContext = useFormBlockContext(); const formBlockContext = useFormBlockContext();
useEffect(() => {
setEditingValue(value);
}, [value]);
useFormEffects(() => { useFormEffects(() => {
onFormValuesChange((form) => { onFormInputChange((form) => {
if ( if (
(fieldSchema.name as string).indexOf('.') >= 0 || (fieldSchema.name as string).indexOf('.') >= 0 ||
!formBlockContext?.form || !formBlockContext?.form ||
@ -63,7 +68,7 @@ export function Result(props) {
} catch (error) { } catch (error) {
v = null; v = null;
} }
if ((v == null && editingValue == null) || JSON.stringify(v) === JSON.stringify(editingValue)) { if (v == null && editingValue == null) {
return; return;
} }
setEditingValue(v); setEditingValue(v);