@teamix/pro 1.1.3 → 1.1.7

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

@@ -0,0 +1,244 @@
+"use strict";
+
+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); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icon = _interopRequireDefault(require("@teamix/icon"));
+
+var _components = require("@alicloudfe/components");
+
+var _utils = require("@teamix/utils");
+
+require("./index.scss");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+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 _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; }
+
+var CheckboxItem = _components.Menu.CheckboxItem;
+var cls = (0, _utils.baseClass)('teamix-pro-table-toolbar-filter');
+var RadioItem = _components.Menu.RadioItem;
+
+var Filter = function Filter(props) {
+  var column = props.column,
+      actionRef = props.actionRef; // 选中过滤项
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    var _actionRef$current$ge, _actionRef$current, _actionRef$current$ge2, _actionRef$current$ge3, _actionRef$current$ge4;
+
+    // 从全局状态中读取上次存储的条件
+    var rules = (_actionRef$current$ge = (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 ? void 0 : (_actionRef$current$ge2 = _actionRef$current.getState) === null || _actionRef$current$ge2 === void 0 ? void 0 : (_actionRef$current$ge3 = _actionRef$current$ge2.call(_actionRef$current).filterRules) === null || _actionRef$current$ge3 === void 0 ? void 0 : (_actionRef$current$ge4 = _actionRef$current$ge3[column.dataIndex]) === null || _actionRef$current$ge4 === void 0 ? void 0 : _actionRef$current$ge4.rules) !== null && _actionRef$current$ge !== void 0 ? _actionRef$current$ge : [];
+    setSelected(rules);
+  }, []); // 获取过滤项
+
+  var filters = (0, _react.useMemo)(function () {
+    if (Array.isArray(column.filters)) {
+      return column.filters;
+    }
+
+    var filters = column.dataSource; // 转换 valueEnum 为 options
+
+    if (!Array.isArray(column.dataSource)) {
+      filters = Object.entries(column.dataSource).map(function (_ref) {
+        var _nv$label, _nv$color;
+
+        var _ref2 = _slicedToArray(_ref, 2),
+            k = _ref2[0],
+            v = _ref2[1];
+
+        var nv = v;
+        return _objectSpread(_objectSpread({
+          value: k
+        }, nv), {}, {
+          label: (_nv$label = nv.label) !== null && _nv$label !== void 0 ? _nv$label : k,
+          color: (_nv$color = nv.color) !== null && _nv$color !== void 0 ? _nv$color : k
+        });
+      });
+    } // console.log(filters);
+
+
+    return filters;
+  }, []); // 渲染单选
+
+  var renderSingle = function renderSingle() {
+    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref3) {
+      var label = _ref3.label,
+          value = _ref3.value;
+      var valueStr = value.toString();
+      return /*#__PURE__*/_react.default.createElement(RadioItem, {
+        id: valueStr,
+        checked: selected.includes(valueStr),
+        key: valueStr,
+        onChange: function onChange(check) {
+          setSelected([valueStr]);
+        }
+      }, label);
+    });
+  }; // 渲染多选
+
+
+  var renderMultiple = function renderMultiple() {
+    return filters === null || filters === void 0 ? void 0 : filters.map(function (_ref4) {
+      var label = _ref4.label,
+          value = _ref4.value;
+      var valueStr = value.toString();
+      return /*#__PURE__*/_react.default.createElement(CheckboxItem, {
+        key: valueStr,
+        checked: selected.includes(valueStr),
+        onChange: function onChange(check) {
+          if (check) {
+            setSelected([].concat(_toConsumableArray(selected), [valueStr]));
+          } else {
+            setSelected(selected.filter(function (item) {
+              return item !== valueStr;
+            }));
+          }
+        }
+      }, label);
+    });
+  }; // 渲染选择区域
+
+
+  var renderSelect = function renderSelect() {
+    if (column.filterMode === 'multiple') {
+      return renderMultiple();
+    }
+
+    return renderSingle();
+  };
+
+  return /*#__PURE__*/_react.default.createElement(_components.Dropdown, {
+    trigger: /*#__PURE__*/_react.default.createElement(_icon.default, {
+      size: "small",
+      type: "filter-line",
+      className: cls({
+        icon: true,
+        'icon-selected': selected.length > 0
+      }),
+      onClick: function onClick() {
+        setVisible(!visible);
+      }
+    }),
+    triggerType: ['click'],
+    align: "tl bl",
+    visible: visible,
+    onVisibleChange: function onVisibleChange() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: cls()
+  }, /*#__PURE__*/_react.default.createElement(_components.Menu, null, renderSelect(), /*#__PURE__*/_react.default.createElement("div", {
+    className: cls({
+      'btn-box': true
+    })
+  }, /*#__PURE__*/_react.default.createElement(_components.Button, {
+    type: "primary",
+    size: "small",
+    className: cls({
+      btn: true
+    }),
+    onClick: function onClick() {
+      var _actionRef$current2, _actionRef$current2$f, _actionRef$current$ge5, _actionRef$current3, _actionRef$current3$g, _actionRef$current3$g2, _actionRef$current4, _actionRef$current4$r, _actionRef$current5, _actionRef$current5$s;
+
+      (_actionRef$current2 = actionRef.current) === null || _actionRef$current2 === void 0 ? void 0 : (_actionRef$current2$f = _actionRef$current2.filterDataSource) === null || _actionRef$current2$f === void 0 ? void 0 : _actionRef$current2$f.call(_actionRef$current2, column.dataIndex); // 先获取此列的param
+
+      var param = '';
+
+      if (column.beforeFilter) {
+        var _column$beforeFilter;
+
+        param = (_column$beforeFilter = column.beforeFilter) === null || _column$beforeFilter === void 0 ? void 0 : _column$beforeFilter.call(column, selected);
+      } else {
+        param = selected.join(',');
+      } // 需要带上其他所有的信息
+
+
+      var rules = (_actionRef$current$ge5 = (_actionRef$current3 = actionRef.current) === null || _actionRef$current3 === void 0 ? void 0 : (_actionRef$current3$g = _actionRef$current3.getState) === null || _actionRef$current3$g === void 0 ? void 0 : (_actionRef$current3$g2 = _actionRef$current3$g.call(_actionRef$current3)) === null || _actionRef$current3$g2 === void 0 ? void 0 : _actionRef$current3$g2.filterRules) !== null && _actionRef$current$ge5 !== void 0 ? _actionRef$current$ge5 : {};
+      var params = Object.fromEntries([].concat(_toConsumableArray(Object.entries(rules).map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+            k = _ref6[0],
+            v = _ref6[1];
+
+        if (v) {
+          return [k, v.params];
+        }
+
+        return null;
+      })), [[column.dataIndex, param]]).filter(function (item) {
+        return item && (item === null || item === void 0 ? void 0 : item[1]);
+      })); // 先发送请求。因为这会置空组件的列筛选状态
+
+      (_actionRef$current4 = actionRef.current) === null || _actionRef$current4 === void 0 ? void 0 : (_actionRef$current4$r = _actionRef$current4.request) === null || _actionRef$current4$r === void 0 ? void 0 : _actionRef$current4$r.call(_actionRef$current4, _objectSpread({}, params)); // 再设置所有的列筛选状态
+
+      (_actionRef$current5 = actionRef.current) === null || _actionRef$current5 === void 0 ? void 0 : (_actionRef$current5$s = _actionRef$current5.setFilterRules) === null || _actionRef$current5$s === void 0 ? void 0 : _actionRef$current5$s.call(_actionRef$current5, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+        rules: selected,
+        params: param
+      })));
+      setVisible(false);
+    }
+  }, "\u786E\u5B9A"), /*#__PURE__*/_react.default.createElement(_components.Button, {
+    type: "normal",
+    size: "small",
+    className: cls({
+      btn: true
+    }),
+    onClick: function onClick() {
+      var _actionRef$current$ge6, _actionRef$current6, _actionRef$current6$g, _actionRef$current6$g2, _actionRef$current7, _actionRef$current7$s, _actionRef$current8, _actionRef$current8$f;
+
+      setSelected([]);
+      var rules = (_actionRef$current$ge6 = (_actionRef$current6 = actionRef.current) === null || _actionRef$current6 === void 0 ? void 0 : (_actionRef$current6$g = _actionRef$current6.getState) === null || _actionRef$current6$g === void 0 ? void 0 : (_actionRef$current6$g2 = _actionRef$current6$g.call(_actionRef$current6)) === null || _actionRef$current6$g2 === void 0 ? void 0 : _actionRef$current6$g2.filterRules) !== null && _actionRef$current$ge6 !== void 0 ? _actionRef$current$ge6 : {};
+      (_actionRef$current7 = actionRef.current) === null || _actionRef$current7 === void 0 ? void 0 : (_actionRef$current7$s = _actionRef$current7.setFilterRules) === null || _actionRef$current7$s === void 0 ? void 0 : _actionRef$current7$s.call(_actionRef$current7, _objectSpread(_objectSpread({}, rules), {}, _defineProperty({}, column.dataIndex, {
+        rules: [],
+        params: ''
+      })));
+      (_actionRef$current8 = actionRef.current) === null || _actionRef$current8 === void 0 ? void 0 : (_actionRef$current8$f = _actionRef$current8.filterDataSource) === null || _actionRef$current8$f === void 0 ? void 0 : _actionRef$current8$f.call(_actionRef$current8, column.dataIndex); // setVisible(!visible);
+    }
+  }, "\u91CD\u7F6E")))));
+};
+
+var _default = Filter;
+exports.default = _default;

