xmirror-components 1.0.26 → 1.0.28-alpha.1

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

@@ -0,0 +1,84 @@
+import React, { useMemo, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Checkbox, Row, Col } from 'antd';
+import { CSSTransition } from 'react-transition-group';
+import { CloseOutlined } from '@ant-design/icons';
+import './index.less';
+function Index(props) {
+    var _a, _b, _c;
+    var transitionNodeRef = useRef(null);
+    var _d = props, pagination = _d.pagination, _e = _d.rowSelection, rowSelection = _e === void 0 ? { selectedRowKeys: [], onChange: function () { } } : _e, _f = _d.dataSource, dataSource = _f === void 0 ? [] : _f, _g = _d.selectionPopover, selectionPopover = _g === void 0 ? false : _g;
+    /**
+     * 选中所有
+     * @param checked 选中状态
+     */
+    var changeCheckAll = function (_a) {
+        var checked = _a.target.checked;
+        var _b = props.rowKey, rowKey = _b === void 0 ? 'id' : _b;
+        if (!rowSelection || !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;
+                });
+            }
+            // rowKey 可能为字符串或函数，这里只处理字符串情况
+            var keyGetter = typeof rowKey === 'function' ? rowKey : function (item) { return item[rowKey]; };
+            rowSelection.onChange(Array.from(tableData.map(keyGetter)), Array.from(tableData), { type: 'none' });
+        }
+        else {
+            rowSelection.onChange([], [], { type: 'none' });
+        }
+    };
+    /**
+     * optionalNum 可选的数量
+     * @return {number}
+     */
+    var optionalNum = 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, rowSelection]);
+    /**
+     * indeterminate 选了,但没全选
+     * @return {boolean}
+     */
+    var indeterminate = useMemo(function () {
+        var _a;
+        var selectedRowKeys = (_a = rowSelection.selectedRowKeys) !== null && _a !== void 0 ? _a : [];
+        return !!(selectedRowKeys.length > 0 && selectedRowKeys.length < optionalNum);
+    }, [rowSelection.selectedRowKeys, optionalNum]);
+    /**
+     * checked 选中状态
+     * @return {boolean}
+     */
+    var checked = useMemo(function () {
+        var _a;
+        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 },
+            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((_c = pagination.total) !== null && _c !== void 0 ? _c : 0, [0, 0]) : null))));
+}
+export default Index;

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type TableComponentProps } from '../types';
+import './index.less';
+interface PopoverSetColumnsProps {
+    order: string[];
+    visibleItems: string[];
+    columns: TableComponentProps['columns'];
+    onChangeOrder: (newOrder: string[]) => void;
+    columnsVisible: TableComponentProps['columnsVisible'];
+    columnsSort: TableComponentProps['columnsSort'];
+    onChangeVisible: (newVisibleItems: string[]) => void;
+}
+declare function PopoverSetColumns({ order, visibleItems, columns, onChangeOrder, columnsVisible, columnsSort, onChangeVisible }: PopoverSetColumnsProps): React.JSX.Element;
+export default PopoverSetColumns;

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

