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

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

@@ -1,82 +1,97 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProStyle = function genProStyle(token) {
-  return _defineProperty(_defineProperty(_defineProperty({}, 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': _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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"), _defineProperty(_defineProperty({
-      alignItems: 'center',
-      '&:hover': _defineProperty({}, "".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"), _defineProperty(_defineProperty(_defineProperty({
-    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
+          }
+        }
       }
     }
-  }));
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('ColumnSetting', function (token) {
-    var proToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('ColumnSetting', token => {
+    const proToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProStyle(proToken)];
   });
 }

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

@@ -1,103 +1,89 @@
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["rowKey", "dragSortKey", "dragSortHandlerRender", "onDragSortEnd", "onDataSourceChange", "defaultData", "dataSource", "onLoad"],
-  _excluded2 = ["rowData", "index", "className"];
 import { HolderOutlined } from '@ant-design/icons';
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { ConfigProvider } from 'antd';
-import React, { useContext, useMemo } from 'react';
+import React, { useCallback, useContext, useMemo } from 'react';
 import ProTable from "../../Table";
 import { useDragSort } from "../../utils/useDragSort";
 import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = _objectWithoutProperties(props, _excluded);
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _useMergedState = useMergedState(function () {
-      return defaultData || [];
-    }, {
-      value: originDataSource,
-      onChange: onDataSourceChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    dataSource = _useMergedState2[0],
-    setDataSource = _useMergedState2[1];
-  var _useStyle = 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
+  } = useContext(ConfigProvider.ConfigContext);
+  const [dataSource, setDataSourceInner] = useControlledState(() => defaultData || [], originDataSource);
+  const setDataSource = useCallback(updater => {
+    setDataSourceInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      onDataSourceChange?.(next);
+      return next;
+    });
+  }, [onDataSourceChange]);
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(getPrefixCls('pro-table-drag'));
 
   // 默认拖拽把手
-  var DragHandle = useMemo(function () {
-    return function (dragHandleProps) {
-      var rowData = dragHandleProps.rowData,
-        index = dragHandleProps.index,
-        className = dragHandleProps.className,
-        rest = _objectWithoutProperties(dragHandleProps, _excluded2);
-      var defaultDom = /*#__PURE__*/_jsx(HolderOutlined, _objectSpread(_objectSpread({}, 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__*/_jsx("div", _objectSpread(_objectSpread({}, rest), {}, {
+  const DragHandle = useMemo(() => {
+    return dragHandleProps => {
+      const {
+        rowData,
+        index,
+        className,
+        ...rest
+      } = dragHandleProps;
+      const defaultDom = /*#__PURE__*/_jsx(HolderOutlined, {
+        ...rest,
+        className: `${getPrefixCls('pro-table-drag-icon')} ${className || ''} ${hashId || ''}`.trim()
+      });
+      const handel = dragSortHandlerRender ? dragSortHandlerRender(dragHandleProps?.rowData, dragHandleProps?.index) : defaultDom;
+      return /*#__PURE__*/_jsx("div", {
+        ...rest,
         children: handel
-      }));
+      });
     };
   }, [getPrefixCls]);
 
   // 使用自定义hooks获取拖拽相关组件的components集合
-  var _useDragSort = 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 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(ds) {
-      return _regeneratorRuntime().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__*/_jsx(ProTable, _objectSpread(_objectSpread({}, otherProps), {}, {
-    columns: (_otherProps$columns = otherProps.columns) === null || _otherProps$columns === void 0 ? void 0 : _otherProps$columns.map(function (item) {
+  const {
+    components,
+    DndContext
+  } = useDragSort({
+    dataSource: dataSource?.slice(),
+    dragSortKey,
+    onDragSortEnd,
+    components: props.components,
+    rowKey,
+    DragHandle
+  });
+  const wrapOnload = async ds => {
+    setDataSource(ds);
+    return onLoad?.(ds);
+  };
+  return wrapSSR( /*#__PURE__*/_jsx(ProTable, {
+    ...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__*/_jsx(DndContext, {
         children: defaultDom
       });
@@ -105,6 +91,6 @@ function DragSortTable(props) {
     dataSource: dataSource,
     components: components,
     onDataSourceChange: onDataSourceChange
-  })));
+  }));
 }
 export default DragSortTable;

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

@@ -1,27 +1,28 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { useStyle as useAntdStyle } from "../../../provider";
-var genProListStyle = function genProListStyle(token) {
-  return _defineProperty({}, 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
+        }
       }
     }
-  });
+  };
 };
 export function useStyle(prefixCls) {
-  return useAntdStyle('DragSortTable', function (token) {
-    var proListToken = _objectSpread(_objectSpread({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return useAntdStyle('DragSortTable', token => {
+    const proListToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genProListStyle(proListToken)];
   });
 }

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

@@ -1,9 +1,6 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["key", "name"];
 import { DownOutlined, EllipsisOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Dropdown } from 'antd';
-import classnames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -12,62 +9,60 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @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 = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var tempClassName = getPrefixCls('pro-table-dropdown');
+const DropdownButton = ({
+  children,
+  menus,
+  onSelect,
+  className,
+  style
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const tempClassName = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/_jsx(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: classnames(tempClassName, className),
+    className: clsx(tempClassName, className),
     children: /*#__PURE__*/_jsxs(Button, {
       style: style,
       children: [children, " ", /*#__PURE__*/_jsx(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 = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext2.getPrefixCls;
-  var className = getPrefixCls('pro-table-dropdown');
+const TableDropdown = ({
+  className: propsClassName,
+  style,
+  onSelect,
+  menus = [],
+  children
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-table-dropdown');
   return /*#__PURE__*/_jsx(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 = _objectWithoutProperties(_ref3, _excluded);
-        return _objectSpread(_objectSpread({
-          key: key
-        }, rest), {}, {
-          title: rest.title,
-          label: name
-        });
-      })
+      items: menus.map(({
+        key,
+        name,
+        ...rest
+      }) => ({
+        key,
+        ...rest,
+        title: rest.title,
+        label: name
+      }))
     },
-    className: classnames(className, propsClassName),
+    className: clsx(className, propsClassName),
     children: /*#__PURE__*/_jsx("a", {
       style: style,
       children: children || /*#__PURE__*/_jsx(EllipsisOutlined, {})

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

@@ -1,59 +1,51 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React from 'react';
 import EditableProTable from "./index";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function CellEditorTable(props) {
-  var _props$columns;
-  var _React$useState = React.useState([]),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    editableKeys = _React$useState2[0],
-    setEditableRowKeys = _React$useState2[1];
-  var _React$useState3 = React.useState([]),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    dataIndex = _React$useState4[0],
-    setDataIndex = _React$useState4[1];
-  var rowKey = props.rowKey || 'id';
+  const [editableKeys, setEditableRowKeys] = React.useState([]);
+  const [dataIndex, setDataIndex] = React.useState([]);
+  const rowKey = props.rowKey || 'id';
 
   // ============================ RowKey ============================
-  var getRowKey = React.useMemo(function () {
+  const getRowKey = React.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__*/_jsx(EditableProTable, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(EditableProTable, {
     bordered: true,
-    pagination: false
-  }, props), {}, {
-    editable: _objectSpread({
-      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 _objectSpread(_objectSpread({}, 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([]);
             }
           };
         }
-      });
-    })) || []
-  }));
+      };
+    }) || []
+  });
 }