xmirror-components 1.0.29 → 1.0.30-alpha.2

package/build/lib/components/SearchArea/index.js

@@ -0,0 +1,158 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var Item_1 = __importDefault(require("./Item"));
+var ToggleButton_1 = __importDefault(require("./ToggleButton"));
+var AnimatedContainer = (0, styled_1.default)('div', {
+    shouldForwardProp: function (prop) { return prop !== 'show'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n  max-height: ", ";\n"], ["\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n  max-height: ", ";\n"])), function (props) { return props.show ? '450px' : '0'; });
+var StyledForm = (0, styled_1.default)(antd_1.Form)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 20px;\n  padding-bottom: 0;\n  margin-bottom: 20px;\n  background: #F7FAFB;\n  border: 1px solid #F3F3F4;\n\n  .ant-form-item {\n    margin-bottom: 20px;\n  }\n"], ["\n  padding: 20px;\n  padding-bottom: 0;\n  margin-bottom: 20px;\n  background: #F7FAFB;\n  border: 1px solid #F3F3F4;\n\n  .ant-form-item {\n    margin-bottom: 20px;\n  }\n"])));
+var SearchAreaHandle = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  gap: 10px;\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 20px;\n"], ["\n  gap: 10px;\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 20px;\n"])));
+/**
+ * 高级筛选
+ * @param children 子元素
+ * @param onSearch {function} 接收函数，点筛选时执行，返回筛选数据
+ * @param col 与 Col 的配置相同，控制筛选项排版
+ * @param row Row 的配置相同，控制筛选项排版
+ * @param loading {boolean} 筛选加载状态
+ * @param props 多余参数，绑定至 Form 上
+ * @param ref
+ * @return {JSX.Element}
+ * @constructor
+ */
+function InternalSearchArea(_a) {
+    var children = _a.children, onSearch = _a.onSearch, _b = _a.col, col = _b === void 0 ? {} : _b, _c = _a.row, row = _c === void 0 ? {} : _c, _d = _a.loading, loading = _d === void 0 ? false : _d, ref = _a.ref, props = __rest(_a, ["children", "onSearch", "col", "row", "loading", "ref"]);
+    var form = antd_1.Form.useForm()[0];
+    var show, toggle;
+    if (ref && typeof ref === 'object') {
+        show = ref.show;
+        toggle = ref.toggle;
+    }
+    else {
+        var _e = (0, react_1.useState)(false), _show = _e[0], _setShow_1 = _e[1];
+        show = _show;
+        toggle = function () { _setShow_1(function (v) { return !v; }); };
+    }
+    /**
+     * 提交搜索
+     */
+    var submit = function () {
+        var data = form.getFieldsValue();
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(data);
+    };
+    /**
+     * 重置
+     */
+    var reset = function () {
+        form.resetFields();
+        submit();
+    };
+    /**
+     * 重置
+     */
+    var close = function () {
+        toggle();
+    };
+    return (react_1.default.createElement(AnimatedContainer, { show: show },
+        react_1.default.createElement(StyledForm, __assign({ form: form, labelCol: { flex: '70px' }, wrapperCol: { flex: '1', style: { maxWidth: '280px' } } }, props),
+            react_1.default.createElement(antd_1.Row, __assign({ gutter: 10, justify: "space-between" }, row),
+                Array.isArray(children)
+                    ? children.map(function (item) {
+                        return (react_1.default.createElement(antd_1.Col, __assign({ span: 6, xxl: 6,
+                            xl: 8,
+                            lg: 12,
+                            xs: 24, key: item.props.name || item.key || item.props.label }, col), item));
+                    })
+                    : children,
+                react_1.default.createElement(antd_1.Col, { flex: 1 },
+                    react_1.default.createElement(SearchAreaHandle, null,
+                        react_1.default.createElement(antd_1.Button, { loading: loading, type: "primary", onClick: submit }, "\u7B5B\u9009"),
+                        react_1.default.createElement(antd_1.Button, { loading: loading, onClick: reset }, "\u91CD\u7F6E"),
+                        react_1.default.createElement(antd_1.Button, { type: "link", style: {
+                                paddingLeft: 0,
+                                paddingRight: 0
+                            }, onClick: close },
+                            "\u6536\u8D77",
+                            react_1.default.createElement(icons_1.UpOutlined, null))))))));
+}
+var SearchArea = InternalSearchArea;
+function useSearchArea() {
+    var _a = (0, react_1.useState)(false), show = _a[0], setShow = _a[1];
+    var toggle = function () {
+        setShow(function (value) { return !value; });
+    };
+    return {
+        show: show,
+        toggle: toggle
+    };
+}
+SearchArea.useSearchArea = useSearchArea;
+SearchArea.Item = Item_1.default;
+SearchArea.ToggleButton = ToggleButton_1.default;
+exports.default = SearchArea;
+var templateObject_1, templateObject_2, templateObject_3;

package/build/lib/components/Table/Footer/index.js

@@ -38,7 +38,8 @@ var react_intl_1 = require("react-intl");
 var antd_1 = require("antd");
 var react_transition_group_1 = require("react-transition-group");
 var icons_1 = require("@ant-design/icons");
-require("./index.less");
+var react_2 = require("@emotion/react");
+var styles_1 = require("./styles");
 function Index(props) {
     var _a;
     var transitionNodeRef = (0, react_1.useRef)(null);
@@ -102,20 +103,22 @@ function Index(props) {
         var selectedRowKeys = (_a = rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
         return !!(selectedRowKeys.length > 0 && selectedRowKeys.length === optionalNum);
     }, [rowSelection.selectedRowKeys, optionalNum]);
-    return (react_1.default.createElement("div", { className: "table-footer" },
-        react_1.default.createElement(react_transition_group_1.CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: "zoom", unmountOnExit: true, timeout: 300 }, function () {
-            var _a, _b;
-            return (react_1.default.createElement(antd_1.Row, { ref: transitionNodeRef, className: "table-batch-dialog", justify: "space-between" },
-                react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
-                    react_1.default.createElement(antd_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
-                        react_1.default.createElement(react_intl_1.FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
-                                length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
-                            } }))),
-                react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
-                    selectionPopover,
-                    react_1.default.createElement("span", { className: "btn-close", onClick: function () { changeCheckAll({ target: { checked: false } }); } },
-                        react_1.default.createElement(icons_1.CloseOutlined, null)))));
-        }),
-        pagination && (react_1.default.createElement("span", { className: "table-footer-total" }, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null))));
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.Global, { styles: styles_1.globalStyles }),
+        react_1.default.createElement(styles_1.TableFooterWrapper, null,
+            react_1.default.createElement(react_transition_group_1.CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: styles_1.zoomStyles, unmountOnExit: true, timeout: 300 }, function () {
+                var _a, _b;
+                return (react_1.default.createElement(styles_1.StyledRow, { ref: transitionNodeRef, justify: "space-between" },
+                    react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                        react_1.default.createElement(antd_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
+                            react_1.default.createElement(react_intl_1.FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
+                                    length: (_b = (_a = rowSelection.selectedRowKeys) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0
+                                } }))),
+                    react_1.default.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                        selectionPopover,
+                        react_1.default.createElement(styles_1.CloseButton, { onClick: function () { changeCheckAll({ target: { checked: false } }); } },
+                            react_1.default.createElement(icons_1.CloseOutlined, null)))));
+            }),
+            pagination && (react_1.default.createElement(styles_1.TableFooterTotal, null, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null)))));
 }
 exports.default = Index;

