@qn-pandora/pandora-component 4.4.1 → 4.4.3

package/CHANGELOG.json

@@ -1,6 +1,40 @@
 {
   "name": "@qn-pandora/pandora-component",
   "entries": [
+    {
+      "version": "4.4.3",
+      "tag": "@qn-pandora/pandora-component_v4.4.3",
+      "date": "Fri, 23 Feb 2024 06:02:50 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "2024-02-23发包"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@qn-pandora/app-sdk\" from `^3.4.2` to `^3.4.3`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "4.4.2",
+      "tag": "@qn-pandora/pandora-component_v4.4.2",
+      "date": "Fri, 19 Jan 2024 03:09:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "comment": "2024-01-19发包"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@qn-pandora/pandora-component-icons\" from `^3.4.0` to `^3.4.1`"
+          }
+        ]
+      }
+    },
     {
       "version": "4.4.1",
       "tag": "@qn-pandora/pandora-component_v4.4.1",

package/CHANGELOG.md

@@ -1,6 +1,20 @@
 # Change Log - @qn-pandora/pandora-component
 
-This log was last generated on Mon, 15 Jan 2024 01:53:53 GMT and should not be manually modified.
+This log was last generated on Fri, 23 Feb 2024 06:02:50 GMT and should not be manually modified.
+
+## 4.4.3
+Fri, 23 Feb 2024 06:02:50 GMT
+
+### Patches
+
+- 2024-02-23发包
+
+## 4.4.2
+Fri, 19 Jan 2024 03:09:26 GMT
+
+### Patches
+
+- 2024-01-19发包
 
 ## 4.4.1
 Mon, 15 Jan 2024 01:53:53 GMT

package/es/components/Drawer/index.d.ts

@@ -164,7 +164,7 @@ declare const _default: (props: {
      */
     showFullScreen?: boolean | undefined;
     onScreenFullChange?: ((showFullScreen: boolean) => void) | undefined;
-} & Pick<DrawerProps, "style" | "autoFocus" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "push" | "handler" | "footerStyle" | "level" | "levelMove"> & {
+} & Pick<DrawerProps, "style" | "autoFocus" | "prefixCls" | "footer" | "extra" | "bodyStyle" | "forceRender" | "push" | "keyboard" | "destroyOnClose" | "closeIcon" | "drawerStyle" | "headerStyle" | "contentWrapperStyle" | "handler" | "footerStyle" | "level" | "levelMove"> & {
     children?: React.ReactNode;
 } & {
     bodyStyle?: React.CSSProperties | undefined;

package/es/components/InputNumberWithUnit/index.d.ts

@@ -14,6 +14,8 @@ interface IInputNumberWithUnitProps {
         [value: string]: string;
     };
     unitWidth?: number;
+    min?: number;
+    max?: number;
 }
 declare function InputNumberWithUnit(props: IInputNumberWithUnitProps): JSX.Element;
 export default InputNumberWithUnit;

package/es/components/InputNumberWithUnit/index.js

@@ -26,7 +26,7 @@ var getUnit = function (value) {
     return (value === null || value === void 0 ? void 0 : value.replace(/\d+/, '')) || '';
 };
 function InputNumberWithUnit(props) {
-    var value = props.value, onChange = props.onChange, onNumberChange = props.onNumberChange, onUnitChange = props.onUnitChange, className = props.className, unitClassName = props.unitClassName, placeholder = props.placeholder, unitOptions = props.unitOptions, _a = props.unitWidth, unitWidth = _a === void 0 ? 86 : _a;
+    var value = props.value, onChange = props.onChange, onNumberChange = props.onNumberChange, onUnitChange = props.onUnitChange, className = props.className, unitClassName = props.unitClassName, placeholder = props.placeholder, unitOptions = props.unitOptions, _a = props.unitWidth, unitWidth = _a === void 0 ? 86 : _a, min = props.min, max = props.max;
     var _b = __read(useState(), 2), num = _b[0], setNum = _b[1];
     var _c = __read(useState(), 2), unit = _c[0], setUnit = _c[1];
     var controlled = Object.hasOwnProperty.call(props, 'value');
@@ -51,6 +51,6 @@ function InputNumberWithUnit(props) {
         onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(unit);
     }, [num, onChange, onUnitChange, controlled, value]);
     var addonAfterNode = (React.createElement(Selector, { options: unitOptions, className: unitClassName, value: controlled ? getUnit(value) : unit, style: { width: unitWidth }, onChange: onSelectorChange }));
-    return (React.createElement(InputNumber, { className: SDK_PREFIX + "-input-number-unit " + className, value: controlled ? getNum(value) : num, onChange: onInputChange, placeholder: placeholder, addonAfter: addonAfterNode }));
+    return (React.createElement(InputNumber, { className: SDK_PREFIX + "-input-number-unit " + className, value: controlled ? getNum(value) : num, onChange: onInputChange, placeholder: placeholder, addonAfter: addonAfterNode, min: min, max: max }));
 }
 export default InputNumberWithUnit;

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const ResizableTitle: (props: any) => JSX.Element;
+export default ResizableTitle;

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

@@ -0,0 +1,40 @@
+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 { Resizable } from 'react-resizable';
+import classnames from 'classnames';
+import { Resizable as ResizableIcon } from '@qn-pandora/pandora-component-icons';
+import { SDK_PREFIX } from '../../../constants/style';
+var ResizableTitle = function (props) {
+    var onResize = props.onResize, width = props.width, className = props.className, restProps = __rest(props, ["onResize", "width", "className"]);
+    if (!width) {
+        return (React.createElement("th", __assign({}, restProps, { className: classnames(className, SDK_PREFIX + "-table-resizable-th") })));
+    }
+    return (React.createElement(Resizable, { width: width, height: 0, onResize: onResize, minConstraints: [40, 0], draggableOpts: { enableUserSelectHack: false }, handle: React.createElement("span", { className: SDK_PREFIX + "-table-resizable-handle", onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            } },
+            React.createElement(ResizableIcon, null)) },
+        React.createElement("th", __assign({}, restProps, { className: classnames(className, SDK_PREFIX + "-table-resizable-th") }))));
+};
+export default ResizableTitle;

