@ant-design/pro-components 3.1.0-0 → 3.1.1-1

package/lib/table/components/ColumnSetting/style.js

@@ -1,89 +1,103 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProStyle = function genProStyle(token) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, token.componentCls, {
-    width: 'auto',
-    '&-title': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      height: '32px'
+const genProStyle = token => {
+  return {
+    [token.componentCls]: {
+      width: 'auto',
+      '&-title': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: '32px'
+      },
+      '&-overlay': {
+        [`${token.antCls}-popover-inner-content`]: {
+          width: '200px',
+          paddingBlock: 0,
+          paddingInline: 0,
+          paddingBlockEnd: 8
+        },
+        [`${token.antCls}-tree-node-content-wrapper:hover`]: {
+          backgroundColor: 'transparent'
+        },
+        [`${token.antCls}-tree-draggable-icon`]: {
+          cursor: 'grab'
+        },
+        [`${token.antCls}-tree-treenode`]: {
+          alignItems: 'center',
+          '&:hover': {
+            [`${token.componentCls}-list-item-option`]: {
+              display: 'block'
+            }
+          },
+          [`${token.antCls}-tree-checkbox`]: {
+            marginInlineEnd: '4px'
+          },
+          [`${token.antCls}-tree-title`]: {
+            width: '100%'
+          }
+        }
+      }
     },
-    '&-overlay': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.antCls, "-popover-inner-content"), {
-      width: '200px',
-      paddingBlock: 0,
-      paddingInline: 0,
-      paddingBlockEnd: 8
-    }), "".concat(token.antCls, "-tree-node-content-wrapper:hover"), {
-      backgroundColor: 'transparent'
-    }), "".concat(token.antCls, "-tree-draggable-icon"), {
-      cursor: 'grab'
-    }), "".concat(token.antCls, "-tree-treenode"), (0, _defineProperty2.default)((0, _defineProperty2.default)({
-      alignItems: 'center',
-      '&:hover': (0, _defineProperty2.default)({}, "".concat(token.componentCls, "-list-item-option"), {
-        display: 'block'
-      })
-    }, "".concat(token.antCls, "-tree-checkbox"), {
-      marginInlineEnd: '4px'
-    }), "".concat(token.antCls, "-tree-title"), {
-      width: '100%'
-    }))
-  }), "".concat(token.componentCls, "-action-rest-button"), {
-    color: token.colorPrimary
-  }), "".concat(token.componentCls, "-list"), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    paddingBlockStart: 8
-  }, "&".concat(token.componentCls, "-list-group"), {
-    paddingBlockStart: 0
-  }), '&-title', {
-    marginBlockStart: '6px',
-    marginBlockEnd: '6px',
-    paddingInlineStart: '24px',
-    color: token.colorTextSecondary,
-    fontSize: '12px'
-  }), '&-item', {
-    display: 'flex',
-    alignItems: 'center',
-    maxHeight: 24,
-    justifyContent: 'space-between',
-    '&-title': {
-      flex: 1,
-      maxWidth: 80,
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      wordBreak: 'break-all',
-      whiteSpace: 'nowrap'
+    [`${token.componentCls}-action-rest-button`]: {
+      color: token.colorPrimary
     },
-    '&-option': {
-      display: 'none',
-      float: 'right',
-      cursor: 'pointer',
-      '> span': {
-        '> span.anticon': {
-          color: token.colorPrimary
-        }
+    [`${token.componentCls}-list`]: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+      paddingBlockStart: 8,
+      [`&${token.componentCls}-list-group`]: {
+        paddingBlockStart: 0
       },
-      '> span + span': {
-        marginInlineStart: 4
+      '&-title': {
+        marginBlockStart: '6px',
+        marginBlockEnd: '6px',
+        paddingInlineStart: '24px',
+        color: token.colorTextSecondary,
+        fontSize: '12px'
+      },
+      '&-item': {
+        display: 'flex',
+        alignItems: 'center',
+        maxHeight: 24,
+        justifyContent: 'space-between',
+        '&-title': {
+          flex: 1,
+          maxWidth: 80,
+          textOverflow: 'ellipsis',
+          overflow: 'hidden',
+          wordBreak: 'break-all',
+          whiteSpace: 'nowrap'
+        },
+        '&-option': {
+          display: 'none',
+          float: 'right',
+          cursor: 'pointer',
+          '> span': {
+            '> span.anticon': {
+              color: token.colorPrimary
+            }
+          },
+          '> span + span': {
+            marginInlineStart: 4
+          }
+        }
       }
     }
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('ColumnSetting', function (token) {
-    var proToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('ColumnSetting', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

package/lib/table/components/DragSortTable/index.js

@@ -6,106 +6,92 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _util = require("@rc-component/util");
 var _antd = require("antd");
 var _react = _interopRequireWildcard(require("react"));
 var _Table = _interopRequireDefault(require("../../Table"));
-var _useDragSort2 = require("../../utils/useDragSort");
+var _useDragSort = require("../../utils/useDragSort");
 var _style = require("./style");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["rowKey", "dragSortKey", "dragSortHandlerRender", "onDragSortEnd", "onDataSourceChange", "defaultData", "dataSource", "onLoad"],
-  _excluded2 = ["rowData", "index", "className"];
 function DragSortTable(props) {
-  var _otherProps$columns;
-  var rowKey = props.rowKey,
-    dragSortKey = props.dragSortKey,
-    dragSortHandlerRender = props.dragSortHandlerRender,
-    onDragSortEnd = props.onDragSortEnd,
-    onDataSourceChange = props.onDataSourceChange,
-    defaultData = props.defaultData,
-    originDataSource = props.dataSource,
-    onLoad = props.onLoad,
-    otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _useMergedState = (0, _util.useMergedState)(function () {
-      return defaultData || [];
-    }, {
-      value: originDataSource,
-      onChange: onDataSourceChange
-    }),
-    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-    dataSource = _useMergedState2[0],
-    setDataSource = _useMergedState2[1];
-  var _useStyle = (0, _style.useStyle)(getPrefixCls('pro-table-drag')),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const {
+    rowKey,
+    dragSortKey,
+    dragSortHandlerRender,
+    onDragSortEnd,
+    onDataSourceChange,
+    defaultData,
+    dataSource: originDataSource,
+    onLoad,
+    ...otherProps
+  } = props;
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const [dataSource, setDataSourceInner] = (0, _util.useControlledState)(() => defaultData || [], originDataSource);
+  const setDataSource = (0, _react.useCallback)(updater => {
+    setDataSourceInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onDataSourceChange?.(next);
+      return next;
+    });
+  }, [onDataSourceChange]);
+  const {
+    wrapSSR,
+    hashId
+  } = (0, _style.useStyle)(getPrefixCls('pro-table-drag'));
 
   // 默认拖拽把手
-  var DragHandle = (0, _react.useMemo)(function () {
-    return function (dragHandleProps) {
-      var rowData = dragHandleProps.rowData,
-        index = dragHandleProps.index,
-        className = dragHandleProps.className,
-        rest = (0, _objectWithoutProperties2.default)(dragHandleProps, _excluded2);
-      var defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HolderOutlined, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
-        className: "".concat(getPrefixCls('pro-table-drag-icon'), " ").concat(className || '', " ").concat(hashId || '').trim()
-      }));
-      var handel = dragSortHandlerRender ? dragSortHandlerRender(dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.rowData, dragHandleProps === null || dragHandleProps === void 0 ? void 0 : dragHandleProps.index) : defaultDom;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rest), {}, {
+  const DragHandle = (0, _react.useMemo)(() => {
+    return dragHandleProps => {
+      const {
+        rowData,
+        index,
+        className,
+        ...rest
+      } = dragHandleProps;
+      const defaultDom = /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.HolderOutlined, {
+        ...rest,
+        className: `${getPrefixCls('pro-table-drag-icon')} ${className || ''} ${hashId || ''}`.trim()
+      });
+      const handel = dragSortHandlerRender ? dragSortHandlerRender(dragHandleProps?.rowData, dragHandleProps?.index) : defaultDom;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ...rest,
         children: handel
-      }));
+      });
     };
   }, [getPrefixCls]);
 
   // 使用自定义hooks获取拖拽相关组件的components集合
