@qn-pandora/pandora-component 5.1.1 → 5.1.2

package/lib/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/lib/components/Table/type.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ETableSettingType = void 0;
+var ETableSettingType;
+(function (ETableSettingType) {
+    ETableSettingType["SORT"] = "sort";
+    ETableSettingType["RESIZE"] = "resize";
+})(ETableSettingType = exports.ETableSettingType || (exports.ETableSettingType = {}));

package/lib/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/lib/components/Table/util.js

@@ -0,0 +1,227 @@
+"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 __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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLocalSettings = exports.getResizeColumns = exports.getColumnKeys = exports.getSortedCoulmns = exports.getSortAndHiddenKeys = exports.addEmptyColumn = void 0;
+var lodash_1 = require("lodash");
+/**
+ * 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
+ * 空白列添加到右固定列的前面
+ * @param columns 列
+ * @param hiddenColumns 隐藏列
+ * @param needEmptyColumn 是否需要填充空白列， 默认需要填充
+ * @returns
+ */
+function addEmptyColumn(columns, hiddenColumns, needEmptyColumn) {
+    if (hiddenColumns === void 0) { hiddenColumns = []; }
+    var cols = hiddenColumns.length === 0
+        ? columns
+        : columns.filter(function (col) { return !lodash_1.includes(hiddenColumns, col.dataIndex); });
+    if (needEmptyColumn === false)
+        return cols;
+    var firstFixedRightIndex = cols.findIndex(function (item) { return lodash_1.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;
+}
+exports.addEmptyColumn = addEmptyColumn;
+// 根据列，以及之前存储的列的一些信息，获取那些列需要隐藏，那些列可以排序
+/**
+ *
+ * @param columns 原始数据
+ * @param settingFields 已配置的列
+ * @param hiddenColumns 默认隐藏的列
+ * @returns sortableColumns 排序的列
+ * @returns hiddenColumns 隐藏的列
+ */
+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: lodash_1.uniq(hiddenColumns.concat(hideKeys))
+    };
+}
+exports.getSortAndHiddenKeys = getSortAndHiddenKeys;
+/**
+ * 对列做排序（疑问： 是否可以只对key 排序，不影响其他内容）
+ * 重申此函数的意义，跑排序table的columns
+ *
+ * @param source 原始数组
+ * @param sortKeys 排序的列
+ * @param hiddenColumn 隐藏的列
+ * @returns 返回排序后的列
+ */
+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 (!lodash_1.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);
+}
+exports.getSortedCoulmns = getSortedCoulmns;
+/**
+ *
+ * @param source 列数组
+ * @returns allKeys 所有列的key, unconfigableKeys: 不能配置的列  resetKeys 可以配置的
+ */
+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
+    };
+}
+exports.getColumnKeys = getColumnKeys;
+/**
+ *
+ * @param columns 原始的列
+ * @param saveFields 配置信息
+ * @returns
+ */
+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 = lodash_1.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 (lodash_1.get(col, 'resizable') && resizable) {
+            return __assign(__assign({}, col), { width: lodash_1.isNumber(width) ? width : lodash_1.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 lodash_1.isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
+    });
+    return transformColumns;
+}
+exports.getResizeColumns = getResizeColumns;
+/**
+ *
+ * @param saveSettingKey 配置key
+ * @returns 返回localStorage 配置信息
+ */
+function getLocalSettings(saveSettingKey) {
+    var settingFields = [];
+    if (saveSettingKey) {
+        try {
+            var settingStr = localStorage.getItem(saveSettingKey);
+            var settingConfig = !!settingStr && JSON.parse(settingStr);
+            if (lodash_1.isArray(settingConfig)) {
+                settingFields = settingConfig;
+            }
+        }
+        catch (error) {
+            throw new Error("parse " + saveSettingKey + " error: " + error + ", please check the data format");
+        }
+    }
+    return settingFields;
+}
+exports.getLocalSettings = getLocalSettings;

