@zat-design/sisyphus-react 3.8.3-beta.9 → 3.9.0

package/lib/ProForm/style/index.less

@@ -53,6 +53,11 @@
   }
 
   &.pro-form-view {
+    .pro-group{
+      .@{ant-prefix}-space-item, .pro-form-view-container{
+        width: max-content;
+      }
+    }
     .@{ant-prefix}-form-item-label {
       label {
         color: var(--zaui-aide-text, #939599);
@@ -480,15 +485,29 @@
   }
 }
 
-.changed-tooltip {
-  .original-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+.original-value-tootip{
+  max-width: 100%;
+  width: max-content;
+  z-index: 99;
+  .changed-tooltip {
+    .original-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
+      .pro-group{
+        .ant-space-compact{
+          display: block;
+        }
+        .pro-form-view-container{
+          word-break: keep-all;
+        }
+      }
     }
-  }
-  .current-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+    .current-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
     }
   }
-}
+}
+

package/lib/ProTable/components/FormatColumn/index.js

@@ -79,7 +79,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
     minWidth = column.minWidth,
-    diffTeleport = column.diffTeleport;
+    onDiff = column.onDiff;
   // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
   var isMaxContentOverFlow = (0, _lodash.isObject)(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
   calcMinWidth({
@@ -116,7 +116,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     }
   };
   if (column === null || column === void 0 ? void 0 : column.render) {
-    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0 && !diffTeleport) {
+    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0 && !onDiff) {
       return;
     }
     var originalRender = column.render; // 保存原始的 render 方法
@@ -124,20 +124,27 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
     column.render = function (value, record, index) {
       var _originalObj$record$r;
       var isFn = (0, _lodash.isFunction)(originalRender);
-      var _value = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(value, record !== null && record !== void 0 ? record : {}, index) : undefined;
+      var _value = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(value, record !== null && record !== void 0 ? record : {}, index) : null;
       var originalValue = (0, _utils2.getOriginalValue)(value, record !== null && record !== void 0 ? record : {}, originalObj, rowKey, dataIndex);
-      var originalRenderValue = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(originalValue, (_originalObj$record$r = originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]) !== null && _originalObj$record$r !== void 0 ? _originalObj$record$r : {}, index) : undefined;
+      var originalRenderValue = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(originalValue, (_originalObj$record$r = originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]) !== null && _originalObj$record$r !== void 0 ? _originalObj$record$r : {}, index) : null;
       var isInNewRowFlag = isInNewRow(record);
+      var extraDiffFlag = false;
       // 把比对结果告诉我
-      if (diffTeleport) {
-        var isDiff = diffTeleport(value, record, index, originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]);
+      if (onDiff) {
+        var isDiff = onDiff({
+          value: record,
+          originValue: originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]
+        });
         if (!isDiff) {
-          originalValue = undefined;
+          originalValue = null;
+        } else {
+          originalValue = true;
+          extraDiffFlag = true;
         }
       }
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
-        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        originalValue: !originalValue && originalValue !== 0 ? null : extraDiffFlag ? originalRenderValue !== null && originalRenderValue !== void 0 ? originalRenderValue : originalValue : originalRenderValue,
         ellipsis: ellipsis,
         width: width,
         value: _value,
@@ -396,7 +403,6 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
         });
       }
       var className = (0, _classnames.default)({
-        'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
       var renderValue = (0, _jsxRuntime.jsx)(_ProForm.default.ProCascader, {
@@ -422,7 +428,7 @@ var formatColumn = exports.formatColumn = function formatColumn(_ref2) {
       var isInNewRowFlag = isInNewRow(record);
       return (0, _jsxRuntime.jsx)(_RenderColumn.default, {
         valueType: valueType,
-        originalValue: originalRealValue === undefined ? undefined : originalRenderValue,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
         ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
         width: width,
         node: renderNode,

package/lib/ProTable/components/RenderColumn/index.js

@@ -36,7 +36,7 @@ var RenderColumn = function RenderColumn(props) {
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
-  if (originalValue !== undefined && !isInNewRowFlag) {
+  if ((originalValue || originalValue === 0) && !isInNewRowFlag) {
     var renderNode = value ? node : '-';
     if (ellipsis || originalDiffTip) {
       if (ellipsis) {
@@ -57,11 +57,23 @@ var RenderColumn = function RenderColumn(props) {
           width: width,
           minWidth: minWidth
         },
-        title: originalDiffTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalValue, (0, _jsxRuntime.jsx)("br", {}), ellipsis ? (0, _jsxRuntime.jsxs)("span", {
-            children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
-          }) : undefined]
-        }) : node,
+        overlayClassName: "original-value-tootip",
+        title: (0, _jsxRuntime.jsx)(_antd.Space, {
+          direction: "vertical",
+          className: "changed-tooltip",
+          children: originalDiffTip ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [(0, _jsxRuntime.jsxs)(_antd.Space, {
+              align: "start",
+              className: "original-value-container",
+              children: ["\u521D\u59CB\u503C\uFF1A", originalValue]
+            }), (0, _jsxRuntime.jsx)(_antd.Space, {
+              className: "current-value-container",
+              children: ellipsis ? (0, _jsxRuntime.jsxs)("span", {
+                children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
+              }) : null
+            })]
+          }) : node
+        }),
         getPopupContainer: function getPopupContainer(triggerNode) {
           return triggerNode.parentNode;
         }

package/lib/ProTable/propsType.d.ts

@@ -41,7 +41,10 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     transform?: (value: any, record?: any) => string[];
     show?: boolean | (() => boolean);
-    diffTeleport?: (value: any, record: any, index: number, originalRecord?: any) => boolean;
+    onDiff?: ({ value, originValue }: {
+        value: any;
+        originValue: any;
+    }) => boolean;
 }
 export interface CreateTreeFromArrayOptions {
     itemKey?: string;

package/lib/style/theme/antd.less

@@ -323,7 +323,7 @@
     .@{ant-prefix}-table-tbody {
       .@{ant-prefix}-table-row:nth-child(even) {
         td {
-          background: #ffffff !important;
+          background: #ffffff;
         }
       }
 

package/lib/utils/index.d.ts

@@ -1,2 +1,3 @@
 /** 判断一个值是否是空值 */
 export declare const isEmpty: (value: any) => boolean;
+export declare const useFocus: (element: Element) => boolean;

package/lib/utils/index.js

@@ -1,9 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isEmpty = void 0;
+exports.useFocus = exports.isEmpty = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var EMPTY_VALUE = [undefined, null, ''];
 /** 判断一个值是否是空值 */
 var isEmpty = exports.isEmpty = function isEmpty(value) {
@@ -16,4 +19,28 @@ var isEmpty = exports.isEmpty = function isEmpty(value) {
     });
   }
   return false;
+};
+var useFocus = exports.useFocus = function useFocus(element) {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!element) return;
+    element.addEventListener('focus', function () {
+      setFocus(true);
+    }, true);
+    element.addEventListener('blur', function () {
+      setFocus(false);
+    }, true);
+    return function () {
+      element.removeEventListener('focus', function () {
+        setFocus(true);
+      }, true);
+      element.removeEventListener('blur', function () {
+        setFocus(false);
+      }, true);
+    };
+  }, [element]);
+  return focus;
 };

package/package.json

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