-  var _useDragSort = (0, _useDragSort2.useDragSort)({
-      dataSource: dataSource === null || dataSource === void 0 ? void 0 : dataSource.slice(),
-      dragSortKey: dragSortKey,
-      onDragSortEnd: onDragSortEnd,
-      components: props.components,
-      rowKey: rowKey,
-      DragHandle: DragHandle
-    }),
-    components = _useDragSort.components,
-    DndContext = _useDragSort.DndContext;
-  var wrapOnload = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(ds) {
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            setDataSource(ds);
-            return _context.abrupt("return", onLoad === null || onLoad === void 0 ? void 0 : onLoad(ds));
-          case 2:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function wrapOnload(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, otherProps), {}, {
-    columns: (_otherProps$columns = otherProps.columns) === null || _otherProps$columns === void 0 ? void 0 : _otherProps$columns.map(function (item) {
+  const {
+    components,
+    DndContext
+  } = (0, _useDragSort.useDragSort)({
+    dataSource: dataSource?.slice(),
+    dragSortKey,
+    onDragSortEnd,
+    components: props.components,
+    rowKey,
+    DragHandle
+  });
+  const wrapOnload = async ds => {
+    setDataSource(ds);
+    return onLoad?.(ds);
+  };
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.default, {
+    ...otherProps,
+    columns: otherProps.columns?.map(item => {
       if (item.dataIndex == dragSortKey || item.key === dragSortKey) {
         if (!item.render) {
-          item.render = function () {
-            return null;
-          };
+          item.render = () => null;
         }
       }
       return item;
     }),
     onLoad: wrapOnload,
     rowKey: rowKey,
-    tableViewRender: function tableViewRender(_, defaultDom) {
+    tableViewRender: (_, defaultDom) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(DndContext, {
         children: defaultDom
       });
@@ -113,6 +99,6 @@ function DragSortTable(props) {
     dataSource: dataSource,
     components: components,
     onDataSourceChange: onDataSourceChange
-  })));
+  }));
 }
 var _default = exports.default = DragSortTable;