package/es/components/Table/ResizableTitle/style.css

@@ -0,0 +1,21 @@
+.pandora-sdk-table-resizable-th .pandora-sdk-table-resizable-handle {
+  position: absolute;
+  cursor: col-resize;
+  right: 6px;
+  margin-left: 6px;
+  height: 40%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
+  padding: 2px;
+  width: 8px;
+  opacity: 0;
+  -webkit-transition: opacity 0.2s ease-in-out;
+  transition: opacity 0.2s ease-in-out;
+}
+.pandora-sdk-table-resizable-th:hover .pandora-sdk-table-resizable-handle {
+  opacity: 0.3;
+}
+.pandora-sdk-table-resizable-th::before {
+  display: none;
+}

package/es/components/Table/ResizableTitle/style.less

@@ -0,0 +1,26 @@
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-table-resizable-th {
+  .@{sdk-prefix}-table-resizable-handle {
+    position: absolute;
+    cursor: col-resize;
+    right: 6px;
+    margin-left: 6px;
+    height: 40%;
+    top: 50%;
+    transform: translateY(-50%);
+    padding: 2px;
+    width: 8px;
+    opacity: 0;
+    transition: opacity 0.2s ease-in-out;
+  }
+  &:hover {
+    .@{sdk-prefix}-table-resizable-handle {
+      opacity: 0.3;
+    }
+  }
+
+  &::before {
+    display: none;
+  }
+}

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

@@ -4,3 +4,17 @@ export declare enum ESearchType {
     /** fetch表示搜索为后端搜索 */
     Fetch = "fetch"
 }
+export declare enum ETableDragSaveKey {
+    /** Apm */
+    ApmMq = "Keta_drag_table_apm_mq",
+    ApmTrace = "Keta_drag_table_apm_trace",
+    ApmTraceCall = "Keta_drag_table_apm_trace_call",
+    ApmServiceOption = "Keta_drag_table_apm_service_option",
+    /** 告警 */
+    AlertRule = "Keta_drag_table_alert_rule",
+    AlertEvent = "Keta_drag_table_alert_event",
+    /** 仪表盘 */
+    Dashboard = "Keta_drag_table_dashboard",
+    /** 采集任务 */
+    CollectionTask = "Keta_drag_collection_task"
+}

package/es/components/Table/constant.js

@@ -5,3 +5,18 @@ export var ESearchType;
     /** fetch表示搜索为后端搜索 */
     ESearchType["Fetch"] = "fetch";
 })(ESearchType || (ESearchType = {}));