package/build/lib/components/Table/Footer/styles.js

@@ -0,0 +1,31 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.globalStyles = exports.zoomStyles = exports.CloseButton = exports.StyledRow = exports.TableBatchDialog = exports.TableFooterTotal = exports.TableFooterWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+var antd_1 = require("antd");
+exports.TableFooterWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 8px;\n"], ["\n  position: absolute;\n  left: 8px;\n"])));
+exports.TableFooterTotal = styled_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  color: #666;\n"], ["\n  font-size: 14px;\n  color: #666;\n"])));
+exports.TableBatchDialog = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"
+    // 包装 Row 组件的样式
+])));
+// 包装 Row 组件的样式
+exports.StyledRow = (0, styled_1.default)(antd_1.Row)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"], ["\n  position: fixed;\n  right: 0;\n  bottom: 30px;\n  left: 0;\n  z-index: 9;\n  width: 600px;\n  padding: 15px 20px;\n  margin: auto;\n  color: #fff;\n  background-color: #666;\n  border-radius: 5px;\n  transition: all 0.5s;\n\n  .ant-checkbox-wrapper {\n    margin-right: 10px;\n    color: #fff;\n\n    .ant-checkbox-indeterminate .ant-checkbox-inner {\n      background-color: transparent;\n      border-color: #d9d9d9;\n    }\n  }\n"])));
+exports.CloseButton = styled_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"], ["\n  margin-left: 20px;\n  cursor: pointer;\n  opacity: 0.5;\n  transition: all 0.5s;\n\n  &:hover {\n    opacity: 1;\n  }\n"
+    // 动画样式 - 使用 CSS 类名
+])));
+// 动画样式 - 使用 CSS 类名
+exports.zoomStyles = {
+    enter: 'zoom-enter',
+    enterActive: 'zoom-enter-active',
+    leaveActive: 'zoom-leave-active'
+};
+// 全局样式注入
+exports.globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/build/lib/components/Table/PopoverSetColumns/index.js

