@zat-design/sisyphus-react 3.4.13 → 3.5.0-beta.2

package/lib/ProTable/index.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultPage = exports.default = exports.TableContext = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -28,7 +30,7 @@ var _reset = _interopRequireDefault(require("../assets/reset.svg"));
 var _customColumn = _interopRequireDefault(require("../assets/customColumn.svg"));
 var _utils3 = require("./utils");
 var _locale = _interopRequireDefault(require("../locale"));
-var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "summary", "emptyText", "originalDataSource"],
+var _excluded = ["tableId", "headerRender", "footerRender", "quickConfig", "stripe", "columns", "className", "draggable", "disabled", "isView", "rowDisabled", "summary", "emptyText", "originalDataSource"],
   _excluded2 = ["resizeColumn", "columnConfig", "cacheTime", "storage"];
 var defaultCacheTime = 1; // columns 配置保存时间为一天
 // 全局上下文
@@ -53,6 +55,10 @@ function ProTable(props) {
     _props$columns = props.columns,
     propsColumns = _props$columns === void 0 ? [] : _props$columns,
     className = props.className,
+    draggable = props.draggable,
+    disabled = props.disabled,
+    isView = props.isView,
+    rowDisabled = props.rowDisabled,
     summary = props.summary,
     _props$emptyText = props.emptyText,
     emptyText = _props$emptyText === void 0 ? _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable = _locale.default.ProTable) === null || _locale$ProTable === void 0 ? void 0 : _locale$ProTable.noData : _props$emptyText,
@@ -78,8 +84,24 @@ function ProTable(props) {
     pagination = _ref3.pagination,
     dataSource = _ref3.dataSource,
     rowKey = _ref3.rowKey;
+  var initDataSource = dataSource === null || dataSource === void 0 ? void 0 : dataSource.map(function (item) {
+    return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, item), {}, {
+      rowKey: item === null || item === void 0 ? void 0 : item[rowKey]
+    });
+  });
+  var _useSetState = (0, _ahooks.useSetState)({
+      dataSource: initDataSource
+    }),
+    _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
+    _dataSource = _useSetState2[0].dataSource,
+    setState = _useSetState2[1];
+  (0, _ahooks.useDeepCompareEffect)(function () {
+    setState({
+      dataSource: initDataSource
+    });
+  }, [initDataSource]);
   var originalObj = originalDataSource ? (0, _lodash.keyBy)(originalDataSource, rowKey) : undefined;
