@zat-design/sisyphus-react 3.5.5-beta.9 → 3.6.0

package/dist/index.esm.css

@@ -4481,6 +4481,9 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   position: absolute;
   bottom: var(--zaui-space-size-md, 16px);
 }
+.pro-edit-table-toolbar {
+  background-color: #fff;
+}
 .pro-edit-table-toolbar .ant-space {
   gap: var(--zaui-space-size-sm, 8px);
 }

package/dist/less.esm.css

@@ -4481,6 +4481,9 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   position: absolute;
   bottom: var(--zaui-space-size-md, 16px);
 }
+.pro-edit-table-toolbar {
+  background-color: #fff;
+}
 .pro-edit-table-toolbar .ant-space {
   gap: var(--zaui-space-size-sm, 8px);
 }

package/es/ProEditTable/index.js

@@ -1,3 +1,5 @@
+import "antd/es/affix/style";
+import _Affix from "antd/es/affix";
 import "antd/es/table/style";
 import _Table from "antd/es/table";
 import _typeof from "@babel/runtime/helpers/esm/typeof";
@@ -9,11 +11,11 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalDiffTip", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection"];
+var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "toolbarSticky", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalDiffTip", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection"];
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { get, isArray } from 'lodash';
-import { useLocalStorageState, useSetState } from 'ahooks';
+import { get, isArray, isBoolean } from 'lodash';
+import { useDeepCompareEffect, useLocalStorageState, useSetState } from 'ahooks';
 import classnames from 'classnames';
 import { transformColumns } from './utils';
 import { getRandom, getNamePath } from './utils/tools';
@@ -38,6 +40,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     actionWidth = _ref.actionWidth,
     actionProps = _ref.actionProps,
     toolbarProps = _ref.toolbarProps,
+    toolbarSticky = _ref.toolbarSticky,
     rowSelection = _ref.rowSelection,
     onlyOneLineMsg = _ref.onlyOneLineMsg,
     deletePoConfirmMsg = _ref.deletePoConfirmMsg,
@@ -59,6 +62,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
   // 上下文form
   var contentForm = _Form.useFormInstance();
   var formFieldProps = ProForm.useFieldProps() || {};
+  var affixRef = useRef(null);
   var form = contentForm || (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.form) || (resetProps === null || resetProps === void 0 ? void 0 : resetProps.form);
   var name = (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.name) || (resetProps === null || resetProps === void 0 ? void 0 : resetProps.name) || (resetProps === null || resetProps === void 0 ? void 0 : (_resetProps$id = resetProps.id) === null || _resetProps$id === void 0 ? void 0 : (_resetProps$id$split = _resetProps$id.split) === null || _resetProps$id$split === void 0 ? void 0 : _resetProps$id$split.call(_resetProps$id, '_'));
   var _formFieldProps$isVie = formFieldProps.isView,
@@ -72,6 +76,8 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     disabled = (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.disabled) || disabled; // formFieldProps?.disabled可能是函数？？
   }
   var tableRef = useRef(null);
+  var valueChangeRef = useRef(null);
+  valueChangeRef.current = 0;
   var _React$useContext = React.useContext(_ConfigProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls;
   var prefixCls = getPrefixCls();
@@ -262,24 +268,13 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     }
     return null;
   };