@@ -52,7 +52,7 @@ var icons_1 = require("@ant-design/icons");
 // import { message, IconFont } from 'xmirror-components'
 var AntdApp_1 = require("../../AntdApp");
 var IconFont_1 = __importDefault(require("../../IconFont"));
-require("./index.less");
+var styles_1 = require("./styles");
 function PopoverSetColumns(_a) {
     var order = _a.order, visibleItems = _a.visibleItems, _b = _a.columns, columns = _b === void 0 ? [] : _b, onChangeOrder = _a.onChangeOrder, columnsVisible = _a.columnsVisible, columnsSort = _a.columnsSort, onChangeVisible = _a.onChangeVisible;
     var dragged = (0, react_1.useRef)(null);
@@ -198,7 +198,7 @@ function PopoverSetColumns(_a) {
                 : null;
         });
     }, [order, visibleItems, columns, columnsSort, columnsVisible]);
-    return (react_1.default.createElement(antd_1.Popover, { overlayClassName: "table-columns-setting-popover", content: react_1.default.createElement("ul", { onDragOver: dragOver, className: "table-columns-setting-wrapper" }, renderList), trigger: "click", align: {
+    return (react_1.default.createElement(antd_1.Popover, { overlayClassName: "table-columns-setting-popover", content: react_1.default.createElement(styles_1.ColumnsSettingWrapper, { onDragOver: dragOver }, renderList), trigger: "click", align: {
             offset: [-60, -14]
         } },
         react_1.default.createElement(IconFont_1.default, { type: "icon-setting", style: {

package/build/lib/components/Table/PopoverSetColumns/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnsSettingWrapper = exports.PopoverWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+var react_1 = require("@emotion/react");
+var dragUpAnimation = (0, react_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"], ["\n  from {\n    margin-top: 0;\n  }\n  to {\n    margin-top: 32px;\n  }\n"])));
+var dragDownAnimation = (0, react_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"], ["\n  from {\n    margin-top: 32px;\n    margin-bottom: 0;\n  }\n  to {\n    margin-top: 0;\n    margin-bottom: 32px;\n  }\n"])));
+exports.PopoverWrapper = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"], ["\n  .ant-popover-inner-content {\n    max-height: 360px;\n    padding: 0;\n    overflow-y: auto;\n  }\n"])));
+exports.ColumnsSettingWrapper = styled_1.default.ul(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n\n  .drag-up {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  .drag-down {\n    border: solid 2px #ccc;\n    animation: ", " ease 0.2s 1;\n    animation-fill-mode: forwards;\n  }\n\n  li {\n    width: 150px;\n    padding: 5px 12px;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    word-break: keep-all;\n    white-space: nowrap;\n    user-select: none;\n    transition: background-color 0.5s;\n\n    .icon-drag {\n      margin-right: 10px;\n      color: #999;\n      cursor: move;\n    }\n\n    &[draggable=\"false\"] {\n      .icon-drag {\n        cursor: no-drop;\n        opacity: 0.2;\n      }\n    }\n\n    &:hover {\n      background-color: #f0f0f0;\n    }\n  }\n"])), dragUpAnimation, dragDownAnimation);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/build/lib/components/Table/index.js

@@ -53,7 +53,7 @@ var ahooks_1 = require("ahooks");
 var icons_1 = require("@ant-design/icons");
 var PopoverSetColumns_1 = __importDefault(require("./PopoverSetColumns"));
 var Footer_1 = __importDefault(require("./Footer"));
-require("./index.less");
+var styles_1 = require("./styles");
 function Index(props, ref) {
     var _a = props.columns, columns = _a === void 0 ? [] : _a, columnsSort = props.columnsSort, columnsVisible = props.columnsVisible, _b = props.tableId, tableId = _b === void 0 ? '' : _b, pagination = props.pagination, dataSource = props.dataSource;
     var pathname = location.pathname;
@@ -219,7 +219,7 @@ function Index(props, ref) {
     (0, react_1.useEffect)(function () {
         initColumnsSort();
     }, []);
-    return (react_1.default.createElement("div", { className: "table-wrapper", style: { position: 'relative' }, ref: ref },
+    return (react_1.default.createElement(styles_1.TableWrapper, { ref: ref },
         react_1.default.createElement(antd_1.Table, __assign({ ref: tableRef, scroll: {
                 x: 900
             } }, props, { pagination: paginationProps, columns: renderColumns }))));

package/build/lib/components/Table/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableWrapper = void 0;
+var styled_1 = __importDefault(require("@emotion/styled"));
+exports.TableWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"], ["\n  position: relative;\n\n  .ant-pagination-options {\n    .ant-select {\n      width: auto !important;\n    }\n  }\n"])));
+var templateObject_1;

package/build/lib/index.d.ts

@@ -2,14 +2,18 @@ import { AnyObject } from 'antd/es/_util/type';
 import { AppProps } from 'antd';
 import { Checkbox } from 'antd';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import { ColProps } from 'antd';
 import { ColumnTitleProps } from 'antd/es/table/interface';
 import { default as default_2 } from 'react';
+import { FormItemProps } from 'antd';
+import { FormProps } from 'antd';
 import { MessageInstance } from 'antd/es/message/interface';
 import { ModalStaticFunctions } from 'antd/es/modal/confirm';
 import { NotificationInstance } from 'antd/es/notification/interface';
 import { Options as Options_2 } from 'ahooks/lib/useRequest/src/types';
 import { Plugin as Plugin_2 } from 'ahooks/lib/useRequest/src/types';
 import { Result } from 'ahooks/lib/useRequest/src/types';
+import { RowProps } from 'antd';
 import { Service } from 'ahooks/lib/useRequest/src/types';
 import { SwitchProps } from 'antd/es/switch';
 import { TableColumnType } from 'antd';
@@ -201,6 +205,23 @@ declare type IconFontProps = (IconFontCommonProps & default_2.SVGProps<SVGSVGEle
     symbol?: false;
 });
 
+/**
+ * 筛选项
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function Index({ children, ...props }: FormItemProps): default_2.JSX.Element;
+
+declare interface InternalSearchAreaProps extends FormProps<any> {
+    loading?: boolean;
+    onSearch?: (data: any) => void;
+    children?: default_2.ReactNode;
+    col?: ColProps;
+    row?: RowProps;
+    ref: SearchAreaRef;
+}
+
 export declare let message: MessageInstance;
 
 export declare let modal: Omit<ModalStaticFunctions, 'warn'>;
@@ -215,6 +236,20 @@ declare interface Options<TData, TParams extends unknown[]> extends Options_2<TD
     errorMessage?: boolean;
 }
 
+export declare const SearchArea: default_2.ForwardRefExoticComponent<InternalSearchAreaProps> & {
+    Item: typeof Index;
+    ToggleButton: typeof ToggleButton;
+    useSearchArea: () => {
+        show: boolean;
+        toggle: () => void;
+    };
+};
+
+declare interface SearchAreaRef {
+    show: boolean;
+    toggle: () => void;
+}
+
 export declare let setGlobalLoading: (_value: boolean) => void;
 
 /**
@@ -271,6 +306,20 @@ declare interface TableComponentProps<RecordType = AnyObject> extends Omit<Table
     selectionPopover?: default_2.ReactNode;
 }
 
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function ToggleButton({ panel }: ToggleButtonProps): default_2.JSX.Element;
+
+declare interface ToggleButtonProps {
+    panel: {
+        show: boolean;
+        toggle: () => void;
+    };
+}
+
 export declare function useRequest<TData, TParams extends unknown[]>(service: Service<TData, TParams>, options?: Options<TData, TParams>, plugins?: Array<Plugin_2<TData, TParams>>): WrappedResult<TData, TParams>;
 
 declare interface WrappedResult<TData, TParams extends unknown[]> extends Omit<Result<TData, TParams>, 'data'> {

package/build/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRequest = exports.Table = exports.ConfigContext = exports.ConfigProvider = exports.setGlobalLoading = exports.GlobalLoading = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
+exports.useRequest = exports.SearchArea = exports.Table = exports.ConfigContext = exports.ConfigProvider = exports.setGlobalLoading = exports.GlobalLoading = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
 var AntdApp_1 = require("./components/AntdApp");
 Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(AntdApp_1).default; } });
 Object.defineProperty(exports, "message", { enumerable: true, get: function () { return AntdApp_1.message; } });
@@ -25,5 +25,7 @@ Object.defineProperty(exports, "ConfigProvider", { enumerable: true, get: functi
 Object.defineProperty(exports, "ConfigContext", { enumerable: true, get: function () { return ConfigProvider_1.ConfigContext; } });
 var Table_1 = require("./components/Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return __importDefault(Table_1).default; } });
+var SearchArea_1 = require("./components/SearchArea");
+Object.defineProperty(exports, "SearchArea", { enumerable: true, get: function () { return __importDefault(SearchArea_1).default; } });
 var useRequest_1 = require("./hooks/useRequest");
 Object.defineProperty(exports, "useRequest", { enumerable: true, get: function () { return __importDefault(useRequest_1).default; } });

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.29",
+  "version": "1.0.30-alpha.2",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",

package/build/types/components/SearchArea/Item/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { type FormItemProps } from 'antd';
+/**
+ * 筛选项
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function Index({ children, ...props }: FormItemProps): React.JSX.Element;
+export default Index;

package/build/types/components/SearchArea/ToggleButton/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface ToggleButtonProps {
+    panel: {
+        show: boolean;
+        toggle: () => void;
+    };
+}
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function ToggleButton({ panel }: ToggleButtonProps): React.JSX.Element;
+export default ToggleButton;

package/build/types/components/SearchArea/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { type FormProps, type ColProps, type RowProps } from 'antd';
+import Item from './Item';
+import ToggleButton from './ToggleButton';
+interface SearchAreaRef {
+    show: boolean;
+    toggle: () => void;
+}
+interface InternalSearchAreaProps extends FormProps<any> {
+    loading?: boolean;
+    onSearch?: (data: any) => void;
+    children?: React.ReactNode;
+    col?: ColProps;
+    row?: RowProps;
+    ref: SearchAreaRef;
+}
+declare const SearchArea: React.ForwardRefExoticComponent<InternalSearchAreaProps> & {
+    Item: typeof Item;
+    ToggleButton: typeof ToggleButton;
+    useSearchArea: () => {
+        show: boolean;
+        toggle: () => void;
+    };
+};
+export default SearchArea;

package/build/types/components/Table/Footer/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 import type { TableComponentProps } from '../types.ts';
 declare function Index(props: TableComponentProps): React.JSX.Element;
 export default Index;

package/build/types/components/Table/Footer/styles.d.ts

@@ -0,0 +1,25 @@
+export declare const TableFooterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TableFooterTotal: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const TableBatchDialog: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledRow: import("@emotion/styled").StyledComponent<import("antd").RowProps & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export declare const CloseButton: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const zoomStyles: {
+    enter: string;
+    enterActive: string;
+    leaveActive: string;
+};
+export declare const globalStyles = "\n  .zoom-enter {\n    transform: scale(0);\n  }\n\n  .zoom-enter-active {\n    transform: scale(1);\n  }\n\n  .zoom-leave-active {\n    transform: scale(0);\n  }\n";

package/build/types/components/Table/PopoverSetColumns/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { type TableComponentProps } from '../types';
-import './index.less';
 interface PopoverSetColumnsProps {
     order: string[];
     visibleItems: string[];

package/build/types/components/Table/PopoverSetColumns/styles.d.ts

@@ -0,0 +1,8 @@
+export declare const PopoverWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ColumnsSettingWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;

package/build/types/components/Table/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
 import type { AnyObject, TableComponentProps } from './types';
-import './index.less';
 declare const _default: React.ForwardRefExoticComponent<TableComponentProps<AnyObject> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/build/types/components/Table/styles.d.ts

@@ -0,0 +1,4 @@
+export declare const TableWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/types/index.d.ts

@@ -6,4 +6,5 @@ export { default as IconButton } from './components/IconButton';
 export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
 export { default as ConfigProvider, ConfigContext } from './components/ConfigProvider';
 export { default as Table } from './components/Table';
+export { default as SearchArea } from './components/SearchArea';
 export { default as useRequest } from './hooks/useRequest';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.29",
+  "version": "1.0.30-alpha.2",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",

package/build/dist/index.css

@@ -1 +0,0 @@
-.table-columns-setting-popover .ant-popover-inner-content{max-height:360px;padding:0;overflow-y:auto}.table-columns-setting-popover .table-columns-setting-wrapper{padding:10px 0}.table-columns-setting-popover .table-columns-setting-wrapper .drag-up{border:solid 2px #ccc;animation:dragup ease .2s 1;animation-fill-mode:forwards}.table-columns-setting-popover .table-columns-setting-wrapper .drag-down{border:solid 2px #ccc;animation:dragdown ease .2s 1;animation-fill-mode:forwards}.table-columns-setting-popover .table-columns-setting-wrapper li{width:150px;padding:5px 12px;overflow:hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;-webkit-user-select:none;user-select:none;transition:background-color .5s}.table-columns-setting-popover .table-columns-setting-wrapper li .icon-drag{margin-right:10px;color:#999;cursor:move}.table-columns-setting-popover .table-columns-setting-wrapper li[draggable=false] .icon-drag{cursor:no-drop;opacity:.2}.table-columns-setting-popover .table-columns-setting-wrapper li:hover{background-color:#f0f0f0}@keyframes dragup{0%{margin-top:0}to{margin-top:32px}}@keyframes dragdown{0%{margin-top:32px;margin-bottom:0}to{margin-top:0;margin-bottom:32px}}.table-wrapper .table-footer{position:absolute;left:8px}.table-wrapper .table-footer .table-footer-total{font-size:14px;color:#666}.table-wrapper .table-footer .table-batch-dialog{position:fixed;right:0;bottom:30px;left:0;z-index:9;width:600px;padding:15px 20px;margin:auto;color:#fff;background-color:#666;border-radius:5px;transition:all .5s}.table-wrapper .table-footer .table-batch-dialog .ant-checkbox-wrapper{margin-right:10px;color:#fff}.table-wrapper .table-footer .table-batch-dialog .ant-checkbox-wrapper .ant-checkbox-indeterminate .ant-checkbox-inner{background-color:transparent;border-color:#d9d9d9}.table-wrapper .table-footer .table-batch-dialog .btn-close{margin-left:20px;cursor:pointer;opacity:.5;transition:all .5s}.table-wrapper .table-footer .table-batch-dialog .btn-close:hover{opacity:1}.table-wrapper .table-footer .zoom-enter{transform:scale(0)}.table-wrapper .table-footer .zoom-enter-active{transform:scale(1)}.table-wrapper .table-footer .zoom-leave-active{transform:scale(0)}.table-wrapper{position:relative}.table-wrapper .ant-pagination-options .ant-select{width:auto!important}