-  var dataSourceObj = dataSource ? (0, _lodash.keyBy)(dataSource, rowKey) : {};
+  var dataSourceObj = _dataSource ? (0, _lodash.keyBy)(_dataSource, rowKey) : {};
   var propsColumnObj = (0, _react.useMemo)(function () {
     return propsColumns.reduce(function (acc, cur) {
       // @ts-ignore
@@ -226,7 +248,7 @@ function ProTable(props) {
     var _ref6 = tableProps || {},
       dataSource = _ref6.dataSource;
     // 没有数据时，不展示合计栏
-    if (!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length)) {
+    if (!(_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.length)) {
       return null;
     }
     return (0, _jsxRuntime.jsx)(_antd.Table.Summary, {
@@ -247,7 +269,7 @@ function ProTable(props) {
           } else if (total && key) {
             var _dataSource$reduce;
             var format = _utils2.valueTypeRender === null || _utils2.valueTypeRender === void 0 ? void 0 : _utils2.valueTypeRender[valueType];
-            var sum = dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$reduce = dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(dataSource, function (pre, cur) {
+            var sum = _dataSource === null || _dataSource === void 0 ? void 0 : (_dataSource$reduce = _dataSource.reduce) === null || _dataSource$reduce === void 0 ? void 0 : _dataSource$reduce.call(_dataSource, function (pre, cur) {
               var _get;
               return _utils.tools.calc(pre, '+', (_get = (0, _lodash.get)(cur, key)) !== null && _get !== void 0 ? _get : 0);
             }, 0);
@@ -265,91 +287,172 @@ function ProTable(props) {
   };
   var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
     'pro-table': true,
-    'pro-table-no-stripe': !stripe
+    'pro-table-no-stripe': !stripe,
+    'pro-table-draggable-only': draggable && !(tableProps === null || tableProps === void 0 ? void 0 : tableProps.rowSelection)
   }, className, className));
+  // 复选框
+  var _rowSelection = tableProps.rowSelection ? (0, _objectSpread4.default)({
+    fixed: draggable,
+    getCheckboxProps: function getCheckboxProps(record) {
+      if (rowDisabled) {
+        var _disabled = rowDisabled(record);
+        return {
+          disabled: _disabled
+        };
+      }
+      return {};
+    },
+    hideSelectAll: disabled || isView
+  }, tableProps.rowSelection) : undefined;
+  /**
+   * 渲染表格选择器
+   * @returns rowSelection
+   */
+  var renderRowSelection = function renderRowSelection() {
+    if (disabled || isView) {
+      return null;
+    }
+    if (draggable && !tableProps.rowSelection) {
+      return {
+        fixed: true,
+        hideSelectAll: true,
+        renderCell: function renderCell() {
+          return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+        }
+      };
+    }
+    return _rowSelection;
+  };
+  var onDataSourceChange = /*#__PURE__*/function () {
+    var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(nextDataSource) {
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setState({
+              dataSource: nextDataSource
+            });
+            // 覆盖引用值
+            (0, _lodash.assign)(dataSource, nextDataSource);
+          case 2:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function onDataSourceChange(_x) {
+      return _ref8.apply(this, arguments);
+    };
+  }();
+  var renderComponents = function renderComponents() {
+    if (draggable) {
+      return {
+        body: {
+          row: _components.Row
+        }
+      };
+    }
+    if (resizeColumn) {
+      return _components.TableResizable.components;
+    }
+    return null;
+  };
   return (0, _jsxRuntime.jsx)(TableContext.Provider, {
     value: {
       pathKey: pathKey,
       tableConfig: tableConfig,
       Storage: Storage
     },
-    children: (0, _jsxRuntime.jsxs)("div", {
+    children: (0, _jsxRuntime.jsx)("div", {
       className: cls,
-      children: [(headerRender || columnConfig || resizeColumn) && (0, _jsxRuntime.jsxs)("div", {
-        className: "column-config",
-        children: [(0, _jsxRuntime.jsx)("div", {
-          className: "left-contain",
-          children: headerRender ? typeof headerRender === 'function' ? headerRender() : headerRender : null
-        }), (0, _jsxRuntime.jsxs)("div", {
-          className: "right-actions",
-          children: [resizeColumn && (0, _jsxRuntime.jsx)(_antd.Button, {
-            icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
-              className: "anticon",
-              wrapper: "span",
-              src: _reset.default
-            }),
-            onClick: resetColumnWidth,
-            children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable2 = _locale.default.ProTable) === null || _locale$ProTable2 === void 0 ? void 0 : _locale$ProTable2.resetColumnWidth
-          }), columnConfig && (0, _jsxRuntime.jsx)(_index.ProTreeModal, {
-            title: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable3 = _locale.default.ProTable) === null || _locale$ProTable3 === void 0 ? void 0 : _locale$ProTable3.customColumns,
-            span: 8,
-            mode: "list",
-            draggable: true,
-            dataSource: customColumns,
-            value: checkColumns,
-            allValue: "all",
-            onChange: handleColumnConfig,
-            trigger: (0, _jsxRuntime.jsx)(_antd.Button, {
-              className: "custom-column-btn",
+      children: (0, _jsxRuntime.jsxs)(_components.DndWrapper, {
+        value: _dataSource,
+        onChange: onDataSourceChange,
+        disabled: false,
+        draggable: draggable,
+        children: [(headerRender || columnConfig || resizeColumn) && (0, _jsxRuntime.jsxs)("div", {
+          className: "column-config",
+          children: [(0, _jsxRuntime.jsx)("div", {
+            className: "left-contain",
+            children: headerRender ? typeof headerRender === 'function' ? headerRender() : headerRender : null
+          }), (0, _jsxRuntime.jsxs)("div", {
+            className: "right-actions",
+            children: [resizeColumn && (0, _jsxRuntime.jsx)(_antd.Button, {
               icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
                 className: "anticon",
                 wrapper: "span",
-                src: _customColumn.default
+                src: _reset.default
               }),
-              children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable4 = _locale.default.ProTable) === null || _locale$ProTable4 === void 0 ? void 0 : _locale$ProTable4.customColumns
-            })
+              onClick: resetColumnWidth,
+              children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable2 = _locale.default.ProTable) === null || _locale$ProTable2 === void 0 ? void 0 : _locale$ProTable2.resetColumnWidth
+            }), columnConfig && (0, _jsxRuntime.jsx)(_index.ProTreeModal, {
+              title: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable3 = _locale.default.ProTable) === null || _locale$ProTable3 === void 0 ? void 0 : _locale$ProTable3.customColumns,
+              span: 8,
+              mode: "list",
+              draggable: true,
+              dataSource: customColumns,
+              value: checkColumns,
+              allValue: "all",
+              onChange: handleColumnConfig,
+              trigger: (0, _jsxRuntime.jsx)(_antd.Button, {
+                className: "custom-column-btn",
+                icon: (0, _jsxRuntime.jsx)(_reactSvg.ReactSVG, {
+                  className: "anticon",
+                  wrapper: "span",
+                  src: _customColumn.default
+                }),
+                children: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable4 = _locale.default.ProTable) === null || _locale$ProTable4 === void 0 ? void 0 : _locale$ProTable4.customColumns
+              })
+            })]
           })]
-        })]
-      }), (0, _jsxRuntime.jsxs)("div", {
-        className: "pro-table-container",
-        children: [(0, _jsxRuntime.jsx)(_antd.Table, (0, _objectSpread4.default)({
-          components: resizeColumn ? _components.TableResizable.components : undefined,
-          // @ts-ignore
-          columns: columns,
-          locale: {
-            emptyText: (0, _jsxRuntime.jsxs)("div", {
-              className: "pro-table-empty",
-              children: [(0, _jsxRuntime.jsx)("div", {
-                className: "empty-image",
-                children: (0, _jsxRuntime.jsx)("img", {
-                  src: _empty.default,
-                  alt: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable5 = _locale.default.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.noData
-                })
-              }), (0, _jsxRuntime.jsx)("div", {
-                className: "empty-description",
-                children: typeof emptyText === 'function' ? emptyText() : emptyText
-              })]
-            })
-          },
-          summary: (0, _typeof2.default)(summary) === 'object' ? function () {
-            return renderSummary();
-          } : summary,
-          rowClassName: function rowClassName(record, index) {
-            if (originalDataSource && !originalObj.hasOwnProperty((0, _lodash.get)(record, rowKey))) {
-              return 'new-cell';
+        }), (0, _jsxRuntime.jsxs)("div", {
+          className: "pro-table-container",
+          children: [(0, _jsxRuntime.jsx)(_antd.Table, (0, _objectSpread4.default)((0, _objectSpread4.default)({
+            className: draggable ? 'pro-edit-table-drag' : '',
+            // components={resizeColumn ? TableResizable.components : undefined}
+            components: renderComponents(),
+            // @ts-ignore
+            columns: columns,
+            locale: {
+              emptyText: (0, _jsxRuntime.jsxs)("div", {
+                className: "pro-table-empty",
+                children: [(0, _jsxRuntime.jsx)("div", {
+                  className: "empty-image",
+                  children: (0, _jsxRuntime.jsx)("img", {
+                    src: _empty.default,
+                    alt: _locale.default === null || _locale.default === void 0 ? void 0 : (_locale$ProTable5 = _locale.default.ProTable) === null || _locale$ProTable5 === void 0 ? void 0 : _locale$ProTable5.noData
+                  })
+                }), (0, _jsxRuntime.jsx)("div", {
+                  className: "empty-description",
+                  children: typeof emptyText === 'function' ? emptyText() : emptyText
+                })]
+              })
+            },
+            summary: (0, _typeof2.default)(summary) === 'object' ? function () {
+              return renderSummary();
+            } : summary,
+            rowClassName: function rowClassName(record, index) {
+              if (originalDataSource && !originalObj.hasOwnProperty((0, _lodash.get)(record, rowKey))) {
+                return 'new-cell';
+              }
             }
-          }
-        }, tableProps)), (0, _jsxRuntime.jsx)(_components.ResizableLine, {})]
-      }), footerRender ? (0, _jsxRuntime.jsx)("div", {
-        className: "pro-table-footer ".concat(pagination && !!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.length) ? 'has-page' : 'no-page'),
-        children: typeof footerRender === 'function' ? footerRender() : footerRender
-      }) : null]
+          }, tableProps), {}, {
+            dataSource: _dataSource,
+            rowSelection: renderRowSelection()
+          })), (0, _jsxRuntime.jsx)(_components.ResizableLine, {})]
+        }), footerRender ? (0, _jsxRuntime.jsx)("div", {
+          className: "pro-table-footer ".concat(pagination && !!(_dataSource === null || _dataSource === void 0 ? void 0 : _dataSource.length) ? 'has-page' : 'no-page'),
+          children: typeof footerRender === 'function' ? footerRender() : footerRender
+        }) : null]
+      })
     })
   });
 }
 ProTable.defaultProps = {
   quickConfig: false,
-  stripe: true
+  stripe: true,
+  draggable: false,
+  disabled: false,
+  isView: false
 };
 ProTable.useAntdTable = _useAntdTable.default;
 var _default = exports.default = ProTable;

package/lib/ProTable/propsType.d.ts

@@ -35,7 +35,7 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     };
     transform?: (value: any, record?: any) => string[];
 }