@@ -0,0 +1,174 @@
+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));
+};
+import React, { useMemo, useRef } from 'react';
+import { Checkbox, Popover } from 'antd';
+import { FormattedMessage } from 'react-intl';
+import { HolderOutlined } from '@ant-design/icons';
+// import { message, IconFont } from 'xmirror-components'
+import { message } from '../../AntdApp';
+import IconFont from '../../IconFont';
+import './index.less';
+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);
+    var over = useRef(null);
+    /**
+     * 开始拖拽字段
+     * @param event{React.DragEvent<HTMLLIElement>}
+     * */
+    var dragStart = function (event) {
+        dragged.current = event.currentTarget;
+    };
+    /**
+     * 拖拽结束
+     * @param event{React.DragEvent<HTMLLIElement>}
+     * */
+    var dragEnd = function (event) {
+        if (!over.current || !dragged.current) {
+            return;
+        }
+        dragged.current.style.display = 'block';
+        event.currentTarget.classList.remove('drag-up');
+        over.current.classList.remove('drag-up');
+        event.currentTarget.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{React.DragEvent<HTMLUListElement>}
+     * */
+    var dragOver = function (event) {
+        event.preventDefault();
+        if (!dragged.current)
+            return;
+        dragged.current.style.display = 'none';
+        var target = event.target;
+        if (target.tagName !== 'LI') {
+            return;
+        }
+        var dgIndex = dragged.current.dataset.index;
+        var taIndex = target.dataset.index;
+        var id = target.dataset.id;
+        if (!id || notDraggableIds.includes(id)) {
+            return;
+        }
+        if (!dgIndex || !taIndex)
+            return;
+        var animateName = dgIndex > taIndex ? 'drag-up' : 'drag-down';
+        if (over.current && target.dataset.index !== over.current.dataset.index) {
+            over.current.classList.remove('drag-up', 'drag-down');
+        }
+        if (!target.classList.contains(animateName)) {
+            target.classList.add(animateName);
+            over.current = target;
+        }
+    };
+    /**
+     * 列显示隐藏
+     * @param event{CheckboxChangeEvent}
+     * @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) {
+            message.error(React.createElement(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 = useMemo(function () {
+        var arr = [];
+        for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+            var item = columns_1[_i];
+            if (item.columnSortDisabled && ('dataIndex' in item)) {
+                var dataIndex = void 0;
+                if (Array.isArray(item.dataIndex)) {
+                    dataIndex = item.dataIndex.join(',');
+                }
+                else {
+                    dataIndex = item.dataIndex;
+                }
+                arr.push(dataIndex);
+            }
+        }
+        return arr;
+    }, [columns]);
+    /**
+     * 渲染到页面上的列表
+     * */
+    var renderList = useMemo(function () {
+        return order.map(function (item, index) {
+            var column;
+            for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {
+                var col = columns_2[_i];
+                if ('dataIndex' in col) {
+                    var dataIndex = void 0;
+                    if (Array.isArray(col.dataIndex)) {
+                        dataIndex = col.dataIndex.join(',');
+                    }
+                    else {
+                        dataIndex = col.dataIndex;
+                    }
+                    if (item === dataIndex) {
+                        column = col;
+                        break;
+                    }
+                }
+            }
+            if (!column || !('dataIndex' in column)) {
+                return '';
+            }
+            var draggable = columnsSort && column && !column.columnSortDisabled;
+            var id;
+            if (column && Array.isArray(column.dataIndex)) {
+                id = column.dataIndex.join(',');
+            }
+            else if (column) {
+                id = column.dataIndex;
+            }
+            var checked = typeof id === 'string' && visibleItems.includes(id);
+            return column
+                ? (React.createElement("li", { key: Array.isArray(column.dataIndex) ? column.dataIndex.join(',') : String(column.dataIndex), draggable: draggable, onDragEnd: dragEnd, onDragStart: dragStart, "data-index": index, "data-id": Array.isArray(column.dataIndex) ? column.dataIndex.join(',') : String(column.dataIndex) },
+                    columnsSort && React.createElement(HolderOutlined, { className: "icon-drag" }),
+                    columnsVisible &&
+                        React.createElement(Checkbox, { style: { marginRight: '10px' }, checked: Boolean(checked), disabled: column.columnVisibleDisabled, onChange: function (event) { changeVisible(event, column); } }),
+                    typeof column.title === 'function' ? column.title({}) : column.title))
+                : 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: {
+            offset: [-60, -14]
+        } },
+        React.createElement(IconFont, { type: "icon-setting", style: {
+                float: 'right',
+                fontSize: '17px',
+                lineHeight: 1,
+                marginTop: '2px',
+                fontWeight: 500
+            } })));
+}
+export default PopoverSetColumns;

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,189 @@
+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);
+};
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Table, Tooltip } from 'antd';
+import { useLocalStorageState } from 'ahooks';
+import { DownOutlined } from '@ant-design/icons';
+import PopoverSetColumns from './PopoverSetColumns';
+import Footer from './Footer';
+import './index.less';
+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;
+    var _tableId = pathname + tableId;
+    var _c = useLocalStorageState('TABLE_' + _tableId, {
+        defaultValue: null
+    }), tableCache = _c[0], setTableCache = _c[1];
+    var _d = useState([]), order = _d[0], setOrder = _d[1];
+    var _e = useState([]), visibleItems = _e[0], setVisibleItems = _e[1];
+    var tableRef = useRef(null);
+    /**
+     * 修改字段顺序
+     * @param newOrder{array} 新顺序
+     * */
+    var changeOrder = function (newOrder) {
+        setOrder(newOrder);
+        setCache(newOrder, visibleItems);
+    };
+    /**
+     * 修改显示的字段
+     * @param visibleItems{array} 显示的字段列表
+     * */
+    var changeVisibleItems = function (visibleItems) {
+        setVisibleItems(visibleItems);
+        setCache(order, visibleItems);
+    };
+    /**
+     * 把排序和显示储存到浏览器
+     * @param visibleItems{array} 显示的字段列表
+     * @param newOrder{array} 新顺序
+     * */
+    var setCache = function (newOrder, visibleItems) {
+        setTableCache({
+            order: newOrder,
+            visibleItems: visibleItems
+        });
+    };
+    /**
+     * 初始化字段的排序和显示隐藏
+     * */
+    var initColumnsSort = function () {
+        if (tableCache) {
+            setOrder(tableCache.order);
+            setVisibleItems(tableCache.visibleItems);
+        }
+        else {
+            var orderDataIndex = [];
+            var visibleDataIndex = [];
+            for (var _i = 0, columns_1 = columns; _i < columns_1.length; _i++) {
+                var item = columns_1[_i];
+                var id = void 0;
+                if ('dataIndex' in item) {
+                    if (Array.isArray(item.dataIndex)) {
+                        id = item.dataIndex.join(',');
+                    }
+                    else {
+                        id = item.dataIndex;
+                    }
+                    orderDataIndex.push(id);
+                    if (!('columnVisible' in item && !item.columnVisible)) {
+                        visibleDataIndex.push(id);
+                    }
+                }
+            }
+            setOrder(orderDataIndex);
+            setVisibleItems(visibleDataIndex);
+        }
+    };
+    /**
+     * 初始化设置按钮
+     * @param column{object} 列表字段，加入按钮的字段
+     * */
+    var initSettingButton = function (column) {
+        var newColumn = __assign({}, column);
+        var columnTitleRender = function (children) {
+            return (React.createElement("span", null,
+                children,
+                React.createElement(PopoverSetColumns, { onChangeOrder: changeOrder, onChangeVisible: changeVisibleItems, order: order, columnsSort: columnsSort, visibleItems: visibleItems, columns: columns, columnsVisible: columnsVisible })));
+        };
+        if (typeof column.title === 'function') {
+            newColumn.title = function (props) {
+                return columnTitleRender(column.title(props));
+            };
+        }
+        else {
+            newColumn.title = columnTitleRender(column.title);
+        }
+        return newColumn;
+    };
+    var renderDefaultColumn = function (value) {
+        return value !== null && value !== undefined && value !== ''
+            ? (React.createElement(Tooltip, { title: value, placement: "topLeft" },
+                React.createElement("span", { className: 'column-ellipsis' }, value)))
+            : '-';
+    };
+    /**
+     * 展示在页面上的列表字段
+     * */
+    var renderColumns = useMemo(function () {
+        var returnColumns = columns;
+        if (!columnsSort && !columnsVisible) {
+            returnColumns = columns;
+        }
+        else {
+            var newColumns_1 = [];
+            order.filter(function (item) {
+                return visibleItems.includes(item);
+            }).forEach(function (item, index, array) {
+                for (var _i = 0, columns_2 = columns; _i < columns_2.length; _i++) {
+                    var column = columns_2[_i];
+                    if ('dataIndex' in column) {
+                        var dataIndex = void 0;
+                        if (Array.isArray(column.dataIndex)) {
+                            dataIndex = column.dataIndex.join(',');
+                        }
+                        else {
+                            dataIndex = column.dataIndex;
+                        }
+                        if (item === dataIndex) {
+                            if ((columnsSort || columnsVisible) && (index === array.length - 1)) {
+                                /***
+                                 * 如果是 columnsSort 是 true 就把排序按钮放最后一个字段上
+                                 * */
+                                newColumns_1.push(initSettingButton(column));
+                            }
+                            else {
+                                newColumns_1.push(column);
+                            }
+                            break;
+                        }
+                    }
+                }
+            });
+            returnColumns = newColumns_1;
+        }
+        return returnColumns.map(function (item) {
+            if (item.filters && !item.filterIcon) {
+                item.filterIcon = (React.createElement(DownOutlined, { type: "icon-xiajiantou", style: { fontWeight: 500 } }));
+            }
+            if (item.ellipsis === false) {
+                item.ellipsis = false;
+            }
+            else {
+                var ellipsisConfig = item.ellipsis || {};
+                item.ellipsis = __assign({ showTitle: false }, ellipsisConfig);
+                if (!item.render) {
+                    item.render = renderDefaultColumn;
+                }
+            }
+            return item;
+        });
+    }, [order, visibleItems, columns]);
+    var paginationProps = useMemo(function () {
+        if (props.pagination) {
+            return __assign(__assign({}, (pagination || {})), { showTotal: function () {
+                    return dataSource && dataSource.length > 0 && (React.createElement(Footer, __assign({}, props)));
+                } });
+        }
+        else {
+            return false;
+        }
+    }, [pagination]);
+    useEffect(function () {
+        initColumnsSort();
+    }, []);
+    return (React.createElement("div", { className: "table-wrapper", style: { position: 'relative' }, ref: ref },
+        React.createElement(Table, __assign({ ref: tableRef, scroll: {
+                x: 900
+            } }, props, { pagination: paginationProps, columns: renderColumns }))));
+}
+export default React.forwardRef(Index);

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

