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

package/es/table/components/ListToolBar/HeaderMenu.js

@@ -1,83 +1,75 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import { DownOutlined } from '@ant-design/icons';
-import { useMergedState } from '@rc-component/util';
+import { useControlledState } from '@rc-component/util';
 import { Dropdown, Space, Tabs } from 'antd';
-import classNames from 'classnames';
-import React, { useContext } from 'react';
+import { clsx } from 'clsx';
+import React, { useCallback, useContext } from 'react';
 import { ProProvider } from "../../../provider";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var HeaderMenu = function HeaderMenu(props) {
-  var _useContext = useContext(ProProvider),
-    hashId = _useContext.hashId;
-  var _props$items = props.items,
-    items = _props$items === void 0 ? [] : _props$items,
-    _props$type = props.type,
-    type = _props$type === void 0 ? 'inline' : _props$type,
-    prefixCls = props.prefixCls,
-    propActiveKey = props.activeKey,
-    defaultActiveKey = props.defaultActiveKey;
-  var _useMergedState = useMergedState(propActiveKey || defaultActiveKey, {
-      value: propActiveKey,
-      onChange: props.onChange
-    }),
-    _useMergedState2 = _slicedToArray(_useMergedState, 2),
-    activeKey = _useMergedState2[0],
-    setActiveKey = _useMergedState2[1];
+const HeaderMenu = props => {
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const {
+    items = [],
+    type = 'inline',
+    prefixCls,
+    activeKey: propActiveKey,
+    defaultActiveKey
+  } = props;
+  const [activeKey, setActiveKeyInner] = useControlledState(propActiveKey || defaultActiveKey, propActiveKey);
+  const setActiveKey = useCallback(updater => {
+    setActiveKeyInner(prev => {
+      const next = typeof updater === 'function' ? updater(prev) : updater;
+      props.onChange?.(next, prev);
+      return next;
+    });
+  }, [props.onChange]);
   if (items.length < 1) {
     return null;
   }
-  var activeItem = items.find(function (item) {
+  const activeItem = items.find(item => {
     return item.key === activeKey;
   }) || items[0];
   if (type === 'inline') {
     return /*#__PURE__*/_jsx("div", {
-      className: classNames("".concat(prefixCls, "-menu"), "".concat(prefixCls, "-inline-menu"), hashId),
-      children: items.map(function (item, index) {
-        return /*#__PURE__*/_jsx("div", {
-          onClick: function onClick() {
-            setActiveKey(item.key);
-          },
-          className: classNames("".concat(prefixCls, "-inline-menu-item"), activeItem.key === item.key ? "".concat(prefixCls, "-inline-menu-item-active") : undefined, hashId),
-          children: item.label
-        }, item.key || index);
-      })
+      className: clsx(`${prefixCls}-menu`, `${prefixCls}-inline-menu`, hashId),
+      children: items.map((item, index) => /*#__PURE__*/_jsx("div", {
+        onClick: () => {
+          setActiveKey(item.key);
+        },
+        className: clsx(`${prefixCls}-inline-menu-item`, activeItem.key === item.key ? `${prefixCls}-inline-menu-item-active` : undefined, hashId),
+        children: item.label
+      }, item.key || index))
     });
   }
   if (type === 'tab') {
     return /*#__PURE__*/_jsx(Tabs, {
-      items: items.map(function (item) {
-        var _item$key;
-        return _objectSpread(_objectSpread({}, item), {}, {
-          key: (_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()
-        });
-      }),
+      items: items.map(item => ({
+        ...item,
+        key: item.key?.toString()
+      })),
       activeKey: activeItem.key,
-      onTabClick: function onTabClick(key) {
-        return setActiveKey(key);
-      }
+      onTabClick: key => setActiveKey(key)
     });
   }
   return /*#__PURE__*/_jsx("div", {
-    className: classNames("".concat(prefixCls, "-menu"), "".concat(prefixCls, "-dropdownmenu")),
+    className: clsx(`${prefixCls}-menu`, `${prefixCls}-dropdownmenu`),
     children: /*#__PURE__*/_jsx(Dropdown, {
       trigger: ['click'],
       menu: {
         selectedKeys: [activeItem.key],
-        onClick: function onClick(item) {
+        onClick: item => {
           setActiveKey(item.key);
         },
-        items: items.map(function (item, index) {
-          return {
-            key: item.key || index,
-            disabled: item.disabled,
-            label: item.label
-          };
-        })
+        items: items.map((item, index) => ({
+          key: item.key || index,
+          disabled: item.disabled,
+          label: item.label
+        }))
       },
       children: /*#__PURE__*/_jsxs(Space, {
-        className: "".concat(prefixCls, "-dropdownmenu-label"),
+        className: `${prefixCls}-dropdownmenu-label`,
         children: [activeItem.label, /*#__PURE__*/_jsx(DownOutlined, {})]
       })
     })

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

@@ -1,11 +1,6 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
-import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import ResizeObserver from '@rc-component/resize-observer';
 import { ConfigProvider, Input, Tabs, Tooltip } from 'antd';
-import classNames from 'classnames';
-import ResizeObserver from 'rc-resize-observer';
+import { clsx } from 'clsx';
 import React, { useContext, useMemo, useState } from 'react';
 import { proTheme, useIntl } from "../../../provider";
 import { LabelIconTip } from "../../../utils";
@@ -25,158 +20,134 @@ function getSettingItem(setting) {
     return setting;
   }
   if (setting) {
-    var settingConfig = setting;
-    var icon = settingConfig.icon,
-      tooltip = settingConfig.tooltip,
-      _onClick = settingConfig.onClick,
-      _key = settingConfig.key;
+    const settingConfig = setting;
+    const {
+      icon,
+      tooltip,
+      onClick,
+      key
+    } = settingConfig;
     if (icon && tooltip) {
       return /*#__PURE__*/_jsx(Tooltip, {
         title: tooltip,
         children: /*#__PURE__*/_jsx("span", {
-          onClick: function onClick() {
-            if (_onClick) {
-              _onClick(_key);
+          onClick: () => {
+            if (onClick) {
+              onClick(key);
             }
           },
           children: icon
-        }, _key)
+        }, key)
       });
     }
     return /*#__PURE__*/_jsx("span", {
-      onClick: function onClick() {
-        if (_onClick) {
-          _onClick(_key);
+      onClick: () => {
+        if (onClick) {
+          onClick(key);
         }
       },
       children: icon
-    }, _key);
+    }, key);
   }
   return null;
 }
-var ListToolBarTabBar = function ListToolBarTabBar(_ref) {
-  var prefixCls = _ref.prefixCls,
-    tabs = _ref.tabs,
-    multipleLine = _ref.multipleLine,
-    filtersNode = _ref.filtersNode;
+const ListToolBarTabBar = ({
+  prefixCls,
+  tabs,
+  multipleLine,
+  filtersNode
+}) => {
   if (!multipleLine) return null;
   return /*#__PURE__*/_jsx("div", {
-    className: "".concat(prefixCls, "-extra-line"),
-    children: tabs !== null && tabs !== void 0 && tabs.items && tabs !== null && tabs !== void 0 && tabs.items.length ? /*#__PURE__*/_jsx(Tabs, {
+    className: `${prefixCls}-extra-line`,
+    children: tabs?.items && tabs?.items.length ? /*#__PURE__*/_jsx(Tabs, {
       style: {
         width: '100%'
       },
       defaultActiveKey: tabs.defaultActiveKey,
       activeKey: tabs.activeKey,
-      items: tabs.items.map(function (item, index) {
-        var _item$key;
-        return _objectSpread(_objectSpread({
-          label: item.tab
-        }, item), {}, {
-          key: ((_item$key = item.key) === null || _item$key === void 0 ? void 0 : _item$key.toString()) || (index === null || index === void 0 ? void 0 : index.toString())
-        });
-      }),
+      items: tabs.items.map((item, index) => ({
+        label: item.tab,
+        ...item,
+        key: item.key?.toString() || index?.toString()
+      })),
       onChange: tabs.onChange,
       tabBarExtraContent: filtersNode
     }) : filtersNode
   });
 };
-var ListToolBar = function ListToolBar(_ref2) {
-  var customizePrefixCls = _ref2.prefixCls,
-    title = _ref2.title,
-    subTitle = _ref2.subTitle,
-    tooltip = _ref2.tooltip,
-    className = _ref2.className,
-    style = _ref2.style,
-    search = _ref2.search,
-    onSearch = _ref2.onSearch,
-    _ref2$multipleLine = _ref2.multipleLine,
-    multipleLine = _ref2$multipleLine === void 0 ? false : _ref2$multipleLine,
-    filter = _ref2.filter,
-    _ref2$actions = _ref2.actions,
-    actions = _ref2$actions === void 0 ? [] : _ref2$actions,
-    _ref2$settings = _ref2.settings,
-    settings = _ref2$settings === void 0 ? [] : _ref2$settings,
-    tabs = _ref2.tabs,
-    menu = _ref2.menu;
-  var _useContext = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext.getPrefixCls;
-  var _proTheme$useToken = proTheme.useToken(),
-    token = _proTheme$useToken.token;
-  var prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
-  var _useStyle = useStyle(prefixCls),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
-  var intl = useIntl();
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isMobile = _useState2[0],
-    setIsMobile = _useState2[1];
-  var placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
+const ListToolBar = ({
+  prefixCls: customizePrefixCls,
+  title,
+  subTitle,
+  tooltip,
+  className,
+  style,
+  search,
+  onSearch,
+  multipleLine = false,
+  filter,
+  actions = [],
+  settings = [],
+  tabs,
+  menu
+}) => {
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const {
+    token
+  } = proTheme.useToken();
+  const prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(prefixCls);
+  const intl = useIntl();
+  const [isMobile, setIsMobile] = useState(false);
+  const placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
 
   /**
    * 获取搜索栏 DOM
    *
    * @param search 搜索框相关配置
    */
-  var searchNode = useMemo(function () {
+  const searchNode = useMemo(() => {
     if (!search) {
       return null;
     }
     if ( /*#__PURE__*/React.isValidElement(search)) {
       return search;
     }
-    return /*#__PURE__*/_jsx(Input.Search, _objectSpread(_objectSpread({
+    return /*#__PURE__*/_jsx(Input.Search, {
       style: {
         width: 200
       },
-      placeholder: placeholder
-    }, search), {}, {
-      onSearch: /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-        var _onSearch, _ref4;
-        var _len,
-          restParams,
-          _key2,
-          success,
-          _args = arguments;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              for (_len = _args.length, restParams = new Array(_len), _key2 = 0; _key2 < _len; _key2++) {
-                restParams[_key2] = _args[_key2];
-              }
-              _context.next = 3;
-              return (_onSearch = (_ref4 = search).onSearch) === null || _onSearch === void 0 ? void 0 : _onSearch.call.apply(_onSearch, [_ref4].concat(restParams));
-            case 3:
-              success = _context.sent;
-              if (success !== false) {
-                onSearch === null || onSearch === void 0 || onSearch(restParams === null || restParams === void 0 ? void 0 : restParams[0]);
-              }
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee);
-      }))
-    }));
+      placeholder: placeholder,
+      ...search,
+      onSearch: async (...restParams) => {
+        const success = await search.onSearch?.(...restParams);
+        if (success !== false) {
+          onSearch?.(restParams?.[0]);
+        }
+      }
+    });
   }, [placeholder, onSearch, search]);
 
   /** 轻量筛选组件 */
-  var filtersNode = useMemo(function () {
+  const filtersNode = useMemo(() => {
     if (filter) return /*#__PURE__*/_jsx("div", {
-      className: "".concat(prefixCls, "-filter ").concat(hashId).trim(),
+      className: `${prefixCls}-filter ${hashId}`.trim(),
       children: filter
     });
     return null;
   }, [filter, hashId, prefixCls]);
 
   /** 有没有 title，需要结合多个场景判断 */
-  var hasTitle = useMemo(function () {
-    return menu || title || subTitle || tooltip;
-  }, [menu, subTitle, title, tooltip]);
+  const hasTitle = useMemo(() => menu || title || subTitle || tooltip, [menu, subTitle, title, tooltip]);
 
   /** 没有 key 的时候帮忙加一下 key 不加的话很烦人 */
-  var actionDom = useMemo(function () {
+  const actionDom = useMemo(() => {
     if (!Array.isArray(actions)) {
       return actions;
     }
@@ -189,40 +160,39 @@ var ListToolBar = function ListToolBar(_ref2) {
         alignItems: 'center',
         gap: token.marginXS
       },
-      children: actions.map(function (action, index) {
+      children: actions.map((action, index) => {
         if (! /*#__PURE__*/React.isValidElement(action)) {
           // eslint-disable-next-line react/no-array-index-key
           return /*#__PURE__*/_jsx(React.Fragment, {
             children: action
           }, index);
         }
-        return /*#__PURE__*/React.cloneElement(action, _objectSpread({
+        return /*#__PURE__*/React.cloneElement(action, {
           // eslint-disable-next-line react/no-array-index-key
-          key: index
-        }, action === null || action === void 0 ? void 0 : action.props));
+          key: index,
+          ...action?.props
+        });
       })
     });
   }, [actions]);
-  var hasRight = useMemo(function () {
-    return !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || settings !== null && settings !== void 0 && settings.length);
-  }, [actionDom, filtersNode, hasTitle, multipleLine, searchNode, settings === null || settings === void 0 ? void 0 : settings.length]);
-  var hasLeft = useMemo(function () {
-    return tooltip || title || subTitle || menu || !hasTitle && searchNode;
-  }, [hasTitle, menu, searchNode, subTitle, title, tooltip]);
-  var leftTitleDom = useMemo(function () {
+  const hasRight = useMemo(() => {
+    return !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || settings?.length);
+  }, [actionDom, filtersNode, hasTitle, multipleLine, searchNode, settings?.length]);
+  const hasLeft = useMemo(() => tooltip || title || subTitle || menu || !hasTitle && searchNode, [hasTitle, menu, searchNode, subTitle, title, tooltip]);
+  const leftTitleDom = useMemo(() => {
     // 保留dom是为了占位，不然 right 就变到左边了
     if (!hasLeft && hasRight) {
       return /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-left ").concat(hashId).trim()
+        className: `${prefixCls}-left ${hashId}`.trim()
       });
     }
 
     // 减少 space 的dom，渲染的时候能节省点性能
     if (!menu && (hasTitle || !searchNode)) {
       return /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-left ").concat(hashId).trim(),
+        className: `${prefixCls}-left ${hashId}`.trim(),
         children: /*#__PURE__*/_jsx("div", {
-          className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+          className: `${prefixCls}-title ${hashId}`.trim(),
           children: /*#__PURE__*/_jsx(LabelIconTip, {
             tooltip: tooltip,
             label: title,
@@ -232,9 +202,13 @@ var ListToolBar = function ListToolBar(_ref2) {
       });
     }
     return /*#__PURE__*/_jsxs("div", {
-      className: classNames("".concat(prefixCls, "-left"), hashId, _defineProperty(_defineProperty(_defineProperty({}, "".concat(prefixCls, "-left-has-tabs"), (menu === null || menu === void 0 ? void 0 : menu.type) === 'tab'), "".concat(prefixCls, "-left-has-dropdown"), (menu === null || menu === void 0 ? void 0 : menu.type) === 'dropdown'), "".concat(prefixCls, "-left-has-inline-menu"), (menu === null || menu === void 0 ? void 0 : menu.type) === 'inline')),
+      className: clsx(`${prefixCls}-left`, hashId, {
+        [`${prefixCls}-left-has-tabs`]: menu?.type === 'tab',
+        [`${prefixCls}-left-has-dropdown`]: menu?.type === 'dropdown',
+        [`${prefixCls}-left-has-inline-menu`]: menu?.type === 'inline'
+      }),
       children: [hasTitle && !menu && /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+        className: `${prefixCls}-title ${hashId}`.trim(),
         children: /*#__PURE__*/_jsx(LabelIconTip, {
           tooltip: tooltip,
           label: title,
@@ -243,33 +217,34 @@ var ListToolBar = function ListToolBar(_ref2) {
       }), menu &&
       /*#__PURE__*/
       // 这里面实现了 tabs 的逻辑
-      _jsx(HeaderMenu, _objectSpread(_objectSpread({}, menu), {}, {
+      _jsx(HeaderMenu, {
+        ...menu,
         prefixCls: prefixCls
-      })), !hasTitle && searchNode ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-search ").concat(hashId).trim(),
+      }), !hasTitle && searchNode ? /*#__PURE__*/_jsx("div", {
+        className: `${prefixCls}-search ${hashId}`.trim(),
         children: searchNode
       }) : null]
     });
   }, [hasLeft, hasRight, hasTitle, hashId, menu, prefixCls, searchNode, subTitle, title, tooltip]);
-  var rightTitleDom = useMemo(function () {
+  const rightTitleDom = useMemo(() => {
     if (!hasRight) return null;
     return /*#__PURE__*/_jsxs("div", {
-      className: "".concat(prefixCls, "-right ").concat(hashId).trim(),
+      className: `${prefixCls}-right ${hashId}`.trim(),
       style: isMobile ? {} : {
         alignItems: 'center'
       },
       children: [!multipleLine ? filtersNode : null, hasTitle && searchNode ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-search ").concat(hashId).trim(),
+        className: `${prefixCls}-search ${hashId}`.trim(),
         children: searchNode
-      }) : null, actionDom, settings !== null && settings !== void 0 && settings.length ? /*#__PURE__*/_jsx("div", {
-        className: "".concat(prefixCls, "-setting-items ").concat(hashId).trim(),
-        children: settings.map(function (setting, index) {
-          var settingItem = getSettingItem(setting);
+      }) : null, actionDom, settings?.length ? /*#__PURE__*/_jsx("div", {
+        className: `${prefixCls}-setting-items ${hashId}`.trim(),
+        children: settings.map((setting, index) => {
+          const settingItem = getSettingItem(setting);
           return (
             /*#__PURE__*/
             // eslint-disable-next-line react/no-array-index-key
             _jsx("div", {
-              className: "".concat(prefixCls, "-setting-item ").concat(hashId).trim(),
+              className: `${prefixCls}-setting-item ${hashId}`.trim(),
               children: settingItem
             }, index)
           );
@@ -277,33 +252,33 @@ var ListToolBar = function ListToolBar(_ref2) {
       }) : null]
     });
   }, [hasRight, prefixCls, hashId, isMobile, hasTitle, searchNode, multipleLine, filtersNode, actionDom, settings]);
-  var titleNode = useMemo(function () {
+  const titleNode = useMemo(() => {
     if (!hasRight && !hasLeft) return null;
-    var containerClassName = classNames("".concat(prefixCls, "-container"), hashId, _defineProperty({}, "".concat(prefixCls, "-container-mobile"), isMobile));
+    const containerClassName = clsx(`${prefixCls}-container`, hashId, {
+      [`${prefixCls}-container-mobile`]: isMobile
+    });
     return /*#__PURE__*/_jsxs("div", {
       className: containerClassName,
       children: [leftTitleDom, rightTitleDom]
     });
   }, [hasLeft, hasRight, hashId, isMobile, leftTitleDom, prefixCls, rightTitleDom]);
   return wrapSSR( /*#__PURE__*/_jsx(ResizeObserver, {
-    onResize: function onResize(size) {
+    onResize: size => {
       if (size.width < 375 !== isMobile) {
         setIsMobile(size.width < 375);
       }
     },
-    children: function children(ref) {
-      return /*#__PURE__*/_jsxs("div", {
-        ref: ref,
-        style: style,
-        className: classNames(prefixCls, hashId, className),
-        children: [titleNode, /*#__PURE__*/_jsx(ListToolBarTabBar, {
-          filtersNode: filtersNode,
-          prefixCls: prefixCls,
-          tabs: tabs,
-          multipleLine: multipleLine
-        })]
-      });
-    }
+    children: ref => /*#__PURE__*/_jsxs("div", {
+      ref: ref,
+      style: style,
+      className: clsx(prefixCls, hashId, className),
+      children: [titleNode, /*#__PURE__*/_jsx(ListToolBarTabBar, {
+        filtersNode: filtersNode,
+        prefixCls: prefixCls,
+        tabs: tabs,
+        multipleLine: multipleLine
+      })]
+    })
   }));
 };
 export default ListToolBar;