fix(plugin-formula): fix formula field effect and read-pretty component (#2076)
This commit is contained in:
parent
44549fdfee
commit
0606637a73
@ -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(
|
||||
|
@ -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();
|
||||
|
@ -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;
|
||||
|
@ -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,
|
||||
},
|
||||
);
|
||||
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user