+  useDeepCompareEffect(function () {
+    valueChangeRef.current += 1;
+    // 在这里根据需要计算新的数组
+  }, [value, config.name]);
   var _columns = useMemo(function () {
     return transformColumns(columns, config);
-  }, [value, cellNamePath, forceUpdate, editingKeys, disabled, actionProps, columns, page, config.name]);
-  // const setColumns = async () => {
-  //   const nextColumns = transformColumns(columns, config);
-  //   setState({
-  //     _columns: nextColumns,
-  //   });
-  // };
-  // useDebounceEffect(
-  //   () => {
-  //     setColumns();
-  //   },
-  //   [value, cellNamePath, forceUpdate, editingKeys, disabled, actionProps, columns, page], // columns更新修复外部表单无法控制内部表单的问题
-  //   {
-  //     wait: 60,
-  //   },
-  // );
+  }, [valueChangeRef.current, disabled, forceUpdate, columns, page, actionProps, editingKeys, cellNamePath]);
   useEffect(function () {
     var isAllHasKey = value.every(function (item) {
       return item.rowKey;
@@ -310,6 +305,19 @@ var ProEditTable = function ProEditTable(_ref, ref) {
       setInternalState: setState
     };
   });
+  useEffect(function () {
+    if (toolbarSticky) {
+      var updatePos = function updatePos() {
+        var _affixRef$current;
+        affixRef === null || affixRef === void 0 ? void 0 : (_affixRef$current = affixRef.current) === null || _affixRef$current === void 0 ? void 0 : _affixRef$current.updatePosition();
+      };
+      window.addEventListener('scroll', updatePos, true);
+      return function () {
+        window.removeEventListener('scroll', updatePos, true);
+      };
+    }
+  }, [toolbarSticky]);
+  var _toolbarSticky = isBoolean(toolbarSticky) ? {} : toolbarSticky;
   var _summary = _typeof(summary) === 'object' ? function (data) {
     return _jsx(Summary, {
       data: data,
@@ -372,7 +380,14 @@ var ProEditTable = function ProEditTable(_ref, ref) {
           },
           summary: _summary
         }))]
-      }), !isView && (value === null || value === void 0 ? void 0 : value.length) ? _jsx("div", {
+      }), !isView && (value === null || value === void 0 ? void 0 : value.length) ? toolbarSticky ? _jsx(_Affix, _objectSpread(_objectSpread({
+        ref: affixRef
+      }, _toolbarSticky), {}, {
+        children: _jsx("div", {
+          className: "pro-edit-table-toolbar".concat(pagination ? ' pro-edit-table-toolbar-fixed' : ''),
+          children: _jsx(RenderToolbar, _objectSpread({}, config))
+        })
+      })) : _jsx("div", {
         className: "pro-edit-table-toolbar".concat(pagination ? ' pro-edit-table-toolbar-fixed' : ''),
         children: _jsx(RenderToolbar, _objectSpread({}, config))
       }) : null, footerRender ? _jsx("div", {

package/es/ProEditTable/propsType.d.ts

@@ -1,4 +1,4 @@
-import { ModalFuncProps } from 'antd';
+import { AffixProps, ModalFuncProps } from 'antd';
 import { Key, ReactNode } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import type { ButtonProps } from 'antd/es/button';
@@ -231,6 +231,11 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @default           -
      */
     toolbarProps?: BaseActionProps<T>[] | boolean;
+    /**
+     *  @description      自定义底部操作栏跟随页面滚动
+     *  @default           -
+     */
+    toolbarSticky?: boolean | Omit<AffixProps, 'children'>;
     /**
      * @description       最大可添加数量
      * @default           -

package/es/ProEditTable/style/index.less

@@ -303,6 +303,7 @@
 }
 
 .pro-edit-table-toolbar {
+  background-color: #fff;
   .@{ant-prefix}-space {
     gap: var(--zaui-space-size-sm, 8px);
 

package/es/ProEditTable/utils/index.js

@@ -256,6 +256,7 @@ export var transformColumns = function transformColumns() {
     var columnName = (item === null || item === void 0 ? void 0 : item.name) || dataIndex || key;
     item.dataIndex = columnName;
     item.key = columnName;
+    // item.shouldCellUpdate = item.shouldCellUpdate || ((record, perRecord) => !isEqual(record, perRecord));
     var required = isBoolean(item.required) ? item.required : false;
     if (typeof item.required === 'function') {
       var namePath = getNamePath(name, virtualKey);

package/lib/ProEditTable/index.js

@@ -23,7 +23,7 @@ var _components = require("./components");
 var _ProForm = _interopRequireDefault(require("../ProForm"));
 var _empty = _interopRequireDefault(require("../assets/empty.png"));
 var _locale = _interopRequireWildcard(require("../locale"));
-var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalDiffTip", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection"];
+var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "toolbarSticky", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalDiffTip", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection"];
 var ProEditTable = function ProEditTable(_ref, ref) {
   var _resetProps$id, _resetProps$id$split, _themeConfig$data2, _value$;
   var value = _ref.value,
@@ -41,6 +41,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     actionWidth = _ref.actionWidth,
     actionProps = _ref.actionProps,
     toolbarProps = _ref.toolbarProps,
+    toolbarSticky = _ref.toolbarSticky,
     rowSelection = _ref.rowSelection,
     onlyOneLineMsg = _ref.onlyOneLineMsg,
     deletePoConfirmMsg = _ref.deletePoConfirmMsg,
@@ -62,6 +63,7 @@ var ProEditTable = function ProEditTable(_ref, ref) {
   // 上下文form
   var contentForm = _antd.Form.useFormInstance();
   var formFieldProps = _ProForm.default.useFieldProps() || {};
+  var affixRef = (0, _react.useRef)(null);
   var form = contentForm || (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.form) || (resetProps === null || resetProps === void 0 ? void 0 : resetProps.form);
   var name = (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.name) || (resetProps === null || resetProps === void 0 ? void 0 : resetProps.name) || (resetProps === null || resetProps === void 0 ? void 0 : (_resetProps$id = resetProps.id) === null || _resetProps$id === void 0 ? void 0 : (_resetProps$id$split = _resetProps$id.split) === null || _resetProps$id$split === void 0 ? void 0 : _resetProps$id$split.call(_resetProps$id, '_'));
   var _formFieldProps$isVie = formFieldProps.isView,
@@ -75,6 +77,8 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     disabled = (formFieldProps === null || formFieldProps === void 0 ? void 0 : formFieldProps.disabled) || disabled; // formFieldProps?.disabled可能是函数？？
   }
   var tableRef = (0, _react.useRef)(null);
+  var valueChangeRef = (0, _react.useRef)(null);
+  valueChangeRef.current = 0;
   var _React$useContext = _react.default.useContext(_antd.ConfigProvider.ConfigContext),
     getPrefixCls = _React$useContext.getPrefixCls;
   var prefixCls = getPrefixCls();
@@ -265,24 +269,13 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     }
     return null;
   };
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    valueChangeRef.current += 1;
+    // 在这里根据需要计算新的数组
+  }, [value, config.name]);
   var _columns = (0, _react.useMemo)(function () {
     return (0, _utils.transformColumns)(columns, config);
-  }, [value, cellNamePath, forceUpdate, editingKeys, disabled, actionProps, columns, page, config.name]);
-  // const setColumns = async () => {
-  //   const nextColumns = transformColumns(columns, config);
-  //   setState({
-  //     _columns: nextColumns,
-  //   });
-  // };
-  // useDebounceEffect(
-  //   () => {
-  //     setColumns();
-  //   },
-  //   [value, cellNamePath, forceUpdate, editingKeys, disabled, actionProps, columns, page], // columns更新修复外部表单无法控制内部表单的问题
-  //   {
-  //     wait: 60,
-  //   },
-  // );
+  }, [valueChangeRef.current, disabled, forceUpdate, columns, page, actionProps, editingKeys, cellNamePath]);
   (0, _react.useEffect)(function () {
     var isAllHasKey = value.every(function (item) {
       return item.rowKey;
@@ -313,6 +306,19 @@ var ProEditTable = function ProEditTable(_ref, ref) {
       setInternalState: setState
     };
   });
+  (0, _react.useEffect)(function () {
+    if (toolbarSticky) {
+      var updatePos = function updatePos() {
+        var _affixRef$current;
+        affixRef === null || affixRef === void 0 ? void 0 : (_affixRef$current = affixRef.current) === null || _affixRef$current === void 0 ? void 0 : _affixRef$current.updatePosition();
+      };
+      window.addEventListener('scroll', updatePos, true);
+      return function () {
+        window.removeEventListener('scroll', updatePos, true);
+      };
+    }
+  }, [toolbarSticky]);
+  var _toolbarSticky = (0, _lodash.isBoolean)(toolbarSticky) ? {} : toolbarSticky;
   var _summary = (0, _typeof2.default)(summary) === 'object' ? function (data) {
     return (0, _jsxRuntime.jsx)(_components.Summary, {
       data: data,
@@ -375,7 +381,14 @@ var ProEditTable = function ProEditTable(_ref, ref) {
           },
           summary: _summary
         }))]
-      }), !isView && (value === null || value === void 0 ? void 0 : value.length) ? (0, _jsxRuntime.jsx)("div", {
+      }), !isView && (value === null || value === void 0 ? void 0 : value.length) ? toolbarSticky ? (0, _jsxRuntime.jsx)(_antd.Affix, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+        ref: affixRef
+      }, _toolbarSticky), {}, {
+        children: (0, _jsxRuntime.jsx)("div", {
+          className: "pro-edit-table-toolbar".concat(pagination ? ' pro-edit-table-toolbar-fixed' : ''),
+          children: (0, _jsxRuntime.jsx)(_components.RenderToolbar, (0, _objectSpread2.default)({}, config))
+        })
+      })) : (0, _jsxRuntime.jsx)("div", {
         className: "pro-edit-table-toolbar".concat(pagination ? ' pro-edit-table-toolbar-fixed' : ''),
         children: (0, _jsxRuntime.jsx)(_components.RenderToolbar, (0, _objectSpread2.default)({}, config))
       }) : null, footerRender ? (0, _jsxRuntime.jsx)("div", {

package/lib/ProEditTable/propsType.d.ts

@@ -1,4 +1,4 @@
-import { ModalFuncProps } from 'antd';
+import { AffixProps, ModalFuncProps } from 'antd';
 import { Key, ReactNode } from 'react';
 import { DragEndEvent } from '@dnd-kit/core';
 import type { ButtonProps } from 'antd/es/button';
@@ -231,6 +231,11 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @default           -
      */
     toolbarProps?: BaseActionProps<T>[] | boolean;
+    /**
+     *  @description      自定义底部操作栏跟随页面滚动
+     *  @default           -
+     */
+    toolbarSticky?: boolean | Omit<AffixProps, 'children'>;
     /**
      * @description       最大可添加数量
      * @default           -

package/lib/ProEditTable/style/index.less

@@ -303,6 +303,7 @@
 }
 
 .pro-edit-table-toolbar {
+  background-color: #fff;
   .@{ant-prefix}-space {
     gap: var(--zaui-space-size-sm, 8px);
 

package/lib/ProEditTable/utils/index.js

@@ -260,6 +260,7 @@ var transformColumns = exports.transformColumns = function transformColumns() {
     var columnName = (item === null || item === void 0 ? void 0 : item.name) || dataIndex || key;
     item.dataIndex = columnName;
     item.key = columnName;
+    // item.shouldCellUpdate = item.shouldCellUpdate || ((record, perRecord) => !isEqual(record, perRecord));
     var required = (0, _lodash.isBoolean)(item.required) ? item.required : false;
     if (typeof item.required === 'function') {
       var namePath = (0, _tools.getNamePath)(name, virtualKey);

package/package.json

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