@pisell/materials 3.0.61 → 6.0.1

package/es/components/dataSourceComponents/dataSourceTable/filter/index.js

@@ -0,0 +1,169 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useMemo, useEffect, useState } from 'react';
+import { Form } from 'antd';
+import { useMemoizedFn, useDebounceFn } from 'ahooks';
+import { SearchOutlined } from '@ant-design/icons';
+import Input from "../../fields/Input";
+import useDataSource from "../../hooks/useDataSource";
+import FilterButton from "../../../filter/components/FilterButton";
+import { genFilterItems, genGetField, field2Cpt, getStoredFilterOrder, saveFilterOrder } from "./utils";
+import "./index.less";
+var defaultArr = [];
+var Filter = function Filter(props) {
+  var componentId = props.componentId,
+    _props$items = props.items,
+    items = _props$items === void 0 ? defaultArr : _props$items,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'simple' : _props$mode,
+    _props$quickFilterMax = props.quickFilterMaxLength,
+    quickFilterMaxLength = _props$quickFilterMax === void 0 ? 3 : _props$quickFilterMax,
+    _props$sortButtonShow = props.sortButtonShow,
+    sortButtonShow = _props$sortButtonShow === void 0 ? false : _props$sortButtonShow,
+    handleValuesChange = props.handleValuesChange,
+    search = props.search,
+    filterBy = props.filterBy,
+    show = props.show;
+  var _Form$useForm = Form.useForm(),
+    _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+    form = _Form$useForm2[0];
+  var _useDataSource = useDataSource(),
+    dataSource = _useDataSource.dataSource;
+  var _useState = useState(function () {
+      var storedOrder = getStoredFilterOrder(componentId);
+      return storedOrder || {
+        quickFilter: [],
+        otherFilter: []
+      };
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    list = _useState2[0],
+    setList = _useState2[1];
+  var filterList = useMemo(function () {
+    return items.filter(function (item) {
+      return !(item !== null && item !== void 0 && item.isHidden);
+    });
+  }, [items]);
+  var filterDom = useMemo(function () {
+    if (!show) {
+      return null;
+    }
+    return genFilterItems(list.quickFilter, dataSource);
+  }, [list.quickFilter, show]);
+  useEffect(function () {
+    var storedOrder = getStoredFilterOrder(componentId);
+    if (!storedOrder) {
+      var newList = {
+        quickFilter: filterList.slice(0, quickFilterMaxLength),
+        otherFilter: filterList.slice(quickFilterMaxLength)
+      };
+      setList(newList);
+      saveFilterOrder(componentId, newList);
+      return;
+    }
+    var orderedItems = {
+      quickFilter: [],
+      otherFilter: []
+    };
+    var itemMap = new Map(filterList.map(function (item) {
+      return [item.name, item];
+    }));
+    storedOrder.quickFilter.forEach(function (stored) {
+      var item = itemMap.get(stored.name);
+      if (item) {
+        orderedItems.quickFilter.push(item);
+        itemMap.delete(stored.name);
+      }
+    });
+    storedOrder.otherFilter.forEach(function (stored) {
+      var item = itemMap.get(stored.name);
+      if (item) {
+        orderedItems.otherFilter.push(item);
+        itemMap.delete(stored.name);
+      }
+    });
+    var remainingItems = Array.from(itemMap.values());
+    remainingItems.forEach(function (item) {
+      if (orderedItems.quickFilter.length < quickFilterMaxLength) {
+        orderedItems.quickFilter.push(item);
+      } else {
+        orderedItems.otherFilter.push(item);
+      }
+    });
+    if (quickFilterMaxLength && orderedItems.quickFilter.length > quickFilterMaxLength) {
+      var _orderedItems$otherFi;
+      var overflow = orderedItems.quickFilter.splice(quickFilterMaxLength);
+      (_orderedItems$otherFi = orderedItems.otherFilter).unshift.apply(_orderedItems$otherFi, _toConsumableArray(overflow));
+    }
+    setList(orderedItems);
+    saveFilterOrder(componentId, orderedItems);
+  }, [filterList, quickFilterMaxLength, componentId]);
+  var onChange = function onChange(newVal) {
+    setList(newVal);
+    saveFilterOrder(componentId, newVal);
+  };
+  var renderItem = useMemoizedFn(function (item, otherProps) {
+    var getField = genGetField(dataSource);
+    var field = getField(item.name);
+    var cptDom = field2Cpt(field, item, _objectSpread({
+      labelCol: {
+        span: 24
+      },
+      style: function style(_style) {
+        return _objectSpread(_objectSpread({}, _style || {}), {}, {
+          width: '100%'
+        });
+      }
+    }, otherProps));
+    return cptDom;
+  });
+  var onValuesChange = useDebounceFn(function (changedFields, allFields) {
+    handleValuesChange(changedFields, allFields);
+  }, {
+    wait: 300
+  }).run;
+  var searchDom = useMemo(function () {
+    return search !== null && search !== void 0 && search.show ? /*#__PURE__*/React.createElement(Input, {
+      name: search.key || '_keywords',
+      placeholder: search.placeholder,
+      renderMode: "edit",
+      prefix: /*#__PURE__*/React.createElement(SearchOutlined, null),
+      style: {
+        width: 200,
+        margin: 0
+      },
+      allowClear: true
+    }) : null;
+  }, [search]);
+  return /*#__PURE__*/React.createElement(Form, {
+    labelCol: {
+      span: 0
+    },
+    form: form,
+    size: "large",
+    layout: "inline",
+    className: "filter-form-wrapper",
+    onValuesChange: onValuesChange
+  }, searchDom, filterDom, show && /*#__PURE__*/React.createElement(FilterButton, {
+    value: list,
+    quickFilterMaxLength: quickFilterMaxLength,
+    formFiltersPrefix: '',
+    onChange: onChange,
+    renderItem: renderItem
+  }));
+};
+export default Filter;

package/es/components/dataSourceComponents/dataSourceTable/filter/index.less

@@ -0,0 +1,4 @@
+.filter-form-wrapper {
+  display: flex;
+  gap: 8px;
+}

package/es/components/dataSourceComponents/dataSourceTable/filter/utils.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { FilterItemProps } from '../../../filter/types';
+import { DataSourceType, Field } from '../../provider/dataSource/DataSourceContext';
+export declare const genGetField: (dataSource?: DataSourceType) => (key: string) => Field;
+export declare const field2Cpt: (field: Field, item: any, otherProps?: any) => React.JSX.Element | null;
+export declare const genFilterItems: (list: FilterItemProps[], dataSource?: DataSourceType) => (React.JSX.Element | null)[];
+export declare const getStoredFilterOrder: (componentId: string) => any;
+export declare const saveFilterOrder: (componentId: string, order: any) => void;

package/es/components/dataSourceComponents/dataSourceTable/filter/utils.js

@@ -0,0 +1,145 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React from 'react';
+import { isFunction } from '@pisell/utils';
+import { formFieldMap } from "../../fields";
+export var genGetField = function genGetField(dataSource) {
+  var _ref = dataSource || {},
+    _ref$fields = _ref.fields,
+    fields = _ref$fields === void 0 ? [] : _ref$fields;
+  var fieldMap = fields.reduce(function (acc, field) {
+    acc[field.name] = field;
+    return acc;
+  }, {});
+  return function (key) {
+    return fieldMap[key];
+  };
+};
+var fieldType2FilterMap = {
+  Checkbox: 'FormItemSelect',
+  ColorPicker: 'FormItemInput',
+  DatePicker: 'FormItemDateRangePicker',
+  Input: 'FormItemInput',
+  Radio: 'FormItemSelect',
+  Select: 'FormItemSelect',
+  Percent: 'FormItemPercent',
+  InputNumber: 'FormItemInputNumber',
+  'Input.JSON': 'FormItemInput',
+  'Input.Email': 'FormItemInput',
+  'Input.URL': 'FormItemInput',
+  'Input.Password': 'FormItemInput',
+  'Radio.Group': 'FormItemSelect',
+  'Checkbox.Group': 'FormItemSelect',
+  'Translation': 'FormItemTranslation'
+};
+var getCptProps = function getCptProps(field, cptType, item) {
+  var _field$uiSchema, _props, _field$uiSchema2, _field$uiSchema3, _field$uiSchema3$enum, _field$uiSchema6, _field$uiSchema8, _item$other;
+  var props = (field === null || field === void 0 ? void 0 : (_field$uiSchema = field.uiSchema) === null || _field$uiSchema === void 0 ? void 0 : _field$uiSchema['x-component-props']) || {};
+  props.style = _objectSpread(_objectSpread({}, ((_props = props) === null || _props === void 0 ? void 0 : _props.style) || {}), {}, {
+    width: '200px',
+    margin: 0
+  });
+  props.placeholder = item.label;
+  props.allowClear = true;
+  if (cptType === 'FormItemSelect') {
+    props.mode = 'multiple';
+    props.showSearch = true;
+    props.optionFilterProp = 'label';
+  }
+  if (['Select', 'Radio.Group', 'Checkbox.Group'].includes(field === null || field === void 0 ? void 0 : (_field$uiSchema2 = field.uiSchema) === null || _field$uiSchema2 === void 0 ? void 0 : _field$uiSchema2['x-component']) && ((field === null || field === void 0 ? void 0 : (_field$uiSchema3 = field.uiSchema) === null || _field$uiSchema3 === void 0 ? void 0 : (_field$uiSchema3$enum = _field$uiSchema3.enum) === null || _field$uiSchema3$enum === void 0 ? void 0 : _field$uiSchema3$enum.length) || 0) > 0) {
+    var _field$uiSchema4, _field$uiSchema5;
+    if (['Radio.Group', 'Checkbox.Group'].includes(field === null || field === void 0 ? void 0 : (_field$uiSchema4 = field.uiSchema) === null || _field$uiSchema4 === void 0 ? void 0 : _field$uiSchema4['x-component'])) {
+      props.direction = 'horizontal';
+    } else {
+      props.showSearch = true;
+      props.optionFilterProp = 'label';
+    }
+    props.options = field === null || field === void 0 ? void 0 : (_field$uiSchema5 = field.uiSchema) === null || _field$uiSchema5 === void 0 ? void 0 : _field$uiSchema5.enum;
+  }
+  if ((field === null || field === void 0 ? void 0 : (_field$uiSchema6 = field.uiSchema) === null || _field$uiSchema6 === void 0 ? void 0 : _field$uiSchema6['x-component']) === 'ColorPicker') {
+    var _field$uiSchema7;
+    props.defaultValue = field === null || field === void 0 ? void 0 : (_field$uiSchema7 = field.uiSchema) === null || _field$uiSchema7 === void 0 ? void 0 : _field$uiSchema7.default;
+  }
+  if (cptType === 'DateRangePicker') {
+    var _props2;
+    props.style = _objectSpread(_objectSpread({}, ((_props2 = props) === null || _props2 === void 0 ? void 0 : _props2.style) || {}), {}, {
+      width: '240px'
+    });
+  }
+
+  // 勾选组件
+  if ((field === null || field === void 0 ? void 0 : (_field$uiSchema8 = field.uiSchema) === null || _field$uiSchema8 === void 0 ? void 0 : _field$uiSchema8['x-component']) === 'Checkbox' && cptType === 'Select') {
+    props.mode = undefined;
+    props.allowClear = true;
+    props.options = [{
+      label: '是',
+      value: true
+    }, {
+      label: '否',
+      value: false
+    }];
+  }
+  props = _objectSpread(_objectSpread({}, props), (item === null || item === void 0 ? void 0 : (_item$other = item.other) === null || _item$other === void 0 ? void 0 : _item$other.fieldProps) || {});
+  return props;
+};
+export var field2Cpt = function field2Cpt(field, item, otherProps) {
+  var isCustom = item.isCustom,
+    configType = item.type;
+  var _ref2 = field || {},
+    uiSchema = _ref2.uiSchema;
+  var _ref3 = uiSchema || {},
+    xComponent = _ref3['x-component'];
+  var cptType = fieldType2FilterMap[xComponent];
+  if (isCustom) {
+    cptType = configType;
+  }
+  var Cpt = formFieldMap[cptType];
+  if (!Cpt) {
+    return null;
+  }
+  var props = getCptProps(field, cptType, item);
+  var style = isFunction(otherProps === null || otherProps === void 0 ? void 0 : otherProps.style) ? otherProps === null || otherProps === void 0 ? void 0 : otherProps.style(props.style) : otherProps !== null && otherProps !== void 0 && otherProps.style ? _objectSpread(_objectSpread({}, props.style), otherProps === null || otherProps === void 0 ? void 0 : otherProps.style) : props.style;
+  return /*#__PURE__*/React.createElement(Cpt, _extends({}, props, {
+    label: item.label,
+    name: item.name || item.value
+  }, otherProps, {
+    style: style
+  }));
+};
+export var genFilterItems = function genFilterItems(list, dataSource) {
+  return list.map(function (item) {
+    if (!item) {
+      return null;
+    }
+    var name = item.name;
+    var getField = genGetField(dataSource);
+    var field = getField(name);
+    var cptDom = field2Cpt(field, item);
+    return cptDom;
+  });
+};
+var FILTER_STORAGE_KEY = 'filter-setting-';
+var getStorageKey = function getStorageKey(componentId) {
+  return "".concat(FILTER_STORAGE_KEY).concat(componentId);
+};
+export var getStoredFilterOrder = function getStoredFilterOrder(componentId) {
+  try {
+    var stored = localStorage.getItem(getStorageKey(componentId));
+    return stored ? JSON.parse(stored) : null;
+  } catch (e) {
+    console.error('Failed to parse stored filter order:', e);
+    return null;
+  }
+};
+export var saveFilterOrder = function saveFilterOrder(componentId, order) {
+  try {
+    localStorage.setItem(getStorageKey(componentId), JSON.stringify(order));
+  } catch (e) {
+    console.error('Failed to save filter order:', e);
+  }
+};

package/es/components/dataSourceComponents/dataSourceTable/hooks/useColumns.d.ts

@@ -0,0 +1,11 @@
+import { ColumnType } from 'antd/es/table';
+export declare type Column = ColumnType<{
+    fieldComponent: string;
+}>;
+declare type UseColumnsProps = {
+    columns: Column[];
+    fields?: any[];
+    actionsColumns?: any[];
+};
+declare const useColumns: ({ columns, fields, actionsColumns, }: UseColumnsProps) => Column[];
+export default useColumns;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useColumns.js

@@ -0,0 +1,58 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { useMemo } from 'react';
+import { getFieldComponent } from "../../fields";
+var genFieldProps = function genFieldProps(field, fieldProps) {
+  var props = {
+    renderMode: 'tableView',
+    noStyle: true
+  };
+  if (!field) return props;
+  if (['Select', 'Radio.Group', 'Checkbox.Group'].includes(field.uiSchema['x-component']) && field.uiSchema.enum.length > 0) {
+    if (['Radio.Group', 'Checkbox.Group'].includes(field.uiSchema['x-component'])) {
+      props.direction = 'horizontal';
+    }
+    props.options = field.uiSchema.enum;
+  }
+  props = _objectSpread(_objectSpread({}, props), fieldProps || {});
+  return props;
+};
+var useColumns = function useColumns(_ref) {
+  var columns = _ref.columns,
+    fields = _ref.fields,
+    actionsColumns = _ref.actionsColumns;
+  // 将fields转换为map
+  var fieldMap = useMemo(function () {
+    if (!fields) return {};
+    return fields.reduce(function (acc, field) {
+      acc[field.name] = field;
+      return acc;
+    }, {});
+  }, [fields]);
+  return useMemo(function () {
+    if (Object.keys(fieldMap).length === 0) return [];
+    return columns.map(function (column) {
+      var _other;
+      var field = fieldMap[column === null || column === void 0 ? void 0 : column.dataIndex];
+
+      // 优先 column.title -> field.title
+      var title = (column === null || column === void 0 ? void 0 : column.title) || (field === null || field === void 0 ? void 0 : field.title);
+      var FieldComponent = getFieldComponent(column === null || column === void 0 ? void 0 : column.fieldComponent) || 'div';
+      var fieldProps = genFieldProps(field, (_other = column.other) === null || _other === void 0 ? void 0 : _other.fieldProps);
+      return _objectSpread(_objectSpread({}, column), {}, {
+        title: title,
+        render: function render(text) {
+          return /*#__PURE__*/React.createElement(FieldComponent, _extends({}, fieldProps, {
+            value: text
+          }));
+        }
+      });
+    }).concat(actionsColumns || []);
+  }, [columns, fieldMap, actionsColumns]);
+};
+export default useColumns;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare const useDataSourceKey: () => {
+    dataSourceKey: string | undefined;
+    dataSourceKeyRef: import("react").MutableRefObject<string | undefined>;
+};
+export default useDataSourceKey;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDataSourceKey.js

@@ -0,0 +1,17 @@
+import { useMemo, useRef } from 'react';
+import { isString } from '@pisell/utils';
+import useDataSource from "../../hooks/useDataSource";
+var useDataSourceKey = function useDataSourceKey() {
+  var _useDataSource = useDataSource(),
+    dataSource = _useDataSource.dataSource;
+  var dataSourceKey = useMemo(function () {
+    return isString(dataSource) ? dataSource : (dataSource === null || dataSource === void 0 ? void 0 : dataSource.key) || (dataSource === null || dataSource === void 0 ? void 0 : dataSource.tableName);
+  }, [dataSource]);
+  var dataSourceKeyRef = useRef(dataSourceKey);
+  dataSourceKeyRef.current = dataSourceKey;
+  return {
+    dataSourceKey: dataSourceKey,
+    dataSourceKeyRef: dataSourceKeyRef
+  };
+};
+export default useDataSourceKey;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDesignMode.d.ts

@@ -0,0 +1,2 @@
+declare const useDesignMode: (props: any, { registerValueVariable, openDrawer, closeDrawer, data }: any) => void;
+export default useDesignMode;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDesignMode.js

@@ -0,0 +1,49 @@
+import { useEffect, useRef } from 'react';
+// 设计模式下状态管理
+var useDesignMode = function useDesignMode(props, _ref) {
+  var registerValueVariable = _ref.registerValueVariable,
+    openDrawer = _ref.openDrawer,
+    closeDrawer = _ref.closeDrawer,
+    data = _ref.data;
+  var __designMode = props.__designMode,
+    componentId = props.componentId,
+    operation = props.operation;
+  var _ref2 = operation || {},
+    items = _ref2.items;
+
+  // 存储上一次的items
+  var prevItemsRef = useRef([]);
+  useEffect(function () {
+    var _prevItemsRef$current;
+    if (__designMode === 'design' && items !== null && items !== void 0 && items.length && (_prevItemsRef$current = prevItemsRef.current) !== null && _prevItemsRef$current !== void 0 && _prevItemsRef$current.length) {
+      // 找出变更的那一条记录
+      var changedItem = items.find(function (item) {
+        var prevItem = prevItemsRef.current.find(function (prev) {
+          return prev.key === item.key;
+        });
+        if (!prevItem) return false;
+
+        // 对比actionType是否变更
+        if (item.actionType !== prevItem.actionType) {
+          return true;
+        }
+        return false;
+      });
+      if (changedItem) {
+        // 如果是view/edit/custom类型,则打开对应弹窗
+        if (['view', 'edit', 'custom'].includes(changedItem.actionType)) {
+          registerValueVariable === null || registerValueVariable === void 0 ? void 0 : registerValueVariable(componentId, {
+            currentRecord: (data === null || data === void 0 ? void 0 : data[0]) || null
+          });
+          openDrawer(changedItem);
+        } else {
+          closeDrawer();
+        }
+      }
+    }
+
+    // 更新prevItemsRef
+    prevItemsRef.current = items;
+  }, [items, __designMode]);
+};
+export default useDesignMode;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Drawer } from 'antd';
+import { OperationItem } from '../type';
+declare const useDrawerState: (operationContent?: {
+    [key: string]: import("react").ReactNode;
+} | undefined) => {
+    drawerVisible: boolean;
+    setDrawerVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    openDrawer: (item: OperationItem) => void;
+    closeDrawer: () => void;
+    drawerContent: import("react").ReactNode;
+    Container: typeof Drawer | {
+        (props: import("../../../pisellModal").PisellModalProps): import("react").JSX.Element;
+        confirm: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
+            destroy: () => void;
+            update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        };
+        info: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
+            destroy: () => void;
+            update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        };
+        error: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
+            destroy: () => void;
+            update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        };
+        warn: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => any;
+        warning: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
+            destroy: () => void;
+            update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        };
+        success: (props: import("../../../pisellModal/components/functions").PisellModalFuncProps) => {
+            destroy: () => void;
+            update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
+        };
+        Information: (props: import("../../../pisellModal/components/Information").InformationProps) => import("react").JSX.Element;
+    };
+    containerProps: {};
+};
+export default useDrawerState;

