@zat-design/sisyphus-react 3.7.3-beta.2 → 3.7.3-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.css +6 -6
- package/dist/less.esm.css +6 -6
- package/es/ProEditTable/components/RenderField/{ListChanged.d.ts → ListChangedWrapper.d.ts} +2 -2
- package/es/ProEditTable/components/RenderField/{ListChanged.js → ListChangedWrapper.js} +15 -10
- package/es/ProEditTable/components/RenderField/index.js +2 -2
- package/es/ProEnum/index.js +5 -4
- package/es/ProForm/components/combination/Container/index.js +5 -3
- package/es/ProForm/components/combination/Container/propsType.d.ts +2 -1
- package/es/ProForm/components/combination/ProNumberRange/index.js +3 -1
- package/{lib/ProForm/components/render/Changed.d.ts → es/ProForm/components/render/ChangedWrapper.d.ts} +4 -3
- package/es/ProForm/components/render/{Changed.js → ChangedWrapper.js} +37 -14
- package/es/ProForm/components/render/Render.js +6 -8
- package/es/ProForm/components/render/RenderFields.d.ts +2 -3
- package/es/ProForm/components/render/RenderFields.js +3 -4
- package/es/ProForm/components/render/propsType.d.ts +2 -2
- package/es/ProForm/index.js +3 -6
- package/es/ProForm/propsType.d.ts +12 -2
- package/es/ProForm/style/index.less +6 -6
- package/es/utils/index.d.ts +2 -0
- package/es/utils/index.js +13 -0
- package/lib/ProEditTable/components/RenderField/{ListChanged.d.ts → ListChangedWrapper.d.ts} +2 -2
- package/lib/ProEditTable/components/RenderField/{ListChanged.js → ListChangedWrapper.js} +18 -11
- package/lib/ProEditTable/components/RenderField/index.js +2 -2
- package/lib/ProEnum/index.js +5 -4
- package/lib/ProForm/components/combination/Container/index.js +5 -3
- package/lib/ProForm/components/combination/Container/propsType.d.ts +2 -1
- package/lib/ProForm/components/combination/ProNumberRange/index.js +3 -1
- package/{es/ProForm/components/render/Changed.d.ts → lib/ProForm/components/render/ChangedWrapper.d.ts} +4 -3
- package/lib/ProForm/components/render/{Changed.js → ChangedWrapper.js} +37 -14
- package/lib/ProForm/components/render/Render.js +6 -8
- package/lib/ProForm/components/render/RenderFields.d.ts +2 -3
- package/lib/ProForm/components/render/RenderFields.js +3 -4
- package/lib/ProForm/components/render/propsType.d.ts +2 -2
- package/lib/ProForm/index.js +3 -6
- package/lib/ProForm/propsType.d.ts +12 -2
- package/lib/ProForm/style/index.less +6 -6
- package/lib/utils/index.d.ts +2 -0
- package/lib/utils/index.js +19 -0
- package/package.json +1 -1
- /package/es/ProForm/utils/{useChanged.d.ts → _useChanged.d.ts} +0 -0
- /package/es/ProForm/utils/{useChanged.js → _useChanged.js} +0 -0
- /package/es/ProForm/utils/{useListChanged.d.ts → _useListChanged.d.ts} +0 -0
- /package/es/ProForm/utils/{useListChanged.js → _useListChanged.js} +0 -0
- /package/lib/ProForm/utils/{useChanged.d.ts → _useChanged.d.ts} +0 -0
- /package/lib/ProForm/utils/{useChanged.js → _useChanged.js} +0 -0
- /package/lib/ProForm/utils/{useListChanged.d.ts → _useListChanged.d.ts} +0 -0
- /package/lib/ProForm/utils/{useListChanged.js → _useListChanged.js} +0 -0
package/dist/index.esm.css
CHANGED
|
@@ -3063,7 +3063,7 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3063
3063
|
.pro-form .pro-form-item-changed .ant-select .ant-select-selector,
|
|
3064
3064
|
.pro-form .pro-form-item-changed .ant-picker,
|
|
3065
3065
|
.pro-form .pro-form-item-changed .ant-input-number {
|
|
3066
|
-
background: var(--zaui-contract-bg, #fffaa1) !important;
|
|
3066
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
|
|
3067
3067
|
}
|
|
3068
3068
|
.pro-form .pro-form-item-changed span.ant-input-affix-wrapper input,
|
|
3069
3069
|
.pro-form .pro-form-item-changed .ant-select .ant-select-selector input,
|
|
@@ -3079,25 +3079,25 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3079
3079
|
}
|
|
3080
3080
|
.pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-switch-handle),
|
|
3081
3081
|
.pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
|
|
3082
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3082
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3083
3083
|
border-radius: 4px;
|
|
3084
3084
|
}
|
|
3085
3085
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > span {
|
|
3086
3086
|
border-radius: 4px;
|
|
3087
3087
|
padding: 5px 8px;
|
|
3088
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3088
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3089
3089
|
}
|
|
3090
3090
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-select-selector,
|
|
3091
3091
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
|
|
3092
3092
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
|
|
3093
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3093
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3094
3094
|
}
|
|
3095
3095
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
|
|
3096
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3096
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3097
3097
|
}
|
|
3098
3098
|
.pro-form .pro-form-item-changed .pro-form-view-container {
|
|
3099
3099
|
padding: 4px 8px;
|
|
3100
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3100
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3101
3101
|
border-radius: 4px;
|
|
3102
3102
|
}
|
|
3103
3103
|
.pro-upload .pro-upload-dragger .pro-upload-handle-box {
|
package/dist/less.esm.css
CHANGED
|
@@ -3063,7 +3063,7 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3063
3063
|
.pro-form .pro-form-item-changed .ant-select .ant-select-selector,
|
|
3064
3064
|
.pro-form .pro-form-item-changed .ant-picker,
|
|
3065
3065
|
.pro-form .pro-form-item-changed .ant-input-number {
|
|
3066
|
-
background: var(--zaui-contract-bg, #fffaa1) !important;
|
|
3066
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
|
|
3067
3067
|
}
|
|
3068
3068
|
.pro-form .pro-form-item-changed span.ant-input-affix-wrapper input,
|
|
3069
3069
|
.pro-form .pro-form-item-changed .ant-select .ant-select-selector input,
|
|
@@ -3079,25 +3079,25 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3079
3079
|
}
|
|
3080
3080
|
.pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-switch-handle),
|
|
3081
3081
|
.pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
|
|
3082
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3082
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3083
3083
|
border-radius: 4px;
|
|
3084
3084
|
}
|
|
3085
3085
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > span {
|
|
3086
3086
|
border-radius: 4px;
|
|
3087
3087
|
padding: 5px 8px;
|
|
3088
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3088
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3089
3089
|
}
|
|
3090
3090
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-select-selector,
|
|
3091
3091
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
|
|
3092
3092
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
|
|
3093
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3093
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3094
3094
|
}
|
|
3095
3095
|
.pro-form .pro-form-item-changed .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
|
|
3096
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3096
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3097
3097
|
}
|
|
3098
3098
|
.pro-form .pro-form-item-changed .pro-form-view-container {
|
|
3099
3099
|
padding: 4px 8px;
|
|
3100
|
-
background: var(--zaui-contract-bg, #fffaa1);
|
|
3100
|
+
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3101
3101
|
border-radius: 4px;
|
|
3102
3102
|
}
|
|
3103
3103
|
.pro-upload .pro-upload-dragger .pro-upload-handle-box {
|
|
@@ -12,5 +12,5 @@ interface Props {
|
|
|
12
12
|
equalWith?: (preValue: any, curValue: any) => boolean | undefined;
|
|
13
13
|
[name: string]: any;
|
|
14
14
|
}
|
|
15
|
-
declare const
|
|
16
|
-
export default
|
|
15
|
+
declare const ListChangedWrapper: React.FC<Props>;
|
|
16
|
+
export default ListChangedWrapper;
|
|
@@ -9,6 +9,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
9
9
|
import React, { useMemo } from 'react';
|
|
10
10
|
import { get } from 'lodash';
|
|
11
11
|
import { diffOriginal } from '../../../ProForm/utils/diffOriginal';
|
|
12
|
+
import { useProConfig } from '../../../ProConfigProvider';
|
|
13
|
+
import { isEmpty } from '../../../utils';
|
|
12
14
|
var toNamePath = function toNamePath(name) {
|
|
13
15
|
if (Array.isArray(name)) {
|
|
14
16
|
return name;
|
|
@@ -61,7 +63,7 @@ var getOriginalValue = function getOriginalValue(_ref) {
|
|
|
61
63
|
return get(originalValues, originalName);
|
|
62
64
|
}) : get(originalValues, originalName);
|
|
63
65
|
};
|
|
64
|
-
var
|
|
66
|
+
var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
65
67
|
var name = props.name,
|
|
66
68
|
names = props.names,
|
|
67
69
|
namesStr = props.namesStr,
|
|
@@ -76,11 +78,13 @@ var ListChanged = function ListChanged(props) {
|
|
|
76
78
|
children = props.children,
|
|
77
79
|
type = props.type,
|
|
78
80
|
rest = _objectWithoutProperties(props, _excluded);
|
|
81
|
+
var _useProConfig = useProConfig('ProEditTable'),
|
|
82
|
+
isDiffAll = _useProConfig.isDiffAll;
|
|
79
83
|
var namePath = toNamePath(namesStr || name);
|
|
80
84
|
var originalNamePath = toNamePath(originalName);
|
|
81
85
|
var originalNamePaths = originalNames && toNamePaths(originalNames);
|
|
82
|
-
var
|
|
83
|
-
var originalValue =
|
|
86
|
+
var isWatch = originalValues && !['FormList', 'ProEditTable'].includes(type);
|
|
87
|
+
var originalValue = isWatch ? getOriginalValue({
|
|
84
88
|
namePath: namePath,
|
|
85
89
|
originalName: originalNamePath,
|
|
86
90
|
originalNames: originalNamePaths,
|
|
@@ -88,9 +92,9 @@ var ListChanged = function ListChanged(props) {
|
|
|
88
92
|
rowKeyPath: rowKeyPath,
|
|
89
93
|
form: form
|
|
90
94
|
}) : undefined;
|
|
91
|
-
var noChange = !equalWith && (!originalValues ||
|
|
92
|
-
var
|
|
93
|
-
if (
|
|
95
|
+
var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
|
|
96
|
+
var isChanged = useMemo(function () {
|
|
97
|
+
if (!isWatch || noChange) return false;
|
|
94
98
|
return diffOriginal({
|
|
95
99
|
value: props.value,
|
|
96
100
|
originalValue: originalValue,
|
|
@@ -99,11 +103,12 @@ var ListChanged = function ListChanged(props) {
|
|
|
99
103
|
// name: isString(namesStr) ? namesStr : originalName || name,
|
|
100
104
|
});
|
|
101
105
|
}, [props.value, originalValue]);
|
|
102
|
-
if (
|
|
106
|
+
if (!isWatch || noChange) {
|
|
103
107
|
return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
|
|
104
108
|
}
|
|
105
109
|
return _jsx(_Tooltip, {
|
|
106
|
-
|
|
110
|
+
// 传入undefined 鼠标移入显示移出隐藏
|
|
111
|
+
open: isChanged ? undefined : false,
|
|
107
112
|
getPopupContainer: function getPopupContainer(target) {
|
|
108
113
|
return target.parentElement;
|
|
109
114
|
},
|
|
@@ -116,9 +121,9 @@ var ListChanged = function ListChanged(props) {
|
|
|
116
121
|
})) : undefined]
|
|
117
122
|
}),
|
|
118
123
|
children: _jsx("div", {
|
|
119
|
-
className:
|
|
124
|
+
className: isChanged ? 'pro-form-item-changed' : '',
|
|
120
125
|
children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
|
|
121
126
|
})
|
|
122
127
|
});
|
|
123
128
|
};
|
|
124
|
-
export default
|
|
129
|
+
export default ListChangedWrapper;
|
|
@@ -25,7 +25,7 @@ import useRules from '../../../ProForm/utils/useRules';
|
|
|
25
25
|
import { isSelect, isTrim } from '../../../ProForm/utils';
|
|
26
26
|
import ConfirmWrapper from '../../../ProForm/components/render/ConfirmWrapper';
|
|
27
27
|
import { getDefaultProps } from '../../utils/getDefaultProps';
|
|
28
|
-
import
|
|
28
|
+
import ListChangedWrapper from './ListChangedWrapper';
|
|
29
29
|
var RenderField = function RenderField(_ref) {
|
|
30
30
|
var _type, _type$replace, _fieldProps2, _names, _TargetComponent4, _componentProps2;
|
|
31
31
|
var value = _ref.text,
|
|
@@ -547,7 +547,7 @@ var RenderField = function RenderField(_ref) {
|
|
|
547
547
|
var FormItem = null;
|
|
548
548
|
var FieldComponent = /*#__PURE__*/React.isValidElement(TargetComponent) ? ( /*#__PURE__*/React.cloneElement(TargetComponent, componentProps)) : _jsx(TargetComponent, _objectSpread({}, componentProps));
|
|
549
549
|
if (originalValues) {
|
|
550
|
-
FieldComponent = _jsx(
|
|
550
|
+
FieldComponent = _jsx(ListChangedWrapper, {
|
|
551
551
|
name: cellName,
|
|
552
552
|
names: names,
|
|
553
553
|
namesStr: [].concat(_toConsumableArray(baseName), [index, dataIndex]),
|
package/es/ProEnum/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
11
11
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
12
12
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
13
13
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
14
|
-
var _excluded = ["code", "type", "dataSource", "useRequest", "value", "component", "onChange", "transformResponse", "otherProps"],
|
|
14
|
+
var _excluded = ["code", "type", "dataSource", "useRequest", "value", "component", "onChange", "transformResponse", "otherProps", "isView"],
|
|
15
15
|
_excluded2 = ["fieldNames", "clear", "cacheKey", "showCodeName"];
|
|
16
16
|
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
17
17
|
import { useDeepCompareEffect, useRequest as useRequestFunc } from 'ahooks';
|
|
@@ -39,10 +39,11 @@ var ProEnum = function ProEnum(props) {
|
|
|
39
39
|
onChange = props.onChange,
|
|
40
40
|
transformResponse = props.transformResponse,
|
|
41
41
|
otherProps = props.otherProps,
|
|
42
|
+
isView = props.isView,
|
|
42
43
|
enumProps = _objectWithoutProperties(props, _excluded);
|
|
43
44
|
var _ref = otherProps || {},
|
|
44
|
-
isView = _ref.isView,
|
|
45
45
|
viewEmpty = _ref.viewEmpty;
|
|
46
|
+
var _isView = isView || otherProps.isView;
|
|
46
47
|
var _ref2 = useProConfig('ProEnum') || {},
|
|
47
48
|
fieldNames = _ref2.fieldNames,
|
|
48
49
|
_ref2$clear = _ref2.clear,
|
|
@@ -226,7 +227,7 @@ var ProEnum = function ProEnum(props) {
|
|
|
226
227
|
if (!code && !dataSource && !useRequest) {
|
|
227
228
|
var _locale$ProEnum4;
|
|
228
229
|
_message.error(locale === null || locale === void 0 ? void 0 : (_locale$ProEnum4 = locale.ProEnum) === null || _locale$ProEnum4 === void 0 ? void 0 : _locale$ProEnum4.errorNoEnumType);
|
|
229
|
-
return;
|
|
230
|
+
// return;
|
|
230
231
|
}
|
|
231
232
|
var transToLabel = function transToLabel(value) {
|
|
232
233
|
var list = dataList && dataList.length ? dataList : enumLists;
|
|
@@ -271,7 +272,7 @@ var ProEnum = function ProEnum(props) {
|
|
|
271
272
|
};
|
|
272
273
|
return isFunction(props.optionRender) && record.length ? _optionRender() : labelList === null || labelList === void 0 ? void 0 : labelList.join(',');
|
|
273
274
|
};
|
|
274
|
-
if (
|
|
275
|
+
if (_isView) {
|
|
275
276
|
if (Array.isArray(value)) {
|
|
276
277
|
return _jsx(Container, {
|
|
277
278
|
tooltip: true,
|
|
@@ -9,11 +9,12 @@ import ProCollapse from '../../../../ProLayout/components/ProCollapse';
|
|
|
9
9
|
import ProForm from '../../../../ProForm';
|
|
10
10
|
var Container = function Container(props) {
|
|
11
11
|
var children = props.children,
|
|
12
|
-
otherProps = props.otherProps,
|
|
13
12
|
className = props.className,
|
|
14
13
|
container = props.container,
|
|
15
14
|
show = props.show,
|
|
16
|
-
clearNotShow = props.clearNotShow
|
|
15
|
+
clearNotShow = props.clearNotShow,
|
|
16
|
+
diffConfig = props.diffConfig,
|
|
17
|
+
otherProps = props.otherProps;
|
|
17
18
|
var _ref = ProForm.useFieldProps() || {},
|
|
18
19
|
type = _ref.type,
|
|
19
20
|
form = _ref.form,
|
|
@@ -38,7 +39,8 @@ var Container = function Container(props) {
|
|
|
38
39
|
var childRender = function childRender() {
|
|
39
40
|
var child = _jsx(RenderFields, _objectSpread({
|
|
40
41
|
columns: _children,
|
|
41
|
-
form: form
|
|
42
|
+
form: form,
|
|
43
|
+
diffConfig: diffConfig
|
|
42
44
|
}, otherProps));
|
|
43
45
|
if (type === 'ProCollapse') {
|
|
44
46
|
return _jsx(ProCollapse, _objectSpread(_objectSpread({}, omit(props, ['otherProps', 'children', 'onBlur', 'onChange', 'placeholder', 'className'])), {}, {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { RowProps } from 'antd';
|
|
3
|
-
import { ProColumnProps, ProFormOtherProps } from '../../../propsType';
|
|
3
|
+
import { ProColumnProps, ProFormOtherProps, DiffConfigProps } from '../../../propsType';
|
|
4
4
|
export interface ContainerProps {
|
|
5
5
|
children?: ProColumnProps[];
|
|
6
6
|
otherProps?: ProFormOtherProps;
|
|
@@ -8,5 +8,6 @@ export interface ContainerProps {
|
|
|
8
8
|
className?: string;
|
|
9
9
|
container?: string | React.ReactNode;
|
|
10
10
|
show?: boolean | (() => boolean);
|
|
11
|
+
diffConfig?: DiffConfigProps;
|
|
11
12
|
clearNotShow?: boolean;
|
|
12
13
|
}
|
|
@@ -91,7 +91,9 @@ var ProNumberRange = function ProNumberRange(props) {
|
|
|
91
91
|
});
|
|
92
92
|
// 查看模式
|
|
93
93
|
if (isView || props.isView) {
|
|
94
|
-
if (isEmpty(value)) {
|
|
94
|
+
if (isEmpty(value) || (value === null || value === void 0 ? void 0 : value.every(function (item) {
|
|
95
|
+
return typeof item !== 'number';
|
|
96
|
+
}))) {
|
|
95
97
|
return viewEmpty;
|
|
96
98
|
}
|
|
97
99
|
switch (valueType) {
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { FormInstance } from 'antd';
|
|
2
2
|
import { NamePath } from 'antd/lib/form/interface';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { DiffConfigProps } from '../../propsType';
|
|
4
5
|
interface Props {
|
|
5
6
|
name?: NamePath;
|
|
6
7
|
names?: NamePath[];
|
|
7
8
|
namesStr?: string;
|
|
8
|
-
|
|
9
|
+
diffConfig?: DiffConfigProps;
|
|
9
10
|
form: FormInstance;
|
|
10
11
|
equalWith?: (preValue: any, curValue: any) => boolean | undefined;
|
|
11
12
|
[name: string]: any;
|
|
12
13
|
}
|
|
13
|
-
declare const
|
|
14
|
-
export default
|
|
14
|
+
declare const ChangedWrapper: React.FC<Props>;
|
|
15
|
+
export default ChangedWrapper;
|
|
@@ -4,30 +4,40 @@ import "antd/es/tooltip/style";
|
|
|
4
4
|
import _Tooltip from "antd/es/tooltip";
|
|
5
5
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
6
6
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
7
|
-
var _excluded = ["name", "names", "namesStr", "
|
|
7
|
+
var _excluded = ["name", "names", "namesStr", "form", "equalWith", "children", "type", "diffConfig"];
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
import { get } from 'lodash';
|
|
10
10
|
import React, { useMemo } from 'react';
|
|
11
11
|
import { diffOriginal } from '../../utils/diffOriginal';
|
|
12
|
-
|
|
12
|
+
import { useProConfig } from '../../../ProConfigProvider';
|
|
13
|
+
import { isEmpty } from '../../../utils';
|
|
14
|
+
var ChangedWrapper = function ChangedWrapper(props) {
|
|
15
|
+
var _diffConfig$toolTip;
|
|
13
16
|
var name = props.name,
|
|
14
17
|
names = props.names,
|
|
15
18
|
namesStr = props.namesStr,
|
|
16
|
-
originalValues = props.originalValues,
|
|
17
19
|
form = props.form,
|
|
18
20
|
equalWith = props.equalWith,
|
|
19
21
|
children = props.children,
|
|
20
22
|
type = props.type,
|
|
21
|
-
|
|
23
|
+
diffConfig = props.diffConfig,
|
|
22
24
|
rest = _objectWithoutProperties(props, _excluded);
|
|
25
|
+
var _useProConfig = useProConfig('ProForm'),
|
|
26
|
+
isDiffAll = _useProConfig.isDiffAll;
|
|
27
|
+
var originalValues = diffConfig.originalValues,
|
|
28
|
+
_diffConfig$changeTip = diffConfig.changeTipColor,
|
|
29
|
+
changeTipColor = _diffConfig$changeTip === void 0 ? '#fffaa1' : _diffConfig$changeTip,
|
|
30
|
+
_diffConfig$addTipCol = diffConfig.addTipColor,
|
|
31
|
+
addTipColor = _diffConfig$addTipCol === void 0 ? '#d2fff4' : _diffConfig$addTipCol;
|
|
32
|
+
var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
|
|
23
33
|
// 不渲染tooltip
|
|
24
|
-
var
|
|
34
|
+
var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
|
|
25
35
|
var originalValue = (names === null || names === void 0 ? void 0 : names.length) ? names.map(function (name) {
|
|
26
36
|
return get(originalValues, name);
|
|
27
37
|
}) : get(originalValues, name);
|
|
28
|
-
var noChange = !equalWith && (!originalValues ||
|
|
29
|
-
var
|
|
30
|
-
if (
|
|
38
|
+
var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
|
|
39
|
+
var isChanged = useMemo(function () {
|
|
40
|
+
if (!isWatch || noChange) return false;
|
|
31
41
|
return diffOriginal({
|
|
32
42
|
originalValue: originalValue,
|
|
33
43
|
value: props.value,
|
|
@@ -35,30 +45,43 @@ var Changed = function Changed(props) {
|
|
|
35
45
|
equalWith: equalWith
|
|
36
46
|
// name: namesStr || name,
|
|
37
47
|
});
|
|
38
|
-
}, [
|
|
48
|
+
}, [isWatch, noChange, props.value, originalValue]);
|
|
39
49
|
var tipContent = useMemo(function () {
|
|
40
|
-
if (
|
|
50
|
+
if (!isWatch || noChange) return undefined;
|
|
41
51
|
return /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
|
|
42
52
|
isView: true,
|
|
43
53
|
value: originalValue,
|
|
44
54
|
checked: type === 'Switch' ? originalValue : undefined
|
|
45
55
|
})) : undefined;
|
|
46
56
|
}, [originalValue, children]);
|
|
47
|
-
if (
|
|
57
|
+
if (!isWatch || noChange) {
|
|
48
58
|
return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
|
|
49
59
|
}
|
|
60
|
+
var tipOpenCalc = function tipOpenCalc() {
|
|
61
|
+
if (!toolTip) {
|
|
62
|
+
return false;
|
|
63
|
+
}
|
|
64
|
+
// 传入undefined 鼠标移入显示移出隐藏
|
|
65
|
+
return isChanged ? undefined : false;
|
|
66
|
+
};
|
|
67
|
+
var style = {
|
|
68
|
+
'--change-tip-color': changeTipColor || '@zaui-contract-bg',
|
|
69
|
+
'--add-tip-color': addTipColor || '@zaui-contract-bg'
|
|
70
|
+
};
|
|
50
71
|
return _jsx(_Tooltip, {
|
|
51
|
-
open:
|
|
72
|
+
open: tipOpenCalc(),
|
|
52
73
|
getPopupContainer: function getPopupContainer(target) {
|
|
53
74
|
return target.parentElement;
|
|
54
75
|
},
|
|
55
76
|
title: _jsxs(_Space, {
|
|
56
77
|
children: ["\u521D\u59CB\u503C\uFF1A", tipContent]
|
|
57
78
|
}),
|
|
79
|
+
placement: "topLeft",
|
|
58
80
|
children: _jsx("div", {
|
|
59
|
-
className:
|
|
81
|
+
className: isChanged ? 'pro-form-item-changed' : '',
|
|
82
|
+
style: style,
|
|
60
83
|
children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
|
|
61
84
|
})
|
|
62
85
|
});
|
|
63
86
|
};
|
|
64
|
-
export default
|
|
87
|
+
export default ChangedWrapper;
|
|
@@ -28,7 +28,7 @@ import valueTypeMap from '../../utils/valueType';
|
|
|
28
28
|
import tipSvg from '../../../assets/tip.svg';
|
|
29
29
|
import useRules from '../../utils/useRules';
|
|
30
30
|
import ConfirmWrapper from './ConfirmWrapper';
|
|
31
|
-
import
|
|
31
|
+
import ChangedWrapper from './ChangedWrapper';
|
|
32
32
|
// 这个组件只管渲染, 参数的整理在外部处理
|
|
33
33
|
var Render = function Render(props) {
|
|
34
34
|
var _ref2, _ref3, _ref4, _ref5, _otherProps$names2;
|
|
@@ -46,12 +46,11 @@ var Render = function Render(props) {
|
|
|
46
46
|
formDisabled = props.formDisabled,
|
|
47
47
|
type = props.type,
|
|
48
48
|
isSelect = props.isSelect,
|
|
49
|
-
originalValues = props.originalValues,
|
|
50
49
|
equalWith = props.equalWith,
|
|
51
50
|
requiredOnView = props.requiredOnView,
|
|
52
|
-
originalDiffTip = props.originalDiffTip,
|
|
53
51
|
confirm = props.confirm,
|
|
54
|
-
globalControl = props.globalControl
|
|
52
|
+
globalControl = props.globalControl,
|
|
53
|
+
diffConfig = props.diffConfig;
|
|
55
54
|
var colProps = props.colProps;
|
|
56
55
|
// 剔除一些不是FormItem的属性, 防止控制台报warning
|
|
57
56
|
var labelWidth = formItemProps.labelWidth,
|
|
@@ -427,15 +426,14 @@ var Render = function Render(props) {
|
|
|
427
426
|
span: 24 // 默认占一行
|
|
428
427
|
});
|
|
429
428
|
}
|
|
430
|
-
if (
|
|
431
|
-
child = _jsx(
|
|
429
|
+
if (diffConfig) {
|
|
430
|
+
child = _jsx(ChangedWrapper, {
|
|
432
431
|
name: formItemProps.name,
|
|
433
432
|
names: otherProps.names,
|
|
434
433
|
namesStr: namesStr,
|
|
435
|
-
|
|
434
|
+
diffConfig: diffConfig,
|
|
436
435
|
form: form,
|
|
437
436
|
equalWith: equalWith,
|
|
438
|
-
originalDiffTip: originalDiffTip,
|
|
439
437
|
type: type,
|
|
440
438
|
onChange: handleChange,
|
|
441
439
|
children: child
|
|
@@ -2,7 +2,7 @@ import { ColProps } from 'antd';
|
|
|
2
2
|
import { FormInstance } from 'antd/es/form/Form';
|
|
3
3
|
import React from 'react';
|
|
4
4
|
import { ProColumnProps } from './propsType';
|
|
5
|
-
import {
|
|
5
|
+
import { DiffConfigProps } from '../../propsType';
|
|
6
6
|
interface Props<T = any> {
|
|
7
7
|
isView?: boolean;
|
|
8
8
|
columns: ProColumnProps[];
|
|
@@ -13,11 +13,10 @@ interface Props<T = any> {
|
|
|
13
13
|
viewEmpty?: React.ReactNode;
|
|
14
14
|
openState?: boolean;
|
|
15
15
|
labelWidth?: string | number;
|
|
16
|
-
|
|
16
|
+
diffConfig?: DiffConfigProps;
|
|
17
17
|
clearNotShow?: boolean;
|
|
18
18
|
requiredOnView?: boolean;
|
|
19
19
|
required?: boolean | boolean[] | (() => boolean | boolean[]);
|
|
20
|
-
originalDiffTip?: boolean;
|
|
21
20
|
globalControl?: boolean;
|
|
22
21
|
}
|
|
23
22
|
declare const RenderFields: React.FC<Props>;
|
|
@@ -22,11 +22,10 @@ var RenderFields = function RenderFields(props) {
|
|
|
22
22
|
viewEmpty = _props$viewEmpty === void 0 ? '-' : _props$viewEmpty,
|
|
23
23
|
openState = props.openState,
|
|
24
24
|
labelWidth = props.labelWidth,
|
|
25
|
-
originalValues = props.originalValues,
|
|
26
25
|
outerClearNotShow = props.clearNotShow,
|
|
27
26
|
requiredOnView = props.requiredOnView,
|
|
28
27
|
required = props.required,
|
|
29
|
-
|
|
28
|
+
diffConfig = props.diffConfig,
|
|
30
29
|
globalControl = props.globalControl;
|
|
31
30
|
// 是否包含隐藏字段
|
|
32
31
|
var hiddenData = columns.filter(function (item) {
|
|
@@ -154,6 +153,7 @@ var RenderFields = function RenderFields(props) {
|
|
|
154
153
|
if (['ProCollapse', 'Container'].includes(_type)) {
|
|
155
154
|
componentProps.show = show;
|
|
156
155
|
componentProps.clearNotShow = clearNotShow;
|
|
156
|
+
componentProps.diffConfig = diffConfig;
|
|
157
157
|
}
|
|
158
158
|
// switch与SwitchCheckbox单独添加valuePropName
|
|
159
159
|
if (['Switch', 'SwitchCheckbox'].includes(_type)) {
|
|
@@ -206,10 +206,9 @@ var RenderFields = function RenderFields(props) {
|
|
|
206
206
|
otherProps: otherProps,
|
|
207
207
|
fieldProps: isFunction(fieldProps) ? fieldProps : null,
|
|
208
208
|
isSelect: _isSelect,
|
|
209
|
-
|
|
209
|
+
diffConfig: diffConfig,
|
|
210
210
|
equalWith: equalWith,
|
|
211
211
|
requiredOnView: requiredOnView,
|
|
212
|
-
originalDiffTip: originalDiffTip,
|
|
213
212
|
globalControl: globalControl
|
|
214
213
|
})
|
|
215
214
|
}, "".concat(_formItemProps.name || _formItemProps.label).concat(index));
|
|
@@ -30,7 +30,7 @@ import { ProUploadProps } from '../../../ProUpload/propsType';
|
|
|
30
30
|
import { ProTreeProps } from '../../../ProTree/propsType';
|
|
31
31
|
import { GroupProps as GroupCopyProps } from '../combination/Group/propsType';
|
|
32
32
|
import { ProCollapseProps } from '../../../ProLayout/components/ProCollapse/PropTypes';
|
|
33
|
-
import { DistributiveOmit } from '../../propsType';
|
|
33
|
+
import { DistributiveOmit, DiffConfigProps } from '../../propsType';
|
|
34
34
|
export type ComponentMap = keyof typeof componentMap;
|
|
35
35
|
type ValidateKey = keyof typeof validate;
|
|
36
36
|
type RegExpKey = keyof typeof regExp;
|
|
@@ -267,7 +267,7 @@ export interface RenderProps<Values = any> {
|
|
|
267
267
|
form: FormInstance<Values>;
|
|
268
268
|
fieldProps?: ReactiveFunction<Values, React.ReactNode>;
|
|
269
269
|
isSelect: boolean;
|
|
270
|
-
|
|
270
|
+
diffConfig: DiffConfigProps;
|
|
271
271
|
requiredOnView?: boolean;
|
|
272
272
|
confirm?: ProFormColumnProps['confirm'];
|
|
273
273
|
globalControl?: boolean;
|
package/es/ProForm/index.js
CHANGED
|
@@ -11,7 +11,7 @@ import _Space from "antd/es/space";
|
|
|
11
11
|
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
12
12
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
13
13
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
14
|
-
var _excluded = ["mode", "span", "disabled", "isView", "columns", "footer", "onOk", "okText", "onCancel", "confirmLoading", "cancelText", "form", "children", "rowProps", "className", "expand", "expandOpen", "expandOpenChange", "viewEmpty", "labelAlign", "labelWidth", "onValuesChange", "onFinish", "
|
|
14
|
+
var _excluded = ["mode", "span", "disabled", "isView", "columns", "footer", "onOk", "okText", "onCancel", "confirmLoading", "cancelText", "form", "children", "rowProps", "className", "expand", "expandOpen", "expandOpenChange", "viewEmpty", "labelAlign", "labelWidth", "onValuesChange", "onFinish", "diffConfig", "submitOnEnter", "clearNotShow", "initialValues", "requiredOnView", "formId", "required", "formKey", "globalControl", "scrollToError", "optimize"];
|
|
15
15
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
16
|
import { DoubleLeftOutlined } from '@ant-design/icons';
|
|
17
17
|
import classnames from 'classnames';
|
|
@@ -53,7 +53,7 @@ var ProForm = function ProForm(props, ref) {
|
|
|
53
53
|
labelWidth = props.labelWidth,
|
|
54
54
|
onValuesChange = props.onValuesChange,
|
|
55
55
|
onFinish = props.onFinish,
|
|
56
|
-
|
|
56
|
+
diffConfig = props.diffConfig,
|
|
57
57
|
submitOnEnter = props.submitOnEnter,
|
|
58
58
|
_props$clearNotShow = props.clearNotShow,
|
|
59
59
|
clearNotShow = _props$clearNotShow === void 0 ? true : _props$clearNotShow,
|
|
@@ -62,8 +62,6 @@ var ProForm = function ProForm(props, ref) {
|
|
|
62
62
|
requiredOnView = _props$requiredOnView === void 0 ? true : _props$requiredOnView,
|
|
63
63
|
formId = props.formId,
|
|
64
64
|
required = props.required,
|
|
65
|
-
_props$originalDiffTi = props.originalDiffTip,
|
|
66
|
-
originalDiffTip = _props$originalDiffTi === void 0 ? true : _props$originalDiffTi,
|
|
67
65
|
formKey = props.formKey,
|
|
68
66
|
globalControl = props.globalControl,
|
|
69
67
|
_props$scrollToError = props.scrollToError,
|
|
@@ -261,11 +259,10 @@ var ProForm = function ProForm(props, ref) {
|
|
|
261
259
|
colProps: colProps,
|
|
262
260
|
viewEmpty: viewEmpty,
|
|
263
261
|
labelWidth: labelWidth,
|
|
264
|
-
|
|
262
|
+
diffConfig: diffConfig,
|
|
265
263
|
clearNotShow: clearNotShow,
|
|
266
264
|
requiredOnView: requiredOnView,
|
|
267
265
|
required: required,
|
|
268
|
-
originalDiffTip: originalDiffTip,
|
|
269
266
|
globalControl: globalControl
|
|
270
267
|
}), footerRender()]
|
|
271
268
|
})), children]
|
|
@@ -45,6 +45,16 @@ export interface ProFormOtherProps {
|
|
|
45
45
|
globalControl?: boolean;
|
|
46
46
|
formDisabled?: boolean;
|
|
47
47
|
}
|
|
48
|
+
export interface DiffConfigProps<Values = any> {
|
|
49
|
+
/** 比对原始数据源 */
|
|
50
|
+
originalValues: Values;
|
|
51
|
+
/** 是否显示对比值气泡 */
|
|
52
|
+
toolTip?: boolean;
|
|
53
|
+
/** 变更提示颜色 */
|
|
54
|
+
changeTipColor?: string;
|
|
55
|
+
/** 新增提示颜色 */
|
|
56
|
+
addTipColor?: string;
|
|
57
|
+
}
|
|
48
58
|
export interface ProFormProps<Values = any> extends FormProps<Values> {
|
|
49
59
|
disabled?: boolean;
|
|
50
60
|
/** 全局控制优先 */
|
|
@@ -67,14 +77,14 @@ export interface ProFormProps<Values = any> extends FormProps<Values> {
|
|
|
67
77
|
viewEmpty?: React.ReactNode | string;
|
|
68
78
|
confirmLoading?: boolean;
|
|
69
79
|
labelWidth?: string | number;
|
|
70
|
-
originalValues?: Values;
|
|
71
80
|
/** 是否回车提交 */
|
|
72
81
|
submitOnEnter?: boolean;
|
|
73
82
|
clearNotShow?: boolean;
|
|
74
83
|
requiredOnView?: boolean;
|
|
75
84
|
formId?: string;
|
|
76
85
|
required?: boolean | boolean[];
|
|
77
|
-
|
|
86
|
+
/** 表单比对配置 */
|
|
87
|
+
diffConfig?: DiffConfigProps;
|
|
78
88
|
scrollToError?: boolean;
|
|
79
89
|
/** 性能模式,谨慎使用,默认不开启
|
|
80
90
|
* 1. 开启不过滤names的中间态值
|
|
@@ -328,7 +328,7 @@
|
|
|
328
328
|
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
329
329
|
.@{ant-prefix}-picker,
|
|
330
330
|
.@{ant-prefix}-input-number {
|
|
331
|
-
background: @zaui-contract-bg !important;
|
|
331
|
+
background: var(--change-tip-color, @zaui-contract-bg) !important;
|
|
332
332
|
|
|
333
333
|
input {
|
|
334
334
|
background: transparent !important;
|
|
@@ -340,7 +340,7 @@
|
|
|
340
340
|
|
|
341
341
|
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
|
|
342
342
|
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
|
|
343
|
-
background: @zaui-contract-bg;
|
|
343
|
+
background: var(--change-tip-color, @zaui-contract-bg);
|
|
344
344
|
border-radius: 4px;
|
|
345
345
|
}
|
|
346
346
|
|
|
@@ -350,26 +350,26 @@
|
|
|
350
350
|
& > span {
|
|
351
351
|
border-radius: 4px;
|
|
352
352
|
padding: 5px 8px;
|
|
353
|
-
background: @zaui-contract-bg;
|
|
353
|
+
background: var(--change-tip-color, @zaui-contract-bg);
|
|
354
354
|
}
|
|
355
355
|
|
|
356
356
|
& > .pro-address {
|
|
357
357
|
.@{ant-prefix}-select-selector,
|
|
358
358
|
.@{ant-prefix}-input-affix-wrapper,
|
|
359
359
|
.@{ant-prefix}-input-disabled {
|
|
360
|
-
background: @zaui-contract-bg;
|
|
360
|
+
background: var(--change-tip-color, @zaui-contract-bg);
|
|
361
361
|
}
|
|
362
362
|
}
|
|
363
363
|
& > .@{ant-prefix}-input-group {
|
|
364
364
|
.forever-checkbox {
|
|
365
|
-
background: @zaui-contract-bg;
|
|
365
|
+
background: var(--change-tip-color, @zaui-contract-bg);
|
|
366
366
|
}
|
|
367
367
|
}
|
|
368
368
|
}
|
|
369
369
|
|
|
370
370
|
.pro-form-view-container {
|
|
371
371
|
padding: 4px 8px;
|
|
372
|
-
background: @zaui-contract-bg;
|
|
372
|
+
background: var(--change-tip-color, @zaui-contract-bg);
|
|
373
373
|
border-radius: 4px;
|
|
374
374
|
}
|
|
375
375
|
}
|