xmirror-components 1.0.1 → 1.0.3

package/build/es/LevelTag/index.js

@@ -0,0 +1,84 @@
+"use strict";
+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 classnames_1 = __importDefault(require("classnames"));
+var index_module_less_1 = __importDefault(require("./index.module.less"));
+var static_1 = require("@/store/static");
+var utils_1 = require("@/utils");
+/**
+ * 等级tag
+ * @param level
+ * @param type {'default' | 'license' | 'component' | 'sensitive' | 'url'}
+ * @param children
+ * @param theme
+ * @param attrs
+ * @returns {JSX.Element}
+ * @constructor
+ */
+var LevelTag = function (_a) {
+    var _b;
+    var level = _a.level, _c = _a.type, type = _c === void 0 ? 'default' : _c, children = _a.children, theme = _a.theme, attrs = __rest(_a, ["level", "type", "children", "theme"]);
+    var levelOptions = static_1.LEVELS;
+    switch (type) {
+        case 'license':
+            levelOptions = static_1.LICENSE_LEVELS;
+            break;
+        case 'component':
+            levelOptions = static_1.COMPONENT_LEVELS;
+            break;
+        case 'sensitive':
+            levelOptions = static_1.SENSITIVE_LEVELS;
+            break;
+        case 'url':
+            levelOptions = static_1.URL_LEVELS;
+            break;
+        case 'crypto':
+            levelOptions = static_1.CRYPTO_LEVELS;
+            break;
+        case 'asset':
+            levelOptions = static_1.ASSET_LEVELS;
+            break;
+    }
+    var item = (0, utils_1.matching)(levelOptions, level, 'value');
+    var label = item.label;
+    var color = item.color;
+    return (react_1.default.createElement("span", __assign({}, attrs, { className: (0, classnames_1.default)([
+            theme === 'solid' ? index_module_less_1.default.level_tag_solid : index_module_less_1.default.level_tag,
+            (_b = {},
+                _b[index_module_less_1.default.severity] = color === 'serious',
+                _b[index_module_less_1.default.danger] = color === 'danger',
+                _b[index_module_less_1.default.warning] = color === 'warning',
+                _b[index_module_less_1.default.low] = color === 'low',
+                _b[index_module_less_1.default.success] = color === 'success',
+                _b[index_module_less_1.default.info] = color === 'info',
+                _b[index_module_less_1.default.gray] = color === 'gray' || !color,
+                _b),
+            attrs.className
+        ]), style: __assign({}, (attrs.style ? attrs.style : {})) }), children || label || '未知'));
+};
+exports.default = LevelTag;

package/build/es/SearchArea/Item/index.d.ts

@@ -0,0 +1,13 @@
+import './index.less';
+/**
+ * 筛选项
+ * @param children
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function Index({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}): import("react").JSX.Element;
+export default Index;

package/build/es/SearchArea/Item/index.js

@@ -0,0 +1,38 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var antd_1 = require("antd");
+require("./index.less");
+/**
+ * 筛选项
+ * @param children
+ * @param props
+ * @return {JSX.Element}
+ * @constructor
+ */
+function Index(_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (React.createElement(antd_1.Form.Item, __assign({}, props), children));
+}
+exports.default = Index;

package/build/es/SearchArea/ToggleButton/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+declare function ToggleButton({ panel }: {
+    panel: any;
+}): import("react").JSX.Element;
+export default ToggleButton;

package/build/es/SearchArea/ToggleButton/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var antd_1 = require("antd");
+var icons_1 = require("@ant-design/icons");
+var rc_tween_one_1 = __importDefault(require("rc-tween-one"));
+/**
+ * 高级筛选触发按钮
+ * @return {JSX.Element}
+ * @constructor
+ */
+function ToggleButton(_a) {
+    var panel = _a.panel;
+    var show = panel.show, toggle = panel.toggle;
+    return (React.createElement(antd_1.Button, { type: "link", style: { paddingLeft: 0, paddingRight: 0 }, onClick: toggle },
+        "\u9AD8\u7EA7\u641C\u7D22",
+        React.createElement(rc_tween_one_1.default, { component: icons_1.CaretUpOutlined, animation: {
+                rotate: show ? 0 : 180,
+                duration: 300
+            } })));
+}
+exports.default = ToggleButton;

