@ant-design/pro-components 3.0.0-beta.1 → 3.0.0-beta.3

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

@@ -1,355 +1,316 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
+"use strict";
 
-// src/table/components/ListToolBar/index.tsx
-var ListToolBar_exports = {};
-__export(ListToolBar_exports, {
-  default: () => ListToolBar_default
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ListToolBar_exports);
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_rc_resize_observer = __toESM(require("rc-resize-observer"));
-var import_react = __toESM(require("react"));
-var import_provider = require("../../../provider");
-var import_utils = require("../../../utils");
-var import_HeaderMenu = __toESM(require("./HeaderMenu"));
-var import_style = require("./style");
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _rcResizeObserver = _interopRequireDefault(require("rc-resize-observer"));
+var _react = _interopRequireWildcard(require("react"));
+var _provider = require("../../../provider");
+var _utils = require("../../../utils");
+var _HeaderMenu = _interopRequireDefault(require("./HeaderMenu"));
+var _style = require("./style");
+var _jsxRuntime = require("react/jsx-runtime");
+/** Antd 默认直接导出了 rc 组件中的 Tab.Pane 组件。 */
+
+/**
+ * 获取配置区域 DOM Item
+ *
+ * @param setting 配置项
+ */
 function getSettingItem(setting) {
-  if (import_react.default.isValidElement(setting)) {
+  if ( /*#__PURE__*/_react.default.isValidElement(setting)) {
     return setting;
   }
   if (setting) {
-    const settingConfig = setting;
-    const { icon, tooltip, onClick, key } = settingConfig;
+    var settingConfig = setting;
+    var icon = settingConfig.icon,
+      tooltip = settingConfig.tooltip,
+      _onClick = settingConfig.onClick,
+      _key = settingConfig.key;
     if (icon && tooltip) {
-      return /* @__PURE__ */ import_react.default.createElement(import_antd.Tooltip, { title: tooltip }, /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          key,
-          onClick: () => {
-            if (onClick) {
-              onClick(key);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+        title: tooltip,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          onClick: function onClick() {
+            if (_onClick) {
+              _onClick(_key);
             }
-          }
-        },
-        icon
-      ));
+          },
+          children: icon
+        }, _key)
+      });
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      "span",
-      {
-        key,
-        onClick: () => {
-          if (onClick) {
-            onClick(key);
-          }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      onClick: function onClick() {
+        if (_onClick) {
+          _onClick(_key);
         }
       },
-      icon
-    );
+      children: icon
+    }, _key);
   }
   return null;
 }
