@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/es/components/Table/type.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
+export interface IOptionItem {
+    /**
+     * 操作名称
+     */
+    text: string;
+    /**
+     * 点击后的操作
+     */
+    onClick?: (selectedRowKeys: any[]) => void;
+    /**
+     * 禁用当前操作
+     */
+    disabled?: boolean | ((selectItems: any[]) => boolean);
+}
+export interface ISaveFieldItem {
+    field: string;
+    hide?: boolean;
+    width?: number;
+    index?: number;
+    fixed?: boolean | 'right' | 'left';
+}
+export declare enum ETableSettingType {
+    SORT = "sort",
+    RESIZE = "resize"
+}
+export interface IColumnType<T> extends ColumnType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+    resizable?: boolean;
+}
+export interface IColumnGroupType<T> extends ColumnGroupType<T> {
+    colTitle?: string | React.ReactNode;
+    configurable?: boolean;
+    resizable?: boolean;
+}
+export declare type IColumnsType<T> = Array<IColumnGroupType<T> | IColumnType<T>>;
+export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
+    columns?: IColumnsType<T>;
+    /**
+     * 设置selectedRow选项, 可以获取当前选中的所有
+     * 数据.
+     * 若不传该参数, 翻页后(服务端翻页)数据会丢失, 外层只会获取当前页选中的数据
+     */
+    selectedRows?: T[];
+    /** 如果支持多选，则batchOptions为多选时的一些批量操作，如删除、添加等 */
+    batchOptions?: IOptionItem[];
+    emptyText?: React.ReactNode;
+    showColumnSetting?: boolean;
+    hiddenColumns?: string[];
+    onHiddenColumnsChange?: (keys: string[]) => void;
+    columnSettingOverlayClass?: string;
+    draggable?: boolean | ETableSettingType;
+    saveSettingKey?: string;
+    onSettingChange?: (fields: ISaveFieldItem[]) => void;
+    /**
+     * 是否需要填充空白列, 默认为true
+     * 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，会把剩余空间平均分到每一列上。那么拖拽一列会导致其他列的宽度都发生变更
+     * 添加一个空白列，宽度auto.可以解决此问题。如果可以接受上述问题，那就无需空白列，needEmptyColumn = false
+     */
+    needEmptyColumn?: boolean;
+}

package/es/components/Table/type.js

@@ -0,0 +1,5 @@
+export var ETableSettingType;
+(function (ETableSettingType) {
+    ETableSettingType["SORT"] = "sort";
+    ETableSettingType["RESIZE"] = "resize";
+})(ETableSettingType || (ETableSettingType = {}));

package/es/components/Table/util.d.ts

@@ -0,0 +1,58 @@
+import { IColumnsType, IColumnType, ISaveFieldItem } from './type';
+/**
+ * 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
+ * 空白列添加到右固定列的前面
+ * @param columns 列
+ * @param hiddenColumns 隐藏列
+ * @param needEmptyColumn 是否需要填充空白列， 默认需要填充
+ * @returns
+ */
+export declare function addEmptyColumn(columns: IKeyValues[], hiddenColumns?: string[], needEmptyColumn?: boolean): IKeyValues<any>[];
+/**
+ *
+ * @param columns 原始数据
+ * @param settingFields 已配置的列
+ * @param hiddenColumns 默认隐藏的列
+ * @returns sortableColumns 排序的列
+ * @returns hiddenColumns 隐藏的列
+ */
+export declare function getSortAndHiddenKeys<T>(columns: Array<IColumnType<T>>, settingFields: ISaveFieldItem[], hiddenColumns?: string[]): {
+    sortableColumns: ISaveFieldItem[];
+    hiddenColumns: string[];
+};
+/**
+ * 对列做排序（疑问： 是否可以只对key 排序，不影响其他内容）
+ * 重申此函数的意义，跑排序table的columns
+ *
+ * @param source 原始数组
+ * @param sortKeys 排序的列
+ * @param hiddenColumn 隐藏的列
+ * @returns 返回排序后的列
+ */
+export declare function getSortedCoulmns(source: IKeyValues[], sortKeys: string[], hiddenColumn: string[]): IKeyValues<any>[];
+/**
+ *
+ * @param source 列数组
+ * @returns allKeys 所有列的key, unconfigableKeys: 不能配置的列  resetKeys 可以配置的
+ */
+export declare function getColumnKeys(source: IKeyValues[]): {
+    allKeys: string[];
+    unconfigableKeys: string[];
+    resetKeys: string[];
+};
+/**
+ *
+ * @param columns 原始的列
+ * @param saveFields 配置信息
+ * @returns
+ */
+export declare function getResizeColumns<T>(columns: IKeyValues[], settingFields: ISaveFieldItem[], resizable: boolean, handleResize: (col: IColumnType<T>, size: {
+    width: number;
+    height: number;
+}, oldColumn: IColumnsType<T>) => void): IKeyValues<any>[];
+/**
+ *
+ * @param saveSettingKey 配置key
+ * @returns 返回localStorage 配置信息
+ */
+export declare function getLocalSettings(saveSettingKey?: string): ISaveFieldItem[];