package/es/components/dataSourceComponents/dataSourceTable/hooks/useDrawerState.js

@@ -0,0 +1,100 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { Drawer } from 'antd';
+import { useState, useMemo, useRef, useEffect } from 'react';
+import Modal from "../../../pisellModal";
+var sizeMap = {
+  small: 400,
+  middle: 600,
+  large: 800
+};
+var useDrawerState = function useDrawerState(operationContent) {
+  // 抽屉是否显示
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    drawerVisible = _useState2[0],
+    setDrawerVisible = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    item = _useState4[0],
+    setItem = _useState4[1];
+  var timerRef = useRef();
+
+  // 组件卸载时清除定时器
+  useEffect(function () {
+    return function () {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, []);
+  var openDrawer = function openDrawer(item) {
+    // 如果存在未完成的定时器，先清除
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    setDrawerVisible(true);
+    setItem(item);
+  };
+  var closeDrawer = function closeDrawer() {
+    // 如果存在未完成的定时器，先清除
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+    setDrawerVisible(false);
+    // 等待动画完成后再清除item
+    timerRef.current = setTimeout(function () {
+      setItem(null);
+      timerRef.current = undefined;
+    }, 300);
+  };
+
+  // 抽屉内容
+  var drawerContent = useMemo(function () {
+    if (item !== null && item !== void 0 && item.key && operationContent) {
+      return operationContent[item.key];
+    }
+    return null;
+  }, [item, operationContent]);
+
+  // 容器属性
+  var containerProps = useMemo(function () {
+    if (!item) {
+      return {};
+    }
+    var otherProps = {};
+    if ((item === null || item === void 0 ? void 0 : item.openMode) === 'modal') {
+      otherProps.footer = null;
+    }
+    return _objectSpread({
+      width: sizeMap[item === null || item === void 0 ? void 0 : item.openContentSize],
+      title: item === null || item === void 0 ? void 0 : item.openTitle
+    }, otherProps);
+  }, [item]);
+  var Container = useMemo(function () {
+    if ((item === null || item === void 0 ? void 0 : item.openMode) === 'drawer') {
+      return Drawer;
+    }
+    return Modal;
+  }, [item === null || item === void 0 ? void 0 : item.openMode]);
+  return {
+    drawerVisible: drawerVisible,
+    setDrawerVisible: setDrawerVisible,
+    openDrawer: openDrawer,
+    closeDrawer: closeDrawer,
+    drawerContent: drawerContent,
+    Container: Container,
+    containerProps: containerProps
+  };
+};
+export default useDrawerState;