@zat-design/sisyphus-react 3.6.8-beta.5 → 3.6.9-beta.1

package/lib/ProForm/components/render/Changed.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _antd = require("antd");
+var _lodash = require("lodash");
+var _react = _interopRequireWildcard(require("react"));
+var _diffOriginal = require("@/ProForm/utils/diffOriginal");
+var _excluded = ["name", "names", "namesStr", "originalValues", "form", "equalWith", "children", "type", "originalDiffTip"];
+var Changed = function Changed(props) {
+  var name = props.name,
+    names = props.names,
+    namesStr = props.namesStr,
+    originalValues = props.originalValues,
+    form = props.form,
+    equalWith = props.equalWith,
+    children = props.children,
+    type = props.type,
+    originalDiffTip = props.originalDiffTip,
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  // 不渲染tooltip
+  var notWatch = !originalDiffTip || ['FormList', 'ProEditTable'].includes(type);
+  var originalValue = (names === null || names === void 0 ? void 0 : names.length) ? names.map(function (name) {
+    return (0, _lodash.get)(originalValues, name);
+  }) : (0, _lodash.get)(originalValues, name);
+  var noChange = !equalWith && (!originalValues || originalValue === undefined);
+  var changed = (0, _react.useMemo)(function () {
+    if (notWatch || noChange) return false;
+    return (0, _diffOriginal.diffOriginal)({
+      originalValue: originalValue,
+      value: props.value,
+      form: form,
+      equalWith: equalWith
+      // name: namesStr || name,
+    });
+  }, [notWatch, noChange, props.value, originalValue]);
+  if (notWatch || noChange) {
+    return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest));
+  }
+  return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
+    open: changed ? undefined : false,
+    getPopupContainer: function getPopupContainer(target) {
+      return target.parentElement;
+    },
+    title: (0, _jsxRuntime.jsxs)(_antd.Space, {
+      children: ["\u521D\u59CB\u503C\uFF1A", /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), {}, {
+        isView: true,
+        value: originalValue,
+        checked: type === 'Switch' ? originalValue : undefined
+      })) : undefined]
+    }),
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: changed ? 'pro-form-item-changed' : '',
+      children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest)) : undefined
+    })
+  });
+};
+var _default = exports.default = Changed;

package/lib/ProForm/components/render/Render.js

@@ -11,7 +11,6 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
@@ -24,10 +23,10 @@ var _index = require("../../utils/index");
 var _ProConfigProvider = require("../../../ProConfigProvider");
 var _transformNames = _interopRequireDefault(require("../../utils/transformNames"));
 var _valueType = _interopRequireDefault(require("../../utils/valueType"));
-var _useChanged3 = require("../../utils/useChanged");
 var _tip = _interopRequireDefault(require("../../../assets/tip.svg"));
 var _useRules = _interopRequireDefault(require("../../utils/useRules"));
 var _ConfirmWrapper = _interopRequireDefault(require("./ConfirmWrapper"));
+var _Changed = _interopRequireDefault(require("./Changed"));
 var _excluded = ["labelWidth", "hiddenNames", "trim", "upperCase", "className", "rules", "required", "labelRequired", "tooltip"];
 /* eslint-disable prefer-destructuring */
 // 这个组件只管渲染, 参数的整理在外部处理
@@ -99,18 +98,6 @@ var Render = function Render(props) {
       return Array.isArray(name) ? name.join('_') : name;
     }).join('-');
   }, [otherProps === null || otherProps === void 0 ? void 0 : otherProps.names]);
-  // 判断当前字段是否变更
-  var _useChanged = (0, _useChanged3.useChanged)({
-      name: formItemProps.name,
-      names: otherProps.names,
-      namesStr: namesStr,
-      originalValues: originalValues,
-      form: form,
-      equalWith: equalWith
-    }),
-    _useChanged2 = (0, _slicedToArray2.default)(_useChanged, 2),
-    changed = _useChanged2[0],
-    originalValue = _useChanged2[1];
   var internalRule = (0, _useRules.default)({
     names: otherProps.names,
     label: otherFormItemProps.label,
@@ -182,7 +169,7 @@ var Render = function Render(props) {
   var lastComponentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, componentProps), _fieldProps), {}, {
     disabled: lastDisabled
   });