package/lib/components/Tabs/style.css

@@ -393,10 +393,10 @@
   cursor: pointer;
 }
 .ant-tabs-dropdown-menu-item-remove:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-dropdown-menu-item:hover {
-  background: rgba(44, 109, 210, 0.05);
+  background: rgba(67, 107, 255, 0.05);
 }
 .ant-tabs-dropdown-menu-item-disabled,
 .ant-tabs-dropdown-menu-item-disabled:hover {
@@ -415,7 +415,7 @@
 }
 .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
 .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
-  color: #7a869a;
+  color: #436bff;
   background: #ffffff;
 }
 .ant-tabs-card > .ant-tabs-nav .ant-tabs-ink-bar,
@@ -582,13 +582,13 @@
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:hover,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:focus,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:focus {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-extra-content {
   -webkit-box-flex: 0;
@@ -603,7 +603,7 @@
 }
 .ant-tabs-ink-bar {
   position: absolute;
-  background: #2c6dd2;
+  background: #436bff;
   pointer-events: none;
 }
 .ant-tabs-tab {
@@ -625,7 +625,7 @@
 .ant-tabs-tab-remove:focus,
 .ant-tabs-tab-btn:active,
 .ant-tabs-tab-remove:active {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-tab-btn {
   outline: none;
@@ -651,10 +651,10 @@
   color: #333;
 }
 .ant-tabs-tab:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: #2c6dd2;
+  color: #436bff;
   text-shadow: 0 0 0.25px currentcolor;
 }
 .ant-tabs-tab.ant-tabs-tab-disabled {
@@ -1034,5 +1034,5 @@
           transform: translateY(-50%);
 }
 .pandora-sdk-tabs .pandora-sdk-tabs-refresh-icon:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }

package/lib/components/Tabs/style.less

@@ -1,33 +1,33 @@
-@import 'antd/lib/tabs/style/index.less';
-@import 'antd/lib/tooltip/style/index.less';
-@import '../../style/theme.less';
-@import '../../style/mixin.less';
-
-.@{sdk-prefix}-tabs {
-  .@{sdk-prefix}-tabs-tab {
-    position: relative;
-  }
-  .@{sdk-prefix}-tabs-active {
-    .@{sdk-prefix}-tabs-refresh-icon {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-  span.anticon.anticon-reload.@{sdk-prefix}-tabs-refresh-icon {
-    margin-right: 0;
-  }
-  .@{sdk-prefix}-tabs-refresh-icon {
-    margin-left: 8px;
-    font-size: 12px;
-    color: @font-disable-color;
-    transition: color 0.5s, opacity 0.2s;
-    pointer-events: none;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      color: @theme-color;
-    }
-  }
-}
+@import 'antd/lib/tabs/style/index.less';
+@import 'antd/lib/tooltip/style/index.less';
+@import '../../style/theme.less';
+@import '../../style/mixin.less';
+
+.@{sdk-prefix}-tabs {
+  .@{sdk-prefix}-tabs-tab {
+    position: relative;
+  }
+  .@{sdk-prefix}-tabs-active {
+    .@{sdk-prefix}-tabs-refresh-icon {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  span.anticon.anticon-reload.@{sdk-prefix}-tabs-refresh-icon {
+    margin-right: 0;
+  }
+  .@{sdk-prefix}-tabs-refresh-icon {
+    margin-left: 8px;
+    font-size: 12px;
+    color: @font-disable-color;
+    transition: color 0.5s, opacity 0.2s;
+    pointer-events: none;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      color: @theme-color;
+    }
+  }
+}

package/lib/components/TagList/Tag/style.css

@@ -11,7 +11,7 @@
 .pandora-sdk-root .pandora-sdk-prefix {
   position: relative;
   min-width: 24px;
-  color: rgba(44, 109, 210, 0.6);
+  color: rgba(67, 107, 255, 0.6);
   float: left;
 }
 .pandora-sdk-root .pandora-sdk-prefix::after {
@@ -22,12 +22,12 @@
   margin: auto;
   content: '';
   height: 16px;
-  border-left: 1px solid rgba(44, 109, 210, 0.1);
+  border-left: 1px solid rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root .pandora-sdk-suffix {
   position: relative;
   min-width: 24px;
-  color: rgba(44, 109, 210, 0.6);
+  color: rgba(67, 107, 255, 0.6);
   float: right;
 }
 .pandora-sdk-root .pandora-sdk-suffix::before {
@@ -38,7 +38,7 @@
   margin: auto;
   content: '';
   height: 16px;
-  border-left: 1px solid rgba(44, 109, 210, 0.1);
+  border-left: 1px solid rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root .pandora-sdk-content {
   padding: 0 8px;
@@ -50,7 +50,7 @@
   font-size: 14px;
 }
 .pandora-sdk-root.pandora-sdk-primary {
-  background: rgba(44, 109, 210, 0.1);
+  background: rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root.pandora-sdk-green {
   background: rgba(32, 201, 151, 0.1);

package/lib/components/TagList/Tag/style.less

@@ -1,72 +1,72 @@
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-root {
-  display: inline-block;
-  line-height: 24px;
-  margin-right: 8px;
-  border-radius: 1px;
-  color: @font-color-7;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: @border-radius-base;
-
-  .@{sdk-prefix}-prefix {
-    position: relative;
-    min-width: 24px;
-    color: @theme-color-060;
-    float: left;
-    &::after {
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-      margin: auto;
-      content: '';
-      height: 16px;
-      border-left: 1px solid @theme-color-010;
-    }
-  }
-
-  .@{sdk-prefix}-suffix {
-    position: relative;
-    min-width: 24px;
-    color: @theme-color-060;
-    float: right;
-    &::before {
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-      margin: auto;
-      content: '';
-      height: 16px;
-      border-left: 1px solid @theme-color-010;
-    }
-  }
-
-  .@{sdk-prefix}-content {
-    padding: 0 8px;
-    max-width: 150px;
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 14px;
-  }
-
-  &.@{sdk-prefix}-primary {
-    background: fade(@tag-primary, 10%);
-  }
-  &.@{sdk-prefix}-green {
-    background: fade(@tag-green, 10%);
-  }
-  &.@{sdk-prefix}-yellow {
-    background: fade(@tag-yellow, 10%);
-  }
-  &.@{sdk-prefix}-blue {
-    background: fade(@tag-blue, 10%);
-  }
-  &.@{sdk-prefix}-grey {
-    background: @tag-grey;
-  }
-}
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-root {
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  border-radius: 1px;
+  color: @font-color-7;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: @border-radius-base;
+
+  .@{sdk-prefix}-prefix {
+    position: relative;
+    min-width: 24px;
+    color: @theme-color-060;
+    float: left;
+    &::after {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+      margin: auto;
+      content: '';
+      height: 16px;
+      border-left: 1px solid @theme-color-010;
+    }
+  }
+
+  .@{sdk-prefix}-suffix {
+    position: relative;
+    min-width: 24px;
+    color: @theme-color-060;
+    float: right;
+    &::before {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      margin: auto;
+      content: '';
+      height: 16px;
+      border-left: 1px solid @theme-color-010;
+    }
+  }
+
+  .@{sdk-prefix}-content {
+    padding: 0 8px;
+    max-width: 150px;
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
+
+  &.@{sdk-prefix}-primary {
+    background: fade(@tag-primary, 10%);
+  }
+  &.@{sdk-prefix}-green {
+    background: fade(@tag-green, 10%);
+  }
+  &.@{sdk-prefix}-yellow {
+    background: fade(@tag-yellow, 10%);
+  }
+  &.@{sdk-prefix}-blue {
+    background: fade(@tag-blue, 10%);
+  }
+  &.@{sdk-prefix}-grey {
+    background: @tag-grey;
+  }
+}