@qn-pandora/pandora-component 5.1.1 → 5.1.3

package/lib/components/Table/ColumnSetting/index.js

@@ -56,8 +56,17 @@ var style_1 = require("../../../constants/style");
 var NameLimiter_1 = __importDefault(require("../../NameLimiter"));
 var Input_1 = __importDefault(require("../../Input"));
 exports.All = '_all';
+function Item(_a) {
+    var item = _a.item, checked = _a.checked, onChange = _a.onChange, sortable = _a.sortable;
+    return (react_1.default.createElement("div", { key: item.value, "data-id": item.value },
+        react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-checkbox-container" },
+            sortable && (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-dragholder" },
+                react_1.default.createElement(icons_1.HolderOutlined, null))),
+            react_1.default.createElement(antd_1.Checkbox, { checked: checked, value: item.value, className: style_1.SDK_PREFIX + "-table-column-setting-checkbox", onChange: onChange },
+                react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (react_1.default.createElement(NameLimiter_1.default, { name: item.label })) : (item.label))))));
+}
 function ColumnSetting(props) {
-    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, onMove = props.onMove, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading;
+    var overlayClass = props.overlayClass, _a = props.hiddenKeys, hiddenKeys = _a === void 0 ? [] : _a, onHiddenKeysChange = props.onHiddenKeysChange, onMove = props.onMove, _b = props.options, options = _b === void 0 ? [] : _b, loading = props.loading, sortable = props.sortable;
     var locale = react_1.useContext(config_provider_1.ConfigContext).locale;
     var _c = __read(react_1.useState(''), 2), prefix = _c[0], setPrefix = _c[1];
     var allKeys = react_1.useMemo(function () {
@@ -106,19 +115,15 @@ function ColumnSetting(props) {
                     react_1.default.createElement(antd_1.Checkbox, { value: exports.All, checked: hiddenKeys.length === 0, onChange: allCheckChange, className: style_1.SDK_PREFIX + "-table-column-setting-all-check" }, language_1.formatString(type_1.TableLocale.check_all, locale)),
                     react_1.default.createElement(Input_1.default, { value: prefix, allowClear: true, onChange: handlePrefixChange, placeholder: language_1.formatString(type_1.TableLocale.search, locale), className: style_1.SDK_PREFIX + "-table-column-setting-search-input" })),
                 react_1.default.createElement("div", null,
-                    react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-content" },
-                        react_1.default.createElement(ReactSortable_1.default, { onChange: onMove, options: {
-                                group: 'setting-config',
-                                animation: 150,
-                                preventOnFilter: false
-                            } }, realOptions.map(function (item) {
-                            return (react_1.default.createElement("div", { key: item.value, "data-id": item.value },
-                                react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-checkbox-container" },
-                                    react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-dragholder" },
-                                        react_1.default.createElement(icons_1.HolderOutlined, null)),
-                                    react_1.default.createElement(antd_1.Checkbox, { checked: !!realValues.find(function (v) { return v === item.value; }), value: item.value, className: style_1.SDK_PREFIX + "-table-column-setting-checkbox", onChange: handleChange },
-                                        react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-column-setting-value" }, typeof item.label === 'string' ? (react_1.default.createElement(NameLimiter_1.default, { name: item.label })) : (item.label))))));
-                        })))))) },
+                    react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-column-setting-content" }, sortable ? (react_1.default.createElement(ReactSortable_1.default, { onChange: onMove, options: {
+                            group: 'setting-config',
+                            animation: 150,
+                            preventOnFilter: false
+                        } }, realOptions.map(function (item) {
+                        return (react_1.default.createElement(Item, { item: item, checked: !!realValues.find(function (v) { return v === item.value; }), sortable: true, onChange: handleChange, key: item.value.toString() }));
+                    }))) : (react_1.default.createElement("div", null, realOptions.map(function (item) {
+                        return (react_1.default.createElement(Item, { item: item, checked: !!realValues.find(function (v) { return v === item.value; }), sortable: false, onChange: handleChange, key: item.value.toString() }));
+                    }))))))) },
         react_1.default.createElement(icons_1.SettingOutlined, { className: style_1.SDK_PREFIX + "-table-column-setting-icon", onClick: function (e) {
                 e.stopPropagation();
                 e.preventDefault();

package/lib/components/Table/ColumnTag/style.css

@@ -1,9 +1,9 @@
 .pandora-sdk-table-columnTag-groupTag {
   padding: 4px;
   height: 24px;
-  background: rgba(44, 109, 210, 0.1);
+  background: rgba(67, 107, 255, 0.1);
   margin-right: 4px;
-  color: #7a869a;
+  color: #436bff;
   white-space: nowrap;
   font-size: 12px;
   margin-top: 4px;
@@ -25,8 +25,8 @@
   cursor: pointer;
 }
 .pandora-sdk-table-columnTag-moreTagsIcon:hover {
-  color: #2c6dd2;
-  border-color: #2c6dd2;
+  color: #436bff;
+  border-color: #436bff;
 }
 .pandora-sdk-table-columnTag-tagPopoverContainer {
   padding: 6px 10px 10px 10px;

package/lib/components/Table/EmptyText.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { Locale } from 'antd/es/locale-provider';
+declare function EmptyTextComp({ emptyText, locale }: {
+    emptyText?: React.ReactNode;
+    locale: Locale | undefined;
+}): React.JSX.Element;
+export default EmptyTextComp;

package/lib/components/Table/EmptyText.js

@@ -0,0 +1,27 @@
+"use strict";
+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 language_1 = require("../../utils/language");
+var style_1 = require("../../constants/style");
+var type_1 = require("../../constants/language/table/type");
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
+function EmptyTextComp(_a) {
+    var emptyText = _a.emptyText, locale = _a.locale;
+    if (!emptyText) {
+        return (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
+            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
+                react_1.default.createElement(pandora_component_icons_1.EmptyIcon, null)),
+            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, language_1.formatString(type_1.TableLocale.empty, locale))));
+    }
+    if (typeof emptyText === 'string' || typeof emptyText === 'number') {
+        return (react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty" },
+            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-icon" },
+                react_1.default.createElement(pandora_component_icons_1.EmptyIcon, null)),
+            react_1.default.createElement("div", { className: style_1.SDK_PREFIX + "-table-empty-text" }, emptyText)));
+    }
+    return emptyText;
+}
+exports.default = EmptyTextComp;