-  var _className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, className, className), 'pro-form-item-changed', changed), 'pro-form-item-width-auto', ['Switch'].includes(type)));
+  var _className = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, className, className), 'pro-form-item-width-auto', ['Switch'].includes(type)));
   if (formItemProps.hidden === true || _show === false) {
     // 为了监听shouldUpdate  必须存在一个FormItem, 空Input解决 【[antd: Form.Item] `name` is only used for validate React element】
     return (0, _jsxRuntime.jsx)(_antd.Form.Item, {
@@ -444,7 +431,17 @@ var Render = function Render(props) {
       // @ts-ignore
       _internalItemRender: internalItemRender,
       className: _className,
-      children: child
+      children: (0, _jsxRuntime.jsx)(_Changed.default, {
+        name: formItemProps.name,
+        names: otherProps.names,
+        namesStr: namesStr,
+        originalValues: originalValues,
+        form: form,
+        equalWith: equalWith,
+        originalDiffTip: originalDiffTip,
+        type: type,
+        children: child
+      })
     }));
     var formItem = orgFormItem;
     // 当存在shouldUpdate时捕获所有form变更（防止表单onchange设置form值时无法更新的问题）
@@ -460,32 +457,23 @@ var Render = function Render(props) {
               // @ts-ignore
               _internalItemRender: internalItemRender,
               className: _className,
-              children: child
+              children: (0, _jsxRuntime.jsx)(_Changed.default, {
+                name: formItemProps.name,
+                names: otherProps.names,
+                namesStr: namesStr,
+                originalValues: originalValues,
+                form: form,
+                equalWith: equalWith,
+                originalDiffTip: originalDiffTip,
+                type: type,
+                children: child
+              })
             }));
           }
         })
       });
     }
-    // 不渲染tooltip
-    if (!originalDiffTip || ['FormList', 'ProEditTable'].includes(type)) {
-      return formItem;
-    }
-    var title = (0, _jsxRuntime.jsxs)(_antd.Space, {
-      children: ["\u521D\u59CB\u503C\uFF1A", /*#__PURE__*/_react.default.cloneElement(child, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, child), {}, {
-        isView: true,
-        value: originalValue,
-        checked: type === 'Switch' ? originalValue : undefined
-      }))]
-    });
-    return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
-      title: title,
-      open: changed ? undefined : false,
-      // open={true}
-      getPopupContainer: function getPopupContainer(target) {
-        return target.parentElement;
-      },
-      children: formItem
-    });
+    return formItem;
   };
   var FormItem = (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [renderItem(), (otherProps === null || otherProps === void 0 ? void 0 : (_otherProps$names2 = otherProps.names) === null || _otherProps$names2 === void 0 ? void 0 : _otherProps$names2.length) ? otherProps.names.map(function (name) {

package/lib/ProForm/style/index.less

@@ -116,58 +116,6 @@
       }
     }
 
-    // 比较原始值场景下  不同时的样式
-    &.pro-form-item-changed {
-      span.@{ant-prefix}-input-affix-wrapper,
-      .@{ant-prefix}-select-selector,
-      .@{ant-prefix}-picker,
-      .@{ant-prefix}-input-number {
-        background: @zaui-contract-bg !important;
-
-        input {
-          background: transparent;
-        }
-        .@{ant-prefix}-select-selection-placeholder {
-          z-index: 9;
-        }
-      }
-
-      .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
-      .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
-        background: @zaui-contract-bg;
-        border-radius: 4px;
-      }
-
-      // 地址组件
-      .@{ant-prefix}-form-item-control-input-content {
-        // 查看模式
-        & > span {
-          border-radius: 4px;
-          padding: 5px 8px;
-          background: @zaui-contract-bg;
-        }
-
-        & > .pro-address {
-          .@{ant-prefix}-select-selector,
-          .@{ant-prefix}-input-affix-wrapper,
-          .@{ant-prefix}-input-disabled {
-            background: @zaui-contract-bg;
-          }
-        }
-        & > .@{ant-prefix}-input-group {
-          .forever-checkbox {
-            background: @zaui-contract-bg;
-          }
-        }
-      }
-
-      .pro-form-view-container {
-        padding: 4px 8px;
-        background: @zaui-contract-bg;
-        border-radius: 4px;
-      }
-    }
-
     .@{ant-prefix}-row {
       width: 100%;
     }
@@ -373,4 +321,56 @@
       }
     }
   }