-var ListToolBarTabBar = ({ prefixCls, tabs, multipleLine, filtersNode }) => {
-  if (!multipleLine)
-    return null;
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-extra-line` }, (tabs == null ? void 0 : tabs.items) && (tabs == null ? void 0 : tabs.items.length) ? /* @__PURE__ */ import_react.default.createElement(
-    import_antd.Tabs,
-    {
+var ListToolBarTabBar = function ListToolBarTabBar(_ref) {
+  var prefixCls = _ref.prefixCls,
+    tabs = _ref.tabs,
+    multipleLine = _ref.multipleLine,
+    filtersNode = _ref.filtersNode;
+  if (!multipleLine) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "".concat(prefixCls, "-extra-line"),
+    children: tabs !== null && tabs !== void 0 && tabs.items && tabs !== null && tabs !== void 0 && tabs.items.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
       style: {
-        width: "100%"
+        width: '100%'
       },
       defaultActiveKey: tabs.defaultActiveKey,
       activeKey: tabs.activeKey,
-      items: tabs.items.map((item, index) => {
-        var _a;
-        return __spreadProps(__spreadValues({
+      items: tabs.items.map(function (item, index) {
+        var _item$key;
+        return (0, _objectSpread2.default)((0, _objectSpread2.default)({
           label: item.tab
-        }, item), {
-          key: ((_a = item.key) == null ? void 0 : _a.toString()) || (index == null ? void 0 : index.toString())
+        }, 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())
         });
       }),
       onChange: tabs.onChange,
       tabBarExtraContent: filtersNode
-    }
-  ) : filtersNode);
+    }) : filtersNode
+  });
 };
-var ListToolBar = ({
-  prefixCls: customizePrefixCls,
-  title,
-  subTitle,
-  tooltip,
-  className,
-  style,
-  search,
-  onSearch,
-  multipleLine = false,
-  filter,
-  actions = [],
-  settings = [],
-  tabs,
-  menu
-}) => {
-  const { getPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
-  const { token } = import_provider.proTheme.useToken();
-  const prefixCls = getPrefixCls("pro-table-list-toolbar", customizePrefixCls);
-  const { wrapSSR, hashId } = (0, import_style.useStyle)(prefixCls);
-  const intl = (0, import_provider.useIntl)();
-  const [isMobile, setIsMobile] = (0, import_react.useState)(false);
-  const placeholder = intl.getMessage("tableForm.inputPlaceholder", "请输入");
-  const searchNode = (0, import_react.useMemo)(() => {
+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 = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var _proTheme$useToken = _provider.proTheme.useToken(),
+    token = _proTheme$useToken.token;
+  var prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
+  var _useStyle = (0, _style.useStyle)(prefixCls),
+    wrapSSR = _useStyle.wrapSSR,
+    hashId = _useStyle.hashId;
+  var intl = (0, _provider.useIntl)();
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  var placeholder = intl.getMessage('tableForm.inputPlaceholder', '请输入');
+
+  /**
+   * 获取搜索栏 DOM
+   *
+   * @param search 搜索框相关配置
+   */
+  var searchNode = (0, _react.useMemo)(function () {
     if (!search) {
       return null;
     }
-    if (import_react.default.isValidElement(search)) {
+    if ( /*#__PURE__*/_react.default.isValidElement(search)) {
       return search;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      import_antd.Input.Search,
-      __spreadProps(__spreadValues({
-        style: { width: 200 },
-        placeholder
-      }, search), {
-        onSearch: (...restParams) => __async(void 0, null, function* () {
-          var _a;
-          const success = yield (_a = search.onSearch) == null ? void 0 : _a.call(search, ...restParams);
-          if (success !== false) {
-            onSearch == null ? void 0 : onSearch(restParams == null ? void 0 : restParams[0]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Input.Search, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      style: {
+        width: 200
+      },
+      placeholder: placeholder
+    }, search), {}, {
+      onSearch: /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+        var _onSearch, _ref4;
+        var _len,
+          restParams,
+          _key2,
+          success,
+          _args = arguments;
+        return (0, _regeneratorRuntime2.default)().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, onSearch, search]);
-  const filtersNode = (0, import_react.useMemo)(() => {
-    if (filter)
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-filter ${hashId}`.trim() }, filter);
+
+  /** 轻量筛选组件 */
+  var filtersNode = (0, _react.useMemo)(function () {
+    if (filter) return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "".concat(prefixCls, "-filter ").concat(hashId).trim(),
+      children: filter
+    });
     return null;
   }, [filter, hashId, prefixCls]);
-  const hasTitle = (0, import_react.useMemo)(
-    () => menu || title || subTitle || tooltip,
-    [menu, subTitle, title, tooltip]
-  );
-  const actionDom = (0, import_react.useMemo)(() => {
+
+  /** 有没有 title，需要结合多个场景判断 */
+  var hasTitle = (0, _react.useMemo)(function () {
+    return menu || title || subTitle || tooltip;
+  }, [menu, subTitle, title, tooltip]);
+
+  /** 没有 key 的时候帮忙加一下 key 不加的话很烦人 */
+  var actionDom = (0, _react.useMemo)(function () {
     if (!Array.isArray(actions)) {
       return actions;
     }
     if (actions.length < 1) {
       return null;
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: token.marginXS
-        }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: token.marginXS
       },
-      actions.map((action, index) => {
-        if (!import_react.default.isValidElement(action)) {
-          return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: index }, action);
+      children: actions.map(function (action, index) {
+        if (! /*#__PURE__*/_react.default.isValidElement(action)) {
+          // eslint-disable-next-line react/no-array-index-key
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.Fragment, {
+            children: action
+          }, index);
         }
-        return import_react.default.cloneElement(action, __spreadValues({
+        return /*#__PURE__*/_react.default.cloneElement(action, (0, _objectSpread2.default)({
           // eslint-disable-next-line react/no-array-index-key
           key: index
-        }, action == null ? void 0 : action.props));
+        }, action === null || action === void 0 ? void 0 : action.props));
       })
-    );
+    });
   }, [actions]);
