@nokecy/qc-ui 0.0.2 → 0.0.4

package/dist/cjs/xflow/util/main.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _algorithm = require("./algorithm");
+
+Object.keys(_algorithm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _algorithm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _algorithm[key];
+    }
+  });
+});
+
+var _model = require("./model");
+
+Object.keys(_model).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _model[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _model[key];
+    }
+  });
+});

package/dist/cjs/xflow/util/model.d.ts

@@ -0,0 +1,2 @@
+import type { GraphData, NodeMeta, EdgeMeta } from '../types';
+export declare const preprocess: (model: GraphData, nodeOptions?: NodeMeta, edgeOptions?: EdgeMeta) => GraphData;

package/dist/cjs/xflow/util/model.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.preprocess = void 0;
+
+var _x = require("@antv/x6");
+
+var preprocess = function preprocess(model) {
+  var nodeOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var edgeOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  model.forEach(function (item) {
+    var shape = item.shape;
+
+    if (shape) {
+      if (_x.Node.registry.exist(shape)) {
+        _x.ObjectExt.merge(item, nodeOptions);
+      }
+
+      if (_x.Edge.registry.exist(shape)) {
+        _x.ObjectExt.merge(item, edgeOptions);
+      }
+    }
+  });
+  return model;
+};
+
+exports.preprocess = preprocess;

package/dist/esm/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/esm/ag-grid-plus/ag-gridPlus.js

@@ -1,4 +1,4 @@
-var _excluded = ["style", "params", "request", "dataSource", "headerTitle", "toolBarRender", "search", "onGridReady"];
+var _excluded = ["style", "params", "request", "dataSource", "headerTitle", "toolBarRender", "search", "onGridReady", "children"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -25,12 +25,21 @@ 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; }
 
 import { AgGridReact } from 'ag-grid-react';
-import { Spin, Pagination } from 'antd';
-import React, { useCallback, useRef, useState } from 'react';
+import { Spin, Pagination, Card } from 'antd';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import GridManage from "./gridManager";
+import "ag-grid-enterprise";
 import "./global.scss";
-import { useUpdateLayoutEffect } from 'ahooks';
+import { AgGridColumn } from "./interface";
 import FormRender from "./queryForm";