+export var ETableDragSaveKey;
+(function (ETableDragSaveKey) {
+    /** Apm */
+    ETableDragSaveKey["ApmMq"] = "Keta_drag_table_apm_mq";
+    ETableDragSaveKey["ApmTrace"] = "Keta_drag_table_apm_trace";
+    ETableDragSaveKey["ApmTraceCall"] = "Keta_drag_table_apm_trace_call";
+    ETableDragSaveKey["ApmServiceOption"] = "Keta_drag_table_apm_service_option";
+    /** 告警 */
+    ETableDragSaveKey["AlertRule"] = "Keta_drag_table_alert_rule";
+    ETableDragSaveKey["AlertEvent"] = "Keta_drag_table_alert_event";
+    /** 仪表盘 */
+    ETableDragSaveKey["Dashboard"] = "Keta_drag_table_dashboard";
+    /** 采集任务 */
+    ETableDragSaveKey["CollectionTask"] = "Keta_drag_collection_task";
+})(ETableDragSaveKey || (ETableDragSaveKey = {}));

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

@@ -24,10 +24,12 @@ export interface IOptionItem {
 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'> {
@@ -45,6 +47,9 @@ export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
     hiddenColumns?: string[];
     onHiddenColumnsChange?: (keys: string[]) => void;
     columnSettingOverlayClass?: string;
+    draggable?: boolean;
+    dragSaveKey?: string;
+    onDraggableChange?: (fieldsWidth: IKeyValues<number>) => void;
 }
 /**
  * pandora2.0风格的表格
@@ -60,6 +65,7 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     indeterminate: boolean;
     checkAll: boolean;
     hiddenColumn: string[] | undefined;
+    columns: IKeyValues[];
     UNSAFE_componentWillReceiveProps(nextProps: ITableProps<T>): void;
     get selectedRowKeys(): React.ReactText[];
     get rowSelection(): TableRowSelection<T> | undefined;
@@ -73,11 +79,12 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
         resetKeys: string[];
     };
     handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
-    getColumns(): IColumnsType<T> | undefined;
+    getColumns(): IKeyValues<any>[];
     getRowKey(row: any, index: number): any;
     setIndeterminate(indeterminate: boolean): void;
     setCheckAll(checkAll: boolean): void;
     setHiddenColumn(hiddenColumn?: string[]): void;
+    setColumns(columns: IKeyValues[]): void;
     setCheckboxStatus(selectedRowsOfCurrentPage?: T[], dataSource?: T[]): void;
     handleSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
     onRowSelectionChange(selectedRowKeys: React.Key[], selectedRowsOfCurrentPage: any[]): void;
@@ -85,6 +92,12 @@ 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: {
+        width: number;
+        height: number;
+    }, oldColumn: IColumnsType<T>): void;
+    getResizeColumns(columns?: IColumnsType<T>): any;
+    componentDidMount(): void;
     render(): JSX.Element;
 }
 export default Table;

package/es/components/Table/index.js

@@ -66,7 +66,7 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
-import { size, xor, union, unionBy, differenceBy, get, isEqual, includes } from 'lodash';
+import { size, xor, union, unionBy, differenceBy, get, isEqual, includes, isNumber } from 'lodash';
 import { Table as AntTable, Checkbox } from 'antd';
 import { ConfigContext } from 'antd/es/config-provider';
 import { toaster as toasterStore } from '@qn-pandora/app-sdk';
@@ -77,6 +77,7 @@ import { SDK_PREFIX } from '../../constants/style';
 import { TableLocale } from '../../constants/language/table/type';
 import { ColumnTag } from './ColumnTag/ColumnTag';
 import ColumnSetting from './ColumnSetting';
+import ResizableTitle from './ResizableTitle';
 /**
  * pandora2.0风格的表格
  */
