@teamix/pro 1.0.22 → 1.1.0

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

@@ -0,0 +1,241 @@
+var _excluded = ["header", "mainAction", "quickAction", "actionRef", "dataFilter", "dataFilterForm", "rowSelection"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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 React, { useEffect, useState } from 'react';
+import { Header, baseClass } from '@teamix/utils';
+import { Button, Badge } from '@alicloudfe/components';
+import TeamixIcon from '@teamix/icon';
+import { ActionGroup } from '../../../actions';
+import { SimpleFilter, AdvancedFilter, toJS } from '../../../form';
+import { getMessage } from '@teamix/utils';
+import ToolBar from '../ToolBar';
+import QuickAction from '../QuickAction';
+import isEmpty from 'lodash.isempty';
+import './index.scss';
+var cls = baseClass('teamix-pro-table-layout');
+
+var Layout = function Layout(props) {
+  var header = props.header,
+      mainAction = props.mainAction,
+      quickAction = props.quickAction,
+      actionRef = props.actionRef,
+      dataFilter = props.dataFilter,
+      dataFilterForm = props.dataFilterForm,
+      rowSelection = props.rowSelection,
+      otherProps = _objectWithoutProperties(props, _excluded);
+
+  var mode = (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.mode) || 'inline';
+
+  var _useState = useState((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.expand) || false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expand = _useState2[0],
+      setExpand = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasDot = _useState4[0],
+      setHasDot = _useState4[1];
+
+  useEffect(function () {
+    if (dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.expand) {
+      setExpand(dataFilter.expand);
+    }
+  }, [dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.expand]); // 渲染主操作区
+
+  var renderMainAction = function renderMainAction() {
+    var _mainAction$actions;
+
+    if (_typeof(mainAction) === 'object' && (mainAction === null || mainAction === void 0 ? void 0 : (_mainAction$actions = mainAction.actions) === null || _mainAction$actions === void 0 ? void 0 : _mainAction$actions.length) > 0) {
+      // 默认 context
+      var defaultContext = {
+        action: actionRef.current,
+        rowSelection: rowSelection
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls('main-action')
+      }, /*#__PURE__*/React.createElement(ActionGroup, _objectSpread(_objectSpread({}, mainAction), {}, {
+        context: _objectSpread(_objectSpread({}, defaultContext), mainAction.context)
+      })));
+    } else return mainAction;
+  }; // 渲染 mode='inline' 数据过滤区
+
+
+  var renderInlineFilter = function renderInlineFilter() {
+    var _dataFilter$schema;
+
+    if (dataFilter && (dataFilter === null || dataFilter === void 0 ? void 0 : (_dataFilter$schema = dataFilter.schema) === null || _dataFilter$schema === void 0 ? void 0 : _dataFilter$schema.length) > 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls('inline-filter')
+      }, /*#__PURE__*/React.createElement(SimpleFilter, _objectSpread({
+        form: dataFilterForm
+      }, dataFilter)));
+    }
+  }; // 渲染 mode='panel' 数据过滤区
+
+
+  var renderPanelFilter = function renderPanelFilter() {
+    var _dataFilter$schema2;
+
+    if (dataFilter && (dataFilter === null || dataFilter === void 0 ? void 0 : (_dataFilter$schema2 = dataFilter.schema) === null || _dataFilter$schema2 === void 0 ? void 0 : _dataFilter$schema2.length) > 0) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: cls('panel-filter'),
+        style: {
+          display: expand ? 'block' : 'none'
+        }
+      }, /*#__PURE__*/React.createElement(AdvancedFilter, _objectSpread({
+        form: dataFilterForm
+      }, dataFilter)));
+    }
+  }; // 渲染过滤器按钮
+
+
+  var renderFilterBtn = function renderFilterBtn() {
+    var handleBtnClick = function handleBtnClick() {
+      setExpand(!expand);
+      var filterValues = Object.values(toJS(dataFilterForm === null || dataFilterForm === void 0 ? void 0 : dataFilterForm.values)).filter(function (v) {
+        return !isEmpty(v);
+      }); // console.log('filterValues', filterValues);
+
+      if (filterValues && (filterValues === null || filterValues === void 0 ? void 0 : filterValues.length) > 0) {
+        setHasDot(true);
+      } else {
+        setHasDot(false);
+      } // 全屏模式下展开收起过滤器需要重新计算tableMaxHeight
+
+
+      setTimeout(function () {
+        var _actionRef$current, _actionRef$current$ge;
+
+        if ((_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ge = _actionRef$current.getState) === null || _actionRef$current$ge === void 0 ? void 0 : _actionRef$current$ge.call(_actionRef$current).fullScreenState) {
+          var _actionRef$current2, _actionRef$current2$r;
+
+          (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$r = _actionRef$current2.resetTableMaxBodyHeight) === null || _actionRef$current2$r === void 0 ? void 0 : _actionRef$current2$r.call(_actionRef$current2);
+        }
+      });
+    };
+
+    if (mode === 'panel') {
+      if (expand === false && hasDot) {
+        return /*#__PURE__*/React.createElement(Badge, {
+          dot: true,
+          className: cls('filter-btn')
+        }, /*#__PURE__*/React.createElement(Button, {
+          onClick: handleBtnClick,
+          style: {
+            minWidth: 'unset'
+          }
+        }, /*#__PURE__*/React.createElement(TeamixIcon, {
+          type: expand ? 'up-line' : 'filter-line'
+        }), getMessage('filter')));
+      } else return /*#__PURE__*/React.createElement(Button, {
+        onClick: handleBtnClick,
+        className: cls('filter-btn'),
+        style: {
+          minWidth: 'unset'
+        }
+      }, /*#__PURE__*/React.createElement(TeamixIcon, {
+        type: expand ? 'up-line' : 'filter-line'
+      }), getMessage('filter'));
+    }
+  }; // 区域组合渲染
+
+
+  var renderLayout = function renderLayout() {
+    if (header && mainAction) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls('left')
+      }, header && /*#__PURE__*/React.createElement(Header, _objectSpread({}, header))), /*#__PURE__*/React.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/React.createElement(QuickAction, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }))), /*#__PURE__*/React.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls('left')
+      }, mainAction && renderMainAction(), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/React.createElement("div", {
+        className: cls('right')
+      }, /*#__PURE__*/React.createElement(ToolBar, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (header && !mainAction) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls('left')
+      }, header && /*#__PURE__*/React.createElement(Header, _objectSpread({}, header)), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/React.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/React.createElement(QuickAction, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/React.createElement(ToolBar, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (!header && mainAction) {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls('left')
+      }, mainAction && renderMainAction(), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/React.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/React.createElement(QuickAction, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/React.createElement(ToolBar, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (!header && !mainAction) {
+      if (!dataFilterForm && !quickAction) {
+        return null;
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/React.createElement("div", {
+        className: cls('left')
+      }, mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/React.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/React.createElement(QuickAction, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/React.createElement(ToolBar, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    }
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cls()
+  }, renderLayout());
+};
+
+export default /*#__PURE__*/React.memo(Layout);

package/es/table/components/Layout/index.scss

@@ -0,0 +1,39 @@
+$prefix: 'teamix-pro-table-layout';
+
+.theme-hybridcloud-dark {
+  --panel-filter-bg: #1f1f1f;
+}
+
+.#{$prefix} {
+  &-wrapper {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    &:not(:first-child) {
+      margin-top: 8px;
+    }
+  }
+  &-left {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+  }
+  &-right {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+  }
+  &-inline-filter:not(:first-child) {
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+  }
+  &-filter-btn:not(:first-child) {
+    margin-left: 8px;
+  }
+  &-panel-filter {
+    margin: 8px 0;
+    padding: 16px;
+    background: var(--panel-filter-bg, #fff);
+  }
+}

package/es/table/components/QuickAction/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IActionButton } from '../../../actions';
+import { ProTableActionType, innerRowSelectionType, rowSelectionType } from '../../typing';
+interface QuickActionProps {
+    quickAction?: IActionButton | React.ReactNode | React.ReactNode[];
+    actionRef: React.MutableRefObject<ProTableActionType | undefined>;
+    rowSelection?: innerRowSelectionType | rowSelectionType;
+}
+declare const QuickAction: React.FC<QuickActionProps>;
+export default QuickAction;

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

@@ -0,0 +1,53 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { 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; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+import React from 'react';
+import { Box } from '@alicloudfe/components';
+import ActionButton from '../../../actions';
+
+var QuickAction = function QuickAction(props) {
+  var quickAction = props.quickAction,
+      actionRef = props.actionRef,
+      rowSelection = props.rowSelection; // 如果传对象的话，默认为主要文字类型的 ActionButton
+
+  if (_typeof(quickAction) === 'object') {
+    // 默认 context
+    var defaultContext = {
+      action: actionRef.current,
+      rowSelection: rowSelection
+    };
+    return /*#__PURE__*/React.createElement("div", {
+      className: "teamix-pro-table-layout-quick-action"
+    }, /*#__PURE__*/React.createElement(ActionButton, _objectSpread(_objectSpread({
+      type: "primary",
+      text: true
+    }, quickAction), {}, {
+      context: _objectSpread(_objectSpread({}, defaultContext), quickAction.context)
+    })));
+  }
+
+  if (Array.isArray(quickAction)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "teamix-pro-table-layout-quick-action"
+    }, /*#__PURE__*/React.createElement(Box, {
+      direction: "row",
+      spacing: 8,
+      align: "center"
+    }, quickAction.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: index
+      }, item);
+    })));
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "teamix-pro-table-layout-quick-action"
+  }, quickAction);
+};
+
+export default QuickAction;

