@nokecy/qc-ui 0.0.1 → 0.0.3

package/dist/cjs/ag-grid-plus/ag-gridPlus.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import "ag-grid-enterprise";
 import './global.scss';
 import { GridProps } from './interface';
 declare function AgGridPlus(props: GridProps): JSX.Element;

package/dist/cjs/ag-grid-plus/ag-gridPlus.js

@@ -15,13 +15,23 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _gridManager = _interopRequireDefault(require("./gridManager"));
 
+require("ag-grid-enterprise");
+
 require("./global.scss");
 
-var _ahooks = require("ahooks");
+var _interface = require("./interface");
 
 var _queryForm = _interopRequireDefault(require("./queryForm"));
 
-var _excluded = ["style", "params", "request", "dataSource", "headerTitle", "toolBarRender", "search", "onGridReady"];
+var _toolBar = _interopRequireDefault(require("./toolBar"));
+
+var _settingItem = _interopRequireDefault(require("./settingItem"));
+
+var _icons = require("@ant-design/icons");
+
+var _utils = require("./utils");
+
+var _excluded = ["style", "params", "request", "dataSource", "headerTitle", "toolBarRender", "search", "onGridReady", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -53,6 +63,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var getSort = function getSort(columnState) {
+  return columnState ? "".concat(columnState.colId, " ").concat(columnState.sort) : "";
+};
+
 function AgGridPlus(props) {
   var style = props.style,
       gridParams = props.params,
@@ -62,6 +76,7 @@ function AgGridPlus(props) {
       toolBarRender = props.toolBarRender,
       search = props.search,
       onReady = props.onGridReady,
+      children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
   var apiRef = (0, _react.useRef)();
@@ -73,35 +88,51 @@ function AgGridPlus(props) {
       ready = _useState2[0],
       setReady = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      columnDefs = _useState4[0],
-      setColumnDefs = _useState4[1];
+      loading = _useState4[0],
+      setLoading = _useState4[1];
 
-  var _useState5 = (0, _react.useState)([]),
+  var _useState5 = (0, _react.useState)(),
       _useState6 = _slicedToArray(_useState5, 2),
-      rowData = _useState6[0],
-      setRowData = _useState6[1];
+      columnDefs = _useState6[0],
+      setColumnDefs = _useState6[1];
 
   var _useState7 = (0, _react.useState)([]),
       _useState8 = _slicedToArray(_useState7, 2),
-      queryFilter = _useState8[0],
-      setQueryFilter = _useState8[1];
+      rowData = _useState8[0],
+      setRowData = _useState8[1];
 
-  var _useState9 = (0, _react.useState)({
+  var _useState9 = (0, _react.useState)({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      queryFilter = _useState10[0],
+      setQueryFilter = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      sortColumn = _useState12[0],
+      setSortColumn = _useState12[1];
+
+  var _useState13 = (0, _react.useState)({
     pageSize: 200,
     current: 1,
     total: dataSource ? dataSource.length : 0
   }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      pagination = _useState10[0],
-      setPagination = _useState10[1];
-
-  (0, _ahooks.useUpdateLayoutEffect)(function () {
-    if (gridParams && request) {
-      onRequest();
+      _useState14 = _slicedToArray(_useState13, 2),
+      pagination = _useState14[0],
+      setPagination = _useState14[1]; //默认列属性
+
+
+  var defaultColDef = {
+    resizable: true,
+    sortable: true,
+    flex: 1
+  };
+  (0, _react.useEffect)(function () {
+    if (ready && request) {
+      onRequest(queryFilter);
     }
-  }, [JSON.stringify(gridParams), queryFilter, pagination.pageSize, pagination.current]);
+  }, [ready, JSON.stringify(gridParams), JSON.stringify(sortColumn), pagination.pageSize, pagination.current]);
   var onGridReady = (0, _react.useCallback)(function (params) {
     apiRef.current = params.api;
     columnsRef.current = params.columnApi;
@@ -112,54 +143,127 @@ function AgGridPlus(props) {
 
     dataSource && setRowData(dataSource);
     setColumnDefs(columnsRef.current.getColumns());
+    sortChanged(params.columnApi);
     setReady(true);
   }, [dataSource]);
-  var onRequest = (0, _react.useCallback)(function () {
-    var filterModel = queryFilter; // apiRef.current.sort
+
+  var onRequest = function onRequest(queryFilter) {
+    setLoading(true);
+    var filter = (0, _utils.convertFilterModel)(queryFilter);
 
     var params = _objectSpread(_objectSpread({
-      filter: filterModel
+      filter: filter
     }, gridParams), {}, {
+      current: pagination.current,
       skipCount: pagination.current == 1 ? 0 : pagination.current * pagination.pageSize,
       maxResultCount: pagination.pageSize,
-      sorter: "sorter"
+      sorter: getSort(sortColumn)
     });
 
-    request && request(params, undefined, filterModel).then(function (response) {
+    request && request(params, undefined, queryFilter).then(function (response) {
       var rowData = response.data;
       var rowCount = response.total;
       setRowData(rowData);
       setPagination(_objectSpread(_objectSpread({}, pagination), {}, {
         total: rowCount
       }));
+      setLoading(false);
     });
+  };
+
+  var actionDom = (0, _react.useMemo)(function () {
+    return toolBarRender && toolBarRender();
   }, []);
+
+  var sortChanged = function sortChanged(columnApi) {
+    var sortedColumn = columnApi.getColumnState().find(function (col) {
+      return Boolean(col.sort);
+    });
+    setSortColumn(sortedColumn);
+  };
+
+  var onRest = function onRest() {
+    request && onRequest(queryFilter);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
-    spinning: !ready
+    spinning: loading
   }, search == false ? null : /*#__PURE__*/_react.default.createElement(_queryForm.default, {
     columns: columnDefs,
     gridApi: apiRef.current,
     onQuery: function onQuery(formValues) {
-      setQueryFilter(formValues);
+      setQueryFilter(_objectSpread({}, formValues));
+      onRequest && onRequest(formValues);
+    }
+  }), /*#__PURE__*/_react.default.createElement(_antd.Card, {
+    bordered: false,
+    headStyle: {
+      border: 0
+    },
+    bodyStyle: {
+      margin: 0,
+      padding: 12,
+      paddingTop: 0
     }
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     style: _objectSpread({
       display: "flex",
       flexDirection: "column",
       height: "100%"
     }, style)
-  }, /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_toolBar.default, {
+    title: headerTitle,
+    actions: actionDom,
+    settings: [/*#__PURE__*/_react.default.createElement(_settingItem.default, {
+      onClick: onRest,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.RedoOutlined, null)
+    }), /*#__PURE__*/_react.default.createElement(_settingItem.default, {
+      onClick: onRest,
+      icon: /*#__PURE__*/_react.default.createElement(_icons.SettingOutlined, null)
+    })]
+  }), /*#__PURE__*/_react.default.createElement(_agGridReact.AgGridReact, _extends({
     className: "ag-theme-alpine"
   }, rest, {
     //指定客户端模式
     rowModelType: "clientSide",
-    rowData: rowData,
-    onGridReady: onGridReady //停用默认分页组件
+    rowData: props.treeData ? (0, _utils.flatten)((0, _utils.toTree)(rowData)) : rowData,
+    onGridReady: onGridReady,
+    defaultColDef: defaultColDef,
+    onSortChanged: function onSortChanged(event) {
+      sortChanged(event.columnApi);
+    },
+    columnTypes: {
+      numberColumn: {
+        width: 130,
+        filter: 'agNumberColumnFilter'
+      },
+      dateColumn: {
+        filter: 'agDateColumnFilter',
+        valueFormatter: _utils.dateValueFormatter
+      },
+      dateTimeColumn: {
+        filter: 'agDateColumnFilter',
+        valueFormatter: _utils.dateTimeValueFormatter
+      }
+    },
+    animateRows: true //停用默认分页组件
     ,
     suppressPaginationPanel: true
+  }), props.rowSelection ? /*#__PURE__*/_react.default.createElement(_interface.AgGridColumn, {
+    field: "",
+    width: 30,
+    flex: 0,
+    headerCheckboxSelection: true,
+    checkboxSelection: true,
+    showDisabledCheckboxes: true,
+    filter: false
+  }) : null, _react.default.Children.map(children, function (child, index) {
+    return child;
   }))), /*#__PURE__*/_react.default.createElement("div", {
     style: {
-      marginTop: 5
+      marginTop: 12,
+      display: "flex",
+      justifyContent: "flex-end"
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Pagination, {
     pageSize: pagination.pageSize,
@@ -177,14 +281,12 @@ function AgGridPlus(props) {
         current: current
       }));
     },
-    size: "small",
-    showTotal: function showTotal(total, range) {
-      return "".concat(range[0], "-").concat(range[1], " of ").concat(total, " items");
-    },
+    size: "small" // showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}
+    ,
     pageSizeOptions: [10, 100, 200, 500, 1000],
-    hideOnSinglePage: true,
-    showQuickJumper: true
-  })));
+    hideOnSinglePage: false,
+    showQuickJumper: false
+  }))));
 }
 
 var _default = AgGridPlus;

package/dist/cjs/ag-grid-plus/global.scss

@@ -1,65 +1,23 @@
-/* Add application styles & imports to this file! */
-
-@import "~ag-grid-community/src/styles/ag-grid.scss";
-@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
-
-
-.ag-theme-alpine {
-    @include ag-theme-alpine(( // use theme parameters where possible
-            // Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
-            grid-size: 4px,
-            odd-row-background-color:#fff,
-            secondary-border-color:#f0f0f0,
-            cell-horizontal-padding: ag-derived(grid-size, $times: 2),
-            border-color:#f0f0f5,
-            cell-horizontal-border: 1px solid ag-derived(secondary-border-color),
-            font-size: 12px,
-            font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
-        ));
-
-    .ag-header-cell {
-        // or write CSS selectors to make customisations beyond what the parameters support
-        border-right: 1px solid ag-param(secondary-border-color);
-    }
-
-    .ag-header-group-cell-with-group {
-        // or write CSS selectors to make customisations beyond what the parameters support
-        border-right: 1px solid ag-param(secondary-border-color);
-    }
-
-    .ag-header-center .ag-header-group-cell-label,
-    .ag-header-center .ag-header-cell-label {
-        text-align: center;
-        display: grid;
-    }
-}
-
-.ag-drak-theme-alpine {
-    @include ag-theme-alpine(( // use theme parameters where possible
-            // Default border for cells. This can be used to specify the border-style and border-color properties e.g. `dashed red` but the border-width is fixed at 1px.
-            grid-size: 4px,
-            odd-row-background-color:#fff,
-            secondary-border-color:#000,
-            cell-horizontal-padding: ag-derived(grid-size, $times: 2),
-            border-color:#000,
-            cell-horizontal-border: 1px solid ag-derived(secondary-border-color),
-            font-size: 11px,
-            font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
-        ));
-
-    .ag-header-cell {
-        // or write CSS selectors to make customisations beyond what the parameters support
-        border-right: 1px solid ag-param(secondary-border-color);
-    }
-
-    .ag-header-group-cell-with-group {
-        // or write CSS selectors to make customisations beyond what the parameters support
-        border-right: 1px solid ag-param(secondary-border-color);
-    }
-
-    .ag-header-center .ag-header-group-cell-label,
-    .ag-header-center .ag-header-cell-label {
-        text-align: center;
-        display: grid;
-    }
+// New API
+@use "~ag-grid-community/styles" as ag;
+@include ag.grid-styles(( // theme: alpine,
+        // alpine-active-color: red,
+        odd-row-background-color:#fafafa,
+        secondary-border-color:#f0f0f0,
+        border-color:#f0f0f5,
+        foreground-color: rgba(0, 0, 0, 0.88),
+
+        --ag-font-size: 11px,
+        --ag-font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
+
+        --ag-borders: solid 0px,
+        --ag-borders-row: dashed 1px,
+        --ag-row-border-color: rgb(150, 150, 200),
+        --ag-grid-size: 4px,
+
+        --ag-header-background-color: #fafafa,
+    ));
+
+.ag-theme-alpine .ag-header-group-cell {
+    font-weight: 600;
 }

package/dist/cjs/ag-grid-plus/queryForm/index.js

@@ -77,9 +77,7 @@ var FormRender = function FormRender(props) {
   }, []);
 
   var onSubmit = function onSubmit() {
-    form.submit(function (formValues) {
-      onQuery(formValues);
-    });
+    onQuery && onQuery(form.values);
   };
 
   var onReset = /*#__PURE__*/function () {

package/dist/cjs/ag-grid-plus/queryForm/queryForm.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var useCollapseGrid = function useCollapseGrid(maxRows) {
   var grid = (0, _react.useMemo)(function () {
     return _antd.FormGrid.createFormGrid({
-      maxColumns: 5,
+      maxColumns: 4,
       maxWidth: 240,
       maxRows: maxRows,
       shouldVisible: function shouldVisible(node, grid) {
@@ -97,7 +97,9 @@ var QueryForm = (0, _react2.observer)(function (props) {
   };
 
   return /*#__PURE__*/_react.default.createElement(_antd.FormGrid, {
-    grid: grid
+    grid: grid,
+    colWrap: true,
+    strictAutoFit: true
   }, props.children, /*#__PURE__*/_react.default.createElement(_antd.FormGrid.GridColumn, {
     gridSpan: -1,
     style: {

package/dist/cjs/ag-grid-plus/settingItem/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const SettingItem: (props: any) => JSX.Element;
+export default SettingItem;

package/dist/cjs/ag-grid-plus/settingItem/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var SettingItem = function SettingItem(props) {
+  var onClick = props.onClick,
+      icon = props.icon;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      margin: "0 4px",
+      color: "#000",
+      fontSize: 16,
+      cursor: "pointer"
+    },
+    onClick: onClick
+  }, icon);
+};
+
+var _default = SettingItem;
+exports.default = _default;

package/dist/cjs/ag-grid-plus/toolBar/index.d.ts

@@ -0,0 +1,20 @@
+import type { LabelTooltipType } from 'antd/es/form/FormItemLabel';
+import React from 'react';
+declare type SettingPropType = React.ReactNode;
+export declare type ListToolBarProps = {
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    /** 标题 */
+    title?: React.ReactNode;
+    /** 副标题 */
+    subTitle?: React.ReactNode;
+    /** 标题提示 */
+    tooltip?: string | LabelTooltipType;
+    /** 工具栏右侧操作区 */
+    actions?: React.ReactNode[];
+    /** 工作栏右侧设置区 */
+    settings?: SettingPropType[];
+};
+declare const ListToolBar: React.FC<ListToolBarProps>;
+export default ListToolBar;

package/dist/cjs/ag-grid-plus/toolBar/index.js

@@ -0,0 +1,196 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _proUtils = require("@ant-design/pro-utils");
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _style = require("./style");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: 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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/**
+ * 获取配置区域 DOM Item
+ *
+ * @param setting 配置项
+ */
+function getSettingItem(setting) {
+  if ( /*#__PURE__*/_react.default.isValidElement(setting)) {
+    return setting;
+  }
+
+  if (setting) {
+    var settingConfig = setting;
+    var icon = settingConfig.icon,
+        tooltip = settingConfig.tooltip,
+        _onClick = settingConfig.onClick,
+        key = settingConfig.key;
+
+    if (icon && tooltip) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+        title: tooltip
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        key: key,
+        onClick: function onClick() {
+          if (_onClick) {
+            _onClick(key);
+          }
+        }
+      }, icon));
+    }
+
+    return icon;
+  }
+
+  return null;
+}
+
+var ListToolBar = function ListToolBar(_ref) {
+  var customizePrefixCls = _ref.prefixCls,
+      title = _ref.title,
+      subTitle = _ref.subTitle,
+      tooltip = _ref.tooltip,
+      className = _ref.className,
+      style = _ref.style,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$settings = _ref.settings,
+      settings = _ref$settings === void 0 ? [] : _ref$settings;
+
+  var _useContext = (0, _react.useContext)(_antd.ConfigProvider.ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
+
+  var _useStyle = (0, _style.useStyle)(prefixCls),
+      hashId = _useStyle.hashId;
+  /** 有没有 title，需要结合多个场景判断 */
+
+
+  var hasTitle = (0, _react.useMemo)(function () {
+    return title || subTitle || tooltip;
+  }, [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__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      }
+    }, actions.map(function (action, index) {
+      if (! /*#__PURE__*/_react.default.isValidElement(action)) {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+          key: index
+        }, action);
+      }
+
+      return /*#__PURE__*/_react.default.cloneElement(action, _objectSpread({
+        // eslint-disable-next-line react/no-array-index-key
+        key: index
+      }, action === null || action === void 0 ? void 0 : action.props));
+    }));
+  }, [actions]);
+  var hasRight = (0, _react.useMemo)(function () {
+    return hasTitle || actionDom || (settings === null || settings === void 0 ? void 0 : settings.length);
+  }, [actionDom, hasTitle, settings === null || settings === void 0 ? void 0 : settings.length]);
+  var hasLeft = (0, _react.useMemo)(function () {
+    return tooltip || title || subTitle;
+  }, [hasTitle, subTitle, title, tooltip]);
+  var leftTitleDom = (0, _react.useMemo)(function () {
+    // 保留dom是为了占位，不然 right 就变到左边了
+    if (!hasLeft && hasRight) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId)
+      });
+    } // 减少 space 的dom，渲染的时候能节省点性能
+
+
+    if (hasTitle) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId)
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "".concat(prefixCls, "-title ").concat(hashId)
+      }, /*#__PURE__*/_react.default.createElement(_proUtils.LabelIconTip, {
+        tooltip: tooltip,
+        label: title,
+        subTitle: subTitle
+      })));
+    }
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-left ").concat(hashId)
+    }, hasTitle && /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-title ").concat(hashId)
+    }, /*#__PURE__*/_react.default.createElement(_proUtils.LabelIconTip, {
+      tooltip: tooltip,
+      label: title,
+      subTitle: subTitle
+    })));
+  }, [hasLeft, hasRight, hasTitle, hashId, prefixCls, subTitle, title, tooltip]);
+  var rightTitleDom = (0, _react.useMemo)(function () {
+    if (!hasRight) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-right ").concat(hashId),
+      style: {
+        alignItems: 'center'
+      }
+    }, actionDom, settings !== null && settings !== void 0 && settings.length ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-setting-items ").concat(hashId)
+    }, settings.map(function (setting, index) {
+      var settingItem = getSettingItem(setting);
+      return (
+        /*#__PURE__*/
+        // eslint-disable-next-line react/no-array-index-key
+        _react.default.createElement("div", {
+          key: index,
+          className: "".concat(prefixCls, "-setting-item ").concat(hashId)
+        }, settingItem)
+      );
+    })) : null);
+  }, [hasRight, prefixCls, hashId, hasTitle, actionDom, settings]);
+  var titleNode = (0, _react.useMemo)(function () {
+    if (!hasRight && !hasLeft) return null;
+    var containerClassName = (0, _classnames.default)("".concat(prefixCls, "-container"), hashId, {});
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: containerClassName
+    }, leftTitleDom, rightTitleDom);
+  }, [hasLeft, hasRight, hashId, leftTitleDom, prefixCls, rightTitleDom]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: style,
+    className: (0, _classnames.default)(prefixCls, hashId, className)
+  }, titleNode);
+};
+
+var _default = ListToolBar;
+exports.default = _default;

package/dist/cjs/ag-grid-plus/toolBar/style.d.ts

@@ -0,0 +1,5 @@
+import type { ProAliasToken } from '@ant-design/pro-utils';
+export interface ProListToken extends ProAliasToken {
+    componentCls: string;
+}
+export declare function useStyle(prefixCls: string): import("@ant-design/pro-provider").UseStyleResult;