@@ -87,6 +88,7 @@ var Table = /** @class */ (function (_super) {
         _this.indeterminate = false;
         _this.checkAll = false;
         _this.hiddenColumn = _this.props.hiddenColumns;
+        _this.columns = [];
         return _this;
     }
     Table.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
@@ -120,6 +122,11 @@ var Table = /** @class */ (function (_super) {
         if (isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
             this.setHiddenColumn(nextProps.hiddenColumns);
         }
+        if (nextProps.columns !== this.props.columns) {
+            this.setColumns(nextProps.scroll && nextProps.draggable
+                ? this.getResizeColumns(nextProps.columns)
+                : nextProps.columns);
+        }
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
         get: function () {
@@ -238,14 +245,14 @@ var Table = /** @class */ (function (_super) {
         (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
     };
     Table.prototype.getColumns = function () {
-        var _a = this.props, showColumnSetting = _a.showColumnSetting, columns = _a.columns, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass;
         var hiddenColumn = this.hiddenColumn || [];
         if (!showColumnSetting) {
-            return columns;
+            return this.columns;
         }
         // 获取到列设置的options
         var columnsSettingOptions = this.columnsSettingOptions;
-        var selectedCols = __spread((columns || []).filter(function (item) {
+        var selectedCols = __spread((this.columns || []).filter(function (item) {
             if (item.configurable === false || !includes(hiddenColumn, item.key)) {
                 return true;
             }
@@ -278,6 +285,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.setHiddenColumn = function (hiddenColumn) {
         this.hiddenColumn = hiddenColumn;
     };
+    Table.prototype.setColumns = function (columns) {
+        this.columns = columns;
+    };
     // 设置全选checkout的状态
     Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSource) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
@@ -346,17 +356,80 @@ var Table = /** @class */ (function (_super) {
             : option.disabled;
         return noneSelected || disabled;
     };
+    Table.prototype.handleResize = function (col, size, oldColumn) {
+        var newColumns = __spread(oldColumn);
+        newColumns.forEach(function (item) {
+            if (get(item, 'dataIndex') === col.dataIndex) {
+                item.width = size.width;
+            }
+        });
+        var sizeMap = {};
+        newColumns.forEach(function (element) {
+            if (element.dataIndex && isNumber(element.width)) {
+                sizeMap[element.dataIndex] = element.width;
+            }
+        });
+        if (this.props.onDraggableChange) {
+            this.props.onDraggableChange(sizeMap);
+        }
+        else if (this.props.dragSaveKey) {
+            localStorage.setItem(this.props.dragSaveKey, JSON.stringify(sizeMap));
+        }
+        this.setColumns(newColumns);
+    };
+    Table.prototype.getResizeColumns = function (columns) {
+        var _this = this;
+        var sizeMap;
+        if (this.props.dragSaveKey) {
+            var sizeStr = localStorage.getItem(this.props.dragSaveKey);
+            sizeMap = !!sizeStr && JSON.parse(sizeStr);
+            if (sizeMap) {
+                columns = columns === null || columns === void 0 ? void 0 : columns.map(function (col) {
+                    var dataIndex = get(col, 'dataIndex');
+                    var width = sizeMap[dataIndex];
+                    return isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
+                });
+            }
+        }
+        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it) {
+            if (get(it, 'resizable') && _this.props.draggable) {
+                return __assign(__assign({}, it), { ellipsis: {
+                        showTitle: true
+                    }, onHeaderCell: function (col) { return ({
+                        width: col.width,
+                        // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
+                        onResize: function (_, _a) {
+                            var size = _a.size;
+                            _this.handleResize(col, size, transformColumns);
+                        }
+                    }); } });
+            }
+            return it;
+        });
+        return transformColumns;
+    };
+    Table.prototype.componentDidMount = function () {
+        this.setColumns(this.props.draggable && this.props.scroll
+            ? this.getResizeColumns(this.props.columns)
+            : this.props.columns);
+    };
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns"]);
+        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, components = _c.components, draggable = _c.draggable, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns", "components", "draggable"]);
         return (React.createElement("div", null,
             React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
                     ? this.rowSelection
-                    : this.props.rowSelection, rowClassName: this.getRowClassName })),
+                    : this.props.rowSelection, rowClassName: this.getRowClassName, components: __assign(__assign({}, (components || {})), (draggable && scroll
+                    ? {
+                        header: {
+                            cell: ResizableTitle
+                        }
+                    }
+                    : {})) })),
             this.props.batchOptions &&
                 this.props.rowSelection &&
                 this.props.dataSource &&
@@ -389,6 +462,10 @@ var Table = /** @class */ (function (_super) {
         observable.ref,
         __metadata("design:type", Object)
     ], Table.prototype, "hiddenColumn", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Array)
+    ], Table.prototype, "columns", void 0);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -463,6 +540,13 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setHiddenColumn", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "setColumns", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
@@ -505,6 +589,18 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getDisabledStatus", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "handleResize", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "getResizeColumns", null);
     Table = __decorate([
         observer
     ], Table);