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

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

@@ -1,13 +1,7 @@
-import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var _excluded = ["key", "dataIndex", "children"],
-  _excluded2 = ["disabled"];
 import { SettingOutlined, VerticalAlignBottomOutlined, VerticalAlignMiddleOutlined, VerticalAlignTopOutlined } from '@ant-design/icons';
 import { omit } from '@rc-component/util';
 import { Checkbox, ConfigProvider, Popover, Space, Tooltip, Tree, Typography } from 'antd';
-import classNames from 'classnames';
+import { clsx } from 'clsx';
 import React, { useContext, useEffect, useMemo, useRef } from 'react';
 import { ProProvider, useIntl } from "../../../provider";
 import { runFunction, useRefFunction } from "../../../utils";
@@ -17,46 +11,54 @@ import { useStyle } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
-var ToolTipIcon = function ToolTipIcon(_ref) {
-  var title = _ref.title,
-    show = _ref.show,
-    children = _ref.children,
-    columnKey = _ref.columnKey,
-    fixed = _ref.fixed;
-  var _useContext = useContext(TableContext),
-    columnsMap = _useContext.columnsMap,
-    setColumnsMap = _useContext.setColumnsMap;
+const ToolTipIcon = ({
+  title,
+  show,
+  children,
+  columnKey,
+  fixed
+}) => {
+  const {
+    columnsMap,
+    setColumnsMap
+  } = useContext(TableContext);
   if (!show) {
     return null;
   }
   return /*#__PURE__*/_jsx(Tooltip, {
     title: title,
     children: /*#__PURE__*/_jsx("span", {
-      onClick: function onClick(e) {
+      onClick: e => {
         e.stopPropagation();
         e.preventDefault();
-        var config = columnsMap[columnKey] || {};
-        var columnKeyMap = _objectSpread(_objectSpread({}, columnsMap), {}, _defineProperty({}, columnKey, _objectSpread(_objectSpread({}, config), {}, {
-          fixed: fixed
-        })));
+        const config = columnsMap?.[columnKey] || {};
+        const columnKeyMap = {
+          ...columnsMap,
+          [columnKey]: {
+            ...config,
+            fixed
+          }
+        };
         setColumnsMap(columnKeyMap);
       },
       children: children
     })
   });
 };
-var CheckboxListItem = function CheckboxListItem(_ref2) {
-  var columnKey = _ref2.columnKey,
-    isLeaf = _ref2.isLeaf,
-    title = _ref2.title,
-    className = _ref2.className,
-    fixed = _ref2.fixed,
-    showListItemOption = _ref2.showListItemOption;
-  var intl = useIntl();
-  var _useContext2 = useContext(ProProvider),
-    hashId = _useContext2.hashId;
-  var dom = /*#__PURE__*/_jsxs("span", {
-    className: "".concat(className, "-list-item-option ").concat(hashId).trim(),
+const CheckboxListItem = ({
+  columnKey,
+  isLeaf,
+  title,
+  className,
+  fixed,
+  showListItemOption
+}) => {
+  const intl = useIntl();
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const dom = /*#__PURE__*/_jsxs("span", {
+    className: `${className}-list-item-option ${hashId}`.trim(),
     children: [/*#__PURE__*/_jsx(ToolTipIcon, {
       columnKey: columnKey,
       fixed: "left",
@@ -78,77 +80,74 @@ var CheckboxListItem = function CheckboxListItem(_ref2) {
     })]
   });
   return /*#__PURE__*/_jsxs("span", {
-    className: "".concat(className, "-list-item ").concat(hashId).trim(),
+    className: `${className}-list-item ${hashId}`.trim(),
     children: [/*#__PURE__*/_jsx("div", {
-      className: "".concat(className, "-list-item-title ").concat(hashId).trim(),
+      className: `${className}-list-item-title ${hashId}`.trim(),
       children: title
     }), showListItemOption && !isLeaf ? dom : null]
   }, columnKey);
 };
-var CheckboxList = function CheckboxList(_ref3) {
-  var _treeDataConfig$list, _treeDataConfig$list2, _treeDataConfig$list3;
-  var list = _ref3.list,
-    draggable = _ref3.draggable,
-    checkable = _ref3.checkable,
-    showListItemOption = _ref3.showListItemOption,
-    className = _ref3.className,
-    _ref3$showTitle = _ref3.showTitle,
-    showTitle = _ref3$showTitle === void 0 ? true : _ref3$showTitle,
-    listTitle = _ref3.title,
-    _ref3$listHeight = _ref3.listHeight,
-    listHeight = _ref3$listHeight === void 0 ? 280 : _ref3$listHeight;
-  var _useContext3 = useContext(ProProvider),
-    hashId = _useContext3.hashId;
-  var _useContext4 = useContext(TableContext),
-    columnsMap = _useContext4.columnsMap,
-    setColumnsMap = _useContext4.setColumnsMap,
-    sortKeyColumns = _useContext4.sortKeyColumns,
-    setSortKeyColumns = _useContext4.setSortKeyColumns;
-  var show = list && list.length > 0;
-  var treeDataConfig = useMemo(function () {
+const CheckboxList = ({
+  list,
+  draggable,
+  checkable,
+  showListItemOption,
+  className,
+  showTitle = true,
+  title: listTitle,
+  listHeight = 280
+}) => {
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const {
+    columnsMap,
+    setColumnsMap,
+    sortKeyColumns,
+    setSortKeyColumns
+  } = useContext(TableContext);
+  const show = list && list.length > 0;
+  const treeDataConfig = useMemo(() => {
     if (!show) return {};
-    var checkedKeys = [];
-    var treeMap = new Map();
-    var loopData = function loopData(data, parentConfig) {
-      return data.map(function (_ref4) {
-        var _config$disable;
-        var key = _ref4.key,
-          dataIndex = _ref4.dataIndex,
-          children = _ref4.children,
-          rest = _objectWithoutProperties(_ref4, _excluded);
-        var columnKey = genColumnKey(key, [parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.columnKey, rest.index].filter(Boolean).join('-'));
-        var config = columnsMap[columnKey || 'null'] || {
-          show: true
-        };
-        if (config.show !== false && !children) {
-          checkedKeys.push(columnKey);
-        }
-        var item = _objectSpread(_objectSpread({
-          key: columnKey
-        }, omit(rest, ['className'])), {}, {
-          selectable: false,
-          disabled: config.disable === true,
-          disableCheckbox: typeof config.disable === 'boolean' ? config.disable : (_config$disable = config.disable) === null || _config$disable === void 0 ? void 0 : _config$disable.checkbox,
-          isLeaf: parentConfig ? true : undefined
+    const checkedKeys = [];
+    const treeMap = new Map();
+    const loopData = (data, parentConfig) => data.map(({
+      key,
+      dataIndex,
+      children,
+      ...rest
+    }) => {
+      const columnKey = genColumnKey(key, [parentConfig?.columnKey, rest.index].filter(Boolean).join('-'));
+      const config = columnsMap?.[columnKey || 'null'] || {
+        show: true
+      };
+      if (config.show !== false && !children) {
+        checkedKeys.push(columnKey);
+      }
+      const item = {
+        key: columnKey,
+        ...omit(rest, ['className']),
+        selectable: false,
+        disabled: config.disable === true,
+        disableCheckbox: typeof config.disable === 'boolean' ? config.disable : config.disable?.checkbox,
+        isLeaf: parentConfig ? true : undefined
+      };
+      if (children) {
+        item.children = loopData(children, {
+          ...config,
+          columnKey
         });
-        if (children) {
-          var _item$children;
-          item.children = loopData(children, _objectSpread(_objectSpread({}, config), {}, {
-            columnKey: columnKey
-          }));
-          // 如果children 已经全部是show了，把自己也设置为show
-          if ((_item$children = item.children) !== null && _item$children !== void 0 && _item$children.every(function (childrenItem) {
-            return checkedKeys === null || checkedKeys === void 0 ? void 0 : checkedKeys.includes(childrenItem.key);
-          })) {
-            checkedKeys.push(columnKey);
-          }
+        // 如果children 已经全部是show了，把自己也设置为show
+        if (item.children?.every(childrenItem => checkedKeys?.includes(childrenItem.key))) {
+          checkedKeys.push(columnKey);
         }
-        treeMap.set(key, _objectSpread(_objectSpread({}, item), {}, {
-          parentKey: parentConfig === null || parentConfig === void 0 ? void 0 : parentConfig.columnKey
-        }));
-        return item;
+      }
+      treeMap.set(key, {
+        ...item,
+        parentKey: parentConfig?.columnKey
       });
-    };
+      return item;
+    });
     return {
       list: loopData(list),
       keys: checkedKeys,
@@ -157,18 +156,16 @@ var CheckboxList = function CheckboxList(_ref3) {
   }, [columnsMap, list, show]);
 
   /** 移动到指定的位置 */
-  var move = useRefFunction(function (id, targetId, dropPosition) {
-    var newMap = _objectSpread({}, columnsMap);
-    var newColumns = _toConsumableArray(sortKeyColumns);
-    var findIndex = newColumns.findIndex(function (columnKey) {
-      return columnKey === id;
-    });
-    var targetIndex = newColumns.findIndex(function (columnKey) {
-      return columnKey === targetId;
-    });
-    var isDownWard = dropPosition >= findIndex;
+  const move = useRefFunction((id, targetId, dropPosition) => {
+    const newMap = {
+      ...columnsMap
+    };
+    const newColumns = [...sortKeyColumns];
+    const findIndex = newColumns.findIndex(columnKey => columnKey === id);
+    const targetIndex = newColumns.findIndex(columnKey => columnKey === targetId);
+    const isDownWard = dropPosition >= findIndex;
     if (findIndex < 0) return;
-    var targetItem = newColumns[findIndex];
+    const targetItem = newColumns[findIndex];
     newColumns.splice(findIndex, 1);
     if (dropPosition === 0) {
       newColumns.unshift(targetItem);
@@ -176,10 +173,11 @@ var CheckboxList = function CheckboxList(_ref3) {
       newColumns.splice(isDownWard ? targetIndex : targetIndex + 1, 0, targetItem);
     }
     // 重新生成排序数组
-    newColumns.forEach(function (key, order) {
-      newMap[key] = _objectSpread(_objectSpread({}, newMap[key] || {}), {}, {
-        order: order
-      });
+    newColumns.forEach((key, order) => {
+      newMap[key] = {
+        ...(newMap[key] || {}),
+        order
+      };
     });
     // 更新数组
     setColumnsMap(newMap);
@@ -187,60 +185,64 @@ var CheckboxList = function CheckboxList(_ref3) {
   });
 
   /** 选中反选功能 */
-  var onCheckTree = useRefFunction(function (e) {
-    var newColumnMap = _objectSpread({}, columnsMap);
-    var loopSetShow = function loopSetShow(key) {
-      var _treeDataConfig$map, _treeDataConfig$map2;
-      var newSetting = _objectSpread({}, newColumnMap[key]);
+  const onCheckTree = useRefFunction(e => {
+    const newColumnMap = {
+      ...columnsMap
+    };
+    const loopSetShow = key => {
+      const newSetting = {
+        ...newColumnMap[key]
+      };
       newSetting.show = e.checked;
       // 如果含有子节点，也要选中
-      if ((_treeDataConfig$map = treeDataConfig.map) !== null && _treeDataConfig$map !== void 0 && (_treeDataConfig$map = _treeDataConfig$map.get(key)) !== null && _treeDataConfig$map !== void 0 && _treeDataConfig$map.children) {
-        var _treeDataConfig$map$g;
-        (_treeDataConfig$map$g = treeDataConfig.map.get(key)) === null || _treeDataConfig$map$g === void 0 || (_treeDataConfig$map$g = _treeDataConfig$map$g.children) === null || _treeDataConfig$map$g === void 0 || _treeDataConfig$map$g.forEach(function (item) {
-          return loopSetShow(item.key);
-        });
+      if (treeDataConfig.map?.get(key)?.children) {
+        treeDataConfig.map.get(key)?.children?.forEach(item => loopSetShow(item.key));
       }
 
       // 如果子节点选择，那父节点也应该选中
-      var parentKey = (_treeDataConfig$map2 = treeDataConfig.map) === null || _treeDataConfig$map2 === void 0 || (_treeDataConfig$map2 = _treeDataConfig$map2.get(key)) === null || _treeDataConfig$map2 === void 0 ? void 0 : _treeDataConfig$map2.parentKey;
+      const parentKey = treeDataConfig.map?.get(key)?.parentKey;
       if (parentKey) {
-        newColumnMap[parentKey] = _objectSpread(_objectSpread({}, newColumnMap[parentKey]), {}, {
+        newColumnMap[parentKey] = {
+          ...newColumnMap[parentKey],
           show: true
-        });
+        };
       }
       newColumnMap[key] = newSetting;
     };
     loopSetShow(e.node.key);
-    setColumnsMap(_objectSpread({}, newColumnMap));
+    setColumnsMap({
+      ...newColumnMap
+    });
   });
   if (!show) {
     return null;
   }
-  var listDom = /*#__PURE__*/_jsx(Tree, {
+  const listDom = /*#__PURE__*/_jsx(Tree, {
     itemHeight: 24,
-    draggable: draggable && !!((_treeDataConfig$list = treeDataConfig.list) !== null && _treeDataConfig$list !== void 0 && _treeDataConfig$list.length) && ((_treeDataConfig$list2 = treeDataConfig.list) === null || _treeDataConfig$list2 === void 0 ? void 0 : _treeDataConfig$list2.length) > 1,
+    draggable: draggable && !!treeDataConfig.list?.length && treeDataConfig.list?.length > 1,
     checkable: checkable,
-    onDrop: function onDrop(info) {
-      var dropKey = info.node.key;
-      var dragKey = info.dragNode.key;
-      var dropPosition = info.dropPosition,
-        dropToGap = info.dropToGap;
-      var position = dropPosition === -1 || !dropToGap ? dropPosition + 1 : dropPosition;
+    onDrop: info => {
+      const dropKey = info.node.key;
+      const dragKey = info.dragNode.key;
+      const {
+        dropPosition,
+        dropToGap
+      } = info;
+      const position = dropPosition === -1 || !dropToGap ? dropPosition + 1 : dropPosition;
       move(dragKey, dropKey, position);
     },
     blockNode: true,
-    onCheck: function onCheck(_, e) {
-      return onCheckTree(e);
-    },
+    onCheck: (_, e) => onCheckTree(e),
     checkedKeys: treeDataConfig.keys,
     showLine: false,
-    titleRender: function titleRender(_node) {
-      var node = _objectSpread(_objectSpread({}, _node), {}, {
+    titleRender: _node => {
+      const node = {
+        ..._node,
         children: undefined
-      });
+      };
       if (!node.title) return null;
-      var normalizedTitle = runFunction(node.title, node);
-      var wrappedTitle = /*#__PURE__*/_jsx(Typography.Text, {
+      const normalizedTitle = runFunction(node.title, node);
+      const wrappedTitle = /*#__PURE__*/_jsx(Typography.Text, {
         style: {
           width: 80
         },
@@ -249,47 +251,50 @@ var CheckboxList = function CheckboxList(_ref3) {
         },
         children: normalizedTitle
       });
-      return /*#__PURE__*/_jsx(CheckboxListItem, _objectSpread(_objectSpread({
-        className: className
-      }, omit(node, ['key'])), {}, {
+      return /*#__PURE__*/_jsx(CheckboxListItem, {
+        className: className,
+        ...omit(node, ['key']),
         showListItemOption: showListItemOption,
         title: wrappedTitle,
         columnKey: node.key
-      }));
+      });
     },
     height: listHeight,
-    treeData: (_treeDataConfig$list3 = treeDataConfig.list) === null || _treeDataConfig$list3 === void 0 ? void 0 : _treeDataConfig$list3.map(function (_ref5) {
-      var disabled = _ref5.disabled,
-        config = _objectWithoutProperties(_ref5, _excluded2);
-      return config;
-    })
+    treeData: treeDataConfig.list?.map(({
+      disabled /* 不透传 disabled，使子节点禁用时也可以拖动调整顺序 */,
+      ...config
+    }) => config)
   });
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [showTitle && /*#__PURE__*/_jsx("span", {
-      className: "".concat(className, "-list-title ").concat(hashId).trim(),
+      className: `${className}-list-title ${hashId}`.trim(),
       children: listTitle
     }), listDom]
   });
 };
-var GroupCheckboxList = function GroupCheckboxList(_ref6) {
-  var localColumns = _ref6.localColumns,
-    className = _ref6.className,
-    draggable = _ref6.draggable,
-    checkable = _ref6.checkable,
-    showListItemOption = _ref6.showListItemOption,
-    listsHeight = _ref6.listsHeight;
-  var _useContext5 = useContext(ProProvider),
-    hashId = _useContext5.hashId;
-  var rightList = [];
-  var leftList = [];
-  var list = [];
-  var intl = useIntl();
-  localColumns.forEach(function (item) {
+const GroupCheckboxList = ({
+  localColumns,
+  className,
+  draggable,
+  checkable,
+  showListItemOption,
+  listsHeight
+}) => {
+  const {
+    hashId
+  } = useContext(ProProvider);
+  const rightList = [];
+  const leftList = [];
+  const list = [];
+  const intl = useIntl();
+  localColumns.forEach(item => {
     /** 不在 setting 中展示的 */
     if (item.hideInSetting) {
       return;
     }
-    var fixed = item.fixed;
+    const {
+      fixed
+    } = item;
     if (fixed === 'left') {
       leftList.push(item);
       return;
@@ -300,10 +305,12 @@ var GroupCheckboxList = function GroupCheckboxList(_ref6) {
     }
     list.push(item);
   });
-  var showRight = rightList && rightList.length > 0;
-  var showLeft = leftList && leftList.length > 0;
+  const showRight = rightList && rightList.length > 0;
+  const showLeft = leftList && leftList.length > 0;
   return /*#__PURE__*/_jsxs("div", {
-    className: classNames("".concat(className, "-list"), hashId, _defineProperty({}, "".concat(className, "-list-group"), showRight || showLeft)),
+    className: clsx(`${className}-list`, hashId, {
+      [`${className}-list-group`]: showRight || showLeft
+    }),
     children: [/*#__PURE__*/_jsx(CheckboxList, {
       title: intl.getMessage('tableToolBar.leftFixedTitle', '固定在左侧'),
       list: leftList,
@@ -333,21 +340,21 @@ var GroupCheckboxList = function GroupCheckboxList(_ref6) {
   });
 };
 function ColumnSetting(props) {
-  var _props$checkable, _props$draggable, _props$showListItemOp, _props$settingIcon;
-  var columnRef = useRef(null);
+  const columnRef = useRef(null);
   // 获得当前上下文的 hashID
-  var counter = useContext(TableContext);
-  var localColumns = props.columns;
-  var _props$checkedReset = props.checkedReset,
-    checkedReset = _props$checkedReset === void 0 ? true : _props$checkedReset;
-  var columnsMap = counter.columnsMap,
-    setColumnsMap = counter.setColumnsMap,
-    clearPersistenceStorage = counter.clearPersistenceStorage;
-  useEffect(function () {
-    var _counter$propsRef$cur;
-    if ((_counter$propsRef$cur = counter.propsRef.current) !== null && _counter$propsRef$cur !== void 0 && (_counter$propsRef$cur = _counter$propsRef$cur.columnsState) !== null && _counter$propsRef$cur !== void 0 && _counter$propsRef$cur.value) {
-      var _counter$propsRef$cur2;
-      columnRef.current = JSON.parse(JSON.stringify(((_counter$propsRef$cur2 = counter.propsRef.current) === null || _counter$propsRef$cur2 === void 0 || (_counter$propsRef$cur2 = _counter$propsRef$cur2.columnsState) === null || _counter$propsRef$cur2 === void 0 ? void 0 : _counter$propsRef$cur2.value) || {}));
+  const counter = useContext(TableContext);
+  const localColumns = props.columns;
+  const {
+    checkedReset = true
+  } = props;
+  const {
+    columnsMap,
+    setColumnsMap,
+    clearPersistenceStorage
+  } = counter;
+  useEffect(() => {
+    if (counter.propsRef.current?.columnsState?.value) {
+      columnRef.current = JSON.parse(JSON.stringify(counter.propsRef.current?.columnsState?.value || {}));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -357,25 +364,24 @@ function ColumnSetting(props) {
    *
    * @param show
    */
-  var setAllSelectAction = useRefFunction(function () {
-    var show = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
-    var columnKeyMap = {};
-    var loopColumns = function loopColumns(columns) {
-      columns.forEach(function (_ref7) {
-        var key = _ref7.key,
-          fixed = _ref7.fixed,
-          index = _ref7.index,
-          children = _ref7.children,
-          disable = _ref7.disable;
-        var columnKey = genColumnKey(key, index);
+  const setAllSelectAction = useRefFunction((show = true) => {
+    const columnKeyMap = {};
+    const loopColumns = columns => {
+      columns.forEach(({
+        key,
+        fixed,
+        index,
+        children,
+        disable
+      }) => {
+        const columnKey = genColumnKey(key, index);
         if (columnKey) {
-          var _columnsMap$columnKey, _columnsMap$columnKey2;
           columnKeyMap[columnKey] = {
             // 子节点 disable 时，不修改节点显示状态
-            show: disable ? (_columnsMap$columnKey = columnsMap[columnKey]) === null || _columnsMap$columnKey === void 0 ? void 0 : _columnsMap$columnKey.show : show,
-            fixed: fixed,
-            disable: disable,
-            order: (_columnsMap$columnKey2 = columnsMap[columnKey]) === null || _columnsMap$columnKey2 === void 0 ? void 0 : _columnsMap$columnKey2.order
+            show: disable ? columnsMap?.[columnKey]?.show : show,
+            fixed,
+            disable,
+            order: columnsMap?.[columnKey]?.order
           };
         }
         if (children) {
@@ -388,7 +394,7 @@ function ColumnSetting(props) {
   });
 
   /** 全选和反选 */
-  var checkedAll = useRefFunction(function (e) {
+  const checkedAll = useRefFunction(e => {
     if (e.target.checked) {
       setAllSelectAction();
     } else {
@@ -397,63 +403,62 @@ function ColumnSetting(props) {
   });
 
   /** 重置项目 */
-  var clearClick = useRefFunction(function () {
-    var _counter$propsRef$cur3;
-    clearPersistenceStorage === null || clearPersistenceStorage === void 0 || clearPersistenceStorage();
-    setColumnsMap(((_counter$propsRef$cur3 = counter.propsRef.current) === null || _counter$propsRef$cur3 === void 0 || (_counter$propsRef$cur3 = _counter$propsRef$cur3.columnsState) === null || _counter$propsRef$cur3 === void 0 ? void 0 : _counter$propsRef$cur3.defaultValue) || columnRef.current || counter.defaultColumnKeyMap);
+  const clearClick = useRefFunction(() => {
+    clearPersistenceStorage?.();
+    setColumnsMap(counter.propsRef.current?.columnsState?.defaultValue || columnRef.current || counter.defaultColumnKeyMap);
   });
 
   // 未选中的 key 列表
-  var unCheckedKeys = Object.values(columnsMap).filter(function (value) {
-    return !value || value.show === false;
-  });
+  const unCheckedKeys = Object.values(columnsMap).filter(value => !value || value.show === false);
 
   // 是否已经选中
-  var indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== localColumns.length;
-  var intl = useIntl();
-  var _useContext6 = useContext(ConfigProvider.ConfigContext),
-    getPrefixCls = _useContext6.getPrefixCls;
-  var className = getPrefixCls('pro-table-column-setting');
-  var _useStyle = useStyle(className),
-    wrapSSR = _useStyle.wrapSSR,
-    hashId = _useStyle.hashId;
+  const indeterminate = unCheckedKeys.length > 0 && unCheckedKeys.length !== localColumns.length;
+  const intl = useIntl();
+  const {
+    getPrefixCls
+  } = useContext(ConfigProvider.ConfigContext);
+  const className = getPrefixCls('pro-table-column-setting');
+  const {
+    wrapSSR,
+    hashId
+  } = useStyle(className);
   return wrapSSR( /*#__PURE__*/_jsx(Popover, {
     arrow: false,
     title: /*#__PURE__*/_jsxs("div", {
-      className: "".concat(className, "-title ").concat(hashId).trim(),
+      className: `${className}-title ${hashId}`.trim(),
       children: [props.checkable === false ? /*#__PURE__*/_jsx("div", {}) : /*#__PURE__*/_jsx(Checkbox, {
         indeterminate: indeterminate,
         checked: unCheckedKeys.length === 0 && unCheckedKeys.length !== localColumns.length,
-        onChange: function onChange(e) {
+        onChange: e => {
           checkedAll(e);
         },
         children: intl.getMessage('tableToolBar.columnDisplay', '列展示')
       }), checkedReset ? /*#__PURE__*/_jsx("a", {
         onClick: clearClick,
-        className: "".concat(className, "-action-rest-button ").concat(hashId).trim(),
+        className: `${className}-action-rest-button ${hashId}`.trim(),
         children: intl.getMessage('tableToolBar.reset', '重置')
-      }) : null, props !== null && props !== void 0 && props.extra ? /*#__PURE__*/_jsx(Space, {
+      }) : null, props?.extra ? /*#__PURE__*/_jsx(Space, {
         size: 12,
         align: "center",
         children: props.extra
       }) : null]
     }),
     classNames: {
-      root: "".concat(className, "-overlay ").concat(hashId).trim()
+      root: `${className}-overlay ${hashId}`.trim()
     },
     trigger: "click",
     placement: "bottomRight",
     content: /*#__PURE__*/_jsx(GroupCheckboxList, {
-      checkable: (_props$checkable = props.checkable) !== null && _props$checkable !== void 0 ? _props$checkable : true,
-      draggable: (_props$draggable = props.draggable) !== null && _props$draggable !== void 0 ? _props$draggable : true,
-      showListItemOption: (_props$showListItemOp = props.showListItemOption) !== null && _props$showListItemOp !== void 0 ? _props$showListItemOp : true,
+      checkable: props.checkable ?? true,
+      draggable: props.draggable ?? true,
+      showListItemOption: props.showListItemOption ?? true,
       className: className,
       localColumns: localColumns,
       listsHeight: props.listsHeight
     }),
     children: props.children || /*#__PURE__*/_jsx(Tooltip, {
       title: intl.getMessage('tableToolBar.columnSetting', '列设置'),
-      children: (_props$settingIcon = props.settingIcon) !== null && _props$settingIcon !== void 0 ? _props$settingIcon : /*#__PURE__*/_jsx(SettingOutlined, {})
+      children: props.settingIcon ?? /*#__PURE__*/_jsx(SettingOutlined, {})
     })
   }));
 }