package/lib/components/Table/ResizableTitle/index.js

@@ -75,7 +75,14 @@ var ResizableTitle = function (props) {
             setWidth(contentRef.current.offsetWidth);
         }
     }, [width]);
+    // 阻止事件冒泡的处理函数
+    var handleDragStart = function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+    };
     var handleResize = function (event, params) {
+        event.preventDefault();
+        event.stopPropagation();
         setWidth(params.size.width);
         onResize(event, params);
     };
@@ -83,10 +90,13 @@ var ResizableTitle = function (props) {
     if (!onResize || isLastColumn) {
         return (react_1.default.createElement("th", __assign({}, restProps, { className: classnames_1.default(className, style_1.SDK_PREFIX + "-table-resizable-th") })));
     }
-    return (react_1.default.createElement(react_resizable_1.Resizable, { axis: "x", width: width, className: style_1.SDK_PREFIX + "-table-resizable-Resizable", height: 0, onResize: handleResize, minConstraints: [40, 0], draggableOpts: { enableUserSelectHack: false }, handle: react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-resizable-handle", onClick: function (e) {
+    return (react_1.default.createElement(react_resizable_1.Resizable, { axis: "x", width: width, className: style_1.SDK_PREFIX + "-table-resizable-Resizable", height: 0, onResize: handleResize, minConstraints: [60, 0], draggableOpts: {
+            enableUserSelectHack: false,
+            onMouseDown: handleDragStart
+        }, maxConstraints: [500, 100], handle: react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-resizable-handle", onClick: function (e) {
                 e.preventDefault();
                 e.stopPropagation();
-            } },
+            }, onMouseDown: handleDragStart },
             react_1.default.createElement(pandora_component_icons_1.Resizable, null)) },
         react_1.default.createElement("th", __assign({}, restProps, { className: classnames_1.default(className, style_1.SDK_PREFIX + "-table-resizable-th"), ref: contentRef }))));
 };

