@zat-design/sisyphus-react 3.7.3-beta.4 → 3.7.3-beta.5
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 +41 -0
- package/dist/less.esm.css +41 -0
- package/es/ProEditTable/components/RenderField/ListChangedWrapper.d.ts +2 -1
- package/es/ProEditTable/components/RenderField/ListChangedWrapper.js +12 -5
- package/es/ProForm/components/render/ChangedWrapper.d.ts +2 -1
- package/es/ProForm/components/render/ChangedWrapper.js +11 -6
- package/es/ProForm/components/render/propsType.d.ts +2 -1
- package/es/ProForm/style/index.less +53 -0
- package/es/ProForm/utils/diffOriginal.d.ts +4 -4
- package/es/ProForm/utils/diffOriginal.js +18 -7
- package/lib/ProEditTable/components/RenderField/ListChangedWrapper.d.ts +2 -1
- package/lib/ProEditTable/components/RenderField/ListChangedWrapper.js +12 -5
- package/lib/ProForm/components/render/ChangedWrapper.d.ts +2 -1
- package/lib/ProForm/components/render/ChangedWrapper.js +11 -6
- package/lib/ProForm/components/render/propsType.d.ts +2 -1
- package/lib/ProForm/style/index.less +53 -0
- package/lib/ProForm/utils/diffOriginal.d.ts +4 -4
- package/lib/ProForm/utils/diffOriginal.js +18 -7
- package/package.json +1 -1
- package/.vscode/extensions.json +0 -5
package/dist/index.esm.css
CHANGED
|
@@ -3100,6 +3100,47 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3100
3100
|
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3101
3101
|
border-radius: 4px;
|
|
3102
3102
|
}
|
|
3103
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper,
|
|
3104
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector,
|
|
3105
|
+
.pro-form .pro-form-item-add .ant-picker,
|
|
3106
|
+
.pro-form .pro-form-item-add .ant-input-number {
|
|
3107
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
|
|
3108
|
+
}
|
|
3109
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper input,
|
|
3110
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector input,
|
|
3111
|
+
.pro-form .pro-form-item-add .ant-picker input,
|
|
3112
|
+
.pro-form .pro-form-item-add .ant-input-number input {
|
|
3113
|
+
background: transparent !important;
|
|
3114
|
+
}
|
|
3115
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper .ant-select-selection-placeholder,
|
|
3116
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector .ant-select-selection-placeholder,
|
|
3117
|
+
.pro-form .pro-form-item-add .ant-picker .ant-select-selection-placeholder,
|
|
3118
|
+
.pro-form .pro-form-item-add .ant-input-number .ant-select-selection-placeholder {
|
|
3119
|
+
z-index: 9;
|
|
3120
|
+
}
|
|
3121
|
+
.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-switch-handle),
|
|
3122
|
+
.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
|
|
3123
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3124
|
+
border-radius: 4px;
|
|
3125
|
+
}
|
|
3126
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > span {
|
|
3127
|
+
border-radius: 4px;
|
|
3128
|
+
padding: 5px 8px;
|
|
3129
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3130
|
+
}
|
|
3131
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-select-selector,
|
|
3132
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
|
|
3133
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
|
|
3134
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3135
|
+
}
|
|
3136
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
|
|
3137
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3138
|
+
}
|
|
3139
|
+
.pro-form .pro-form-item-add .pro-form-view-container {
|
|
3140
|
+
padding: 4px 8px;
|
|
3141
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3142
|
+
border-radius: 4px;
|
|
3143
|
+
}
|
|
3103
3144
|
.pro-upload .pro-upload-dragger .pro-upload-handle-box {
|
|
3104
3145
|
padding: var(--zaui-space-size-sm, 8px);
|
|
3105
3146
|
background: #f8f9fa;
|
package/dist/less.esm.css
CHANGED
|
@@ -3100,6 +3100,47 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
|
|
|
3100
3100
|
background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3101
3101
|
border-radius: 4px;
|
|
3102
3102
|
}
|
|
3103
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper,
|
|
3104
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector,
|
|
3105
|
+
.pro-form .pro-form-item-add .ant-picker,
|
|
3106
|
+
.pro-form .pro-form-item-add .ant-input-number {
|
|
3107
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
|
|
3108
|
+
}
|
|
3109
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper input,
|
|
3110
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector input,
|
|
3111
|
+
.pro-form .pro-form-item-add .ant-picker input,
|
|
3112
|
+
.pro-form .pro-form-item-add .ant-input-number input {
|
|
3113
|
+
background: transparent !important;
|
|
3114
|
+
}
|
|
3115
|
+
.pro-form .pro-form-item-add span.ant-input-affix-wrapper .ant-select-selection-placeholder,
|
|
3116
|
+
.pro-form .pro-form-item-add .ant-select .ant-select-selector .ant-select-selection-placeholder,
|
|
3117
|
+
.pro-form .pro-form-item-add .ant-picker .ant-select-selection-placeholder,
|
|
3118
|
+
.pro-form .pro-form-item-add .ant-input-number .ant-select-selection-placeholder {
|
|
3119
|
+
z-index: 9;
|
|
3120
|
+
}
|
|
3121
|
+
.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-switch-handle),
|
|
3122
|
+
.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
|
|
3123
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3124
|
+
border-radius: 4px;
|
|
3125
|
+
}
|
|
3126
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > span {
|
|
3127
|
+
border-radius: 4px;
|
|
3128
|
+
padding: 5px 8px;
|
|
3129
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3130
|
+
}
|
|
3131
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-select-selector,
|
|
3132
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
|
|
3133
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
|
|
3134
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3135
|
+
}
|
|
3136
|
+
.pro-form .pro-form-item-add .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
|
|
3137
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3138
|
+
}
|
|
3139
|
+
.pro-form .pro-form-item-add .pro-form-view-container {
|
|
3140
|
+
padding: 4px 8px;
|
|
3141
|
+
background: var(--add-tip-color, var(--zaui-contract-bg, #fffaa1));
|
|
3142
|
+
border-radius: 4px;
|
|
3143
|
+
}
|
|
3103
3144
|
.pro-upload .pro-upload-dragger .pro-upload-handle-box {
|
|
3104
3145
|
padding: var(--zaui-space-size-sm, 8px);
|
|
3105
3146
|
background: #f8f9fa;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormInstance } from 'antd';
|
|
3
3
|
import { NamePath } from 'antd/lib/form/interface';
|
|
4
|
+
import { DiffOriginalParams } from '../../../ProForm/utils/diffOriginal';
|
|
4
5
|
interface Props {
|
|
5
6
|
name?: NamePath;
|
|
6
7
|
names?: NamePath[];
|
|
@@ -9,7 +10,7 @@ interface Props {
|
|
|
9
10
|
namesStr?: NamePath;
|
|
10
11
|
originalValues?: any;
|
|
11
12
|
form: FormInstance;
|
|
12
|
-
equalWith?:
|
|
13
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
13
14
|
[name: string]: any;
|
|
14
15
|
}
|
|
15
16
|
declare const ListChangedWrapper: React.FC<Props>;
|
|
@@ -7,6 +7,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
|
|
|
7
7
|
var _excluded = ["name", "names", "namesStr", "originalName", "originalNames", "originalValues", "form", "equalWith", "rowKeyPath", "children", "type"];
|
|
8
8
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
9
|
import React, { useMemo } from 'react';
|
|
10
|
+
import classNames from 'classnames';
|
|
10
11
|
import { get } from 'lodash';
|
|
11
12
|
import { diffOriginal } from '../../../ProForm/utils/diffOriginal';
|
|
12
13
|
import { useProConfig } from '../../../ProConfigProvider';
|
|
@@ -78,8 +79,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
78
79
|
children = props.children,
|
|
79
80
|
type = props.type,
|
|
80
81
|
rest = _objectWithoutProperties(props, _excluded);
|
|
81
|
-
var
|
|
82
|
-
isDiffAll =
|
|
82
|
+
var _ref2 = useProConfig('ProEditTable') || {},
|
|
83
|
+
isDiffAll = _ref2.isDiffAll;
|
|
83
84
|
var namePath = toNamePath(namesStr || name);
|
|
84
85
|
var originalNamePath = toNamePath(originalName);
|
|
85
86
|
var originalNamePaths = originalNames && toNamePaths(originalNames);
|
|
@@ -93,8 +94,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
93
94
|
form: form
|
|
94
95
|
}) : undefined;
|
|
95
96
|
var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
|
|
96
|
-
var
|
|
97
|
-
if (!isWatch || noChange) return
|
|
97
|
+
var diffType = useMemo(function () {
|
|
98
|
+
if (!isWatch || noChange) return 'same';
|
|
98
99
|
return diffOriginal({
|
|
99
100
|
value: props.value,
|
|
100
101
|
originalValue: originalValue,
|
|
@@ -103,9 +104,15 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
103
104
|
// name: isString(namesStr) ? namesStr : originalName || name,
|
|
104
105
|
});
|
|
105
106
|
}, [props.value, originalValue]);
|
|
107
|
+
var isAdd = diffType === 'add';
|
|
108
|
+
var isChanged = diffType === 'changed';
|
|
106
109
|
if (!isWatch || noChange) {
|
|
107
110
|
return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
|
|
108
111
|
}
|
|
112
|
+
var diffClassName = classNames({
|
|
113
|
+
'pro-form-item-changed': isChanged,
|
|
114
|
+
'pro-form-item-add': isAdd
|
|
115
|
+
});
|
|
109
116
|
return _jsx(_Tooltip, {
|
|
110
117
|
// 传入undefined 鼠标移入显示移出隐藏
|
|
111
118
|
open: isChanged ? undefined : false,
|
|
@@ -121,7 +128,7 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
121
128
|
})) : undefined]
|
|
122
129
|
}),
|
|
123
130
|
children: _jsx("div", {
|
|
124
|
-
className:
|
|
131
|
+
className: diffClassName,
|
|
125
132
|
children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
|
|
126
133
|
})
|
|
127
134
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FormInstance } from 'antd';
|
|
2
2
|
import { NamePath } from 'antd/lib/form/interface';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { DiffOriginalParams } from '../../utils/diffOriginal';
|
|
4
5
|
import { DiffConfigProps } from '../../propsType';
|
|
5
6
|
interface Props {
|
|
6
7
|
name?: NamePath;
|
|
@@ -8,7 +9,7 @@ interface Props {
|
|
|
8
9
|
namesStr?: string;
|
|
9
10
|
diffConfig?: DiffConfigProps;
|
|
10
11
|
form: FormInstance;
|
|
11
|
-
equalWith?:
|
|
12
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
12
13
|
[name: string]: any;
|
|
13
14
|
}
|
|
14
15
|
declare const ChangedWrapper: React.FC<Props>;
|
|
@@ -6,6 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
|
|
|
6
6
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
7
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
|
+
import classNames from 'classnames';
|
|
9
10
|
import { get } from 'lodash';
|
|
10
11
|
import React, { useMemo } from 'react';
|
|
11
12
|
import { diffOriginal } from '../../utils/diffOriginal';
|
|
@@ -36,8 +37,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
36
37
|
return get(originalValues, name);
|
|
37
38
|
}) : get(originalValues, name);
|
|
38
39
|
var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
|
|
39
|
-
var
|
|
40
|
-
if (!isWatch || noChange) return
|
|
40
|
+
var diffType = useMemo(function () {
|
|
41
|
+
if (!isWatch || noChange) return 'same';
|
|
41
42
|
return diffOriginal({
|
|
42
43
|
originalValue: originalValue,
|
|
43
44
|
value: props.value,
|
|
@@ -46,6 +47,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
46
47
|
// name: namesStr || name,
|
|
47
48
|
});
|
|
48
49
|
}, [isWatch, noChange, props.value, originalValue]);
|
|
50
|
+
var isAdd = diffType === 'add';
|
|
51
|
+
var isChanged = diffType === 'changed';
|
|
49
52
|
var tipContent = useMemo(function () {
|
|
50
53
|
if (!isWatch || noChange) return undefined;
|
|
51
54
|
return /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
|
|
@@ -58,9 +61,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
58
61
|
return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
|
|
59
62
|
}
|
|
60
63
|
var tipOpenCalc = function tipOpenCalc() {
|
|
61
|
-
if (!toolTip)
|
|
62
|
-
return false;
|
|
63
|
-
}
|
|
64
|
+
if (!toolTip) return false;
|
|
64
65
|
// 传入undefined 鼠标移入显示移出隐藏
|
|
65
66
|
return isChanged ? undefined : false;
|
|
66
67
|
};
|
|
@@ -68,6 +69,10 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
68
69
|
'--change-tip-color': changeTipColor || '@zaui-contract-bg',
|
|
69
70
|
'--add-tip-color': addTipColor || '@zaui-contract-bg'
|
|
70
71
|
};
|
|
72
|
+
var diffClassName = classNames({
|
|
73
|
+
'pro-form-item-changed': isChanged,
|
|
74
|
+
'pro-form-item-add': isAdd
|
|
75
|
+
});
|
|
71
76
|
return _jsx(_Tooltip, {
|
|
72
77
|
open: tipOpenCalc(),
|
|
73
78
|
getPopupContainer: function getPopupContainer(target) {
|
|
@@ -78,7 +83,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
78
83
|
}),
|
|
79
84
|
placement: "topLeft",
|
|
80
85
|
children: _jsx("div", {
|
|
81
|
-
className:
|
|
86
|
+
className: diffClassName,
|
|
82
87
|
style: style,
|
|
83
88
|
children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
|
|
84
89
|
})
|
|
@@ -31,6 +31,7 @@ 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
33
|
import { DistributiveOmit, DiffConfigProps } from '../../propsType';
|
|
34
|
+
import { DiffOriginalParams } from '../../utils/diffOriginal';
|
|
34
35
|
export type ComponentMap = keyof typeof componentMap;
|
|
35
36
|
type ValidateKey = keyof typeof validate;
|
|
36
37
|
type RegExpKey = keyof typeof regExp;
|
|
@@ -201,7 +202,7 @@ export interface ProFormColumnProps<Values = any> extends Omit<FormItemProps<Val
|
|
|
201
202
|
upperCase?: boolean;
|
|
202
203
|
hiddenNames?: string[] | any[];
|
|
203
204
|
rules?: ProRule[] | ReactiveFunction<Values, ProRule[]>;
|
|
204
|
-
equalWith?:
|
|
205
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
205
206
|
required?: boolean | boolean[] | ReactiveFunction<Values, boolean | boolean[]>;
|
|
206
207
|
labelRequired?: boolean;
|
|
207
208
|
toISOString?: boolean;
|
|
@@ -373,4 +373,57 @@
|
|
|
373
373
|
border-radius: 4px;
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
// 比较原始值场景下 不同时的样式
|
|
379
|
+
.pro-form-item-add {
|
|
380
|
+
span.@{ant-prefix}-input-affix-wrapper,
|
|
381
|
+
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
382
|
+
.@{ant-prefix}-picker,
|
|
383
|
+
.@{ant-prefix}-input-number {
|
|
384
|
+
background: var(--add-tip-color, @zaui-contract-bg) !important;
|
|
385
|
+
|
|
386
|
+
input {
|
|
387
|
+
background: transparent !important;
|
|
388
|
+
}
|
|
389
|
+
.@{ant-prefix}-select-selection-placeholder {
|
|
390
|
+
z-index: 9;
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
|
|
395
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
|
|
396
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
397
|
+
border-radius: 4px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
// 地址组件
|
|
401
|
+
.@{ant-prefix}-form-item-control-input-content {
|
|
402
|
+
// 查看模式
|
|
403
|
+
& > span {
|
|
404
|
+
border-radius: 4px;
|
|
405
|
+
padding: 5px 8px;
|
|
406
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
& > .pro-address {
|
|
410
|
+
.@{ant-prefix}-select-selector,
|
|
411
|
+
.@{ant-prefix}-input-affix-wrapper,
|
|
412
|
+
.@{ant-prefix}-input-disabled {
|
|
413
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
& > .@{ant-prefix}-input-group {
|
|
417
|
+
.forever-checkbox {
|
|
418
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.pro-form-view-container {
|
|
424
|
+
padding: 4px 8px;
|
|
425
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
426
|
+
border-radius: 4px;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
376
429
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FormInstance } from 'antd';
|
|
2
|
-
interface
|
|
2
|
+
export interface DiffOriginalParams {
|
|
3
3
|
originalValue: any;
|
|
4
4
|
value: any;
|
|
5
5
|
form: FormInstance;
|
|
6
|
-
equalWith?: (originalValue: any, currentValue: any) => boolean;
|
|
6
|
+
equalWith?: (originalValue: any, currentValue: any) => DiffType | boolean | undefined;
|
|
7
7
|
}
|
|
8
|
-
export
|
|
9
|
-
export
|
|
8
|
+
export type DiffType = 'same' | 'add' | 'changed';
|
|
9
|
+
export declare const diffOriginal: (params: DiffOriginalParams) => DiffType;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { isEqual, isFunction } from 'lodash';
|
|
2
|
+
import { isEmpty } from '../../utils';
|
|
2
3
|
var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
|
|
3
4
|
export var diffOriginal = function diffOriginal(params) {
|
|
4
5
|
var originalValue = params.originalValue,
|
|
@@ -6,19 +7,29 @@ export var diffOriginal = function diffOriginal(params) {
|
|
|
6
7
|
equalWith = params.equalWith;
|
|
7
8
|
// 支持传入自定义比较事件
|
|
8
9
|
if (isFunction(equalWith)) {
|
|
9
|
-
|
|
10
|
+
var diffRes = equalWith(originalValue, value);
|
|
11
|
+
if (diffRes === undefined) return 'same';
|
|
12
|
+
if (typeof diffRes === 'boolean') {
|
|
13
|
+
return diffRes ? 'same' : 'changed';
|
|
14
|
+
}
|
|
15
|
+
return diffRes;
|
|
16
|
+
}
|
|
17
|
+
// 如果原始值为空 且当前有值的话 认为变更类型是新增
|
|
18
|
+
if (isEmpty(originalValue) && !isEmpty(value)) {
|
|
19
|
+
return 'add';
|
|
10
20
|
}
|
|
11
21
|
if (Array.isArray(originalValue)) {
|
|
12
|
-
|
|
22
|
+
var isSame = originalValue.every(function (valueItem, index) {
|
|
13
23
|
// 如果两个值有一个不是空值, 则进行深比较
|
|
14
|
-
if (!
|
|
15
|
-
return
|
|
24
|
+
if (!isEmpty(value === null || value === void 0 ? void 0 : value[index]) || !isEmpty(valueItem)) {
|
|
25
|
+
return isEqual(value === null || value === void 0 ? void 0 : value[index], valueItem);
|
|
16
26
|
}
|
|
17
|
-
return
|
|
27
|
+
return true;
|
|
18
28
|
});
|
|
29
|
+
return isSame ? 'same' : 'changed';
|
|
19
30
|
}
|
|
20
31
|
if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
|
|
21
|
-
return
|
|
32
|
+
return isEqual(value, originalValue) ? 'same' : 'changed';
|
|
22
33
|
}
|
|
23
|
-
return
|
|
34
|
+
return 'same';
|
|
24
35
|
};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { FormInstance } from 'antd';
|
|
3
3
|
import { NamePath } from 'antd/lib/form/interface';
|
|
4
|
+
import { DiffOriginalParams } from '../../../ProForm/utils/diffOriginal';
|
|
4
5
|
interface Props {
|
|
5
6
|
name?: NamePath;
|
|
6
7
|
names?: NamePath[];
|
|
@@ -9,7 +10,7 @@ interface Props {
|
|
|
9
10
|
namesStr?: NamePath;
|
|
10
11
|
originalValues?: any;
|
|
11
12
|
form: FormInstance;
|
|
12
|
-
equalWith?:
|
|
13
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
13
14
|
[name: string]: any;
|
|
14
15
|
}
|
|
15
16
|
declare const ListChangedWrapper: React.FC<Props>;
|
|
@@ -11,6 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _antd = require("antd");
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
14
15
|
var _lodash = require("lodash");
|
|
15
16
|
var _diffOriginal = require("../../../ProForm/utils/diffOriginal");
|
|
16
17
|
var _ProConfigProvider = require("../../../ProConfigProvider");
|
|
@@ -83,8 +84,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
83
84
|
children = props.children,
|
|
84
85
|
type = props.type,
|
|
85
86
|
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
86
|
-
var
|
|
87
|
-
isDiffAll =
|
|
87
|
+
var _ref2 = (0, _ProConfigProvider.useProConfig)('ProEditTable') || {},
|
|
88
|
+
isDiffAll = _ref2.isDiffAll;
|
|
88
89
|
var namePath = toNamePath(namesStr || name);
|
|
89
90
|
var originalNamePath = toNamePath(originalName);
|
|
90
91
|
var originalNamePaths = originalNames && toNamePaths(originalNames);
|
|
@@ -98,8 +99,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
98
99
|
form: form
|
|
99
100
|
}) : undefined;
|
|
100
101
|
var noChange = !equalWith && (!originalValues || isDiffAll ? false : (0, _utils.isEmpty)(originalValue));
|
|
101
|
-
var
|
|
102
|
-
if (!isWatch || noChange) return
|
|
102
|
+
var diffType = (0, _react.useMemo)(function () {
|
|
103
|
+
if (!isWatch || noChange) return 'same';
|
|
103
104
|
return (0, _diffOriginal.diffOriginal)({
|
|
104
105
|
value: props.value,
|
|
105
106
|
originalValue: originalValue,
|
|
@@ -108,9 +109,15 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
108
109
|
// name: isString(namesStr) ? namesStr : originalName || name,
|
|
109
110
|
});
|
|
110
111
|
}, [props.value, originalValue]);
|
|
112
|
+
var isAdd = diffType === 'add';
|
|
113
|
+
var isChanged = diffType === 'changed';
|
|
111
114
|
if (!isWatch || noChange) {
|
|
112
115
|
return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest));
|
|
113
116
|
}
|
|
117
|
+
var diffClassName = (0, _classnames.default)({
|
|
118
|
+
'pro-form-item-changed': isChanged,
|
|
119
|
+
'pro-form-item-add': isAdd
|
|
120
|
+
});
|
|
114
121
|
return (0, _jsxRuntime.jsx)(_antd.Tooltip
|
|
115
122
|
// 传入undefined 鼠标移入显示移出隐藏
|
|
116
123
|
, {
|
|
@@ -128,7 +135,7 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
|
|
|
128
135
|
})) : undefined]
|
|
129
136
|
}),
|
|
130
137
|
children: (0, _jsxRuntime.jsx)("div", {
|
|
131
|
-
className:
|
|
138
|
+
className: diffClassName,
|
|
132
139
|
children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest)) : undefined
|
|
133
140
|
})
|
|
134
141
|
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { FormInstance } from 'antd';
|
|
2
2
|
import { NamePath } from 'antd/lib/form/interface';
|
|
3
3
|
import React from 'react';
|
|
4
|
+
import { DiffOriginalParams } from '../../utils/diffOriginal';
|
|
4
5
|
import { DiffConfigProps } from '../../propsType';
|
|
5
6
|
interface Props {
|
|
6
7
|
name?: NamePath;
|
|
@@ -8,7 +9,7 @@ interface Props {
|
|
|
8
9
|
namesStr?: string;
|
|
9
10
|
diffConfig?: DiffConfigProps;
|
|
10
11
|
form: FormInstance;
|
|
11
|
-
equalWith?:
|
|
12
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
12
13
|
[name: string]: any;
|
|
13
14
|
}
|
|
14
15
|
declare const ChangedWrapper: React.FC<Props>;
|
|
@@ -10,6 +10,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
|
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
12
|
var _antd = require("antd");
|
|
13
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
14
|
var _lodash = require("lodash");
|
|
14
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
15
16
|
var _diffOriginal = require("../../utils/diffOriginal");
|
|
@@ -41,8 +42,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
41
42
|
return (0, _lodash.get)(originalValues, name);
|
|
42
43
|
}) : (0, _lodash.get)(originalValues, name);
|
|
43
44
|
var noChange = !equalWith && (!originalValues || isDiffAll ? false : (0, _utils.isEmpty)(originalValue));
|
|
44
|
-
var
|
|
45
|
-
if (!isWatch || noChange) return
|
|
45
|
+
var diffType = (0, _react.useMemo)(function () {
|
|
46
|
+
if (!isWatch || noChange) return 'same';
|
|
46
47
|
return (0, _diffOriginal.diffOriginal)({
|
|
47
48
|
originalValue: originalValue,
|
|
48
49
|
value: props.value,
|
|
@@ -51,6 +52,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
51
52
|
// name: namesStr || name,
|
|
52
53
|
});
|
|
53
54
|
}, [isWatch, noChange, props.value, originalValue]);
|
|
55
|
+
var isAdd = diffType === 'add';
|
|
56
|
+
var isChanged = diffType === 'changed';
|
|
54
57
|
var tipContent = (0, _react.useMemo)(function () {
|
|
55
58
|
if (!isWatch || noChange) return undefined;
|
|
56
59
|
return /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), {}, {
|
|
@@ -63,9 +66,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
63
66
|
return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest));
|
|
64
67
|
}
|
|
65
68
|
var tipOpenCalc = function tipOpenCalc() {
|
|
66
|
-
if (!toolTip)
|
|
67
|
-
return false;
|
|
68
|
-
}
|
|
69
|
+
if (!toolTip) return false;
|
|
69
70
|
// 传入undefined 鼠标移入显示移出隐藏
|
|
70
71
|
return isChanged ? undefined : false;
|
|
71
72
|
};
|
|
@@ -73,6 +74,10 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
73
74
|
'--change-tip-color': changeTipColor || '@zaui-contract-bg',
|
|
74
75
|
'--add-tip-color': addTipColor || '@zaui-contract-bg'
|
|
75
76
|
};
|
|
77
|
+
var diffClassName = (0, _classnames.default)({
|
|
78
|
+
'pro-form-item-changed': isChanged,
|
|
79
|
+
'pro-form-item-add': isAdd
|
|
80
|
+
});
|
|
76
81
|
return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
|
|
77
82
|
open: tipOpenCalc(),
|
|
78
83
|
getPopupContainer: function getPopupContainer(target) {
|
|
@@ -83,7 +88,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
|
|
|
83
88
|
}),
|
|
84
89
|
placement: "topLeft",
|
|
85
90
|
children: (0, _jsxRuntime.jsx)("div", {
|
|
86
|
-
className:
|
|
91
|
+
className: diffClassName,
|
|
87
92
|
style: style,
|
|
88
93
|
children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest)) : undefined
|
|
89
94
|
})
|
|
@@ -31,6 +31,7 @@ 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
33
|
import { DistributiveOmit, DiffConfigProps } from '../../propsType';
|
|
34
|
+
import { DiffOriginalParams } from '../../utils/diffOriginal';
|
|
34
35
|
export type ComponentMap = keyof typeof componentMap;
|
|
35
36
|
type ValidateKey = keyof typeof validate;
|
|
36
37
|
type RegExpKey = keyof typeof regExp;
|
|
@@ -201,7 +202,7 @@ export interface ProFormColumnProps<Values = any> extends Omit<FormItemProps<Val
|
|
|
201
202
|
upperCase?: boolean;
|
|
202
203
|
hiddenNames?: string[] | any[];
|
|
203
204
|
rules?: ProRule[] | ReactiveFunction<Values, ProRule[]>;
|
|
204
|
-
equalWith?:
|
|
205
|
+
equalWith?: DiffOriginalParams['equalWith'];
|
|
205
206
|
required?: boolean | boolean[] | ReactiveFunction<Values, boolean | boolean[]>;
|
|
206
207
|
labelRequired?: boolean;
|
|
207
208
|
toISOString?: boolean;
|
|
@@ -373,4 +373,57 @@
|
|
|
373
373
|
border-radius: 4px;
|
|
374
374
|
}
|
|
375
375
|
}
|
|
376
|
+
|
|
377
|
+
|
|
378
|
+
// 比较原始值场景下 不同时的样式
|
|
379
|
+
.pro-form-item-add {
|
|
380
|
+
span.@{ant-prefix}-input-affix-wrapper,
|
|
381
|
+
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
382
|
+
.@{ant-prefix}-picker,
|
|
383
|
+
.@{ant-prefix}-input-number {
|
|
384
|
+
background: var(--add-tip-color, @zaui-contract-bg) !important;
|
|
385
|
+
|
|
386
|
+
input {
|
|
387
|
+
background: transparent !important;
|
|
388
|
+
}
|
|
389
|
+
.@{ant-prefix}-select-selection-placeholder {
|
|
390
|
+
z-index: 9;
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
|
|
395
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
|
|
396
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
397
|
+
border-radius: 4px;
|
|
398
|
+
}
|
|
399
|
+
|
|
400
|
+
// 地址组件
|
|
401
|
+
.@{ant-prefix}-form-item-control-input-content {
|
|
402
|
+
// 查看模式
|
|
403
|
+
& > span {
|
|
404
|
+
border-radius: 4px;
|
|
405
|
+
padding: 5px 8px;
|
|
406
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
& > .pro-address {
|
|
410
|
+
.@{ant-prefix}-select-selector,
|
|
411
|
+
.@{ant-prefix}-input-affix-wrapper,
|
|
412
|
+
.@{ant-prefix}-input-disabled {
|
|
413
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
414
|
+
}
|
|
415
|
+
}
|
|
416
|
+
& > .@{ant-prefix}-input-group {
|
|
417
|
+
.forever-checkbox {
|
|
418
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
419
|
+
}
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.pro-form-view-container {
|
|
424
|
+
padding: 4px 8px;
|
|
425
|
+
background: var(--add-tip-color, @zaui-contract-bg);
|
|
426
|
+
border-radius: 4px;
|
|
427
|
+
}
|
|
428
|
+
}
|
|
376
429
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { FormInstance } from 'antd';
|
|
2
|
-
interface
|
|
2
|
+
export interface DiffOriginalParams {
|
|
3
3
|
originalValue: any;
|
|
4
4
|
value: any;
|
|
5
5
|
form: FormInstance;
|
|
6
|
-
equalWith?: (originalValue: any, currentValue: any) => boolean;
|
|
6
|
+
equalWith?: (originalValue: any, currentValue: any) => DiffType | boolean | undefined;
|
|
7
7
|
}
|
|
8
|
-
export
|
|
9
|
-
export
|
|
8
|
+
export type DiffType = 'same' | 'add' | 'changed';
|
|
9
|
+
export declare const diffOriginal: (params: DiffOriginalParams) => DiffType;
|
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.diffOriginal = void 0;
|
|
7
7
|
var _lodash = require("lodash");
|
|
8
|
+
var _utils = require("../../utils");
|
|
8
9
|
var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
|
|
9
10
|
var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
|
|
10
11
|
var originalValue = params.originalValue,
|
|
@@ -12,19 +13,29 @@ var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
|
|
|
12
13
|
equalWith = params.equalWith;
|
|
13
14
|
// 支持传入自定义比较事件
|
|
14
15
|
if ((0, _lodash.isFunction)(equalWith)) {
|
|
15
|
-
|
|
16
|
+
var diffRes = equalWith(originalValue, value);
|
|
17
|
+
if (diffRes === undefined) return 'same';
|
|
18
|
+
if (typeof diffRes === 'boolean') {
|
|
19
|
+
return diffRes ? 'same' : 'changed';
|
|
20
|
+
}
|
|
21
|
+
return diffRes;
|
|
22
|
+
}
|
|
23
|
+
// 如果原始值为空 且当前有值的话 认为变更类型是新增
|
|
24
|
+
if ((0, _utils.isEmpty)(originalValue) && !(0, _utils.isEmpty)(value)) {
|
|
25
|
+
return 'add';
|
|
16
26
|
}
|
|
17
27
|
if (Array.isArray(originalValue)) {
|
|
18
|
-
|
|
28
|
+
var isSame = originalValue.every(function (valueItem, index) {
|
|
19
29
|
// 如果两个值有一个不是空值, 则进行深比较
|
|
20
|
-
if (!
|
|
21
|
-
return
|
|
30
|
+
if (!(0, _utils.isEmpty)(value === null || value === void 0 ? void 0 : value[index]) || !(0, _utils.isEmpty)(valueItem)) {
|
|
31
|
+
return (0, _lodash.isEqual)(value === null || value === void 0 ? void 0 : value[index], valueItem);
|
|
22
32
|
}
|
|
23
|
-
return
|
|
33
|
+
return true;
|
|
24
34
|
});
|
|
35
|
+
return isSame ? 'same' : 'changed';
|
|
25
36
|
}
|
|
26
37
|
if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
|
|
27
|
-
return
|
|
38
|
+
return (0, _lodash.isEqual)(value, originalValue) ? 'same' : 'changed';
|
|
28
39
|
}
|
|
29
|
-
return
|
|
40
|
+
return 'same';
|
|
30
41
|
};
|
package/package.json
CHANGED