package/lib/table/components/Filter/index.scss

@@ -0,0 +1,23 @@
+.teamix-pro-table-toolbar-filter {
+  width: 130px;
+  max-height: 350px;
+  overflow-y: auto;
+  box-shadow: var(--popup-local-shadow, 0px 6px 24px 0px rgba(0, 0, 0, 0.1));
+  &-icon {
+    cursor: pointer;
+    margin-left: 4px;
+  }
+  &-icon-selected {
+    color: var(--color-brand1-6, #0064c8);
+  }
+  .teamix-pro-table-toolbar-filter-btn-box {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+    padding-bottom: 5px;
+  }
+  .teamix-pro-table-toolbar-filter-btn.teamix-pro-table-toolbar-filter-btn {
+    width: 48px !important;
+    min-width: unset !important;
+  }
+}

package/lib/table/components/Layout/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ProTableLayoutProps } from '../../typing';
+import './index.scss';
+declare const _default: React.MemoExoticComponent<(props: ProTableLayoutProps) => JSX.Element>;
+export default _default;

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

@@ -0,0 +1,266 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _utils = require("@teamix/utils");
+
+var _components = require("@alicloudfe/components");
+
+var _icon = _interopRequireDefault(require("@teamix/icon"));
+
+var _actions = require("../../../actions");
+
+var _form = require("../../../form");
+
+var _ToolBar = _interopRequireDefault(require("../ToolBar"));
+
+var _QuickAction = _interopRequireDefault(require("../QuickAction"));
+
+var _lodash = _interopRequireDefault(require("lodash.isempty"));
+
+require("./index.scss");
+
+var _excluded = ["header", "mainAction", "quickAction", "actionRef", "dataFilter", "dataFilterForm", "rowSelection"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 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; }
+
+var cls = (0, _utils.baseClass)('teamix-pro-table-layout');
+var toJS = _form.formilyReactive.toJS;
+
+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 = (0, _react.useState)((dataFilter === null || dataFilter === void 0 ? void 0 : dataFilter.expand) || false),
+      _useState2 = _slicedToArray(_useState, 2),
+      expand = _useState2[0],
+      setExpand = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasDot = _useState4[0],
+      setHasDot = _useState4[1];
+
+  (0, _react.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.default.createElement("div", {
+        className: cls('main-action')
+      }, /*#__PURE__*/_react.default.createElement(_actions.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.default.createElement("div", {
+        className: cls('inline-filter')
+      }, /*#__PURE__*/_react.default.createElement(_form.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.default.createElement("div", {
+        className: cls('panel-filter'),
+        style: {
+          display: expand ? 'block' : 'none'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_form.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 !(0, _lodash.default)(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.default.createElement(_components.Badge, {
+          dot: true,
+          className: cls('filter-btn')
+        }, /*#__PURE__*/_react.default.createElement(_components.Button, {
+          onClick: handleBtnClick,
+          style: {
+            minWidth: 'unset'
+          }
+        }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+          type: expand ? 'up-line' : 'filter-line'
+        }), (0, _utils.getMessage)('filter')));
+      } else return /*#__PURE__*/_react.default.createElement(_components.Button, {
+        onClick: handleBtnClick,
+        className: cls('filter-btn'),
+        style: {
+          minWidth: 'unset'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+        type: expand ? 'up-line' : 'filter-line'
+      }), (0, _utils.getMessage)('filter'));
+    }
+  }; // 区域组合渲染
+
+
+  var renderLayout = function renderLayout() {
+    if (header && mainAction) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('left')
+      }, header && /*#__PURE__*/_react.default.createElement(_utils.Header, _objectSpread({}, header))), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/_react.default.createElement(_QuickAction.default, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }))), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('left')
+      }, mainAction && renderMainAction(), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('right')
+      }, /*#__PURE__*/_react.default.createElement(_ToolBar.default, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (header && !mainAction) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('left')
+      }, header && /*#__PURE__*/_react.default.createElement(_utils.Header, _objectSpread({}, header)), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/_react.default.createElement(_QuickAction.default, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/_react.default.createElement(_ToolBar.default, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (!header && mainAction) {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('left')
+      }, mainAction && renderMainAction(), mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/_react.default.createElement(_QuickAction.default, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/_react.default.createElement(_ToolBar.default, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    } else if (!header && !mainAction) {
+      if (!dataFilterForm && !quickAction) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('wrapper')
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('left')
+      }, mode === 'panel' && renderFilterBtn(), mode === 'inline' && renderInlineFilter()), /*#__PURE__*/_react.default.createElement("div", {
+        className: cls('right')
+      }, quickAction && /*#__PURE__*/_react.default.createElement(_QuickAction.default, {
+        actionRef: actionRef,
+        quickAction: quickAction,
+        rowSelection: rowSelection
+      }), /*#__PURE__*/_react.default.createElement(_ToolBar.default, _objectSpread({
+        actionRef: actionRef
+      }, otherProps)))), mode === 'panel' && renderPanelFilter());
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: cls()
+  }, renderLayout());
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Layout);
+
+exports.default = _default;

package/lib/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, var(--color-fill1-2));
+  }
+}

package/lib/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/lib/table/components/QuickAction/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _components = require("@alicloudfe/components");
+
+var _actions = _interopRequireDefault(require("../../../actions"));
+
+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); 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); }
+
+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.default.createElement("div", {
+      className: "teamix-pro-table-layout-quick-action"
+    }, /*#__PURE__*/_react.default.createElement(_actions.default, _objectSpread(_objectSpread({
+      type: "primary",
+      text: true
+    }, quickAction), {}, {
+      context: _objectSpread(_objectSpread({}, defaultContext), quickAction.context)
+    })));
+  }
+
+  if (Array.isArray(quickAction)) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "teamix-pro-table-layout-quick-action"
+    }, /*#__PURE__*/_react.default.createElement(_components.Box, {
+      direction: "row",
+      spacing: 8,
+      align: "center"
+    }, quickAction.map(function (item, index) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        key: index
+      }, item);
+    })));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "teamix-pro-table-layout-quick-action"
+  }, quickAction);
+};
+
+var _default = QuickAction;
+exports.default = _default;