@zat-design/sisyphus-react 3.0.13

package/es/ProEditTable/utils/index.js

@@ -0,0 +1,396 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "antd/es/tooltip/style";
+import _Tooltip from "antd/es/tooltip";
+import "antd/es/space/style";
+import _Space from "antd/es/space";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _excluded = ["type", "label", "show", "onHandle", "onClick"],
+  _excluded2 = ["title", "icon"];
+import React from 'react';
+import { cloneDeep, isArray, isEmpty, isEqual } from 'lodash';
+import classnames from 'classnames';
+import { ReactSVG } from 'react-svg';
+import { actions, defaultBtnNameMap, defaultSingleActionKeys, defaultMultipleActionKeys, defaultEditingActionKeys } from './config';
+import { customValidate, getNamePath, splitNames } from './tools';
+import ProTooltip from '../../ProTooltip';
+import { RenderField, ActionButton } from '../components';
+import tipSvg from '../../assets/tip.svg';
+// 渲染操作栏
+var getActionColumn = function getActionColumn(config) {
+  var disabled = config.disabled,
+    name = config.name,
+    form = config.form,
+    virtualKey = config.virtualKey,
+    validateKeys = config.validateKeys,
+    actionWidth = config.actionWidth,
+    actionProps = config.actionProps;
+  // actionProps配置为false 默认不插入
+  if (actionProps === false || disabled) {
+    return false;
+  }
+  var virtualRowName = getNamePath(name, virtualKey);
+  // 设置默认操作栏按钮（区分单行与多行编辑场景）
+  var defaultActionKeys = virtualKey ? defaultSingleActionKeys : defaultMultipleActionKeys;
+  var nextActionsProps = _toConsumableArray(actionProps);
+  // 不设置actionProps
+  if (isArray(actionProps) && !(actionProps === null || actionProps === void 0 ? void 0 : actionProps.length)) {
+    nextActionsProps = defaultActionKeys.map(function (key) {
+      return {
+        type: key
+      };
+    });
+  } else {
+    // 设置部分actionProps 内置的必选按钮会集成进去，可以手动开启show: false来隐藏对应类型的按钮
+    defaultActionKeys.forEach(function (key) {
+      if (isArray(actionProps) && !actionProps.find(function (action) {
+        return action.type === key;
+      })) {
+        nextActionsProps.push({
+          type: key
+        });
+      }
+    });
+  }
+  // 渲染操作按钮前处理下默认数据
+  var actionBtns = nextActionsProps.map(function (action) {
+    var type = action.type,
+      label = action.label,
+      show = action.show,
+      onHandle = action.onHandle,
+      onClick = action.onClick,
+      buttonProps = _objectWithoutProperties(action, _excluded);
+    action.isEditable = defaultEditingActionKeys.includes(type);
+    action.label = label !== null && label !== void 0 ? label : defaultBtnNameMap[type];
+    action.show = show !== null && show !== void 0 ? show : true;
+    action.onClick = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(record, index) {
+        var _yield$action$onHandl, _action$onHandle;
+        var rowName, _record, result;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              rowName = [].concat(_toConsumableArray(virtualRowName), [index]);
+              if (!(type === 'save')) {
+                _context.next = 4;
+                break;
+              }
+              _context.next = 4;
+              return customValidate(validateKeys, form, rowName);
+            case 4:
+              // 编辑状态使用自定义form值，非编辑状态直接使用行数据
+              _record = record.isEditing ? form.getFieldValue(rowName) : record; // 新增事件可以设置初始默认值，当做函数的出参导出
+              _context.next = 7;
+              return action === null || action === void 0 ? void 0 : (_action$onHandle = action.onHandle) === null || _action$onHandle === void 0 ? void 0 : _action$onHandle.call(action, _record, index);
+            case 7:
+              _context.t1 = _yield$action$onHandl = _context.sent;
+              _context.t0 = _context.t1 !== null;
+              if (!_context.t0) {
+                _context.next = 11;
+                break;
+              }
+              _context.t0 = _yield$action$onHandl !== void 0;
+            case 11:
+              if (!_context.t0) {
+                _context.next = 15;
+                break;
+              }
+              _context.t2 = _yield$action$onHandl;
+              _context.next = 16;
+              break;
+            case 15:
+              _context.t2 = true;
+            case 16:
+              result = _context.t2;
+              if (result && type !== 'custom') {
+                actions[type](_objectSpread(_objectSpread({}, config), {}, {
+                  rowName: [].concat(_toConsumableArray(name), [index]),
+                  virtualRowName: rowName,
+                  record: record,
+                  result: result,
+                  validateKeys: validateKeys
+                }));
+              }
+            case 18:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function (_x, _x2) {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    action.buttonProps = buttonProps;
+    return action;
+  });
+  return {
+    title: '操作',
+    key: 'action',
+    fixed: 'right',
+    width: actionWidth || (virtualKey ? '120px' : '60px'),
+    render: function render(text, record, index) {
+      return /*#__PURE__*/React.createElement(_Space, {
+        size: "middle"
+      }, actionBtns.map(function (btnConfig) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: "".concat(record.rowKey, "-").concat(btnConfig === null || btnConfig === void 0 ? void 0 : btnConfig.type)
+        }, /*#__PURE__*/React.createElement(ActionButton, _objectSpread({}, {
+          record: record,
+          index: index,
+          config: config,
+          btnConfig: btnConfig
+        })));
+      }));
+    }
+  };
+};
+/**
+ * 编辑模式分为 多行和单行两种
+ * 单行模式下，render 分为component和viewRender两种，对应编辑和非编辑状态下，edit状态不对外
+ * 多行模式下component设置即可
+ * render不对外暴露formItem，能自定渲染的尽是输入组件或者显示组件本身
+ * @param columns 表格配置数据
+ * @param config
+ * @param rowSelection 行选择数据
+ */
+export var transformColumns = function transformColumns() {
+  var columns = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var config = arguments.length > 1 ? arguments[1] : undefined;
+  var rowSelection = arguments.length > 2 ? arguments[2] : undefined;
+  var mode = config.mode,
+    form = config.form,
+    name = config.name,
+    disabled = config.disabled,
+    cellNamePath = config.cellNamePath,
+    editingKeys = config.editingKeys,
+    virtualKey = config.virtualKey,
+    requiredAlign = config.requiredAlign,
+    isView = config.isView,
+    draggable = config.draggable,
+    cacheMap = config.cacheMap,
+    setState = config.setState;
+  var isCell = mode === 'cell';
+  var _columns = _toConsumableArray(columns);
+  var _cacheMap = _objectSpread({}, cacheMap.current);
+  _columns.forEach(function (item, index) {
+    var label = item.label,
+      names = item.names,
+      labelRequired = item.labelRequired,
+      hidden = item.hidden,
+      title = item.title,
+      className = item.className,
+      dataIndex = item.dataIndex,
+      ellipsis = item.ellipsis,
+      key = item.key,
+      tooltip = item.tooltip;
+    // column设置label时，权重最高
+    var columnTitle = label || title;
+    item.originTitle = columnTitle;
+    if (tooltip) {
+      var _ref2 = tooltip || {},
+        tooltipTitle = _ref2.title,
+        icon = _ref2.icon,
+        resetProps = _objectWithoutProperties(_ref2, _excluded2);
+      item.title = /*#__PURE__*/React.createElement("span", {
+        className: "pro-edit-table-tooltip"
+      }, columnTitle, /*#__PURE__*/React.createElement(_Tooltip, _objectSpread({
+        title: tooltipTitle !== null && tooltipTitle !== void 0 ? tooltipTitle : tooltip
+      }, resetProps), icon ? /*#__PURE__*/React.cloneElement(icon, {
+        className: 'icon-tip'
+      }) : /*#__PURE__*/React.createElement(ReactSVG, {
+        className: "icon-tip",
+        src: tipSvg
+      })));
+    } else {
+      item.title = columnTitle;
+    }
+    // column设置name时，权重最高
+    var columnName = (item === null || item === void 0 ? void 0 : item.name) || dataIndex || key;
+    item.dataIndex = columnName;
+    item.key = columnName;
+    if (typeof item.required === 'function') {
+      var namePath = getNamePath(name, virtualKey);
+      var rowData = form.getFieldValue([].concat(_toConsumableArray(namePath), [index]));
+      item.required = item.required(rowData[columnName], rowData, {
+        form: form,
+        index: index,
+        namePath: [].concat(_toConsumableArray(namePath), [index])
+      });
+    }
+    // 样式处理
+    item.className = classnames(_defineProperty({
+      'is-hidden': hidden,
+      'is-required': item.required || labelRequired,
+      'is-required-right': requiredAlign === 'right',
+      'is-required-left': requiredAlign === 'left'
+    }, className, className));
+    // 防止重复渲染导致className重复添加
+    if (item.className) {
+      item.className = _toConsumableArray(new Set(item.className.split(' '))).join(' ');
+    }
+    // 当列表配置cache，接口请求静态数据会做数据缓存
+    if (item.cache) {
+      var _item$fieldProps3;
+      // 初始化加载ProSelect，缓存当前useRequest
+      if (item.type === 'ProSelect') {
+        var _cacheMap$item$dataIn, _cacheMap$item$dataIn2;
+        if (!(_cacheMap === null || _cacheMap === void 0 ? void 0 : (_cacheMap$item$dataIn = _cacheMap[item.dataIndex]) === null || _cacheMap$item$dataIn === void 0 ? void 0 : (_cacheMap$item$dataIn2 = _cacheMap$item$dataIn.dataSource) === null || _cacheMap$item$dataIn2 === void 0 ? void 0 : _cacheMap$item$dataIn2.length)) {
+          var _item$fieldProps, _item$fieldProps2;
+          _cacheMap[item.dataIndex] = {
+            useRequest: cloneDeep((_item$fieldProps = item.fieldProps) === null || _item$fieldProps === void 0 ? void 0 : _item$fieldProps.useRequest),
+            dataSource: [],
+            transformResponse: (_item$fieldProps2 = item.fieldProps) === null || _item$fieldProps2 === void 0 ? void 0 : _item$fieldProps2.transformResponse
+          };
+        } else {
+          var _cacheMap$item$dataIn3;
+          item.fieldProps.dataSource = (_cacheMap$item$dataIn3 = _cacheMap[item.dataIndex]) === null || _cacheMap$item$dataIn3 === void 0 ? void 0 : _cacheMap$item$dataIn3.dataSource;
+        }
+      }
+      (_item$fieldProps3 = item.fieldProps) === null || _item$fieldProps3 === void 0 ? true : delete _item$fieldProps3.useRequest;
+    }
+    var _render = function _render(text, record, index) {
+      var isEditing = !virtualKey || editingKeys.includes(record.rowKey);
+      var namePath = isArray(name) ? name : [name];
+      if (virtualKey && editingKeys.includes(record.rowKey)) {
+        namePath = getNamePath(name, virtualKey);
+      }
+      var columnNamePath = isArray(columnName) ? columnName : [columnName];
+      // 设置单元格formItem的namePath
+      var cellName = [].concat(_toConsumableArray(namePath), [index], _toConsumableArray(columnNamePath));
+      var _text = text;
+      // 当传入组合组件时，name需要重新组合一下，以防names中key与dataIndex重叠
+      if (names === null || names === void 0 ? void 0 : names.length) {
+        var nextDataIndex = splitNames(names);
+        item.dataIndex = nextDataIndex;
+        item.key = nextDataIndex;
+        cellName = [].concat(_toConsumableArray(namePath), [index, nextDataIndex]);
+        // 给names返回数组值
+        _text = names.map(function (item) {
+          return record === null || record === void 0 ? void 0 : record[item];
+        });
+      }
+      if (!isEditing && ellipsis) {
+        return /*#__PURE__*/React.createElement(ProTooltip, {
+          text: _text,
+          line: 1,
+          isResponsiveWidth: true
+        });
+      }
+      var cellClassName;
+      var isCanEdit = isCell && !record["$".concat(columnName, "Disabled")] && item.isEditable !== false;
+      // 单元格编辑场景下，需要将所有单元格设置为不可编辑状态，当鼠标hover时，展示输出框。点击可修改
+      if (isCanEdit) {
+        record.isView = true;
+        // 样式处理
+        cellClassName = classnames({
+          'is-cell': !isEqual(cellNamePath, cellName)
+        });
+      }
+      // 单行多行交互有较大差异
+      return /*#__PURE__*/React.createElement("div", {
+        className: cellClassName,
+        onClick: function onClick() {
+          isCanEdit && setState({
+            cellNamePath: cellName
+          });
+        }
+      }, /*#__PURE__*/React.createElement(RenderField, {
+        text: _text,
+        record: record,
+        index: index,
+        column: item,
+        config: _objectSpread(_objectSpread({}, config), {}, {
+          cellName: cellName,
+          isEditing: isEditing // 是否正在编辑
+        })
+      }));
+    };
+
+    item.render = _render;
+  });
+  if (disabled || isView) {
+    // 查看模式下过滤操作栏
+    _columns = _columns.filter(function (item) {
+      return item.title !== '操作';
+    });
+  } else {
+    var validateKeys = _columns.filter(function (i) {
+      return i.rules || i.required;
+    }).map(function (item) {
+      var _item$names;
+      if ((_item$names = item.names) === null || _item$names === void 0 ? void 0 : _item$names.length) {
+        var nextDataIndex = splitNames(item.names);
+        item.dataIndex = nextDataIndex;
+        item.key = nextDataIndex;
+      }
+      return item.dataIndex || item.key;
+    });
+    var actionColumn = getActionColumn(_objectSpread(_objectSpread({}, config), {}, {
+      validateKeys: validateKeys // 需要校验的单元格的formItem的name
+    }));
+
+    actionColumn && _columns.push(actionColumn);
+  }
+  if (draggable && !disabled && !isView) {
+    _columns.unshift({
+      key: 'SORT',
+      title: '',
+      className: "".concat(isEmpty(rowSelection) ? '' : 'is-drag'),
+      width: 0
+    });
+  }
+  // cacheMap 用来存储缓存值，若有值后不再请求
+  if (JSON.stringify(cacheMap.current) === '{}') {
+    Promise.all(Object.entries(_cacheMap).map( /*#__PURE__*/function () {
+      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(item) {
+        var _item, key, value, _ref4, service, option;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _item = _slicedToArray(item, 2), key = _item[0], value = _item[1];
+              _ref4 = (value === null || value === void 0 ? void 0 : value.useRequest) || {}, service = _ref4.service, option = _ref4.option;
+              if (!service) {
+                _context2.next = 8;
+                break;
+              }
+              _context2.t0 = key;
+              _context2.next = 6;
+              return service(_objectSpread({}, option === null || option === void 0 ? void 0 : option.defaultParams));
+            case 6:
+              _context2.t1 = _context2.sent;
+              return _context2.abrupt("return", [_context2.t0, _context2.t1]);
+            case 8:
+              return _context2.abrupt("return", [key, {}]);
+            case 9:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      return function (_x3) {
+        return _ref3.apply(this, arguments);
+      };
+    }())).then(function (res) {
+      res.forEach(function (item) {
+        var _item2 = _slicedToArray(item, 2),
+          key = _item2[0],
+          value = _item2[1];
+        var transformResponse = _cacheMap[key].transformResponse;
+        _cacheMap[key].dataSource = (transformResponse ? transformResponse(value) : value === null || value === void 0 ? void 0 : value.data) || [];
+      });
+      cacheMap.current = _cacheMap;
+      if (JSON.stringify(cacheMap.current) !== '{}') {
+        setState({
+          forceUpdate: {}
+        });
+      }
+    });
+  }
+  // 渲染操作列
+  return _columns;
+};

package/es/ProEditTable/utils/tools.d.ts

@@ -0,0 +1,16 @@
+export declare const getRandom: () => string;
+export declare const difference: (object: any, base: any) => unknown;
+export declare const customValidate: (validateKeys: any, form: any, rowName: any) => any;
+/**
+ * 拆解数组names
+ * @param names [][]
+ * @returns string
+ */
+export declare const splitNames: (names: any[]) => any;
+export declare const getNamePath: (name: any, virtualKey: any) => any;
+export declare const onDelete: ({ name, form, virtualKey, selectedRowKeys }: {
+    name: any;
+    form: any;
+    virtualKey: any;
+    selectedRowKeys: any;
+}) => void;

package/es/ProEditTable/utils/tools.js

@@ -0,0 +1,75 @@
+import { cloneDeep, isString, isObject, isEqual, transform } from 'lodash';
+export var getRandom = function getRandom() {
+  return Math.random().toString(36).slice(-6);
+};
+// 深层次对比两个对象且取出来差异值
+export var difference = function difference(object, base) {
+  var changes = function changes(object, base) {
+    return transform(object, function (result, value, key) {
+      if (!isEqual(value, base[key])) {
+        result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value;
+      }
+    });
+  };
+  return changes(object, base);
+};
+// 数组字段循环校验，解决validateFields无法批量校验的问题
+export var customValidate = function customValidate(validateKeys, form, rowName) {
+  var array = [];
+  validateKeys.forEach(function (key) {
+    array.push(rowName.concat(key));
+  });
+  return form.validateFields(array);
+};
+/**
+ * 拆解数组names
+ * @param names [][]
+ * @returns string
+ */
+export var splitNames = function splitNames(names) {
+  var result;
+  var resultArray = [];
+  if (isString(names[0])) {
+    result = names.join('-');
+    return result;
+  }
+  names.forEach(function (item) {
+    if (isString(item[0])) {
+      resultArray.push("".concat(item[0], "_").concat(item[1]));
+    }
+  });
+  result = resultArray.join('-');
+  return result;
+};
+// 获取中间formItem的name
+export var getNamePath = function getNamePath(name, virtualKey) {
+  var nextName = cloneDeep(name);
+  var lastValue = nextName[nextName.length - 1];
+  nextName[nextName.length - 1] = "".concat(lastValue).concat(virtualKey ? "-".concat(virtualKey) : '');
+  return nextName;
+};
+// 删除操作
+export var onDelete = function onDelete(_ref) {
+  var name = _ref.name,
+    form = _ref.form,
+    virtualKey = _ref.virtualKey,
+    selectedRowKeys = _ref.selectedRowKeys;
+  // 正常的form数据流处理
+  var dataSource = form.getFieldValue(name);
+  dataSource = dataSource.filter(function (row) {
+    return !selectedRowKeys.includes(row.rowKey);
+  });
+  form.setFieldValue(name, dataSource);
+  // 单行模式数据流处理 重置中间正在编辑状态单行数据
+  if (virtualKey) {
+    var _virtualList;
+    var namePath = getNamePath(name, virtualKey);
+    var virtualList = form.getFieldValue(namePath);
+    if ((_virtualList = virtualList) === null || _virtualList === void 0 ? void 0 : _virtualList.length) {
+      virtualList = virtualList.filter(function (row) {
+        return !selectedRowKeys.includes(row.rowKey);
+      });
+      form.setFieldValue(namePath, virtualList);
+    }
+  }
+};

package/es/ProEditTable/utils/transform.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    RangePicker: () => import("@zat-design-pro-component/utils/dist/esm/transforms/propTypes").Transform<any>;
+    DatePicker: () => import("@zat-design-pro-component/utils/dist/esm/transforms/propTypes").Transform<any>;
+};
+export default _default;