@@ -0,0 +1,63 @@
+import type React from 'react';
+import { type TableProps, type TableColumnType } from 'antd';
+import { type ColumnTitleProps } from 'antd/es/table/interface';
+import type { AnyObject } from 'antd/es/_util/type';
+export type { AnyObject } from 'antd/es/_util/type';
+export type { ColumnTitleProps } from 'antd/es/table/interface';
+export interface TableCache {
+    order: string[];
+    visibleItems: string[];
+}
+export interface ColumnType<RecordType> extends Omit<TableColumnType<RecordType>, 'title' | 'fixed'> {
+    /**
+     * 控制该字段是否支持排序，列表 columnsSort 为 true 时有效
+     * （columnSortDisabled，尽量只给首尾字段加，中间的字段加了用处不大）
+     */
+    columnSortDisabled?: boolean;
+    /**
+     * 控制是否支持字段的显示隐藏功能
+     */
+    columnVisibleDisabled?: boolean;
+    /**
+     * 字段的显示隐藏属性
+     */
+    columnVisible?: boolean;
+    /**
+     * 字段id
+     */
+    dataIndex: string | string[];
+    /**
+     * 字段id
+     */
+    fixed?: 'left' | 'right' | boolean | string;
+    /**
+     * 标题
+     */
+    title?: React.ReactNode | ((props: ColumnTitleProps<RecordType>) => React.ReactNode);
+}
+export interface ColumnGroupType<RecordType = AnyObject> extends Omit<ColumnType<RecordType>, 'dataIndex'> {
+    children: TableComponentProps<RecordType>['columns'];
+}
+export type ColumnTypes<RecordType = AnyObject> = ColumnType<RecordType> | ColumnGroupType<RecordType>;
+export interface TableComponentProps<RecordType = AnyObject> extends Omit<TableProps<RecordType>, 'columns'> {
+    /**
+     * 列表项
+     */
+    columns?: Array<ColumnTypes<RecordType>>;
+    /**
+     * 是否打开列表字段排序功能
+     */
+    columnsSort?: boolean;
+    /**
+     * 是否打开列表字段的显示隐藏属性
+     */
+    columnsVisible?: boolean;
+    /**
+     * 列表唯一值，用来处理一个页面多个列表且同时开启字段排序或字段隐藏功能
+     */
+    tableId?: string;
+    /**
+     * 中间的批量操作弹出层
+     */
+    selectionPopover?: React.ReactNode;
+}