package/build/es/SearchArea/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import Item from './Item';
+import ToggleButton from './ToggleButton';
+import './index.less';
+declare const SearchArea: React.ForwardRefExoticComponent<any> & {
+    Item: typeof Item;
+    ToggleButton: typeof ToggleButton;
+    useSearchArea: (show: boolean) => {
+        show: boolean;
+        toggle: () => void;
+    };
+};
+export default SearchArea;

package/build/es/SearchArea/index.js

@@ -0,0 +1,153 @@
+"use strict";
+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 ahooks_1 = require("ahooks");
+var icons_1 = require("@ant-design/icons");
+var rc_tween_one_1 = __importDefault(require("rc-tween-one"));
+var Item_1 = __importDefault(require("./Item"));
+var ToggleButton_1 = __importDefault(require("./ToggleButton"));
+require("./index.less");
+/**
+ * 高级筛选
+ * @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, ref) {
+    var children = _a.children, _b = _a.onSearch, onSearch = _b === void 0 ? function (data) { } : _b, _c = _a.col, col = _c === void 0 ? {} : _c, _d = _a.row, row = _d === void 0 ? {} : _d, _e = _a.loading, loading = _e === void 0 ? false : _e, props = __rest(_a, ["children", "onSearch", "col", "row", "loading"]);
+    var show, toggle;
+    var form = antd_1.Form.useForm()[0];
+    if (ref) {
+        show = ref.show;
+        toggle = ref.toggle;
+        ref.form = form;
+    }
+    else {
+        var _f = (0, ahooks_1.useSafeState)(false), _show = _f[0], _setShow_1 = _f[1];
+        show = _show;
+        toggle = function () { _setShow_1(function (v) { return !v; }); };
+    }
+    /**
+     * 提交搜索
+     */
+    var submit = function () {
+        var data = form.getFieldsValue();
+        onSearch(data);
+    };
+    /**
+     * 重置
+     */
+    var reset = function () {
+        form.resetFields();
+        submit();
+    };
+    /**
+     * 重置
+     */
+    var close = function () {
+        toggle();
+    };
+    return (react_1.default.createElement(rc_tween_one_1.default, { className: "search-area-collapse", animation: {
+            maxHeight: show ? 450 : 0,
+            duration: 400
+        } },
+        react_1.default.createElement(antd_1.Form, __assign({ className: "search-area-container", 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("div", { className: "search-area-handle" },
+                        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 = (0, react_1.forwardRef)(InternalSearchArea);
+SearchArea.Item = Item_1.default;
+SearchArea.ToggleButton = ToggleButton_1.default;
+SearchArea.useSearchArea = function useSearchArea() {
+    var _a = (0, ahooks_1.useSafeState)(false), show = _a[0], setShow = _a[1];
+    var toggle = function () {
+        setShow(function (value) { return !value; });
+    };
+    return {
+        show: show,
+        toggle: toggle
+    };
+};
+exports.default = SearchArea;

package/build/es/SwitchValue/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { type SwitchProps } from 'antd/es/switch';
+/**
+ * Switch 可自定义 value
+ * 使用场景：
+ * 1. 需要自定义 value 的 switch
+ */
+interface SwitchValueProps<T = any, F = any> extends Omit<SwitchProps, 'checked' | 'onChange'> {
+    /**
+     * 选中值
+     */
+    trueValue?: T;
+    /**
+     * 未选中值
+     */
+    falseValue?: F;
+    /**
+     * 选中值
+     */
+    checked?: T | F;
+    /**
+     * 选中事件
+     */
+    onChange?: (value: T | F, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+}
+/**
+ * Switch 可自定义 value
+ */
+declare const Index: ({ checked, onChange, trueValue, falseValue, ...props }: SwitchValueProps) => React.JSX.Element;
+export default Index;

package/build/es/SwitchValue/index.js

@@ -0,0 +1,36 @@
+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 { Switch } from 'antd';
+/**
+ * Switch 可自定义 value
+ */
+var Index = function (_a) {
+    var checked = _a.checked, onChange = _a.onChange, _b = _a.trueValue, trueValue = _b === void 0 ? true : _b, _c = _a.falseValue, falseValue = _c === void 0 ? false : _c, props = __rest(_a, ["checked", "onChange", "trueValue", "falseValue"]);
+    var _checked = checked === trueValue;
+    var change = function (checked, event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(checked ? trueValue : falseValue, event);
+    };
+    return (React.createElement(Switch, __assign({ checked: _checked, onChange: change }, props)));
+};
+export default Index;

package/build/es/Table/Footer/index.d.ts

@@ -0,0 +1,3 @@
+import './index.less';
+declare function Index(props: any): import("react").JSX.Element;
+export default Index;

package/build/es/Table/Footer/index.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+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");
+function Index(props) {
+    var transitionNodeRef = (0, react_1.useRef)(null);
+    var pagination = props.pagination, _a = props.rowSelection, rowSelection = _a === void 0 ? { selectedRowKeys: [] } : _a, dataSource = props.dataSource, _b = props.selectionPopover, selectionPopover = _b === void 0 ? false : _b;
+    /**
+     * 选中所有
+     * @param checked 选中状态
+     */
+    var changeCheckAll = function (_a) {
+        var checked = _a.target.checked;
+        var _b = props.rowKey, rowKey = _b === void 0 ? 'id' : _b;
+        if (!rowSelection.onChange)
+            return;
+        if (checked) {
+            var getCheckboxProps_1 = rowSelection.getCheckboxProps;
+            var tableData = dataSource;
+            if (getCheckboxProps_1) {
+                tableData = dataSource.filter(function (item) {
+                    var data = getCheckboxProps_1(item);
+                    return !data.disabled;
+                });
+            }
+            rowSelection.onChange(tableData.map(function (item) { return item[rowKey]; }), tableData);
+        }
+        else {
+            rowSelection.onChange([], []);
+        }
+    };
+    /**
+     * optionalNum 可选的数量
+     * @return {number}
+     */
+    var optionalNum = (0, react_1.useMemo)(function () {
+        var getCheckboxProps = rowSelection.getCheckboxProps;
+        var tableData = dataSource;
+        if (getCheckboxProps) {
+            tableData = dataSource.filter(function (item) {
+                var data = getCheckboxProps(item);
+                return !data.disabled;
+            });
+        }
+        return tableData.length;
+    }, [dataSource]);
+    /**
+     * indeterminate 选了,但没全选
+     * @return {boolean}
+     */
+    var indeterminate = (0, react_1.useMemo)(function () {
+        var _a = rowSelection.selectedRowKeys, selectedRowKeys = _a === void 0 ? [] : _a;
+        return !!(selectedRowKeys.length > 0 && selectedRowKeys.length < optionalNum);
+    }, [rowSelection.selectedRowKeys]);
+    /**
+     * checked 选中状态
+     * @return {boolean}
+     */
+    var checked = (0, react_1.useMemo)(function () {
+        var _a = rowSelection.selectedRowKeys, selectedRowKeys = _a === void 0 ? [] : _a;
+        return !!(rowSelection.selectedRowKeys.length > 0 && selectedRowKeys.length === optionalNum);
+    }, [rowSelection.selectedRowKeys]);
+    return (React.createElement("div", { className: "table-footer" },
+        React.createElement(react_transition_group_1.CSSTransition, { in: (props.rowSelection && props.selectionPopover && (checked || indeterminate)), nodeRef: transitionNodeRef, classNames: "zoom", unmountOnExit: true, timeout: 300 }, function () {
+            return (React.createElement(antd_1.Row, { ref: transitionNodeRef, className: "table-batch-dialog", justify: "space-between" },
+                React.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                    React.createElement(antd_1.Checkbox, { checked: checked, indeterminate: indeterminate, onChange: changeCheckAll },
+                        React.createElement(react_intl_1.FormattedMessage, { id: "component.table.selected", defaultMessage: '已选{length}条', values: {
+                                length: rowSelection.selectedRowKeys.length
+                            } }))),
+                React.createElement(antd_1.Col, { style: { display: 'flex', alignItems: 'center' } },
+                    selectionPopover,
+                    React.createElement("span", { className: "btn-close", onClick: function () { changeCheckAll({ target: { checked: false } }); } },
+                        React.createElement(icons_1.CloseOutlined, null)))));
+        }),
+        pagination && (React.createElement("span", { className: "table-footer-total" }, pagination.showTotal(pagination.total)))));
+}
+exports.default = Index;

package/build/es/Table/PopoverSetColumns/index.d.ts

@@ -0,0 +1,11 @@
+import './index.less';
+declare function PopoverSetColumns({ order, visibleItems, columns, onChangeOrder, columnsVisible, columnsSort, onChangeVisible }: {
+    order: any;
+    visibleItems: any;
+    columns: any;
+    onChangeOrder: any;
+    columnsVisible: any;
+    columnsSort: any;
+    onChangeVisible: any;
+}): import("react").JSX.Element;
+export default PopoverSetColumns;

package/build/es/Table/PopoverSetColumns/index.js

@@ -0,0 +1,164 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = require("react");
+var antd_1 = require("antd");
+var react_intl_1 = require("react-intl");
+var icons_1 = require("@ant-design/icons");
+var AntdApp_1 = require("@/components/public/AntdApp");
+var IconFont_1 = __importDefault(require("@/components/public/IconFont"));
+require("./index.less");
+function PopoverSetColumns(_a) {
+    var order = _a.order, visibleItems = _a.visibleItems, columns = _a.columns, onChangeOrder = _a.onChangeOrder, columnsVisible = _a.columnsVisible, columnsSort = _a.columnsSort, onChangeVisible = _a.onChangeVisible;
+    var dragged = (0, react_1.useRef)(null);
+    var over = (0, react_1.useRef)(null);
+    /**
+     * 开始拖拽字段
+     * @param event{object}
+     * */
+    var dragStart = function (event) {
+        dragged.current = event.currentTarget;
+    };
+    /**
+     * 拖拽结束
+     * @param event{object}
+     * */
+    var dragEnd = function (event) {
+        if (!over.current) {
+            return;
+        }
+        dragged.current.style.display = 'block';
+        event.target.classList.remove('drag-up');
+        over.current.classList.remove('drag-up');
+        event.target.classList.remove('drag-down');
+        over.current.classList.remove('drag-down');
+        var newOrder = __spreadArray([], order, true);
+        var from = Number(dragged.current.dataset.index);
+        var to = Number(over.current.dataset.index);
+        newOrder.splice(to, 0, newOrder.splice(from, 1)[0]);
+        onChangeOrder(newOrder);
+    };
+    /**
+     * 拖拽中
+     * @param event{object}
+     * */
+    var dragOver = function (event) {
+        event.preventDefault();
+        dragged.current.style.display = 'none';
+        if (event.target.tagName !== 'LI') {
+            return;
+        }
+        var dgIndex = dragged.current.dataset.index;
+        var taIndex = event.target.dataset.index;
+        var id = event.target.dataset.id;
+        if (notDraggableIds.indexOf(id) !== -1) {
+            return;
+        }
+        var animateName = dgIndex > taIndex ? 'drag-up' : 'drag-down';
+        if (over.current && event.target.dataset.index !== over.current.dataset.index) {
+            over.current.classList.remove('drag-up', 'drag-down');
+        }
+        if (!event.target.classList.contains(animateName)) {
+            event.target.classList.add(animateName);
+            over.current = event.target;
+        }
+    };
+    /**
+     * 拖拽中
+     * @param checked{boolean} 选中状态
+     * @param dataIndex{array|string} 列表字段（columns）的 dataIndex
+     * */
+    var changeVisible = function (_a, _b) {
+        var checked = _a.target.checked;
+        var dataIndex = _b.dataIndex;
+        if (visibleItems.length === 1 && !checked) {
+            AntdApp_1.message.error(React.createElement(react_intl_1.FormattedMessage, { id: "component.table.visibleError", defaultMessage: '列表最少保留一个字段' }));
+            return;
+        }
+        var id = Array.isArray(dataIndex) ? dataIndex.join(',') : dataIndex;
+        var newVisibleItems = __spreadArray([], visibleItems, true);
+        if (checked) {
+            newVisibleItems.push(id);
+        }
+        else {
+            newVisibleItems.splice(newVisibleItems.indexOf(id), 1);
+        }
+        onChangeVisible(newVisibleItems);
+    };
+    /**
+     * 不可拖拽字段的 dataIndex
+     * */
+    var notDraggableIds = (0, react_1.useMemo)(function () {
+        return columns.filter(function (item) {
+            return item.columnSortDisabled === true;
+        }).map(function (item) {
+            var dataIndex;
+            if (Array.isArray(item.dataIndex)) {
+                dataIndex = item.dataIndex.join(',');
+            }
+            else {
+                dataIndex = item.dataIndex;
+            }
+            return dataIndex;
+        });
+    }, [columns]);
+    /**
+     * 渲染到页面上的列表
+     * */
+    var renderList = (0, react_1.useMemo)(function () {
+        return order.map(function (item, index) {
+            var column;
+            for (var i in columns) {
+                var dataIndex = void 0;
+                if (Array.isArray(columns[i].dataIndex)) {
+                    dataIndex = columns[i].dataIndex.join(',');
+                }
+                else {
+                    dataIndex = columns[i].dataIndex;
+                }
+                if (item === dataIndex) {
+                    column = columns[i];
+                    break;
+                }
+            }
+            var draggable = columnsSort && column.columnSortDisabled !== true;
+            var id;
+            if (Array.isArray(column.dataIndex)) {
+                id = column.dataIndex.join(',');
+            }
+            else {
+                id = column.dataIndex;
+            }
+            var checked = visibleItems.indexOf(id) !== -1;
+            return column
+                ? (React.createElement("li", { key: column.dataIndex, draggable: draggable, onDragEnd: dragEnd, onDragStart: dragStart, "data-index": index, "data-id": column.dataIndex },
+                    columnsSort && React.createElement(icons_1.HolderOutlined, { className: "icon-drag" }),
+                    columnsVisible &&
+                        React.createElement(antd_1.Checkbox, { style: { marginRight: '10px' }, checked: checked, disabled: column.columnVisibleDisabled, onChange: function (event) { changeVisible(event, column); } }),
+                    column.title))
+                : '';
+        });
+    }, [order, visibleItems]);
+    return (React.createElement(antd_1.Popover, { overlayClassName: "table-columns-setting-popover", content: React.createElement("ul", { onDragOver: dragOver, className: "table-columns-setting-wrapper" }, renderList), trigger: "click", align: {
+            offset: [-60, -14]
+        } },
+        React.createElement(IconFont_1.default, { type: "icon-setting", style: {
+                float: 'right',
+                fontSize: '17px',
+                lineHeight: 1,
+                marginTop: '2px',
+                fontWeight: 500
+            } })));
+}
+exports.default = PopoverSetColumns;