@zat-design/sisyphus-react 3.10.2 → 3.10.3-beta.3

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

@@ -14,7 +14,8 @@ var _lodash = require("lodash");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@ant-design/icons");
 var _reactSvg = require("react-svg");
-var _utils = require("../../../utils");
+var _utils = require("../../utils");
+var _utils2 = require("../../../utils");
 var _copy = _interopRequireDefault(require("../../../assets/copy.svg"));
 var Paragraph = _antd.Typography.Paragraph,
   Text = _antd.Typography.Text;
@@ -43,6 +44,32 @@ var RenderColumn = function RenderColumn(props) {
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
   });
+  var checkEllipsis = function checkEllipsis(box) {
+    var range = document.createRange();
+    range.setStart(box, 0);
+    range.setEnd(box, box.childNodes.length);
+    var rangeWidth = range.getBoundingClientRect().width;
+    var _getPadding = (0, _utils.getPadding)(box),
+      pLeft = _getPadding.pLeft,
+      pRight = _getPadding.pRight,
+      pTop = _getPadding.pTop,
+      pBottom = _getPadding.pBottom;
+    var horizontalPadding = pLeft + pRight;
+    if (rangeWidth + horizontalPadding > box.clientWidth) {
+      return true;
+    }
+    return false;
+  };
+  var handleMouseOver = function handleMouseOver(e) {
+    setState({
+      tooltip: checkEllipsis(e.target)
+    });
+  };
+  var tooltipProps = (0, _objectSpread2.default)({
+    getPopupContainer: function getPopupContainer(triggerNode) {
+      return triggerNode.parentNode;
+    }
+  }, toolTipProps);
   // 比对场景走的逻辑
   if (!isInNewRowFlag && (0, _lodash.isBoolean)(props === null || props === void 0 ? void 0 : props.isChanged)) {
     var renderNode = value ? node : '-';
@@ -60,11 +87,36 @@ var RenderColumn = function RenderColumn(props) {
       }) : (0, _jsxRuntime.jsx)("div", {
         style: {
           minWidth: minWidth,
-          width: width
+          width: width,
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
         },
         children: ellipsis ? currentValue : renderNode
       });
       if ((props === null || props === void 0 ? void 0 : props.isChanged) === false) {
+        if (ellipsis) {
+          return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+            title: currentValue,
+            onOpenChange: function onOpenChange(open) {
+              setState({
+                tooltip: false
+              });
+            },
+            open: tooltip
+          }, tooltipProps), {}, {
+            children: (0, _jsxRuntime.jsx)(Text, {
+              style: {
+                width: width,
+                minWidth: minWidth
+              },
+              ellipsis: true,
+              onMouseOver: handleMouseOver,
+              onFocus: handleMouseOver,
+              children: renderNode
+            })
+          }));
+        }
         return renderNode;
       }
       if (Array.isArray(originalValue)) {
@@ -74,7 +126,7 @@ var RenderColumn = function RenderColumn(props) {
         if (Array.isArray(originalValue)) {
           return null;
         }
-        return !(0, _utils.isEmpty)(originalValue) ? originalValue : '-';
+        return !(0, _utils2.isEmpty)(originalValue) ? originalValue : '-';
       };
       return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
         className: cellDiffCls,
@@ -88,7 +140,7 @@ var RenderColumn = function RenderColumn(props) {
         title: (0, _jsxRuntime.jsx)(_antd.Space, {
           direction: "vertical",
           className: "changed-tooltip",
-          children: (props === null || props === void 0 ? void 0 : props.isChanged) ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: (props === null || props === void 0 ? void 0 : props.isChanged) && !(props === null || props === void 0 ? void 0 : props.isAddCell) ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
             children: [(0, _jsxRuntime.jsxs)(_antd.Space, {
               align: "start",
               className: "original-value-container",
@@ -140,45 +192,6 @@ var RenderColumn = function RenderColumn(props) {
     });
   }
   if (ellipsis) {
-    var getPadding = function getPadding(el) {
-      var style = window.getComputedStyle(el, null);
-      var paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
-      var paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
-      var paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
-      var paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
-      return {
-        pLeft: paddingLeft,
-        pRight: paddingRight,
-        pTop: paddingTop,
-        pBottom: paddingBottom
-      };
-    };
-    var checkEllipsis = function checkEllipsis(box) {
-      var range = document.createRange();
-      range.setStart(box, 0);
-      range.setEnd(box, box.childNodes.length);
-      var rangeWidth = range.getBoundingClientRect().width;
-      var _getPadding = getPadding(box),
-        pLeft = _getPadding.pLeft,
-        pRight = _getPadding.pRight,
-        pTop = _getPadding.pTop,
-        pBottom = _getPadding.pBottom;
-      var horizontalPadding = pLeft + pRight;
-      if (rangeWidth + horizontalPadding > box.clientWidth) {
-        return true;
-      }
-      return false;
-    };
-    var handleMouseOver = function handleMouseOver(e) {
-      setState({
-        tooltip: checkEllipsis(e.target)
-      });
-    };
-    var tooltipProps = (0, _objectSpread2.default)({
-      getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
-      }
-    }, toolTipProps);
     if (!value) {
       return (0, _jsxRuntime.jsx)("div", {
         style: {

package/lib/ProTable/hooks/useAntdTable.js

@@ -31,6 +31,7 @@ var useDefaultOptions = function useDefaultOptions(options) {
     onPageChange: (options === null || options === void 0 ? void 0 : options.onPageChange) || onPageChange
   });
 };
+var previousSearchValues = null;
 function useAntdTable(service, options, useRequestOptions) {
   var _locale$ProTable2, _locale$ProTable3, _locale$ProTable4, _locale$ProTable5;
   var _useSetState = (0, _ahooks.useSetState)({
@@ -39,7 +40,10 @@ function useAntdTable(service, options, useRequestOptions) {
       selectedRecords: [],
       selectedRowKeys: [],
       searchValues: undefined,
-      extraFilter: undefined,
+      extraFilter: {
+        filters: undefined,
+        sorter: undefined
+      },
       allSelected: false
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
@@ -70,10 +74,10 @@ function useAntdTable(service, options, useRequestOptions) {
     transformResponse = _useDefaultOptions.transformResponse,
     disabled = _useDefaultOptions.disabled;
   var _ref = useRequestOptions || {},
-    defaultParams = _ref.defaultParams,
-    manual = _ref.manual;
+    defaultParams = _ref.defaultParams;
   var defaultParam = Array.isArray(defaultParams) ? defaultParams === null || defaultParams === void 0 ? void 0 : defaultParams[0] : defaultParams || {};
   var initPage = (options === null || options === void 0 ? void 0 : options.page) || _index.defaultPage;
+  var previousPage = (0, _ahooks.usePrevious)(page || _index.defaultPage);
   var getTransformParams = (0, _react.useCallback)(function (params) {
     var _pickBy;
     var realParams = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultParam), extraParams), params);
@@ -112,9 +116,17 @@ function useAntdTable(service, options, useRequestOptions) {
       page: page
     }, newQueryBean));
   }, [page, searchValues, extraFilter]);
+  var curService = (0, _react.useMemo)(function () {
+    return service.toString();
+  }, [service]);
+  var curExtraParams = (0, _react.useMemo)(function () {
+    return extraParams ? JSON.stringify(extraParams) : extraParams;
+  }, [extraParams]);
   // 调接口
-  var result = (0, _ahooks.useRequest)(service, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, useRequestOptions), {}, {
-    debounceWait: 50,
+  var result = (0, _ahooks.useRequest)(service, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    debounceWait: 300,
+    refreshDeps: [curService, curExtraParams]
+  }, useRequestOptions), {}, {
     defaultParams: [getTransformParams()],
     onSuccess: function onSuccess(res, params) {
       var transformResult = transformResponse ? transformResponse(res) : res || {};
@@ -138,9 +150,6 @@ function useAntdTable(service, options, useRequestOptions) {
   }));
   var run = result.run,
     refreshAsync = result.refreshAsync;
-  var curService = (0, _react.useMemo)(function () {
-    return service.toString();
-  }, [service]);
   // service变化时触发 (禁止掉防止service变更时导致的死循环)
   var clearSelected = (0, _react.useCallback)(function () {
     setState({
@@ -179,6 +188,12 @@ function useAntdTable(service, options, useRequestOptions) {
       setState(nextObject);
     }
   }, [allSelected, data]);
+  // 释放
+  (0, _react.useEffect)(function () {
+    return function () {
+      previousSearchValues = null;
+    };
+  }, []);
   // 分页变更
   var handlePageChange = (0, _react.useCallback)(function (current, pageSize) {
     var page = {
@@ -220,26 +235,32 @@ function useAntdTable(service, options, useRequestOptions) {
       filters: filters,
       sorter: sorter
     })));
-  }, [allSelected, searchValues, run, getTransformParams]);
+  }, [allSelected, searchValues, getTransformParams]);
   var onSearch = (0, _react.useCallback)(function (values) {
     var newPage = {
       pageNum: 1,
       pageSize: page.pageSize
     };
     var _values = (0, _utils.removeEmptyKeys)(values);
-    onPageChange(newPage);
-    setState({
-      searchValues: _values,
-      allSelected: false,
-      selectedRecords: [],
-      selectedRowKeys: []
-    });
+    // 如果 previousPage 存在且与 page 不相等，则触发页面变化
+    if (previousPage && !(0, _lodash.isEqual)(previousPage, page)) {
+      onPageChange(newPage);
+    }
+    // 减少查询按钮的渲染，只有需要重置值时才需要调用
+    if ((selectedRecords === null || selectedRecords === void 0 ? void 0 : selectedRecords.length) || (0, _utils.isNonEmptyObject)(_values) && !(0, _lodash.isEqual)(previousSearchValues, _values)) {
+      previousSearchValues = _values;
+      setState({
+        searchValues: _values,
+        allSelected: false,
+        selectedRecords: [],
+        selectedRowKeys: []
+      });
+    }
     run(getTransformParams((0, _objectSpread2.default)((0, _objectSpread2.default)({
       page: newPage
     }, extraFilter), _values)));
-  }, [extraFilter, page.pageSize, run, getTransformParams]);
-  var resetParams = (0, _react.useCallback)(function () {
-    var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initPage;
+  }, [extraFilter, page.pageSize, previousPage, getTransformParams]);
+  var resetParams = (0, _react.useCallback)(function (page) {
     setState({
       searchValues: undefined,
       allSelected: false,
@@ -309,28 +330,6 @@ function useAntdTable(service, options, useRequestOptions) {
       return _ref4.apply(this, arguments);
     };
   }();
-  (0, _ahooks.useDeepCompareEffect)(function () {
-    if (!manual && curService) {
-      // service改变时重新请求
-      resetParams();
-      onPageChange(initPage);
-      run(getTransformParams());
-    }
-  }, [curService]);
-  (0, _ahooks.useDeepCompareEffect)(function () {
-    // extraParams改变时重新请求
-    if (!manual && extraParams) {
-      var newPage = {
-        pageNum: 1,
-        pageSize: page.pageSize
-      };
-      onPageChange(newPage);
-      resetParams(newPage);
-      run(getTransformParams({
-        page: newPage
-      }));
-    }
-  }, [extraParams]);
   var _rowSelection = {
     fixed: true,
     type: rowSelectType,
@@ -456,8 +455,8 @@ function useAntdTable(service, options, useRequestOptions) {
       });
     }
   }
-  var selectedTip = allSelected || selectedRowKeys.length ? (0, _locale.formatMessage)(_locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable5 = _locale.default.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.selectAll, {
-    selectedNum: allSelected ? total : selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length
+  var selectedTip = allSelected && selectedRowKeys.length ? (0, _locale.formatMessage)(_locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable5 = _locale.default.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.selectAll, {
+    total: allSelected ? total : selectedRowKeys === null || selectedRowKeys === void 0 ? void 0 : selectedRowKeys.length
   }) : null;
   var pagination = {
     current: page.pageNum,

package/lib/ProTable/style/index.less

@@ -585,7 +585,9 @@
 
   .@{ant-prefix}-table-summary {
     background-color: var(--zaui-table-header-bg, #f2f3f5);
-
+    td{
+      padding:calc(4px + var(--zaui-size)* 8px);
+    }
     .@{ant-prefix}-table-cell {
       font-weight: 500;
       background-color: var(--zaui-table-header-bg, #f2f3f5);

package/lib/ProTable/utils/index.d.ts

@@ -33,3 +33,11 @@ export declare const getRowKey: (rowKey: any, record: any) => any;
 export declare const removeEmptyKeys: (obj: any) => {
     [k: string]: unknown;
 };
+export declare const getPadding: (el: HTMLElement) => {
+    pLeft: number;
+    pRight: number;
+    pTop: number;
+    pBottom: number;
+};
+/** 判断是有值的对象 */
+export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;

package/lib/ProTable/utils/index.js

@@ -4,7 +4,8 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeEmptyKeys = exports.isListResult = exports.getRowKey = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
+exports.removeEmptyKeys = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lodash = require("lodash");
 var _utils = require("@zat-design/utils");
@@ -92,4 +93,22 @@ var removeEmptyKeys = exports.removeEmptyKeys = function removeEmptyKeys(obj) {
   });
   // 使用 Object.fromEntries() 将过滤后的键值对数组转换回对象
   return Object.fromEntries(filteredEntries);
+};
+/* 获取边距 */
+var getPadding = exports.getPadding = function getPadding(el) {
+  var style = window.getComputedStyle(el, null);
+  var paddingLeft = Number.parseInt(style.paddingLeft, 10) || 0;
+  var paddingRight = Number.parseInt(style.paddingRight, 10) || 0;
+  var paddingTop = Number.parseInt(style.paddingTop, 10) || 0;
+  var paddingBottom = Number.parseInt(style.paddingBottom, 10) || 0;
+  return {
+    pLeft: paddingLeft,
+    pRight: paddingRight,
+    pTop: paddingTop,
+    pBottom: paddingBottom
+  };
+};
+/** 判断是有值的对象 */
+var isNonEmptyObject = exports.isNonEmptyObject = function isNonEmptyObject(obj) {
+  return obj !== null && (0, _typeof2.default)(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;
 };

package/package.json

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

package/.vscode/extensions.json

@@ -1,5 +0,0 @@
-{
-    "recommendations": [
-        "kisstkondoros.vscode-codemetrics"
-    ]
-}