xmirror-components 1.0.29 → 1.0.30-alpha.2

package/build/es/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/es/components/SearchArea/Item/index.js

@@ -0,0 +1,49 @@
+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 __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;
+};
+import React from 'react';
+import { Form } from 'antd';
+import styled from '@emotion/styled';
+var StyledFormItem = styled(Form.Item)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  text-align: left;\n  vertical-align: middle;\n\n  & + & {\n    margin-left: 20px;\n  }\n\n  .search-item__label {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    height: 32px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 85%);\n\n    &::after {\n      position: relative;\n      top: -0.5px;\n      margin: 0 8px 0 2px;\n      content: ':';\n    }\n  }\n\n  .search-item__content {\n    flex: 1;\n  }\n"], ["\n  display: inline-flex;\n  text-align: left;\n  vertical-align: middle;\n\n  & + & {\n    margin-left: 20px;\n  }\n\n  .search-item__label {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    height: 32px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 85%);\n\n    &::after {\n      position: relative;\n      top: -0.5px;\n      margin: 0 8px 0 2px;\n      content: ':';\n    }\n  }\n\n  .search-item__content {\n    flex: 1;\n  }\n"
+    /**
+     * 筛选项
+     * @param props
+     * @return {JSX.Element}
+     * @constructor
+     */
+])));
+/**
+ * 筛选项
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+function Index(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(StyledFormItem, __assign({}, props), children));
+}
+export default Index;
+var templateObject_1;

package/build/es/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/es/components/SearchArea/ToggleButton/index.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import React from 'react';
+import { Button } from 'antd';
+import { CaretUpOutlined } from '@ant-design/icons';
+import styled from '@emotion/styled';
+var AnimatedIcon = styled(CaretUpOutlined, {
+    shouldForwardProp: function (prop) { return prop !== 'show'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: transform 0.3s ease-in-out;\n  transform: rotate(", ");\n"], ["\n  transition: transform 0.3s ease-in-out;\n  transform: rotate(", ");\n"])), function (props) { return props.show ? '0deg' : '180deg'; });
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+function ToggleButton(_a) {
+    var panel = _a.panel;
+    var show = panel.show, toggle = panel.toggle;
+    return (React.createElement(Button, { type: "link", style: { paddingLeft: 0, paddingRight: 0 }, onClick: toggle },
+        "\u9AD8\u7EA7\u641C\u7D22",
+        React.createElement(AnimatedIcon, { show: show })));
+}
+export default ToggleButton;
+var templateObject_1;

package/build/es/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/es/components/SearchArea/index.js

@@ -0,0 +1,120 @@
+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 __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;
+};
+import React, { useState } from 'react';
+import { Form, Row, Col, Button } from 'antd';
+import { UpOutlined } from '@ant-design/icons';
+import styled from '@emotion/styled';
+import Item from './Item';
+import ToggleButton from './ToggleButton';
+var AnimatedContainer = styled('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 = styled(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.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 = Form.useForm()[0];
+    var show, toggle;
+    if (ref && typeof ref === 'object') {
+        show = ref.show;
+        toggle = ref.toggle;
+    }
+    else {
+        var _e = 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.createElement(AnimatedContainer, { show: show },
+        React.createElement(StyledForm, __assign({ form: form, labelCol: { flex: '70px' }, wrapperCol: { flex: '1', style: { maxWidth: '280px' } } }, props),
+            React.createElement(Row, __assign({ gutter: 10, justify: "space-between" }, row),
+                Array.isArray(children)
+                    ? children.map(function (item) {
+                        return (React.createElement(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.createElement(Col, { flex: 1 },
+                    React.createElement(SearchAreaHandle, null,
+                        React.createElement(Button, { loading: loading, type: "primary", onClick: submit }, "\u7B5B\u9009"),
+                        React.createElement(Button, { loading: loading, onClick: reset }, "\u91CD\u7F6E"),
+                        React.createElement(Button, { type: "link", style: {
+                                paddingLeft: 0,
+                                paddingRight: 0
+                            }, onClick: close },
+                            "\u6536\u8D77",
+                            React.createElement(UpOutlined, null))))))));
+}
+var SearchArea = InternalSearchArea;
+function useSearchArea() {
+    var _a = 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;
+SearchArea.ToggleButton = ToggleButton;
+export default SearchArea;
+var templateObject_1, templateObject_2, templateObject_3;

package/build/es/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/es/components/Table/Footer/index.js

@@ -1,9 +1,10 @@
 import React, { useMemo, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
-import { Checkbox, Row, Col } from 'antd';
+import { Checkbox, Col } from 'antd';
 import { CSSTransition } from 'react-transition-group';
 import { CloseOutlined } from '@ant-design/icons';
-import './index.less';
+import { Global } from '@emotion/react';
+import { TableFooterWrapper, TableFooterTotal, StyledRow, CloseButton, zoomStyles, globalStyles } from './styles';
 function Index(props) {
     var _a;
     var transitionNodeRef = useRef(null);
@@ -67,20 +68,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.createElement("div", { className: "table-footer" },
-        React.createElement(CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: "zoom", unmountOnExit: true, timeout: 300 }, function () {
-            var _a, _b;
-            return (React.createElement(Row, { ref: transitionNodeRef, className: "table-batch-dialog", justify: "space-between" },
-                React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
-                    React.createElement(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
-                        React.createElement(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.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
-                    selectionPopover,
-                    React.createElement("span", { className: "btn-close", onClick: function () { changeCheckAll({ target: { checked: false } }); } },
-                        React.createElement(CloseOutlined, null)))));
-        }),
-        pagination && (React.createElement("span", { className: "table-footer-total" }, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Global, { styles: globalStyles }),
+        React.createElement(TableFooterWrapper, null,
+            React.createElement(CSSTransition, { in: Boolean(props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: zoomStyles, unmountOnExit: true, timeout: 300 }, function () {
+                var _a, _b;
+                return (React.createElement(StyledRow, { ref: transitionNodeRef, justify: "space-between" },
+                    React.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
+                        React.createElement(Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
+                            React.createElement(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.createElement(Col, { style: { display: 'flex', alignItems: 'center' } },
+                        selectionPopover,
+                        React.createElement(CloseButton, { onClick: function () { changeCheckAll({ target: { checked: false } }); } },
+                            React.createElement(CloseOutlined, null)))));
+            }),
+            pagination && (React.createElement(TableFooterTotal, null, pagination.showTotal ? pagination.showTotal((_a = pagination.total) !== null && _a !== void 0 ? _a : 0, [0, 0]) : null)))));
 }
 export default Index;

package/build/es/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/es/components/Table/Footer/styles.js

@@ -0,0 +1,25 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+import { Row } from 'antd';
+export var TableFooterWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 8px;\n"], ["\n  position: absolute;\n  left: 8px;\n"])));
+export var TableFooterTotal = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 14px;\n  color: #666;\n"], ["\n  font-size: 14px;\n  color: #666;\n"])));
+export var TableBatchDialog = styled.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 组件的样式
+export var StyledRow = styled(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"])));
+export var CloseButton = styled.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 类名
+export var zoomStyles = {
+    enter: 'zoom-enter',
+    enterActive: 'zoom-enter-active',
+    leaveActive: 'zoom-leave-active'
+};
+// 全局样式注入
+export var 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/es/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/es/components/Table/PopoverSetColumns/index.js

@@ -14,7 +14,7 @@ import { HolderOutlined } from '@ant-design/icons';
 // import { message, IconFont } from 'xmirror-components'
 import { message } from '../../AntdApp';
 import IconFont from '../../IconFont';
-import './index.less';
+import { ColumnsSettingWrapper } from './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 = useRef(null);
@@ -160,7 +160,7 @@ function PopoverSetColumns(_a) {
                 : null;
         });
     }, [order, visibleItems, columns, columnsSort, columnsVisible]);
-    return (React.createElement(Popover, { overlayClassName: "table-columns-setting-popover", content: React.createElement("ul", { onDragOver: dragOver, className: "table-columns-setting-wrapper" }, renderList), trigger: "click", align: {
+    return (React.createElement(Popover, { overlayClassName: "table-columns-setting-popover", content: React.createElement(ColumnsSettingWrapper, { onDragOver: dragOver }, renderList), trigger: "click", align: {
             offset: [-60, -14]
         } },
         React.createElement(IconFont, { type: "icon-setting", style: {

package/build/es/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/es/components/Table/PopoverSetColumns/styles.js

@@ -0,0 +1,11 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
+var dragUpAnimation = 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 = 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"])));
+export var PopoverWrapper = styled.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"])));
+export var ColumnsSettingWrapper = styled.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/es/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/es/components/Table/index.js

@@ -15,7 +15,7 @@ import { useLocalStorageState } from 'ahooks';
 import { DownOutlined } from '@ant-design/icons';
 import PopoverSetColumns from './PopoverSetColumns';
 import Footer from './Footer';
-import './index.less';
+import { TableWrapper } from './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;
@@ -181,7 +181,7 @@ function Index(props, ref) {
     useEffect(function () {
         initColumnsSort();
     }, []);
-    return (React.createElement("div", { className: "table-wrapper", style: { position: 'relative' }, ref: ref },
+    return (React.createElement(TableWrapper, { ref: ref },
         React.createElement(Table, __assign({ ref: tableRef, scroll: {
                 x: 900
             } }, props, { pagination: paginationProps, columns: renderColumns }))));

package/build/es/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/es/components/Table/styles.js

@@ -0,0 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import styled from '@emotion/styled';
+export var TableWrapper = styled.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/es/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/build/es/index.js

@@ -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/build/lib/components/SearchArea/Item/index.js

@@ -0,0 +1,54 @@
+"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 __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 = __importDefault(require("react"));
+var antd_1 = require("antd");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var StyledFormItem = (0, styled_1.default)(antd_1.Form.Item)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  text-align: left;\n  vertical-align: middle;\n\n  & + & {\n    margin-left: 20px;\n  }\n\n  .search-item__label {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    height: 32px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 85%);\n\n    &::after {\n      position: relative;\n      top: -0.5px;\n      margin: 0 8px 0 2px;\n      content: ':';\n    }\n  }\n\n  .search-item__content {\n    flex: 1;\n  }\n"], ["\n  display: inline-flex;\n  text-align: left;\n  vertical-align: middle;\n\n  & + & {\n    margin-left: 20px;\n  }\n\n  .search-item__label {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    max-width: 100%;\n    height: 32px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 85%);\n\n    &::after {\n      position: relative;\n      top: -0.5px;\n      margin: 0 8px 0 2px;\n      content: ':';\n    }\n  }\n\n  .search-item__content {\n    flex: 1;\n  }\n"
+    /**
+     * 筛选项
+     * @param props
+     * @return {JSX.Element}
+     * @constructor
+     */
+])));
+/**
+ * 筛选项
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+function Index(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(StyledFormItem, __assign({}, props), children));
+}
+exports.default = Index;
+var templateObject_1;

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

@@ -0,0 +1,30 @@
+"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 });
+var react_1 = __importDefault(require("react"));
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var AnimatedIcon = (0, styled_1.default)(icons_1.CaretUpOutlined, {
+    shouldForwardProp: function (prop) { return prop !== 'show'; },
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  transition: transform 0.3s ease-in-out;\n  transform: rotate(", ");\n"], ["\n  transition: transform 0.3s ease-in-out;\n  transform: rotate(", ");\n"])), function (props) { return props.show ? '0deg' : '180deg'; });
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+function ToggleButton(_a) {
+    var panel = _a.panel;
+    var show = panel.show, toggle = panel.toggle;
+    return (react_1.default.createElement(antd_1.Button, { type: "link", style: { paddingLeft: 0, paddingRight: 0 }, onClick: toggle },
+        "\u9AD8\u7EA7\u641C\u7D22",
+        react_1.default.createElement(AnimatedIcon, { show: show })));
+}
+exports.default = ToggleButton;
+var templateObject_1;