package/lib/table/components/DragSortTable/style.js

@@ -1,34 +1,34 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useStyle = useStyle;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _provider = require("../../../provider");
-var genProListStyle = function genProListStyle(token) {
-  return (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-icon': {
-      marginInlineEnd: 8,
-      color: token.colorTextSecondary,
-      cursor: 'grab !important',
-      padding: 4,
-      fontSize: 12,
-      borderRadius: token.borderRadius,
-      '&:hover': {
-        color: token.colorText,
-        backgroundColor: token.colorInfoBg
+const genProListStyle = token => {
+  return {
+    [token.componentCls]: {
+      '&-icon': {
+        marginInlineEnd: 8,
+        color: token.colorTextSecondary,
+        cursor: 'grab !important',
+        padding: 4,
+        fontSize: 12,
+        borderRadius: token.borderRadius,
+        '&:hover': {
+          color: token.colorText,
+          backgroundColor: token.colorInfoBg
+        }
       }
     }
-  });
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('DragSortTable', function (token) {
-    var proListToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('DragSortTable', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProListStyle(proListToken)];
   });
 }

package/lib/table/components/Dropdown/index.js

@@ -1,80 +1,74 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _icons = require("@ant-design/icons");
 var _antd = require("antd");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = require("clsx");
 var _react = _interopRequireWildcard(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["key", "name"];
 /**
  * 一个简单的下拉菜单
  *
  * @param param0
  */
-var DropdownButton = function DropdownButton(_ref) {
-  var children = _ref.children,
-    menus = _ref.menus,
-    onSelect = _ref.onSelect,
-    className = _ref.className,
-    style = _ref.style;
-  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var tempClassName = getPrefixCls('pro-table-dropdown');
+const DropdownButton = ({
+  children,
+  menus,
+  onSelect,
+  className,
+  style
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const tempClassName = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
     menu: {
-      onClick: function onClick(params) {
-        return onSelect && onSelect(params.key);
-      },
-      items: menus === null || menus === void 0 ? void 0 : menus.map(function (item) {
-        return {
-          label: item.name,
-          key: item.key
-        };
-      })
+      onClick: params => onSelect && onSelect(params.key),
+      items: menus?.map(item => ({
+        label: item.name,
+        key: item.key
+      }))
     },
-    className: (0, _classnames.default)(tempClassName, className),
+    className: (0, _clsx.clsx)(tempClassName, className),
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Button, {
       style: style,
       children: [children, " ", /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.DownOutlined, {})]
     })
   });
 };
-var TableDropdown = function TableDropdown(_ref2) {
-  var propsClassName = _ref2.className,
-    style = _ref2.style,
-    onSelect = _ref2.onSelect,
-    _ref2$menus = _ref2.menus,
-    menus = _ref2$menus === void 0 ? [] : _ref2$menus,
-    children = _ref2.children;
-  var _useContext2 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var className = getPrefixCls('pro-table-dropdown');
+const TableDropdown = ({
+  className: propsClassName,
+  style,
+  onSelect,
+  menus = [],
+  children
+}) => {
+  const {
+    getPrefixCls
+  } = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Dropdown, {
     menu: {
-      onClick: function onClick(params) {
-        onSelect === null || onSelect === void 0 || onSelect(params.key);
+      onClick: params => {
+        onSelect?.(params.key);
       },
-      items: menus.map(function (_ref3) {
-        var key = _ref3.key,
-          name = _ref3.name,
-          rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
-        return (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          key: key
-        }, rest), {}, {
-          title: rest.title,
-          label: name
-        });
-      })
+      items: menus.map(({
+        key,
+        name,
+        ...rest
+      }) => ({
+        key,
+        ...rest,
+        title: rest.title,
+        label: name
+      }))
     },
-    className: (0, _classnames.default)(className, propsClassName),
+    className: (0, _clsx.clsx)(className, propsClassName),
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
       style: style,
       children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.EllipsisOutlined, {})

package/lib/table/components/EditableTable/CellEditorTable.js

@@ -5,62 +5,54 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CellEditorTable = CellEditorTable;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _index = _interopRequireDefault(require("./index"));
 var _jsxRuntime = require("react/jsx-runtime");
 function CellEditorTable(props) {
-  var _props$columns;
-  var _React$useState = _react.default.useState([]),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
-    editableKeys = _React$useState2[0],
-    setEditableRowKeys = _React$useState2[1];
-  var _React$useState3 = _react.default.useState([]),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
-    dataIndex = _React$useState4[0],
-    setDataIndex = _React$useState4[1];
-  var rowKey = props.rowKey || 'id';
+  const [editableKeys, setEditableRowKeys] = _react.default.useState([]);
+  const [dataIndex, setDataIndex] = _react.default.useState([]);
+  const rowKey = props.rowKey || 'id';
 
   // ============================ RowKey ============================
-  var getRowKey = _react.default.useMemo(function () {
+  const getRowKey = _react.default.useMemo(() => {
     if (typeof rowKey === 'function') {
       return rowKey;
     }
-    return function (record, index) {
-      var _ref;
+    return (record, index) => {
       if (index === -1) {
-        return record === null || record === void 0 ? void 0 : record[rowKey];
+        return record?.[rowKey];
       }
       // 如果 props 中有name 的话，用index 来做行号，这样方便转化为 index
       if (props.name) {
-        return index === null || index === void 0 ? void 0 : index.toString();
+        return index?.toString();
       }
-      return (_ref = record === null || record === void 0 ? void 0 : record[rowKey]) !== null && _ref !== void 0 ? _ref : index === null || index === void 0 ? void 0 : index.toString();
+      return record?.[rowKey] ?? index?.toString();
     };
   }, [props.name, rowKey]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.default, {
     bordered: true,
-    pagination: false
-  }, props), {}, {
-    editable: (0, _objectSpread2.default)({
-      editableKeys: editableKeys
-    }, props.editable),
-    columns: (props === null || props === void 0 || (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (item) {
-      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, item), {}, {
+    pagination: false,
+    ...props,
+    editable: {
+      editableKeys,
+      ...props.editable
+    },
+    columns: props?.columns?.map(item => {
+      return {
+        ...item,
         editable: dataIndex.flat(1).join('.') === [item.dataIndex || item.key].flat(1).join('.') ? undefined : false,
-        onCell: function onCell(record, rowIndex) {
+        onCell: (record, rowIndex) => {
           return {
-            onDoubleClick: function onDoubleClick() {
+            onDoubleClick: () => {
               setEditableRowKeys([getRowKey(record, rowIndex)]);
               setDataIndex([item.dataIndex || item.key]);
             },
-            onBlur: function onBlur() {
+            onBlur: () => {
               setEditableRowKeys([]);
             }
           };
         }
-      });
-    })) || []
-  }));
+      };
+    }) || []
+  });
 }