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> & {
|
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(
|
||||||
|
@ -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();
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
Loading…
Reference in New Issue
Block a user