package/build/es/components/Table/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -62,7 +62,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconButton = void 0;
 var react_1 = __importStar(require("react"));
 var antd_1 = require("antd");
 var lodash_es_1 = require("lodash-es");
@@ -83,7 +82,7 @@ var ButtonTooltip = function (_a) {
         return (react_1.default.createElement(antd_1.Tooltip, __assign({ title: disabled ? disabledReason || title : title }, attrs), children));
     }
 };
-exports.IconButton = react_1.default.forwardRef(function (props, ref) {
+var IconButton = function (props, ref) {
     var iconButton = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).iconButton;
     var Icon = props.icon, _a = props.tooltipDisabled, tooltipDisabled = _a === void 0 ? false : _a, title = props.title, _b = props.hide, hide = _b === void 0 ? false : _b, disabledReason = props.disabledReason, _c = props.onClick, onClick = _c === void 0 ? lodash_es_1.noop : _c, disabled = props.disabled, _d = props.size, size = _d === void 0 ? iconButton.size || 'small' : _d, _e = props.style, style = _e === void 0 ? {} : _e, className = props.className, _f = props.loading, loading = _f === void 0 ? false : _f, attrs = __rest(props, ["icon", "tooltipDisabled", "title", "hide", "disabledReason", "onClick", "disabled", "size", "style", "className", "loading"]);
     var createIcon = function () {
@@ -101,6 +100,6 @@ exports.IconButton = react_1.default.forwardRef(function (props, ref) {
     return (react_1.default.createElement(IconButtonRender, __assign({}, props),
         react_1.default.createElement(ButtonTooltip, __assign({ tooltipDisabled: tooltipDisabled, hide: hide, disabled: disabled, disabledReason: disabledReason, title: title }, attrs),
             react_1.default.createElement(StyledButton, { ref: ref, icon: createIcon(), size: size, className: (0, classnames_1.default)(['icon-button', iconButton.className, className]), disabled: disabled, style: __assign(__assign({}, iconButton.style), style), loading: loading, onClick: onClick }))));
-});
-exports.default = exports.IconButton;
+};
+exports.default = react_1.default.forwardRef(IconButton);
 var templateObject_1;