package/es/ProEditTable/utils/transform.js

@@ -0,0 +1,15 @@
+import { transforms } from '@zat-design-pro-component/utils';
+var transformDate = transforms.transformDate;
+export default {
+  RangePicker: function RangePicker() {
+    return transformDate({
+      type: 'RangePicker',
+      keys: ['form', 'to']
+    });
+  },
+  DatePicker: function DatePicker() {
+    return transformDate({
+      type: 'DatePicker'
+    });
+  }
+};

package/es/ProEnum/getEnumLabel.d.ts

@@ -0,0 +1,2 @@
+declare const getEnumLabel: (enumCode: string, value: any, compose?: boolean, code?: string, label?: string) => JSX.Element;
+export default getEnumLabel;

package/es/ProEnum/getEnumLabel.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { useProConfig } from 'zat-design-pro-component';
+var EnumLabel = function EnumLabel(props) {
+  var label = '';
+  var fieldValue = '';
+  var _ref = useProConfig('ProEnum') || {},
+    fieldNames = _ref.fieldNames,
+    _ref$clear = _ref.clear,
+    clear = _ref$clear === void 0 ? true : _ref$clear;
+  if (fieldNames && Object.keys(fieldNames).length) {
+    label = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.label;
+    fieldValue = fieldNames === null || fieldNames === void 0 ? void 0 : fieldNames.value;
+  }
+  if (props.label) label = props.label;
+  if (props.code) fieldValue = props.code;
+  if (clear) {
+    label = 'label';
+    fieldValue = 'value';
+  }
+  var enumCode = props.enumCode,
+    value = props.value,
+    compose = props.compose;
+  var _useProConfig = useProConfig('ProEnum'),
+    _useProConfig$dics = _useProConfig.dics,
+    dics = _useProConfig$dics === void 0 ? {} : _useProConfig$dics;
+  var enumList = (dics === null || dics === void 0 ? void 0 : dics[enumCode]) || [];
+  var transToLabel = function transToLabel(value) {
+    var labelList = value.map(function (v) {
+      var option = enumList.find(function (option) {
+        return option[fieldValue] === v;
+      });
+      if (option && option[label]) {
+        return compose ? "".concat(value, "-").concat(option[label]) : option[label];
+      }
+      return '';
+    });
+    return /*#__PURE__*/React.createElement("span", null, labelList.join('，') || '-');
+  };
+  if (Array.isArray(enumList)) {
+    if (Array.isArray(value)) {
+      return transToLabel(value);
+    }
+    return transToLabel([value]);
+  }
+  return /*#__PURE__*/React.createElement("span", null, "-");
+};
+var getEnumLabel = function getEnumLabel(enumCode, value) {
+  var compose = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var code = arguments.length > 3 ? arguments[3] : undefined;
+  var label = arguments.length > 4 ? arguments[4] : undefined;
+  if (!enumCode) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(EnumLabel, {
+    enumCode: enumCode,
+    value: value,
+    compose: compose,
+    code: code,
+    label: label
+  });
+};
+export default getEnumLabel;

package/es/ProEnum/index.d.ts

@@ -0,0 +1,8 @@
+import useEnum from './useEnum';
+import { ProEnumProps } from './propsType';
+declare const ProEnum: {
+    (props: ProEnumProps): JSX.Element;
+    getEnumLabel: (enumCode: string, value: any, compose?: boolean, code?: string, label?: string) => JSX.Element;
+    useEnum: typeof useEnum;
+};
+export default ProEnum;