@zat-design/sisyphus-react 3.8.3 → 3.9.0

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

@@ -51,7 +51,8 @@ export var formatColumn = function formatColumn(_ref2) {
     diffToolTip = _ref2.diffToolTip,
     wrapToolTipProps = _ref2.wrapToolTipProps,
     scroll = _ref2.scroll,
-    onUpdateMinWidth = _ref2.onUpdateMinWidth;
+    onUpdateMinWidth = _ref2.onUpdateMinWidth,
+    isInNewRow = _ref2.isInNewRow;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -71,7 +72,8 @@ export var formatColumn = function formatColumn(_ref2) {
     originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
     _column$toolTipProps = column.toolTipProps,
     toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
-    minWidth = column.minWidth;
+    minWidth = column.minWidth,
+    onDiff = column.onDiff;
   // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
   var isMaxContentOverFlow = isObject(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
   calcMinWidth({
@@ -108,7 +110,7 @@ export var 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) {
+    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0 && !onDiff) {
       return;
     }
     var originalRender = column.render; // 保存原始的 render 方法
@@ -116,12 +118,27 @@ export var formatColumn = function formatColumn(_ref2) {
     column.render = function (value, record, index) {
       var _originalObj$record$r;
       var isFn = 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 = 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 (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 = null;
+        } else {
+          originalValue = true;
+          extraDiffFlag = true;
+        }
+      }
       return _jsx(RenderColumn, {
         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,
@@ -129,7 +146,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: _value,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
     return;
@@ -160,12 +178,18 @@ export var formatColumn = function formatColumn(_ref2) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        return _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
       var node = _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -176,7 +200,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
     // 千分位, 千分位带CNY前缀
@@ -195,8 +220,14 @@ export var formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -207,7 +238,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (['datePicker', 'date', 'dateTime', 'dateStartTime', 'dateEndTime', 'dateStartEndTime'].includes(valueType)) {
@@ -249,8 +281,14 @@ export var formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -261,7 +299,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (['enumName', 'enumCodeName'].includes(valueType)) {
@@ -290,6 +329,7 @@ export var formatColumn = function formatColumn(_ref2) {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -300,7 +340,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (precision || prefix || suffix) {
@@ -316,8 +357,14 @@ export var formatColumn = function formatColumn(_ref2) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -328,7 +375,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (valueType === 'address') {
@@ -341,10 +389,14 @@ export var formatColumn = function formatColumn(_ref2) {
         return !!item;
       })) === null || _realValue$filter === void 0 ? void 0 : _realValue$filter.length) === 0;
       if (isEqual(value, originalValue) && isEmpty) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
       var className = classnames({
-        'varied-cell': originalValue !== undefined,
         'empty-cell': isEmpty
       });
       var renderValue = _jsx(ProForm.ProCascader, {
@@ -359,21 +411,32 @@ export var formatColumn = function formatColumn(_ref2) {
         code: code,
         value: originalRealValue
       });
-      return _jsx(ProForm.ProCascader, {
+      var renderNode = _jsx(ProForm.ProCascader, {
         className: className,
         isView: true,
         mode: "address",
         code: code,
         value: realValue,
-        tooltip: originalValue !== undefined ? _jsxs(_Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalRenderValue, _jsx("br", {}), ellipsis ? _jsxs(_Fragment, {
-            children: ["\u5F53\u524D\u503C\uFF1A", renderValue]
-          }) : undefined]
-        }) : ellipsis
+        tooltip: false
+      });
+      var isInNewRowFlag = isInNewRow(record);
+      return _jsx(RenderColumn, {
+        valueType: valueType,
+        originalValue: originalValue === undefined ? undefined : originalRenderValue,
+        ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
+        width: width,
+        node: renderNode,
+        value: renderValue,
+        currentValue: renderValue,
+        originalDiffTip: _originalDiffTip,
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (copyable) {
     column.render = function (value, record, index) {
+      var isInNewRowFlag = isInNewRow(record);
       return _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), _jsx(RenderColumn, {
@@ -385,7 +448,8 @@ export var formatColumn = function formatColumn(_ref2) {
           value: value,
           currentValue: value,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -393,8 +457,14 @@ export var formatColumn = function formatColumn(_ref2) {
     column.render = function (value, record, index) {
       var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), _jsx(RenderColumn, {
@@ -407,7 +477,8 @@ export var formatColumn = function formatColumn(_ref2) {
           currentValue: value || '-',
           originalDiffTip: _originalDiffTip,
           toolTipProps: _toolTipProps,
-          minWidth: minWidth
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -419,8 +490,14 @@ export var formatColumn = function formatColumn(_ref2) {
         children: [prefixNode(value, record, index), value, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalValue || '-',
@@ -431,7 +508,8 @@ export var formatColumn = function formatColumn(_ref2) {
         currentValue: value || '-',
         originalDiffTip: _originalDiffTip,
         toolTipProps: _toolTipProps,
-        minWidth: minWidth
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   }

package/es/ProTable/components/RenderColumn/index.d.ts

@@ -12,6 +12,7 @@ interface Props {
     originalValue?: any;
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     minWidth?: number;
+    isInNewRowFlag?: boolean;
 }
 declare const RenderColumn: FC<Props>;
 export default RenderColumn;

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

@@ -1,10 +1,12 @@
+import "antd/es/space/style";
+import _Space from "antd/es/space";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "antd/es/tooltip/style";
 import _Tooltip from "antd/es/tooltip";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/typography/style";
 import _Typography from "antd/es/typography";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSetState } from 'ahooks';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
@@ -24,14 +26,15 @@ var RenderColumn = function RenderColumn(props) {
     originalDiffTip = props.originalDiffTip,
     _props$toolTipProps = props.toolTipProps,
     toolTipProps = _props$toolTipProps === void 0 ? {} : _props$toolTipProps,
-    minWidth = props.minWidth;
+    minWidth = props.minWidth,
+    isInNewRowFlag = props.isInNewRowFlag;
   var _useSetState = useSetState({
       tooltip: false
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
-  if (originalValue !== undefined) {
+  if ((originalValue || originalValue === 0) && !isInNewRowFlag) {
     var renderNode = value ? node : '-';
     if (ellipsis || originalDiffTip) {
       if (ellipsis) {
@@ -52,9 +55,23 @@ var RenderColumn = function RenderColumn(props) {
           width: width,
           minWidth: minWidth
         },
-        title: originalDiffTip ? _jsxs(_Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalValue, _jsx("br", {}), ellipsis ? "\u5F53\u524D\u503C\uFF1A".concat(currentValue) : undefined]
-        }) : node,
+        overlayClassName: "original-value-tootip",
+        title: _jsx(_Space, {
+          direction: "vertical",
+          className: "changed-tooltip",
+          children: originalDiffTip ? _jsxs(_Fragment, {
+            children: [_jsxs(_Space, {
+              align: "start",
+              className: "original-value-container",
+              children: ["\u521D\u59CB\u503C\uFF1A", originalValue]
+            }), _jsx(_Space, {
+              className: "current-value-container",
+              children: ellipsis ? _jsxs("span", {
+                children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
+              }) : null
+            })]
+          }) : node
+        }),
         getPopupContainer: function getPopupContainer(triggerNode) {
           return triggerNode.parentNode;
         }

package/es/ProTable/index.js

@@ -183,6 +183,11 @@ function ProTable(props) {
       setCurColumns(nextColumns);
     };
   };
+  var _rowClassName = function _rowClassName(record, index) {
+    if (originalDataSource && !originalObj.hasOwnProperty(get(record, 'rowKey'))) {
+      return 'new-cell';
+    }
+  };
   var columns = useMemo(function () {
     var newColumns = curColumns.map(function (item, index) {
       var _propsColumnObj$getCo2;
@@ -215,11 +220,12 @@ function ProTable(props) {
         scroll: _scroll,
         onUpdateMinWidth: function onUpdateMinWidth(w) {
           curColumns[index].minWidth = w;
-        }
+        },
+        isInNewRow: _rowClassName
       });
     });
     return newColumns;
-  }, [curColumns, handleResize, _scroll]);
+  }, [curColumns, handleResize, _scroll, originalDataSource, originalObj, _rowClassName]);
   var _columns = useMemo(function () {
     return columns === null || columns === void 0 ? void 0 : columns.filter(function (item, index) {
       var show = item.show;
@@ -368,11 +374,6 @@ function ProTable(props) {
       return _ref7.apply(this, arguments);
     };
   }();
-  var _rowClassName = function _rowClassName(record, index) {
-    if (originalDataSource && !originalObj.hasOwnProperty(get(record, 'rowKey'))) {
-      return 'new-cell';
-    }
-  };
   var TableComponent = draggable ? DraggableTable : BaseTable;
   // 标记样式
   var tagStyle = {

package/es/ProTable/propsType.d.ts

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

package/es/ProTable/style/index.less

@@ -272,8 +272,22 @@
     .@{ant-prefix}-table-cell .varied-cell {
       margin-left: -8px;
       padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
+
       background: var(--zaui-contract-bg; #fffaa1) !important;
       border-radius: var(--zaui-border-radius, 8px);
+      .pro-form-view-container {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{ant-prefix}-table-cell .@{ant-prefix}-typography-ellipsis {
+      .pro-form-view-container {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
 
     .varied-cell.empty-cell {

package/es/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/es/utils/index.d.ts

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

package/es/utils/index.js

@@ -1,3 +1,5 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useEffect, useState } from 'react';
 var EMPTY_VALUE = [undefined, null, ''];
 /** 判断一个值是否是空值 */
 export var isEmpty = function isEmpty(value) {
@@ -10,4 +12,28 @@ export var isEmpty = function isEmpty(value) {
     });
   }
   return false;
+};
+export var useFocus = function useFocus(element) {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    focus = _useState2[0],
+    setFocus = _useState2[1];
+  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;
 };