package/es/components/Table/util.js

@@ -0,0 +1,218 @@
+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 __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __spread = (this && this.__spread) || function () {
+    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
+    return ar;
+};
+import { get, includes, isNumber, uniq, isArray } from 'lodash';
+/**
+ * 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
+ * 空白列添加到右固定列的前面
+ * @param columns 列
+ * @param hiddenColumns 隐藏列
+ * @param needEmptyColumn 是否需要填充空白列， 默认需要填充
+ * @returns
+ */
+export function addEmptyColumn(columns, hiddenColumns, needEmptyColumn) {
+    if (hiddenColumns === void 0) { hiddenColumns = []; }
+    var cols = hiddenColumns.length === 0
+        ? columns
+        : columns.filter(function (col) { return !includes(hiddenColumns, col.dataIndex); });
+    if (needEmptyColumn === false)
+        return cols;
+    var firstFixedRightIndex = cols.findIndex(function (item) { return get(item, 'fixed') === 'right'; });
+    var column = {
+        title: '',
+        dataIndex: '__empty__',
+        key: '__empty__'
+    };
+    if (firstFixedRightIndex === -1) {
+        cols.push(column);
+    }
+    else {
+        cols.splice(firstFixedRightIndex, 0, column);
+    }
+    return cols;
+}
+// 根据列，以及之前存储的列的一些信息，获取那些列需要隐藏，那些列可以排序
+/**
+ *
+ * @param columns 原始数据
+ * @param settingFields 已配置的列
+ * @param hiddenColumns 默认隐藏的列
+ * @returns sortableColumns 排序的列
+ * @returns hiddenColumns 隐藏的列
+ */
+export function getSortAndHiddenKeys(columns, settingFields, hiddenColumns) {
+    if (hiddenColumns === void 0) { hiddenColumns = []; }
+    var sortableColumns = [];
+    var hideKeys = [];
+    // 已配置的列和实际的对不上
+    // 可能新增或者删除列的情况
+    // 已配置列
+    // 旧类型数据为对象类型，未配置
+    columns.forEach(function (column) {
+        if (column.dataIndex && !(column.fixed || column.configurable === false)) {
+            var settingField = settingFields.find(function (field) { return field.field === column.dataIndex; });
+            if (settingField) {
+                if (settingField.hide) {
+                    hideKeys.push(settingField.field);
+                }
+                else {
+                    sortableColumns.push(settingField);
+                }
+            }
+            else {
+                sortableColumns.push({
+                    field: column.dataIndex.toString(),
+                    fixed: column.fixed
+                });
+            }
+        }
+    });
+    return {
+        sortableColumns: sortableColumns,
+        hiddenColumns: uniq(hiddenColumns.concat(hideKeys))
+    };
+}
+/**
+ * 对列做排序（疑问： 是否可以只对key 排序，不影响其他内容）
+ * 重申此函数的意义，跑排序table的columns
+ *
+ * @param source 原始数组
+ * @param sortKeys 排序的列
+ * @param hiddenColumn 隐藏的列
+ * @returns 返回排序后的列
+ */
+export function getSortedCoulmns(source, sortKeys, hiddenColumn) {
+    var fixedRightColumn = [];
+    var fixedLeftColumn = [];
+    var selectedCols = [];
+    var unconfigurableCols = [];
+    source.forEach(function (column) {
+        if (column.fixed === 'left' || column.fixed === true) {
+            fixedLeftColumn.push(column);
+        }
+        else if (column.fixed === 'right') {
+            fixedRightColumn.push(column);
+        }
+        else if (column.configurable === false) {
+            unconfigurableCols.push(column);
+        }
+        else if (!includes(hiddenColumn, column.key)) {
+            selectedCols.push(column);
+        }
+    });
+    var sortColumns = sortKeys
+        .map(function (key) { return source.find(function (column) { return column.dataIndex === key; }); })
+        .filter(function (f) { return !!f; });
+    // 顺序应该是： 左固定列、不可配置列、排序列、右固定列
+    return __spread(fixedLeftColumn, unconfigurableCols, sortColumns, fixedRightColumn);
+}
+/**
+ *
+ * @param source 列数组
+ * @returns allKeys 所有列的key, unconfigableKeys: 不能配置的列  resetKeys 可以配置的
+ */
+export function getColumnKeys(source) {
+    var allKeys = [];
+    var unconfigableKeys = [];
+    var resetKeys = [];
+    source.forEach(function (col) {
+        if (col.key) {
+            // 不可配置，或者列固定的列，（在这里统称不可配置的列）
+            if (col.configurable === false || col.fixed) {
+                unconfigableKeys.push(col.key.toString());
+            }
+            else {
+                resetKeys.push(col.key.toString());
+            }
+            allKeys.push(col.key.toString());
+        }
+    });
+    return {
+        allKeys: allKeys,
+        unconfigableKeys: unconfigableKeys,
+        resetKeys: resetKeys
+    };
+}
+/**
+ *
+ * @param columns 原始的列
+ * @param saveFields 配置信息
+ * @returns
+ */
+export function getResizeColumns(columns, settingFields, resizable, handleResize) {
+    // debugger
+    if (!resizable && settingFields.length === 0)
+        return columns;
+    var transformColumns = columns.map(function (col, index) {
+        var _a;
+        var dataIndex = get(col, 'dataIndex');
+        var width = (_a = settingFields === null || settingFields === void 0 ? void 0 : settingFields.find(function (f) { return f.field === dataIndex; })) === null || _a === void 0 ? void 0 : _a.width;
+        if (get(col, 'resizable') && resizable) {
+            return __assign(__assign({}, col), { width: isNumber(width) ? width : get(col, 'width'), ellipsis: {
+                    showTitle: true
+                }, onHeaderCell: function (col) {
+                    var _a;
+                    return ({
+                        width: col.width,
+                        // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
+                        onResize: function (_, _a) {
+                            var size = _a.size;
+                            handleResize(col, size, transformColumns);
+                        },
+                        isLastColumn: index === ((_a = (columns || [])) === null || _a === void 0 ? void 0 : _a.length) - 1
+                    });
+                } });
+        }
+        return isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
+    });
+    return transformColumns;
+}
+/**
+ *
+ * @param saveSettingKey 配置key
+ * @returns 返回localStorage 配置信息
+ */
+export function getLocalSettings(saveSettingKey) {
+    var settingFields = [];
+    if (saveSettingKey) {
+        try {
+            var settingStr = localStorage.getItem(saveSettingKey);
+            var settingConfig = !!settingStr && JSON.parse(settingStr);
+            if (isArray(settingConfig)) {
+                settingFields = settingConfig;
+            }
+        }
+        catch (error) {
+            throw new Error("parse " + saveSettingKey + " error: " + error + ", please check the data format");
+        }
+    }
+    return settingFields;
+}