package/lib/components/Table/index.d.ts

@@ -1,73 +1,13 @@
 import * as React from 'react';
-import { TableProps, ColumnType, ColumnGroupType } from 'antd/es/table';
 import type { TableRowSelection, RowSelectMethod } from 'antd/es/table/interface';
 import { IOption } from './ColumnSetting';
+import { ITableProps, ISaveFieldItem, IColumnType, IOptionItem, IColumnsType } from './type';
+export * from './type';
 /**
  * 表格提供自定义多选, 通过 rowSelection对象的selectedRowKeys和onChange来控制多选的状态
  * 需要注意的是, 当在外部进行增删改或者外部需要控制选择状态时, 例如删除之后清空全选状态, 需要受控
  * 传入selectedRowKeys值。
  */
-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;
-}
 /**
  * pandora2.0风格的表格
  */
@@ -82,50 +22,38 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     indeterminate: boolean;
     checkAll: boolean;
     hiddenColumn: string[] | undefined;
-    columns: IKeyValues[];
+    columns: IKeyValues[] | undefined;
     sortConfig: {
         sortKeys: string[];
     };
     settingFields: ISaveFieldItem[];
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
     componentWillUnmount(): void;
-    get selectedRowKeys(): React.ReactText[];
+    get selectedRowKeys(): React.Key[];
     get rowSelection(): TableRowSelection<T> | undefined;
     get undisabledData(): readonly T[];
     get keysOfCurrentPage(): any[];
-    get emptyTextComp(): {};
     get columnsSettingOptions(): IOption[];
     get columnKeys(): {
         allKeys: string[];
         unconfigableKeys: string[];
         resetKeys: string[];
     };
-    get resizable(): false | ({
-        x?: string | number | true | undefined;
-        y?: string | number | undefined; /**
-         * 禁用当前操作
-         */
-    } & {
-        scrollToFirstRowOnChange?: boolean | undefined;
-    }) | undefined;
+    get resizable(): boolean;
     get sortable(): boolean;
     get showSetting(): boolean;
-    updateSettingConfig(columns: Array<IColumnType<T>>): void;
     initSettingConfig(): void;
-    updateSettingFields(columns: Array<IColumnType<T>>, settingFields: ISaveFieldItem[]): void;
+    updateSettingFields(columns: Array<IColumnType<T>>, settingFields: ISaveFieldItem[], hiddenColumns: string[]): void;
     handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
-    getSortedColumns(): IKeyValues<any>[];
-    transfromColumns(columns: IKeyValues[], needEmptyColumn?: boolean): IKeyValues<any>[];
-    getColumns(): IKeyValues<any>[];
+    getColumns(): IKeyValues<any>[] | undefined;
     getRowKey(row: any, index: number): any;
-    sortCoulmns(columns: IKeyValues[]): IKeyValues<any>[];
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;
     setHiddenColumn(hiddenColumn?: string[]): void;
-    setColumns(columns: IKeyValues[]): void;
+    setColumns(columns: IKeyValues[] | undefined): void;
     setSortKeys(columns: string[]): void;
     setSettingFields(columns: ISaveFieldItem[]): void;
-    setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
+    setCheckboxStatus(selectedRowsOfCurrentPage: T[] | undefined, dataSourceLength: number): void;
     handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[], info: {
         type: RowSelectMethod;
     }): void;
@@ -136,11 +64,11 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     handleBatchOptionClick(option: IOptionItem): void;
     getRowClassName(record: any, index: number, indent: number): string;
     getDisabledStatus(option: IOptionItem): boolean | undefined;
-    handleResize(col: ColumnType<T>, size: {
+    handleResize(col: IColumnType<T>, size: {
         width: number;
         height: number;
     }, oldColumn: IColumnsType<T>): void;
-    getResizeColumns(columns?: IColumnsType<T>): any;
+    getResizeColumns(columns?: IColumnsType<T>): IKeyValues<any>[];
     componentDidMount(): void;
     render(): React.JSX.Element;
 }