@zat-design/sisyphus-react 3.0.13

package/lib/ProEditTable/style/index.less

@@ -0,0 +1,227 @@
+.pro-edit-table {
+  .pro-edit-table-tooltip {
+    display    : inline-flex;
+    align-items: center;
+
+    .icon-tip {
+      svg {
+        margin-left   : 4px;
+        margin-bottom : 1px;
+        width         : 14px;
+        height        : 14px;
+        vertical-align: text-bottom;
+        fill          : #909090;
+      }
+    }
+  }
+
+  .com-empty {
+    text-align: center;
+
+    .img {
+      width : 80px;
+      height: 80px;
+    }
+
+    .content {
+      margin-top: var(--zaui-space-size-md, 16px);
+
+      .ant-btn-link {
+        padding: 0;
+      }
+    }
+  }
+
+  .is-hidden {
+    position: absolute;
+    left    : -9999px;
+  }
+
+
+  .is-cell .ant-form-item .ant-form-item-row .ant-form-item-control .ant-form-item-control-input  {
+    border: 1px solid transparent;
+    &:hover {
+      border: 1px solid #DEE0E3;
+      border-radius: 4px;
+      text-indent: 5px;
+    }
+  }
+
+  &.pro-edit-table-drag {
+    tr {
+      position: relative;
+    }
+
+    .is-drag {
+      position: absolute;
+      left    : 2px;
+      padding : 0 !important;
+      top     : 13px;
+      z-index : 1;
+
+      .drag-handle {
+        padding: 4px;
+
+        div {
+          height: 20px;
+        }
+      }
+    }
+
+    .ant-table-selection-column {
+      padding-left: 30px !important;
+    }
+  }
+
+  .ant-space {
+    gap: var(--zaui-space-size-sm, 8px);
+
+    .ant-btn-link {
+      padding: 0 var(--zaui-space-size-xs, 4px);
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+
+  .ant-table-content {
+    >table {
+
+      .ant-table-cell-fix-right-first::after,
+      .ant-table-cell-fix-right-last::after {
+        width     : auto;
+        transform : none;
+        transition: none;
+        box-shadow: none;
+      }
+
+      td {
+        .pro-form-view-container_nowrap {
+          white-space: normal;
+        }
+      }
+
+      .ant-table-thead>tr>th:not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan]).is-required {
+        &::after {
+          position   : static;
+          top        : 0;
+          display    : inline-block;
+          margin-left: 2px;
+          color      : #ff5050;
+          font-size  : 14px;
+          font-family: SimSun, sans-serif;
+          line-height: 1;
+          content    : "*";
+        }
+
+        &.is-required-left {
+          &::after {
+            display: none;
+          }
+
+          &::before {
+            position   : static;
+            top        : 0;
+            display    : inline-block;
+            text-indent: -8px;
+            color      : #ff5050;
+            font-size  : 14px;
+            font-family: SimSun, sans-serif;
+            line-height: 1;
+            content    : "*";
+          }
+        }
+      }
+    }
+  }
+
+  .ant-table-cell {
+    .ant-form-item {
+      margin-bottom: 0px !important;
+    }
+  }
+
+  .ant-table.ant-table-bordered>.ant-table-container {
+    border: 0;
+  }
+
+  .ant-table-thead>tr>th {
+    border          : 0;
+    white-space     : nowrap;
+    background-color: #F6F7F8;
+  }
+
+  .ant-table-thead>tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+    height: 0;
+  }
+
+  .ant-table-tbody>tr:not(.ant-table-placeholder)>td {
+    border-bottom: 0;
+    border-right : 0;
+    border-top   : 0;
+  }
+
+  .ant-table-tbody>.is-editing:not(.ant-table-measure-row)>td {
+    border-bottom : 0;
+    vertical-align: top;
+    padding       : var(--zaui-space-size-md, 16px);
+  }
+
+  .ant-table-tbody tr:nth-child(n)>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody tr:nth-child(2n)>td {
+    background-color: #f7f9fc;
+  }
+
+  .ant-table-tbody>.ant-table-placeholder>td {
+    background-color: var(--zaui-base-bg, #ffffff);
+  }
+
+  .ant-table-tbody {
+
+    >tr:hover:not(.ant-table-expanded-row, .ant-table-placeholder)>td,
+    .ant-table-row-hover,
+    .ant-table-row-hover>td {
+      background: #FAFAFA;
+    }
+  }
+
+  .ant-table-fixed {
+
+    .ant-table-row-hover,
+    .ant-table-row-hover>td {
+      background: #FAFAFA;
+    }
+  }
+
+  .ant-table-fixed-header {
+    .ant-table-tbody tr:nth-child(n)>td {
+      background-color: #FAFAFA;
+    }
+
+    .ant-table-tbody tr:nth-child(2n)>td {
+      background-color: var(--zaui-base-bg, #ffffff);
+    }
+  }
+
+  .ant-table-summary > tr > td {
+    border-bottom: none;
+  }
+}
+
+.pro-edit-table-toolbar {
+  .ant-space {
+    gap: var(--zaui-space-size-sm, 8px);
+
+    .ant-btn-link {
+      padding: 0 var(--zaui-space-size-xs, 4px);
+
+      &:first-child {
+        padding-left: 0;
+      }
+    }
+  }
+}

package/lib/ProEditTable/utils/config.d.ts

@@ -0,0 +1,25 @@
+export declare const defaultBtnNameMap: {
+    add: string;
+    edit: string;
+    copy: string;
+    delete: string;
+    mulDelete: string;
+    save: string;
+    cancel: string;
+    custom: string;
+};
+export declare const iconMap: {
+    add: JSX.Element;
+};
+export declare const defaultSingleActionKeys: string[];
+export declare const defaultMultipleActionKeys: string[];
+export declare const defaultEditingActionKeys: string[];
+export declare const defaultToolbarKeys: string[];
+export declare const actions: {
+    edit: ({ record, editingKeys, setState, form, virtualRowName, virtualKey, onlyOneLineMsg, }: any) => boolean;
+    save: ({ record, editingKeys, setState, form, rowName, virtualRowName, result }: any) => Promise<void>;
+    cancel: ({ name, record, editingKeys, setState, form, virtualRowName, virtualKey }: any) => void;
+    delete: ({ name, record, editingKeys, setState, form, virtualKey, onlyOneLineMsg }: any) => boolean;
+    add: ({ result, insertType, editingKeys, setState, form, name, virtualName, virtualKey, onlyOneLineMsg, }: any) => boolean;
+    mulDelete: ({ form, name, virtualKey, setState, selectedRowKeys, editingKeys }: any) => void;
+};

package/lib/ProEditTable/utils/config.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.iconMap = exports.defaultToolbarKeys = exports.defaultSingleActionKeys = exports.defaultMultipleActionKeys = exports.defaultEditingActionKeys = exports.defaultBtnNameMap = exports.actions = void 0;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireDefault(require("react"));
+var _icons = require("@ant-design/icons");
+var _antd = require("antd");
+var _tools = require("./tools");
+var defaultBtnNameMap = {
+  add: '添加',
+  edit: '编辑',
+  copy: '复制',
+  delete: '删除',
+  mulDelete: '删除',
+  save: '保存',
+  cancel: '取消',
+  custom: '自定义'
+};
+// 默认按钮配置
+exports.defaultBtnNameMap = defaultBtnNameMap;
+var iconMap = {
+  add: /*#__PURE__*/_react.default.createElement(_icons.PlusOutlined, null)
+};
+// 单行编辑 操作栏默认配置按钮
+exports.iconMap = iconMap;
+var defaultSingleActionKeys = ['edit', 'delete', 'save', 'cancel'];
+// 多行编辑 操作栏默认配置按钮
+exports.defaultSingleActionKeys = defaultSingleActionKeys;
+var defaultMultipleActionKeys = ['delete'];
+// 编辑状态下只显示保存、取消按钮
+exports.defaultMultipleActionKeys = defaultMultipleActionKeys;
+var defaultEditingActionKeys = ['save', 'cancel'];
+// 工具栏默认配置按钮
+exports.defaultEditingActionKeys = defaultEditingActionKeys;
+var defaultToolbarKeys = ['add', 'mulDelete'];
+// 操作枚举
+exports.defaultToolbarKeys = defaultToolbarKeys;
+var actions = {
+  edit: function edit(_ref) {
+    var record = _ref.record,
+      editingKeys = _ref.editingKeys,
+      setState = _ref.setState,
+      form = _ref.form,
+      virtualRowName = _ref.virtualRowName,
+      virtualKey = _ref.virtualKey,
+      onlyOneLineMsg = _ref.onlyOneLineMsg;
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _antd.message.warning(onlyOneLineMsg);
+      return false;
+    }
+    var nextEditingKeys = (0, _toConsumableArray2.default)(editingKeys);
+    // 开启编辑状态
+    nextEditingKeys.push(record.rowKey);
+    // 编辑时赋值编辑状态，供validator做保存校验
+    record.isEditing = Boolean(nextEditingKeys.length);
+    // 复制当前行数据
+    form.setFieldValue(virtualRowName, record);
+    setState({
+      editingKeys: nextEditingKeys
+    });
+  },
+  save: function () {
+    var _save = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(_ref2) {
+      var record, editingKeys, setState, form, rowName, virtualRowName, result, updateData, nextEditingKeys;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            record = _ref2.record, editingKeys = _ref2.editingKeys, setState = _ref2.setState, form = _ref2.form, rowName = _ref2.rowName, virtualRowName = _ref2.virtualRowName, result = _ref2.result;
+            // 保存返回数据与当前行内数据做合并
+            updateData = (0, _typeof2.default)(result) === 'object' ? result : {};
+            record = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, record), form.getFieldValue(virtualRowName)), updateData);
+            delete record.addFlag; // 删除第一次新增的标记
+            // 关闭当前保存行的编辑状态
+            nextEditingKeys = editingKeys.filter(function (key) {
+              return key !== record.rowKey;
+            }); // 保存后取消编辑状态，供validator做保存校验
+            record.isEditing = Boolean(nextEditingKeys.length);
+            form.setFieldValue(rowName, record);
+            setState({
+              editingKeys: nextEditingKeys
+            });
+          case 8:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    function save(_x) {
+      return _save.apply(this, arguments);
+    }
+    return save;
+  }(),
+  cancel: function cancel(_ref3) {
+    var name = _ref3.name,
+      record = _ref3.record,
+      editingKeys = _ref3.editingKeys,
+      setState = _ref3.setState,
+      form = _ref3.form,
+      virtualRowName = _ref3.virtualRowName,
+      virtualKey = _ref3.virtualKey;
+    var nextEditingKeys = editingKeys.filter(function (key) {
+      return key !== record.rowKey;
+    });
+    // 保存后取消编辑状态，供validator做保存校验
+    record.isEditing = Boolean(nextEditingKeys.length);
+    setState({
+      editingKeys: nextEditingKeys
+    }); // 关闭编辑状态
+    // 取消分两种，一编辑取消，二添加取消
+    if (record.addFlag) {
+      (0, _tools.onDelete)({
+        name: name,
+        form: form,
+        virtualKey: virtualKey,
+        selectedRowKeys: [record.rowKey]
+      });
+    } else {
+      form.setFieldValue(virtualRowName, record);
+    }
+  },
+  delete: function _delete(_ref4) {
+    var name = _ref4.name,
+      record = _ref4.record,
+      editingKeys = _ref4.editingKeys,
+      setState = _ref4.setState,
+      form = _ref4.form,
+      virtualKey = _ref4.virtualKey,
+      onlyOneLineMsg = _ref4.onlyOneLineMsg;
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _antd.message.warning(onlyOneLineMsg);
+      return false;
+    }
+    // 删除当前行数据
+    (0, _tools.onDelete)({
+      name: name,
+      form: form,
+      virtualKey: virtualKey,
+      selectedRowKeys: [record.rowKey]
+    });
+    if (virtualKey) {
+      // 关闭编辑状态
+      var nextEditingKeys = editingKeys.filter(function (key) {
+        return key === record.rowKey;
+      });
+      setState({
+        editingKeys: nextEditingKeys
+      });
+    }
+  },
+  add: function add(_ref5) {
+    var result = _ref5.result,
+      insertType = _ref5.insertType,
+      editingKeys = _ref5.editingKeys,
+      setState = _ref5.setState,
+      form = _ref5.form,
+      name = _ref5.name,
+      virtualName = _ref5.virtualName,
+      virtualKey = _ref5.virtualKey,
+      onlyOneLineMsg = _ref5.onlyOneLineMsg;
+    var nextData = (0, _toConsumableArray2.default)(form.getFieldValue(name) || []);
+    // 单行编辑时，需要先保存，才能进行下面的编辑
+    if (virtualKey && editingKeys.length >= 1) {
+      _antd.message.warning(onlyOneLineMsg);
+      return false;
+    }
+    // 添加新增对象数据
+    var addData = (0, _typeof2.default)(result) === 'object' ? result : {};
+    var rowKey = Math.random().toString(36).slice(-6);
+    insertType === 'before' ? nextData.unshift((0, _objectSpread2.default)((0, _objectSpread2.default)({}, addData), {}, {
+      addFlag: true,
+      isEditing: true,
+      rowKey: rowKey
+    })) : nextData.push((0, _objectSpread2.default)((0, _objectSpread2.default)({}, addData), {}, {
+      addFlag: true,
+      isEditing: true,
+      rowKey: rowKey
+    }));
+    form.setFieldValue(name, nextData);
+    // 当单选情况下，存储正在编辑值
+    if (virtualKey) {
+      var nextEditingKeys = (0, _toConsumableArray2.default)(editingKeys);
+      // 开启编辑状态
+      nextEditingKeys.push(rowKey);
+      form.setFieldValue(virtualName, nextData);
+      setState({
+        editingKeys: nextEditingKeys
+      });
+    }
+  },
+  mulDelete: function mulDelete(_ref6) {
+    var form = _ref6.form,
+      name = _ref6.name,
+      virtualKey = _ref6.virtualKey,
+      setState = _ref6.setState,
+      selectedRowKeys = _ref6.selectedRowKeys,
+      _ref6$editingKeys = _ref6.editingKeys,
+      editingKeys = _ref6$editingKeys === void 0 ? [] : _ref6$editingKeys;
+    // 删除选中数据
+    (0, _tools.onDelete)({
+      name: name,
+      form: form,
+      virtualKey: virtualKey,
+      selectedRowKeys: selectedRowKeys
+    });
+    // 删除的选择数据包含单行编辑行时，清空可编辑key
+    if (virtualKey && selectedRowKeys.includes(editingKeys === null || editingKeys === void 0 ? void 0 : editingKeys[0])) {
+      setState({
+        editingKeys: []
+      });
+    }
+    setState({
+      selectedRowKeys: [],
+      selectedRows: []
+    });
+  }
+};
+exports.actions = actions;

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

@@ -0,0 +1,10 @@
+/**
+ * 编辑模式分为 多行和单行两种
+ * 单行模式下，render 分为component和viewRender两种，对应编辑和非编辑状态下，edit状态不对外
+ * 多行模式下component设置即可
+ * render不对外暴露formItem，能自定渲染的尽是输入组件或者显示组件本身
+ * @param columns 表格配置数据
+ * @param config
+ * @param rowSelection 行选择数据
+ */
+export declare const transformColumns: (columns: any[], config: any, rowSelection: any) => any[];