+import ToolBar from "./toolBar";
+import SettingItem from "./settingItem";
+import { RedoOutlined, SettingOutlined } from '@ant-design/icons';
+import { convertFilterModel, dateTimeValueFormatter, dateValueFormatter, flatten, toTree } from "./utils";
+
+var getSort = function getSort(columnState) {
+  return columnState ? "".concat(columnState.colId, " ").concat(columnState.sort) : "";
+};
 
 function AgGridPlus(props) {
   var style = props.style,
@@ -41,6 +50,7 @@ function AgGridPlus(props) {
       toolBarRender = props.toolBarRender,
       search = props.search,
       onReady = props.onGridReady,
+      children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
   var apiRef = useRef();
@@ -52,35 +62,51 @@ function AgGridPlus(props) {
       ready = _useState2[0],
       setReady = _useState2[1];
 
-  var _useState3 = useState(),
+  var _useState3 = useState(false),
       _useState4 = _slicedToArray(_useState3, 2),
-      columnDefs = _useState4[0],
-      setColumnDefs = _useState4[1];
+      loading = _useState4[0],
+      setLoading = _useState4[1];
 
-  var _useState5 = useState([]),
+  var _useState5 = useState(),
       _useState6 = _slicedToArray(_useState5, 2),
-      rowData = _useState6[0],
-      setRowData = _useState6[1];
+      columnDefs = _useState6[0],
+      setColumnDefs = _useState6[1];
 
   var _useState7 = useState([]),
       _useState8 = _slicedToArray(_useState7, 2),
-      queryFilter = _useState8[0],
-      setQueryFilter = _useState8[1];
+      rowData = _useState8[0],
+      setRowData = _useState8[1];
+
+  var _useState9 = useState({}),
+      _useState10 = _slicedToArray(_useState9, 2),
+      queryFilter = _useState10[0],
+      setQueryFilter = _useState10[1];
 
-  var _useState9 = useState({
+  var _useState11 = useState(),
+      _useState12 = _slicedToArray(_useState11, 2),
+      sortColumn = _useState12[0],
+      setSortColumn = _useState12[1];
+
+  var _useState13 = useState({
     pageSize: 200,
     current: 1,
     total: dataSource ? dataSource.length : 0
   }),
-      _useState10 = _slicedToArray(_useState9, 2),
-      pagination = _useState10[0],
-      setPagination = _useState10[1];
+      _useState14 = _slicedToArray(_useState13, 2),
+      pagination = _useState14[0],
+      setPagination = _useState14[1]; //默认列属性
 
-  useUpdateLayoutEffect(function () {
-    if (gridParams && request) {
-      onRequest();
+
+  var defaultColDef = {
+    resizable: true,
+    sortable: true,
+    flex: 1
+  };
+  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 = useCallback(function (params) {
     apiRef.current = params.api;
     columnsRef.current = params.columnApi;
@@ -91,54 +117,127 @@ function AgGridPlus(props) {
 
     dataSource && setRowData(dataSource);
     setColumnDefs(columnsRef.current.getColumns());
+    sortChanged(params.columnApi);
     setReady(true);
   }, [dataSource]);
-  var onRequest = useCallback(function () {
-    var filterModel = queryFilter; // apiRef.current.sort
+
+  var onRequest = function onRequest(queryFilter) {
+    setLoading(true);
+    var filter = 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 = useMemo(function () {
+    return toolBarRender && toolBarRender(apiRef.current, convertFilterModel(queryFilter), queryFilter);
+  }, [apiRef, columnsRef, queryFilter]);
+
+  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.createElement(Spin, {
-    spinning: !ready
+    spinning: loading
   }, search == false ? null : /*#__PURE__*/React.createElement(FormRender, {
     columns: columnDefs,
     gridApi: apiRef.current,
     onQuery: function onQuery(formValues) {
-      setQueryFilter(formValues);
+      setQueryFilter(_objectSpread({}, formValues));
+      onRequest && onRequest(formValues);
     }
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React.createElement(Card, {
+    bordered: false,
+    headStyle: {
+      border: 0
+    },
+    bodyStyle: {
+      margin: 0,
+      padding: 12,
+      paddingTop: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
     style: _objectSpread({
       display: "flex",
       flexDirection: "column",
       height: "100%"
     }, style)
-  }, /*#__PURE__*/React.createElement(AgGridReact, _extends({
+  }, /*#__PURE__*/React.createElement(ToolBar, {
+    title: headerTitle,
+    actions: actionDom,
+    settings: [/*#__PURE__*/React.createElement(SettingItem, {
+      onClick: onRest,
+      icon: /*#__PURE__*/React.createElement(RedoOutlined, null)
+    }), /*#__PURE__*/React.createElement(SettingItem, {
+      onClick: onRest,
+      icon: /*#__PURE__*/React.createElement(SettingOutlined, null)
+    })]
+  }), /*#__PURE__*/React.createElement(AgGridReact, _extends({
     className: "ag-theme-alpine"
   }, rest, {
     //指定客户端模式
     rowModelType: "clientSide",
-    rowData: rowData,
-    onGridReady: onGridReady //停用默认分页组件
+    rowData: props.treeData ? flatten(toTree(rowData)) : rowData,
+    onGridReady: onGridReady,
+    defaultColDef: defaultColDef,
+    onSortChanged: function onSortChanged(event) {
+      sortChanged(event.columnApi);
+    },
+    columnTypes: {
+      numberColumn: {
+        width: 130,
+        filter: 'agNumberColumnFilter'
+      },
+      dateColumn: {
+        filter: 'agDateColumnFilter',
+        valueFormatter: dateValueFormatter
+      },
+      dateTimeColumn: {
+        filter: 'agDateColumnFilter',
+        valueFormatter: dateTimeValueFormatter
+      }
+    },
+    animateRows: true //停用默认分页组件
     ,
     suppressPaginationPanel: true
+  }), props.rowSelection ? /*#__PURE__*/React.createElement(AgGridColumn, {
+    field: "",
+    width: 30,
+    flex: 0,
+    headerCheckboxSelection: true,
+    checkboxSelection: true,
+    showDisabledCheckboxes: true,
+    filter: false
+  }) : null, React.Children.map(children, function (child, index) {
+    return child;
   }))), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginTop: 5
+      marginTop: 12,
+      display: "flex",
+      justifyContent: "flex-end"
     }
   }, /*#__PURE__*/React.createElement(Pagination, {
     pageSize: pagination.pageSize,
@@ -156,14 +255,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
+  }))));
 }
 
 export default AgGridPlus;

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

@@ -1,39 +1,23 @@
-/* Add application styles & imports to this file! */
+// 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),
 
-@import "~ag-grid-community/src/styles/ag-grid.scss";
-@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+        --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-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),
-            foreground-color: rgba(0, 0, 0, 0.88),
-            font-family: ('microsoft yahei', 'Helvetica', 'Arial'),
-            font-size: 12px));
+        --ag-header-background-color: #fafafa,
+    ));
 
-    .ag-row {
-        font-size: 12px;
-    }
-
-    .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-theme-alpine .ag-header-group-cell {
+    font-weight: 600;
 }

package/dist/esm/ag-grid-plus/index.d.ts

@@ -1,3 +1,4 @@
 import AgGridPlus from "./ag-gridPlus";
 import { AgGridColumn } from "./interface";
+export * from "./utils";
 export { AgGridPlus, AgGridColumn };

package/dist/esm/ag-grid-plus/index.js

@@ -1,3 +1,4 @@
 import AgGridPlus from "./ag-gridPlus";
 import { AgGridColumn } from "./interface";
+export * from "./utils";
 export { AgGridPlus, AgGridColumn };

package/dist/esm/ag-grid-plus/interface.d.ts

@@ -10,7 +10,7 @@ interface GridProps extends AgGridReactProps {
     dataSource?: any[];
     search?: boolean;
     headerTitle?: React.ReactNode;
-    toolBarRender?: (gridApi?: GridApi) => React.ReactNode[];
+    toolBarRender?: (gridApi?: GridApi, filter?: string, queryFilter?: any) => React.ReactNode[];
     columnDefs?: any;
 }
 interface AgGridColumnPropsClone extends AgGridColumnProps {

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

@@ -57,9 +57,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/esm/ag-grid-plus/queryForm/queryForm.js

@@ -7,7 +7,7 @@ import { observer } from '@formily/react';
 var useCollapseGrid = function useCollapseGrid(maxRows) {
   var grid = useMemo(function () {
     return FormGrid.createFormGrid({
-      maxColumns: 5,
+      maxColumns: 4,
       maxWidth: 240,
       maxRows: maxRows,
       shouldVisible: function shouldVisible(node, grid) {
@@ -80,7 +80,9 @@ var QueryForm = observer(function (props) {
   };
 
   return /*#__PURE__*/React.createElement(FormGrid, {
-    grid: grid
+    grid: grid,
+    colWrap: true,
+    strictAutoFit: true
   }, props.children, /*#__PURE__*/React.createElement(FormGrid.GridColumn, {
     gridSpan: -1,
     style: {

package/dist/esm/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/esm/ag-grid-plus/settingItem/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+var SettingItem = function SettingItem(props) {
+  var onClick = props.onClick,
+      icon = props.icon;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: "0 4px",
+      color: "#000",
+      fontSize: 16,
+      cursor: "pointer"
+    },
+    onClick: onClick
+  }, icon);
+};
+
+export default SettingItem;

package/dist/esm/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/esm/ag-grid-plus/toolBar/index.js

@@ -0,0 +1,176 @@
+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; }
+
+import { LabelIconTip } from '@ant-design/pro-utils';
+import { ConfigProvider, Tooltip } from 'antd';
+import classNames from 'classnames';
+import React, { useContext, useMemo } from 'react';
+import { useStyle } from "./style";
+
+/**
+ * 获取配置区域 DOM Item
+ *
+ * @param setting 配置项
+ */
+function getSettingItem(setting) {
+  if ( /*#__PURE__*/React.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.createElement(Tooltip, {
+        title: tooltip
+      }, /*#__PURE__*/React.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 = useContext(ConfigProvider.ConfigContext),
+      getPrefixCls = _useContext.getPrefixCls;
+
+  var prefixCls = getPrefixCls('pro-table-list-toolbar', customizePrefixCls);
+
+  var _useStyle = useStyle(prefixCls),
+      hashId = _useStyle.hashId;
+  /** 有没有 title，需要结合多个场景判断 */
+
+
+  var hasTitle = useMemo(function () {
+    return title || subTitle || tooltip;
+  }, [subTitle, title, tooltip]);
+  /** 没有 key 的时候帮忙加一下 key 不加的话很烦人 */
+
+  var actionDom = useMemo(function () {
+    if (!Array.isArray(actions)) {
+      return actions;
+    }
+
+    if (actions.length < 1) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: 8
+      }
+    }, actions.map(function (action, index) {
+      if (! /*#__PURE__*/React.isValidElement(action)) {
+        // eslint-disable-next-line react/no-array-index-key
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: index
+        }, action);
+      }
+
+      return /*#__PURE__*/React.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 = 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 = useMemo(function () {
+    return tooltip || title || subTitle;
+  }, [hasTitle, subTitle, title, tooltip]);
+  var leftTitleDom = useMemo(function () {
+    // 保留dom是为了占位，不然 right 就变到左边了
+    if (!hasLeft && hasRight) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId)
+      });
+    } // 减少 space 的dom，渲染的时候能节省点性能
+
+
+    if (hasTitle) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-left ").concat(hashId)
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "".concat(prefixCls, "-title ").concat(hashId)
+      }, /*#__PURE__*/React.createElement(LabelIconTip, {
+        tooltip: tooltip,
+        label: title,
+        subTitle: subTitle
+      })));
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-left ").concat(hashId)
+    }, hasTitle && /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-title ").concat(hashId)
+    }, /*#__PURE__*/React.createElement(LabelIconTip, {
+      tooltip: tooltip,
+      label: title,
+      subTitle: subTitle
+    })));
+  }, [hasLeft, hasRight, hasTitle, hashId, prefixCls, subTitle, title, tooltip]);
+  var rightTitleDom = useMemo(function () {
+    if (!hasRight) return null;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-right ").concat(hashId),
+      style: {
+        alignItems: 'center'
+      }
+    }, actionDom, settings !== null && settings !== void 0 && settings.length ? /*#__PURE__*/React.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.createElement("div", {
+          key: index,
+          className: "".concat(prefixCls, "-setting-item ").concat(hashId)
+        }, settingItem)
+      );
+    })) : null);
+  }, [hasRight, prefixCls, hashId, hasTitle, actionDom, settings]);
+  var titleNode = useMemo(function () {
+    if (!hasRight && !hasLeft) return null;
+    var containerClassName = classNames("".concat(prefixCls, "-container"), hashId, {});
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClassName
+    }, leftTitleDom, rightTitleDom);
+  }, [hasLeft, hasRight, hashId, leftTitleDom, prefixCls, rightTitleDom]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: style,
+    className: classNames(prefixCls, hashId, className)
+  }, titleNode);
+};
+
+export default ListToolBar;