package/es/table/components/ToolBar/DensityIcon.d.ts

@@ -0,0 +1,4 @@
+import { ProTableLayoutProps } from '../../typing';
+import './index.scss';
+declare const DensityIcon: (props: ProTableLayoutProps) => JSX.Element;
+export default DensityIcon;

package/es/table/components/ToolBar/DensityIcon.js

@@ -0,0 +1,117 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * 更改 Table 疏密度 Icon
+ */
+import { Button, Dropdown, Menu } from '@alicloudfe/components';
+import TeamixIcon from '@teamix/icon';
+import { baseClass, getMessage } from '@teamix/utils';
+import React, { useState } from 'react';
+import './index.scss';
+var RadioItem = Menu.RadioItem;
+var cls = baseClass('teamix-pro-table-toolbar-icon');
+
+var DensityIcon = function DensityIcon(props) {
+  var actionRef = props.actionRef;
+
+  var _useState = useState('medium'),
+      _useState2 = _slicedToArray(_useState, 2),
+      size = _useState2[0],
+      setSize = _useState2[1]; // const [fullscreen, setFullscreen] = useState<boolean>(false);
+  // tooltip 开关
+
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      tooltipVisible = _useState4[0],
+      setTooltipVisible = _useState4[1]; // dropdown 开关
+
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      dropdownVisible = _useState6[0],
+      setDropdownVisible = _useState6[1]; // 设置大小
+
+
+  var radioOnchange = function radioOnchange(mode) {
+    var _actionRef$current, _actionRef$current$se;
+
+    setSize(mode);
+    (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$se = _actionRef$current.setSize) === null || _actionRef$current$se === void 0 ? void 0 : _actionRef$current$se.call(_actionRef$current, mode);
+  }; // // 销毁监听函数
+  // useEffect(() => {
+  //   return () => {
+  //     actionRef.current?.off?.('densityIcon');
+  //   };
+  // }, []);
+  // // 监听全屏变化
+  // actionRef.current?.on?.(
+  //   (state: boolean) => {
+  //     setFullscreen(state);
+  //   },
+  //   'fullScreenState',
+  //   'densityIcon',
+  // );
+
+
+  var renderDropdown = function renderDropdown() {
+    return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Dropdown // safeNode={() => sizeMenuRef.current || document}
+    , {
+      // safeNode={() => sizeMenuRef.current || document}
+      trigger: /*#__PURE__*/React.createElement(Button, {
+        iconSize: "small",
+        className: cls()
+      }, /*#__PURE__*/React.createElement(TeamixIcon, {
+        size: "small",
+        type: "space-line"
+      })),
+      visible: dropdownVisible,
+      onVisibleChange: function onVisibleChange(state) {
+        setTooltipVisible(false);
+        setDropdownVisible(state);
+      },
+      triggerType: ['click'],
+      // key={index}
+      align: "tr br"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(RadioItem, {
+      key: "medium",
+      checked: size === 'medium',
+      onChange: function onChange(checked) {
+        return radioOnchange('medium');
+      }
+    }, getMessage('default')), /*#__PURE__*/React.createElement(RadioItem, {
+      key: "small",
+      checked: size === 'small',
+      onChange: function onChange(checked) {
+        return radioOnchange('small');
+      }
+    }, getMessage('compact'))))));
+  };
+
+  return renderDropdown(); // <Balloon.Tooltip
+  //   trigger={renderDropdown()}
+  //   align={fullscreen ? 'b' : 't'}
+  //   popupProps={{
+  //     offset: fullscreen ? [5, 20] : [5, -18],
+  //     animation: { in: 'fadeIn', out: 'fadeOut' },
+  //     visible: tooltipVisible && !dropdownVisible,
+  //     onVisibleChange: (state) => {
+  //       setTooltipVisible(state);
+  //     },
+  //   }}
+  // >
+  //   {getMessage('density')}
+  // </Balloon.Tooltip>
+};
+
+export default DensityIcon;

package/es/table/components/ToolBar/FilterColumnIcon.d.ts

@@ -0,0 +1,4 @@
+import { ProTableLayoutProps } from '../../typing';
+import './index.scss';
+declare const FilterColumnIcon: (props: ProTableLayoutProps) => JSX.Element;
+export default FilterColumnIcon;