-  const hasRight = (0, import_react.useMemo)(() => {
-    return !!(hasTitle && searchNode || !multipleLine && filtersNode || actionDom || (settings == null ? void 0 : settings.length));
-  }, [
-    actionDom,
-    filtersNode,
-    hasTitle,
-    multipleLine,
-    searchNode,
-    settings == null ? void 0 : settings.length
-  ]);
-  const hasLeft = (0, import_react.useMemo)(
-    () => tooltip || title || subTitle || menu || !hasTitle && searchNode,
-    [hasTitle, menu, searchNode, subTitle, title, tooltip]
-  );
-  const leftTitleDom = (0, import_react.useMemo)(() => {
+  var hasRight = (0, _react.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 = (0, _react.useMemo)(function () {
+    return tooltip || title || subTitle || menu || !hasTitle && searchNode;
+  }, [hasTitle, menu, searchNode, subTitle, title, tooltip]);
+  var leftTitleDom = (0, _react.useMemo)(function () {
+    // 保留dom是为了占位，不然 right 就变到左边了
     if (!hasLeft && hasRight) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-left ${hashId}`.trim() });
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId).trim()
+      });
     }
+
+    // 减少 space 的dom，渲染的时候能节省点性能
     if (!menu && (hasTitle || !searchNode)) {
-      return /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-left ${hashId}`.trim() }, /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title ${hashId}`.trim() }, /* @__PURE__ */ import_react.default.createElement(import_utils.LabelIconTip, { tooltip, label: title, subTitle })));
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId).trim(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
+            tooltip: tooltip,
+            label: title,
+            subTitle: subTitle
+          })
+        })
+      });
     }
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: (0, import_classnames.default)(`${prefixCls}-left`, hashId, {
-          [`${prefixCls}-left-has-tabs`]: (menu == null ? void 0 : menu.type) === "tab",
-          [`${prefixCls}-left-has-dropdown`]: (menu == null ? void 0 : menu.type) === "dropdown",
-          [`${prefixCls}-left-has-inline-menu`]: (menu == null ? void 0 : menu.type) === "inline"
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-left"), hashId, (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".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')),
+      children: [hasTitle && !menu && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-title ").concat(hashId).trim(),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_utils.LabelIconTip, {
+          tooltip: tooltip,
+          label: title,
+          subTitle: subTitle
         })
-      },
-      hasTitle && !menu && /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-title ${hashId}`.trim() }, /* @__PURE__ */ import_react.default.createElement(import_utils.LabelIconTip, { tooltip, label: title, subTitle })),
-      menu && // 这里面实现了 tabs 的逻辑
-      /* @__PURE__ */ import_react.default.createElement(import_HeaderMenu.default, __spreadProps(__spreadValues({}, menu), { prefixCls })),
-      !hasTitle && searchNode ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-search ${hashId}`.trim() }, searchNode) : null
-    );
-  }, [
-    hasLeft,
-    hasRight,
-    hasTitle,
-    hashId,
-    menu,
-    prefixCls,
-    searchNode,
-    subTitle,
-    title,
-    tooltip
-  ]);
-  const rightTitleDom = (0, import_react.useMemo)(() => {
-    if (!hasRight)
-      return null;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `${prefixCls}-right ${hashId}`.trim(),
-        style: isMobile ? {} : { alignItems: "center" }
-      },
-      !multipleLine ? filtersNode : null,
-      hasTitle && searchNode ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-search ${hashId}`.trim() }, searchNode) : null,
-      actionDom,
-      (settings == null ? void 0 : settings.length) ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-setting-items ${hashId}`.trim() }, settings.map((setting, index) => {
-        const settingItem = getSettingItem(setting);
-        return (
-          // eslint-disable-next-line react/no-array-index-key
-          /* @__PURE__ */ import_react.default.createElement(
-            "div",
-            {
-              key: index,
-              className: `${prefixCls}-setting-item ${hashId}`.trim()
-            },
-            settingItem
-          )
-        );
-      })) : null
-    );
-  }, [
-    hasRight,
-    prefixCls,
-    hashId,
-    isMobile,
-    hasTitle,
-    searchNode,
-    multipleLine,
-    filtersNode,
-    actionDom,
-    settings
-  ]);
-  const titleNode = (0, import_react.useMemo)(() => {
-    if (!hasRight && !hasLeft)
-      return null;
-    const containerClassName = (0, import_classnames.default)(`${prefixCls}-container`, hashId, {
-      [`${prefixCls}-container-mobile`]: isMobile
+      }), menu &&
+      /*#__PURE__*/
+      // 这里面实现了 tabs 的逻辑
+      (0, _jsxRuntime.jsx)(_HeaderMenu.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, menu), {}, {
+        prefixCls: prefixCls
+      })), !hasTitle && searchNode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-search ").concat(hashId).trim(),
+        children: searchNode
+      }) : null]
     });
-    return /* @__PURE__ */ import_react.default.createElement("div", { className: containerClassName }, leftTitleDom, rightTitleDom);
-  }, [
-    hasLeft,
-    hasRight,
-    hashId,
-    isMobile,
-    leftTitleDom,
-    prefixCls,
-    rightTitleDom
-  ]);
-  return wrapSSR(
-    /* @__PURE__ */ import_react.default.createElement(
-      import_rc_resize_observer.default,
-      {
-        onResize: (size) => {
-          if (size.width < 375 !== isMobile) {
-            setIsMobile(size.width < 375);
-          }
-        }
+  }, [hasLeft, hasRight, hasTitle, hashId, menu, prefixCls, searchNode, subTitle, title, tooltip]);
+  var rightTitleDom = (0, _react.useMemo)(function () {
+    if (!hasRight) return null;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "".concat(prefixCls, "-right ").concat(hashId).trim(),
+      style: isMobile ? {} : {
+        alignItems: 'center'
       },
-      (ref) => /* @__PURE__ */ import_react.default.createElement(
-        "div",
-        {
-          ref,
-          style,
-          className: (0, import_classnames.default)(prefixCls, hashId, className)
-        },
-        titleNode,
-        /* @__PURE__ */ import_react.default.createElement(
-          ListToolBarTabBar,
-          {
-            filtersNode,
-            prefixCls,
-            tabs,
-            multipleLine
-          }
-        )
-      )
-    )
-  );
+      children: [!multipleLine ? filtersNode : null, hasTitle && searchNode ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-search ").concat(hashId).trim(),
+        children: searchNode
+      }) : null, actionDom, settings !== null && settings !== void 0 && settings.length ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "".concat(prefixCls, "-setting-items ").concat(hashId).trim(),
+        children: settings.map(function (setting, index) {
+          var settingItem = getSettingItem(setting);
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            (0, _jsxRuntime.jsx)("div", {
+              className: "".concat(prefixCls, "-setting-item ").concat(hashId).trim(),
+              children: settingItem
+            }, index)
+          );
+        })
+      }) : null]
+    });
+  }, [hasRight, prefixCls, hashId, isMobile, hasTitle, searchNode, multipleLine, filtersNode, actionDom, settings]);
+  var titleNode = (0, _react.useMemo)(function () {
+    if (!hasRight && !hasLeft) return null;
+    var containerClassName = (0, _classnames.default)("".concat(prefixCls, "-container"), hashId, (0, _defineProperty2.default)({}, "".concat(prefixCls, "-container-mobile"), isMobile));
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: containerClassName,
+      children: [leftTitleDom, rightTitleDom]
+    });
+  }, [hasLeft, hasRight, hashId, isMobile, leftTitleDom, prefixCls, rightTitleDom]);
+  return wrapSSR( /*#__PURE__*/(0, _jsxRuntime.jsx)(_rcResizeObserver.default, {
+    onResize: function onResize(size) {
+      if (size.width < 375 !== isMobile) {
+        setIsMobile(size.width < 375);
+      }
+    },
+    children: function children(ref) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: ref,
+        style: style,
+        className: (0, _classnames.default)(prefixCls, hashId, className),
+        children: [titleNode, /*#__PURE__*/(0, _jsxRuntime.jsx)(ListToolBarTabBar, {
+          filtersNode: filtersNode,
+          prefixCls: prefixCls,
+          tabs: tabs,
+          multipleLine: multipleLine
+        })]
+      });
+    }
+  }));
 };
-var ListToolBar_default = ListToolBar;
+var _default = exports.default = ListToolBar;