+
+  // 比较原始值场景下  不同时的样式
+  .pro-form-item-changed {
+    span.@{ant-prefix}-input-affix-wrapper,
+    .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-picker,
+    .@{ant-prefix}-input-number {
+      background: @zaui-contract-bg !important;
+
+      input {
+        background: transparent;
+      }
+      .@{ant-prefix}-select-selection-placeholder {
+        z-index: 9;
+      }
+    }
+
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+
+    // 地址组件
+    .@{ant-prefix}-form-item-control-input-content {
+      // 查看模式
+      & > span {
+        border-radius: 4px;
+        padding: 5px 8px;
+        background: @zaui-contract-bg;
+      }
+
+      & > .pro-address {
+        .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-affix-wrapper,
+        .@{ant-prefix}-input-disabled {
+          background: @zaui-contract-bg;
+        }
+      }
+      & > .@{ant-prefix}-input-group {
+        .forever-checkbox {
+          background: @zaui-contract-bg;
+        }
+      }
+    }
+
+    .pro-form-view-container {
+      padding: 4px 8px;
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+  }
 }

package/lib/ProForm/utils/diffOriginal.d.ts

@@ -3,7 +3,6 @@ interface Params {
     originalValue: any;
     value: any;
     form: FormInstance;
-    name?: string | any[];
     equalWith?: (originalValue: any, currentValue: any) => boolean;
 }
 export declare const diffOriginal: (params: Params) => boolean;

package/lib/ProForm/utils/diffOriginal.js

@@ -1,38 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.diffOriginal = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _lodash = require("lodash");
 var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
-/** 将解构后的name值，反向转回names,例如 formData {a:1, b:2} names ['a', 'b'] 返回 [1,2] */
-var extractValues = function extractValues(form, pathString) {
-  var _pathString;
-  var result = [];
-  var PrefixesName = (0, _lodash.isString)(pathString) ? [] : pathString.slice(0, -1);
-  if ((0, _lodash.isString)(pathString)) {
-    pathString.split('-').forEach(function (item) {
-      result.push(form.getFieldValue([].concat((0, _toConsumableArray2.default)(PrefixesName), [item])));
-    });
-    return result;
-  }
-  (_pathString = pathString[pathString.length - 1]) === null || _pathString === void 0 ? void 0 : _pathString.split('-').forEach(function (item) {
-    result.push(form.getFieldValue([].concat((0, _toConsumableArray2.default)(PrefixesName), [item])));
-  });
-  return result;
-};
 var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
-  var _name$join;
   var originalValue = params.originalValue,
-    _value = params.value,
-    equalWith = params.equalWith,
-    form = params.form,
-    name = params.name;
-  var isNames = Array.isArray(name) && ((_name$join = name.join(',')) === null || _name$join === void 0 ? void 0 : _name$join.includes('-')) || (name === null || name === void 0 ? void 0 : name.includes('-'));
-  var value = !isNames ? _value : extractValues(form, name);
+    value = params.value,
+    equalWith = params.equalWith;
   // 支持传入自定义比较事件
   if ((0, _lodash.isFunction)(equalWith)) {
     return !equalWith(originalValue, value);
@@ -47,8 +24,7 @@ var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
     });
   }
   if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
-    var res = !(0, _lodash.isEqual)(value, originalValue);
-    return res;
+    return !(0, _lodash.isEqual)(value, originalValue);
   }
   return false;
 };

package/lib/ProForm/utils/useChanged.js

@@ -24,8 +24,7 @@ var useChanged = exports.useChanged = function useChanged(_ref) {
     originalValue: originalValue,
     value: value,
     form: form,
-    equalWith: equalWith,
-    name: namesStr || name
+    equalWith: equalWith
   });
   return [changed, originalValue];
 };

package/lib/ProForm/utils/useListChanged.js

@@ -91,8 +91,8 @@ var useListChanged = exports.useListChanged = function useListChanged(params) {
     value: value,
     originalValue: originalValue,
     form: form,
-    equalWith: equalWith,
-    name: (0, _lodash.isString)(namesStr) ? namesStr : originalName || name
+    equalWith: equalWith
+    // name: isString(namesStr) ? namesStr : originalName || name,
   });
   return [changed, originalValue];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.6.8-beta.5",
+  "version": "3.6.9-beta.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",