-export interface ProTableProps extends Omit<TableProps<any>, 'summary' | 'columns'> {
+export interface ProTableProps<T = any> extends Omit<TableProps<any>, 'summary' | 'columns'> {
     tableId?: string;
     rowKey?: string | GetRowKey<any>;
     headerRender?: ReactNode | (() => ReactNode);
@@ -49,6 +49,10 @@ export interface ProTableProps extends Omit<TableProps<any>, 'summary' | 'column
     footerRender?: ReactNode | (() => ReactNode);
     emptyText?: string | ReactNode | (() => ReactNode);
     summary?: ProTableSummaryProps | TableProps<any>['summary'];
+    draggable?: boolean;
+    disabled?: boolean;
+    isView?: boolean;
+    rowDisabled?: (record?: T) => string | boolean;
     /**
      * 斑马纹设置
      */

package/lib/ProTable/style/index.less

@@ -2,6 +2,90 @@
 @import (reference) '~antd/es/style/themes/index.less';
 
 .pro-table {
+  &.pro-table-draggable-only{
+    .ant-table-tbody{
+      .anticon {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .@{ant-prefix}-table-content {
+    >table {
+      .@{ant-prefix}-table-summary {
+        background-color: var(--zaui-table-header-bg, #f2f3f5);
+        color           : var(--zaui-text, #343434);
+        font-weight     : 600;
+
+        .@{ant-prefix}-table-cell-fix-left,
+        .@{ant-prefix}-table-cell-fix-right {
+          background-color: var(--zaui-table-header-bg, #f2f3f5);
+
+        }
+      }
+
+      th.@{ant-prefix}-table-selection-column {
+        width: 48px;
+      }
+
+      td {
+        .pro-form-view-container_nowrap {
+          white-space: normal;
+        }
+      }
+
+      .@{ant-prefix}-table-thead>tr>th:not(.@{ant-prefix}-table-selection-column):not(.@{ant-prefix}-table-row-expand-icon-cell):not([colspan]).is-required {
+        &.is-required-right {
+          .pro-edit-table-title {
+            &::before {
+              position   : static;
+              top        : 0;
+              display    : inline-block;
+              text-indent: -8px;
+              color      : #ff5050;
+              font-size  : var(--zaui-font-size-md, 14px);
+              line-height: 1;
+              content    : "*";
+            }
+          }
+        }
+        &.is-required-left {
+          .pro-edit-table-title {
+            &::after {
+              width: auto;
+              position   : static;
+              top        : 0;
+              display    : inline-block;
+              margin-left: var(--zaui-space-size-xs, 4px);
+              color      : #ff5050;
+              font-size  : 14px;
+              line-height: 1;
+              content    : "*";
+            }
+          }
+        }
+      }
+    }
+  }
+  .drag-wrapper {
+    display: flex;
+    width: 20px;
+    .anticon {
+      cursor: pointer;
+      margin-right: 12px;
+      .drag-icon{
+        margin-right: 0;
+      }
+    }
+  }
+  .drag-wrapper.no-check {
+    .anticon {
+      margin-right: 0;
+    }
+  }
+
+
+
   &.pro-table-bordered {
     .@{ant-prefix}-table .@{ant-prefix}-table-thead > tr > th {
       border-bottom: 1px solid #f0f0f0;
@@ -465,3 +549,9 @@
     }
   }
 }
+
+.pro-edit-table-drag {
+  table tr th.@{ant-prefix}-table-selection-column.@{ant-prefix}-table-cell-fix-left{
+    text-align: right;
+  }
+}

package/lib/ProTree/utils.d.ts

@@ -22,7 +22,7 @@ export declare function getAllKeys(data: TreeDataProps[], fieldNames: FieldNames
 export declare const getParentKey: (key: string, tree: TreeDataProps[], fieldNames: FieldNamesType) => string;
 export declare function findTreeNodeByKey(treeData: TreeDataProps[], key: string, fieldNames: FieldNamesType): TreeDataProps[];
 /**
- * 根据所选的 checkedKeys 筛选出展示的 treeData
+ * 过滤掉每一层假值（例如 false、null、0、""、undefined 等）
  * @param data
  * @param checkedKeys
  * @returns

package/lib/ProTree/utils.js

@@ -118,7 +118,7 @@ function findTreeNodeByKey(treeData, key, fieldNames) {
   return result;
 }
 /**
- * 根据所选的 checkedKeys 筛选出展示的 treeData
+ * 过滤掉每一层假值（例如 false、null、0、""、undefined 等）
  * @param data
  * @param checkedKeys
  * @returns

package/lib/ProTreeModal/index.js

@@ -260,10 +260,16 @@ var ProTreeModal = function ProTreeModal(props) {
       }
       onChange === null || onChange === void 0 ? void 0 : onChange(values);
     }
-    setState({
-      open: false
-    });
-    openChange === null || openChange === void 0 ? void 0 : openChange(false);
+    // fix: 当有 openChange 时候、点击确定应该由关闭 openChange 控制
+    if (!openChange || open === undefined) {
+      setState({
+        open: false
+      });
+      openChange === null || openChange === void 0 ? void 0 : openChange(false);
+    }
+    if (openChange && open !== undefined) {
+      openChange === null || openChange === void 0 ? void 0 : openChange(true);
+    }
   };
   /**
    * clear all checked

package/lib/ProTreeModal/style/index.less

@@ -114,6 +114,7 @@
 
     &:first-child {
       color: #616161;
+      border-radius: 8px 0 0 8px;
     }
 
     .@{ant-prefix}-btn-link {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.4.13",
+  "version": "3.5.0-beta.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -58,7 +58,7 @@
     "@dnd-kit/sortable": "^7.0.2",
     "@dnd-kit/utilities": "^3.2.1",
     "@pansy/react-watermark": "^3.1.13",
-    "@zat-design/utils": "^1.1.22",
+    "@zat-design/utils": "^1.1.23",
     "ahooks": "3.7.4",
     "antd": "4.24.8",
     "big.js": "^6.2.1",