@zat-design/sisyphus-react 3.7.3 → 3.8.0
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 +100 -4
- package/dist/less.esm.css +97 -4
- package/es/ProEditTable/components/RenderField/{ListChanged.d.ts → ListChangedWrapper.d.ts} +4 -3
- package/es/ProEditTable/components/RenderField/{ListChanged.js → ListChangedWrapper.js} +22 -10
- package/es/ProEditTable/components/RenderField/index.js +3 -3
- package/es/ProEnum/components/Group.js +10 -2
- package/es/ProEnum/index.js +5 -4
- package/es/ProEnum/style/index.less +14 -4
- package/es/ProEnum/utils/index.d.ts +1 -1
- package/es/ProEnum/utils/index.js +4 -0
- 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/FormList/utils.js +5 -4
- package/es/ProForm/components/combination/ProModalSelect/index.js +50 -45
- package/es/ProForm/components/combination/ProNumberRange/index.js +14 -5
- package/es/ProForm/components/combination/ProNumberRange/style/index.less +5 -1
- package/es/ProForm/components/render/ChangedWrapper.d.ts +17 -0
- package/es/ProForm/components/render/ChangedWrapper.js +108 -0
- package/es/ProForm/components/render/Render.js +7 -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 +4 -3
- package/es/ProForm/index.js +3 -6
- package/es/ProForm/propsType.d.ts +13 -2
- package/es/ProForm/style/index.less +103 -5
- package/es/ProForm/utils/diffOriginal.d.ts +4 -4
- package/es/ProForm/utils/diffOriginal.js +18 -7
- package/es/ProForm/utils/transformValue.js +17 -11
- package/es/ProSelect/index.js +12 -11
- package/es/ProSelect/propsType.d.ts +4 -0
- package/es/ProSelect/utils/index.js +5 -4
- package/es/ProStep/components/Listener/index.d.ts +1 -1
- package/es/ProStep/components/Listener/index.js +5 -2
- package/es/ProStep/index.d.ts +1 -1
- package/es/ProStep/index.js +24 -17
- package/es/ProTable/components/FormatColumn/index.d.ts +7 -1
- package/es/ProTable/components/FormatColumn/index.js +14 -8
- package/es/ProTable/index.js +30 -13
- package/es/ProTable/propsType.d.ts +14 -1
- package/es/ProTable/style/index.less +1 -1
- package/es/ProTree/components/AdaptiveTooltip.d.ts +4 -0
- package/es/ProTree/components/AdaptiveTooltip.js +55 -0
- package/es/ProTree/components/List.js +15 -3
- package/es/ProTree/components/ProTreeSelect/index.js +25 -5
- package/es/ProTree/components/ProTreeSelect/propsType.d.ts +2 -0
- package/es/ProTree/components/ProTreeSelect/style/index.less +2 -2
- package/es/ProTree/components/SearchTitle.d.ts +2 -0
- package/es/ProTree/components/SearchTitle.js +17 -8
- package/es/ProTree/style/index.less +14 -0
- package/es/ProTreeModal/components/Tree.js +15 -17
- package/es/ProTreeModal/index.js +62 -7
- package/es/ProTreeModal/utils.d.ts +1 -0
- package/es/ProTreeModal/utils.js +21 -1
- package/es/style/theme/antd.less +5 -0
- package/es/style/theme/index.less +2 -1
- package/es/style/theme/tokens.less +1 -0
- 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} +4 -3
- package/lib/ProEditTable/components/RenderField/{ListChanged.js → ListChangedWrapper.js} +25 -11
- package/lib/ProEditTable/components/RenderField/index.js +3 -3
- package/lib/ProEnum/components/Group.js +10 -2
- package/lib/ProEnum/index.js +5 -4
- package/lib/ProEnum/style/index.less +14 -4
- package/lib/ProEnum/utils/index.d.ts +1 -1
- package/lib/ProEnum/utils/index.js +4 -0
- 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/FormList/utils.js +4 -3
- package/lib/ProForm/components/combination/ProModalSelect/index.js +49 -44
- package/lib/ProForm/components/combination/ProNumberRange/index.js +14 -5
- package/lib/ProForm/components/combination/ProNumberRange/style/index.less +5 -1
- package/lib/ProForm/components/render/ChangedWrapper.d.ts +17 -0
- package/lib/ProForm/components/render/ChangedWrapper.js +113 -0
- package/lib/ProForm/components/render/Render.js +7 -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 +4 -3
- package/lib/ProForm/index.js +3 -6
- package/lib/ProForm/propsType.d.ts +13 -2
- package/lib/ProForm/style/index.less +103 -5
- package/lib/ProForm/utils/diffOriginal.d.ts +4 -4
- package/lib/ProForm/utils/diffOriginal.js +18 -7
- package/lib/ProForm/utils/transformValue.js +17 -11
- package/lib/ProSelect/index.js +12 -11
- package/lib/ProSelect/propsType.d.ts +4 -0
- package/lib/ProSelect/utils/index.js +5 -4
- package/lib/ProStep/components/Listener/index.d.ts +1 -1
- package/lib/ProStep/components/Listener/index.js +5 -2
- package/lib/ProStep/index.d.ts +1 -1
- package/lib/ProStep/index.js +24 -17
- package/lib/ProTable/components/FormatColumn/index.d.ts +7 -1
- package/lib/ProTable/components/FormatColumn/index.js +14 -8
- package/lib/ProTable/index.js +30 -13
- package/lib/ProTable/propsType.d.ts +14 -1
- package/lib/ProTable/style/index.less +1 -1
- package/lib/ProTree/components/AdaptiveTooltip.d.ts +4 -0
- package/lib/ProTree/components/AdaptiveTooltip.js +61 -0
- package/lib/ProTree/components/List.js +15 -3
- package/lib/ProTree/components/ProTreeSelect/index.js +25 -5
- package/lib/ProTree/components/ProTreeSelect/propsType.d.ts +2 -0
- package/lib/ProTree/components/ProTreeSelect/style/index.less +2 -2
- package/lib/ProTree/components/SearchTitle.d.ts +2 -0
- package/lib/ProTree/components/SearchTitle.js +19 -7
- package/lib/ProTree/style/index.less +14 -0
- package/lib/ProTreeModal/components/Tree.js +15 -17
- package/lib/ProTreeModal/index.js +61 -6
- package/lib/ProTreeModal/utils.d.ts +1 -0
- package/lib/ProTreeModal/utils.js +20 -0
- package/lib/style/theme/antd.less +5 -0
- package/lib/style/theme/index.less +2 -1
- package/lib/style/theme/tokens.less +1 -0
- package/lib/utils/index.d.ts +2 -0
- package/lib/utils/index.js +19 -0
- package/package.json +2 -1
- package/es/ProForm/components/render/Changed.d.ts +0 -14
- package/es/ProForm/components/render/Changed.js +0 -64
- package/lib/ProForm/components/render/Changed.d.ts +0 -14
- package/lib/ProForm/components/render/Changed.js +0 -69
- /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
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
11
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
var _antd = require("antd");
|
|
14
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
+
var _lodash = require("lodash");
|
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
+
var _diffOriginal = require("../../utils/diffOriginal");
|
|
18
|
+
var _ProConfigProvider = require("../../../ProConfigProvider");
|
|
19
|
+
var _utils = require("../../../utils");
|
|
20
|
+
var _excluded = ["name", "names", "namesStr", "form", "equalWith", "children", "type", "diffConfig", "valuePropName"];
|
|
21
|
+
var ChangedWrapper = function ChangedWrapper(props) {
|
|
22
|
+
var _diffConfig$toolTip, _children$props, _children$props2, _children$props3;
|
|
23
|
+
var name = props.name,
|
|
24
|
+
names = props.names,
|
|
25
|
+
namesStr = props.namesStr,
|
|
26
|
+
form = props.form,
|
|
27
|
+
equalWith = props.equalWith,
|
|
28
|
+
children = props.children,
|
|
29
|
+
type = props.type,
|
|
30
|
+
diffConfig = props.diffConfig,
|
|
31
|
+
_props$valuePropName = props.valuePropName,
|
|
32
|
+
valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
|
|
33
|
+
rest = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
34
|
+
var _useProConfig = (0, _ProConfigProvider.useProConfig)('ProForm'),
|
|
35
|
+
isDiffAll = _useProConfig.isDiffAll;
|
|
36
|
+
var originalValues = diffConfig.originalValues,
|
|
37
|
+
changeTipColor = diffConfig.changeTipColor,
|
|
38
|
+
addTipColor = diffConfig.addTipColor;
|
|
39
|
+
var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
|
|
40
|
+
var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
|
|
41
|
+
var originalValue = (names === null || names === void 0 ? void 0 : names.length) ? names.map(function (name) {
|
|
42
|
+
return (0, _lodash.get)(originalValues, name);
|
|
43
|
+
}) : (0, _lodash.get)(originalValues, name);
|
|
44
|
+
var noChange = !equalWith && (!originalValues || isDiffAll ? false : (0, _utils.isEmpty)(originalValue));
|
|
45
|
+
var diffType = (0, _react.useMemo)(function () {
|
|
46
|
+
if (!isWatch || noChange) return 'same';
|
|
47
|
+
return (0, _diffOriginal.diffOriginal)({
|
|
48
|
+
originalValue: originalValue,
|
|
49
|
+
value: props[valuePropName],
|
|
50
|
+
form: form,
|
|
51
|
+
equalWith: equalWith
|
|
52
|
+
// name: namesStr || name,
|
|
53
|
+
});
|
|
54
|
+
}, [isWatch, noChange, props[valuePropName], originalValue]);
|
|
55
|
+
var isAdd = diffType === 'add';
|
|
56
|
+
var isChanged = diffType === 'changed';
|
|
57
|
+
var tipContent = (0, _react.useMemo)(function () {
|
|
58
|
+
if (!isWatch || noChange) return undefined;
|
|
59
|
+
return /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), {}, (0, _defineProperty2.default)({
|
|
60
|
+
isView: true
|
|
61
|
+
}, valuePropName, originalValue))) : undefined;
|
|
62
|
+
}, [originalValue, children]);
|
|
63
|
+
if (!isWatch || noChange) {
|
|
64
|
+
// 嵌套子组件
|
|
65
|
+
var isNestedField = ['ProEditTable'].includes(type);
|
|
66
|
+
return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)({
|
|
67
|
+
originalValues: isNestedField ? originalValues : undefined
|
|
68
|
+
}, children.props), rest));
|
|
69
|
+
}
|
|
70
|
+
var tipOpenCalc = function tipOpenCalc() {
|
|
71
|
+
if (!toolTip) return false;
|
|
72
|
+
// 传入undefined 鼠标移入显示移出隐藏
|
|
73
|
+
return isChanged ? undefined : false;
|
|
74
|
+
};
|
|
75
|
+
var style = {
|
|
76
|
+
'--zaui-contract-bg': changeTipColor,
|
|
77
|
+
'--zaui-contract-bg-add': addTipColor
|
|
78
|
+
};
|
|
79
|
+
var diffClassName = (0, _classnames.default)({
|
|
80
|
+
'pro-form-item-changed': isChanged,
|
|
81
|
+
'pro-form-item-add': isAdd
|
|
82
|
+
});
|
|
83
|
+
// @ts-ignore
|
|
84
|
+
var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
|
|
85
|
+
return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
|
|
86
|
+
open: tipOpenCalc(),
|
|
87
|
+
mouseEnterDelay: 1,
|
|
88
|
+
getPopupContainer: function getPopupContainer(target) {
|
|
89
|
+
return target.parentElement;
|
|
90
|
+
},
|
|
91
|
+
title: (0, _jsxRuntime.jsxs)(_antd.Space, {
|
|
92
|
+
direction: "vertical",
|
|
93
|
+
children: [(0, _jsxRuntime.jsxs)(_antd.Space, {
|
|
94
|
+
children: ["\u521D\u59CB\u503C\uFF1A", tipContent]
|
|
95
|
+
}), _showEllipse && (0, _jsxRuntime.jsxs)(_antd.Space, {
|
|
96
|
+
children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), rest), {}, {
|
|
97
|
+
isView: true
|
|
98
|
+
})) : undefined]
|
|
99
|
+
})]
|
|
100
|
+
}),
|
|
101
|
+
placement: "topLeft",
|
|
102
|
+
children: (0, _jsxRuntime.jsx)("div", {
|
|
103
|
+
className: diffClassName,
|
|
104
|
+
style: style,
|
|
105
|
+
children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread3.default)((0, _objectSpread3.default)((0, _objectSpread3.default)({}, children.props), rest), {}, {
|
|
106
|
+
otherProps: (0, _objectSpread3.default)((0, _objectSpread3.default)({}, (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.otherProps), {}, {
|
|
107
|
+
isDiffChange: isChanged
|
|
108
|
+
})
|
|
109
|
+
})) : undefined
|
|
110
|
+
})
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
var _default = exports.default = ChangedWrapper;
|
|
@@ -26,7 +26,7 @@ var _valueType = _interopRequireDefault(require("../../utils/valueType"));
|
|
|
26
26
|
var _tip = _interopRequireDefault(require("../../../assets/tip.svg"));
|
|
27
27
|
var _useRules = _interopRequireDefault(require("../../utils/useRules"));
|
|
28
28
|
var _ConfirmWrapper = _interopRequireDefault(require("./ConfirmWrapper"));
|
|
29
|
-
var
|
|
29
|
+
var _ChangedWrapper = _interopRequireDefault(require("./ChangedWrapper"));
|
|
30
30
|
var _excluded = ["labelWidth", "hiddenNames", "trim", "upperCase", "className", "rules", "required", "labelRequired", "tooltip"];
|
|
31
31
|
/* eslint-disable prefer-destructuring */
|
|
32
32
|
// 这个组件只管渲染, 参数的整理在外部处理
|
|
@@ -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,17 +426,17 @@ var Render = function Render(props) {
|
|
|
427
426
|
span: 24 // 默认占一行
|
|
428
427
|
});
|
|
429
428
|
}
|
|
430
|
-
if (
|
|
431
|
-
child = (0, _jsxRuntime.jsx)(
|
|
429
|
+
if (diffConfig) {
|
|
430
|
+
child = (0, _jsxRuntime.jsx)(_ChangedWrapper.default, {
|
|
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,
|
|
439
|
+
valuePropName: _otherFormItemProps.valuePropName,
|
|
441
440
|
children: child
|
|
442
441
|
});
|
|
443
442
|
}
|
|
@@ -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>;
|
|
@@ -30,11 +30,10 @@ var RenderFields = function RenderFields(props) {
|
|
|
30
30
|
viewEmpty = _props$viewEmpty === void 0 ? '-' : _props$viewEmpty,
|
|
31
31
|
openState = props.openState,
|
|
32
32
|
labelWidth = props.labelWidth,
|
|
33
|
-
originalValues = props.originalValues,
|
|
34
33
|
outerClearNotShow = props.clearNotShow,
|
|
35
34
|
requiredOnView = props.requiredOnView,
|
|
36
35
|
required = props.required,
|
|
37
|
-
|
|
36
|
+
diffConfig = props.diffConfig,
|
|
38
37
|
globalControl = props.globalControl;
|
|
39
38
|
// 是否包含隐藏字段
|
|
40
39
|
var hiddenData = columns.filter(function (item) {
|
|
@@ -162,6 +161,7 @@ var RenderFields = function RenderFields(props) {
|
|
|
162
161
|
if (['ProCollapse', 'Container'].includes(_type)) {
|
|
163
162
|
componentProps.show = show;
|
|
164
163
|
componentProps.clearNotShow = clearNotShow;
|
|
164
|
+
componentProps.diffConfig = diffConfig;
|
|
165
165
|
}
|
|
166
166
|
// switch与SwitchCheckbox单独添加valuePropName
|
|
167
167
|
if (['Switch', 'SwitchCheckbox'].includes(_type)) {
|
|
@@ -214,10 +214,9 @@ var RenderFields = function RenderFields(props) {
|
|
|
214
214
|
otherProps: otherProps,
|
|
215
215
|
fieldProps: (0, _lodash.isFunction)(fieldProps) ? fieldProps : null,
|
|
216
216
|
isSelect: _isSelect,
|
|
217
|
-
|
|
217
|
+
diffConfig: diffConfig,
|
|
218
218
|
equalWith: equalWith,
|
|
219
219
|
requiredOnView: requiredOnView,
|
|
220
|
-
originalDiffTip: originalDiffTip,
|
|
221
220
|
globalControl: globalControl
|
|
222
221
|
})
|
|
223
222
|
}, "".concat(_formItemProps.name || _formItemProps.label).concat(index));
|
|
@@ -30,7 +30,8 @@ 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
|
+
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;
|
|
@@ -267,7 +268,7 @@ export interface RenderProps<Values = any> {
|
|
|
267
268
|
form: FormInstance<Values>;
|
|
268
269
|
fieldProps?: ReactiveFunction<Values, React.ReactNode>;
|
|
269
270
|
isSelect: boolean;
|
|
270
|
-
|
|
271
|
+
diffConfig: DiffConfigProps;
|
|
271
272
|
requiredOnView?: boolean;
|
|
272
273
|
confirm?: ProFormColumnProps['confirm'];
|
|
273
274
|
globalControl?: boolean;
|
package/lib/ProForm/index.js
CHANGED
|
@@ -25,7 +25,7 @@ var _useForm3 = require("./utils/useForm");
|
|
|
25
25
|
var _useFieldProps = require("./utils/useFieldProps");
|
|
26
26
|
var _locale = _interopRequireDefault(require("../locale"));
|
|
27
27
|
var _useWatch = _interopRequireDefault(require("./utils/useWatch"));
|
|
28
|
-
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", "
|
|
28
|
+
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"];
|
|
29
29
|
var ProForm = function ProForm(props, ref) {
|
|
30
30
|
var _forms$formKey, _localStorage, _ref;
|
|
31
31
|
var _props$mode = props.mode,
|
|
@@ -54,7 +54,7 @@ var ProForm = function ProForm(props, ref) {
|
|
|
54
54
|
labelWidth = props.labelWidth,
|
|
55
55
|
onValuesChange = props.onValuesChange,
|
|
56
56
|
onFinish = props.onFinish,
|
|
57
|
-
|
|
57
|
+
diffConfig = props.diffConfig,
|
|
58
58
|
submitOnEnter = props.submitOnEnter,
|
|
59
59
|
_props$clearNotShow = props.clearNotShow,
|
|
60
60
|
clearNotShow = _props$clearNotShow === void 0 ? true : _props$clearNotShow,
|
|
@@ -63,8 +63,6 @@ var ProForm = function ProForm(props, ref) {
|
|
|
63
63
|
requiredOnView = _props$requiredOnView === void 0 ? true : _props$requiredOnView,
|
|
64
64
|
formId = props.formId,
|
|
65
65
|
required = props.required,
|
|
66
|
-
_props$originalDiffTi = props.originalDiffTip,
|
|
67
|
-
originalDiffTip = _props$originalDiffTi === void 0 ? true : _props$originalDiffTi,
|
|
68
66
|
formKey = props.formKey,
|
|
69
67
|
globalControl = props.globalControl,
|
|
70
68
|
_props$scrollToError = props.scrollToError,
|
|
@@ -262,11 +260,10 @@ var ProForm = function ProForm(props, ref) {
|
|
|
262
260
|
colProps: colProps,
|
|
263
261
|
viewEmpty: viewEmpty,
|
|
264
262
|
labelWidth: labelWidth,
|
|
265
|
-
|
|
263
|
+
diffConfig: diffConfig,
|
|
266
264
|
clearNotShow: clearNotShow,
|
|
267
265
|
requiredOnView: requiredOnView,
|
|
268
266
|
required: required,
|
|
269
|
-
originalDiffTip: originalDiffTip,
|
|
270
267
|
globalControl: globalControl
|
|
271
268
|
}), footerRender()]
|
|
272
269
|
})), children]
|
|
@@ -44,6 +44,17 @@ export interface ProFormOtherProps {
|
|
|
44
44
|
listName?: any[] | string | number;
|
|
45
45
|
globalControl?: boolean;
|
|
46
46
|
formDisabled?: boolean;
|
|
47
|
+
isDiffChange?: boolean;
|
|
48
|
+
}
|
|
49
|
+
export interface DiffConfigProps<Values = any> {
|
|
50
|
+
/** 比对原始数据源 */
|
|
51
|
+
originalValues: Values;
|
|
52
|
+
/** 是否显示对比值气泡 */
|
|
53
|
+
toolTip?: boolean;
|
|
54
|
+
/** 变更提示颜色 */
|
|
55
|
+
changeTipColor?: string;
|
|
56
|
+
/** 新增提示颜色 */
|
|
57
|
+
addTipColor?: string;
|
|
47
58
|
}
|
|
48
59
|
export interface ProFormProps<Values = any> extends FormProps<Values> {
|
|
49
60
|
disabled?: boolean;
|
|
@@ -67,14 +78,14 @@ export interface ProFormProps<Values = any> extends FormProps<Values> {
|
|
|
67
78
|
viewEmpty?: React.ReactNode | string;
|
|
68
79
|
confirmLoading?: boolean;
|
|
69
80
|
labelWidth?: string | number;
|
|
70
|
-
originalValues?: Values;
|
|
71
81
|
/** 是否回车提交 */
|
|
72
82
|
submitOnEnter?: boolean;
|
|
73
83
|
clearNotShow?: boolean;
|
|
74
84
|
requiredOnView?: boolean;
|
|
75
85
|
formId?: string;
|
|
76
86
|
required?: boolean | boolean[];
|
|
77
|
-
|
|
87
|
+
/** 表单比对配置 */
|
|
88
|
+
diffConfig?: DiffConfigProps;
|
|
78
89
|
scrollToError?: boolean;
|
|
79
90
|
/** 性能模式,谨慎使用,默认不开启
|
|
80
91
|
* 1. 开启不过滤names的中间态值
|
|
@@ -99,10 +99,12 @@
|
|
|
99
99
|
|
|
100
100
|
&.pro-form-item-width-auto {
|
|
101
101
|
.@{ant-prefix}-form-item-control-input {
|
|
102
|
+
width: 100%;
|
|
102
103
|
flex-grow: inherit;
|
|
103
104
|
}
|
|
104
105
|
|
|
105
106
|
.@{ant-prefix}-form-item-control-input-content {
|
|
107
|
+
width: 100%;
|
|
106
108
|
flex: initial;
|
|
107
109
|
}
|
|
108
110
|
}
|
|
@@ -216,7 +218,7 @@
|
|
|
216
218
|
|
|
217
219
|
.site-input-left,
|
|
218
220
|
.site-input-right {
|
|
219
|
-
width: calc(50% -
|
|
221
|
+
width: calc(50% - 16px);
|
|
220
222
|
}
|
|
221
223
|
|
|
222
224
|
.site-input-left {
|
|
@@ -314,16 +316,23 @@
|
|
|
314
316
|
vertical-align: middle;
|
|
315
317
|
}
|
|
316
318
|
}
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
319
|
+
|
|
320
|
+
.pro-form-list-mode-block {
|
|
321
|
+
.pro-collapse-content {
|
|
322
|
+
.@{ant-prefix}-row {
|
|
320
323
|
width: auto;
|
|
321
324
|
}
|
|
322
325
|
}
|
|
323
326
|
}
|
|
324
327
|
|
|
325
|
-
// 比较原始值场景下 不同时的样式
|
|
326
328
|
.pro-form-item-changed {
|
|
329
|
+
border-radius: 4px;
|
|
330
|
+
background: @zaui-contract-bg !important;
|
|
331
|
+
|
|
332
|
+
.@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector{
|
|
333
|
+
background: @zaui-contract-bg !important;
|
|
334
|
+
}
|
|
335
|
+
|
|
327
336
|
span.@{ant-prefix}-input-affix-wrapper,
|
|
328
337
|
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
329
338
|
.@{ant-prefix}-picker,
|
|
@@ -367,10 +376,99 @@
|
|
|
367
376
|
}
|
|
368
377
|
}
|
|
369
378
|
|
|
379
|
+
// checkbox
|
|
380
|
+
.@{ant-prefix}-checkbox-group {
|
|
381
|
+
padding: 5px 0
|
|
382
|
+
}
|
|
383
|
+
// switch
|
|
384
|
+
&:has(.@{ant-prefix}-switch) {
|
|
385
|
+
padding: 5px 0;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
// textArea
|
|
389
|
+
.@{ant-prefix}-input-textarea > textarea {
|
|
390
|
+
background: @zaui-contract-bg;
|
|
391
|
+
}
|
|
392
|
+
|
|
370
393
|
.pro-form-view-container {
|
|
371
394
|
padding: 4px 8px;
|
|
372
395
|
background: @zaui-contract-bg;
|
|
373
396
|
border-radius: 4px;
|
|
374
397
|
}
|
|
375
398
|
}
|
|
399
|
+
|
|
400
|
+
|
|
401
|
+
// 比较原始值场景下 不同时的样式
|
|
402
|
+
.pro-form-item-add {
|
|
403
|
+
border-radius: 4px;
|
|
404
|
+
background: @zaui-contract-bg-add !important;
|
|
405
|
+
|
|
406
|
+
.@{ant-prefix}-select.@{ant-prefix}-select-disabled .@{ant-prefix}-select-selector{
|
|
407
|
+
background: @zaui-contract-bg-add !important;
|
|
408
|
+
}
|
|
409
|
+
|
|
410
|
+
span.@{ant-prefix}-input-affix-wrapper,
|
|
411
|
+
.@{ant-prefix}-select .@{ant-prefix}-select-selector,
|
|
412
|
+
.@{ant-prefix}-picker,
|
|
413
|
+
.@{ant-prefix}-input-number {
|
|
414
|
+
background: @zaui-contract-bg-add !important;
|
|
415
|
+
|
|
416
|
+
input {
|
|
417
|
+
background: transparent !important;
|
|
418
|
+
}
|
|
419
|
+
.@{ant-prefix}-select-selection-placeholder {
|
|
420
|
+
z-index: 9;
|
|
421
|
+
}
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
|
|
425
|
+
.@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
|
|
426
|
+
background: @zaui-contract-bg-add;
|
|
427
|
+
border-radius: 4px;
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
// 地址组件
|
|
431
|
+
.@{ant-prefix}-form-item-control-input-content {
|
|
432
|
+
// 查看模式
|
|
433
|
+
& > span {
|
|
434
|
+
border-radius: 4px;
|
|
435
|
+
padding: 5px 8px;
|
|
436
|
+
background: @zaui-contract-bg-add;
|
|
437
|
+
}
|
|
438
|
+
|
|
439
|
+
& > .pro-address {
|
|
440
|
+
.@{ant-prefix}-select-selector,
|
|
441
|
+
.@{ant-prefix}-input-affix-wrapper,
|
|
442
|
+
.@{ant-prefix}-input-disabled {
|
|
443
|
+
background: @zaui-contract-bg-add;
|
|
444
|
+
}
|
|
445
|
+
}
|
|
446
|
+
& > .@{ant-prefix}-input-group {
|
|
447
|
+
.forever-checkbox {
|
|
448
|
+
background: @zaui-contract-bg-add;
|
|
449
|
+
}
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
|
|
453
|
+
// checkbox
|
|
454
|
+
.@{ant-prefix}-checkbox-group {
|
|
455
|
+
padding: 5px 0
|
|
456
|
+
}
|
|
457
|
+
// switch
|
|
458
|
+
&:has(.@{ant-prefix}-switch) {
|
|
459
|
+
padding: 5px 0;
|
|
460
|
+
}
|
|
461
|
+
|
|
462
|
+
// textArea
|
|
463
|
+
.@{ant-prefix}-input-textarea > textarea {
|
|
464
|
+
background: @zaui-contract-bg-add;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
|
|
468
|
+
.pro-form-view-container {
|
|
469
|
+
padding: 4px 8px;
|
|
470
|
+
background: @zaui-contract-bg-add;
|
|
471
|
+
border-radius: 4px;
|
|
472
|
+
}
|
|
473
|
+
}
|
|
376
474
|
}
|
|
@@ -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
|
};
|
|
@@ -6,10 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.transformValue = exports.default = void 0;
|
|
8
8
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
|
9
|
-
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
9
|
var _lodash = require("lodash");
|
|
11
10
|
var _utils = require("../utils");
|
|
12
|
-
var
|
|
11
|
+
var _utils2 = require("../../utils");
|
|
13
12
|
var transformValue = exports.transformValue = function transformValue(names, form, fieldName, _normalize, _getValueProps) {
|
|
14
13
|
return {
|
|
15
14
|
normalize: function normalize(value) {
|
|
@@ -29,23 +28,30 @@ var transformValue = exports.transformValue = function transformValue(names, for
|
|
|
29
28
|
return _value;
|
|
30
29
|
},
|
|
31
30
|
getValueProps: function getValueProps(value) {
|
|
31
|
+
var _curValue;
|
|
32
32
|
var _value = [];
|
|
33
33
|
names.forEach(function (name, index) {
|
|
34
34
|
var value = form.getFieldValue(name);
|
|
35
35
|
_value[index] = value;
|
|
36
36
|
});
|
|
37
37
|
// 支持外部传入转换函数
|
|
38
|
-
var
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
var res = (_getValueProps === null || _getValueProps === void 0 ? void 0 : _getValueProps(_value)) || {
|
|
39
|
+
value: _value
|
|
40
|
+
};
|
|
41
|
+
// 如果数组中值都为空, 则值置为空
|
|
42
|
+
var curValue = res === null || res === void 0 ? void 0 : res.value;
|
|
43
43
|
// @ts-ignore
|
|
44
|
-
(0
|
|
44
|
+
if ((_curValue = curValue) === null || _curValue === void 0 ? void 0 : _curValue.every(function (item) {
|
|
45
|
+
return (0, _utils2.isEmpty)(item);
|
|
46
|
+
})) {
|
|
47
|
+
curValue = undefined;
|
|
48
|
+
}
|
|
49
|
+
// @ts-ignore
|
|
50
|
+
(0, _lodash.set)(form.getFieldsValue(true), fieldName, curValue);
|
|
45
51
|
// 如果表单里的值和组合得到的值不全等 更新表单里的值、
|
|
46
|
-
return (0, _objectSpread2.default)({
|
|
47
|
-
value:
|
|
48
|
-
}
|
|
52
|
+
return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, res), {}, {
|
|
53
|
+
value: curValue
|
|
54
|
+
});
|
|
49
55
|
},
|
|
50
56
|
shouldUpdate: function shouldUpdate(prevValues, curValues) {
|
|
51
57
|
return (0, _utils.diffField)(prevValues, curValues, names);
|