@qn-pandora/pandora-component 4.4.0 → 4.4.2

package/es/index.d.ts

@@ -9,6 +9,7 @@ export { default as Input, TInputProps } from './components/Input';
 export { default as Selector, ISelectorProps, IGroupOption as ISelectorGroupOption, IOptions as ISelectorOptions, SelectValue as ISelectValue } from './components/Selector';
 export { default as SelectorWidthChildren } from './components/Selector/SelectorWidthChildren';
 export { default as Table, ITableProps, IOptionItem as ITableOptionItem } from './components/Table';
+export { ETableDragSaveKey } from './components/Table/constant';
 export { default as Steps } from './components/Steps';
 export { default as DateTimePicker, Time, EButtonType, IDateTimePickerProps } from './components/DateTimePicker';
 export * from './components/DateTimePicker/constants';

package/es/index.js

@@ -9,6 +9,7 @@ export { default as Input } from './components/Input';
 export { default as Selector } from './components/Selector';
 export { default as SelectorWidthChildren } from './components/Selector/SelectorWidthChildren';
 export { default as Table } from './components/Table';
+export { ETableDragSaveKey } from './components/Table/constant';
 export { default as Steps } from './components/Steps';
 export { default as DateTimePicker, Time, EButtonType } from './components/DateTimePicker';
 export * from './components/DateTimePicker/constants';

package/es/index.less

@@ -1,53 +1,54 @@
 @import './style/mixin.less';
 @import './style/theme.less';
+@import './components/AutoComplete/style.less';
 @import './components/Button/style.less';
+@import './components/Breadcrumb/style.less';
+@import './components/Card/style.less';
 @import './components/CheckTransformList/style.less';
 @import './components/Checkbox/style.less';
 @import './components/CheckboxList/style.less';
 @import './components/Collapse/style.less';
-@import './components/Breadcrumb/style.less';
 @import './components/CollapsiblePanel/style.less';
 @import './components/DateTimePicker/style.less';
-@import './components/AutoComplete/style.less';
-@import './components/Card/style.less';
 @import './components/Drawer/style.less';
+@import './components/FileResumable/style.less';
 @import './components/Descriptions/style.less';
 @import './components/Input/style.less';
-@import './components/FileResumable/style.less';
 @import './components/KeyValuePair/style.less';
+@import './components/Menu/style.less';
 @import './components/Modal/style.less';
 @import './components/NameExplainTooltip/style.less';
-@import './components/Menu/style.less';
 @import './components/NameLimiter/style.less';
 @import './components/OptionList/style.less';
 @import './components/RadioGroup/style.less';
-@import './components/RemarkName/style.less';
-@import './components/Selector/style.less';
 @import './components/RangeInput/style.less';
-@import './components/Steps/style.less';
+@import './components/Selector/style.less';
+@import './components/RemarkName/style.less';
 @import './components/Spin/style.less';
-@import './components/Table/style.less';
+@import './components/Steps/style.less';
 @import './components/Tabs/style.less';
-@import './components/Timeline/style.less';
+@import './components/Table/style.less';
 @import './components/TagList/style.less';
+@import './components/Timeline/style.less';
 @import './components/TreeSelector/style.less';
 @import './components/Transfer/style.less';
+@import './components/Card/RowExtra/style.less';
+@import './components/Card/SearchInput/style.less';
+@import './components/DateTimePicker/BaseMobile/style.less';
 @import './components/DateTimePicker/Base/style.less';
 @import './components/DateTimePicker/DisplayInput/style.less';
-@import './components/DateTimePicker/BaseMobile/style.less';
-@import './components/Card/SearchInput/style.less';
-@import './components/Card/RowExtra/style.less';
 @import './components/Drawer/CloseIcon/style.less';
-@import './components/OptionList/OptionItem/style.less';
 @import './components/OptionList/InlineOptionList/style.less';
+@import './components/OptionList/OptionItem/style.less';
 @import './components/OptionList/PopoverOptionList/style.less';
 @import './components/Steps/ControlButton/style.less';
 @import './components/Table/ColumnSetting/style.less';
 @import './components/Table/ColumnTag/style.less';
-@import './components/Timeline/TimelineItem/style.less';
-@import './components/TagList/TagSwitch/style.less';
+@import './components/Table/ResizableTitle/style.less';
 @import './components/TagList/Tag/style.less';
-@import './components/Transfer/ListBody/style.less';
+@import './components/TagList/TagSwitch/style.less';
+@import './components/Timeline/TimelineItem/style.less';
 @import './components/Transfer/List/style.less';
-@import './components/DateTimePicker/Collapse/Panel/style.less';
-@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/Transfer/ListBody/style.less';
+@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
+@import './components/DateTimePicker/Collapse/Panel/style.less';

package/lib/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/lib/components/FileResumable/constants.d.ts

@@ -31,4 +31,5 @@ export interface IFileResumableProps {
     disabled?: boolean;
     defaultImageUrl?: string;
     multiple?: boolean;
+    persistence?: number;
 }

package/lib/components/FileResumable/index.js

@@ -110,7 +110,7 @@ function FileResumable(props) {
     var _g = __read(react_1.useState(false), 2), showTool = _g[0], setShowTool = _g[1];
     var _h = __read(react_1.useState(''), 2), imageUrl = _h[0], setImageUrl = _h[1];
     var locale = react_1.useContext(config_provider_1.ConfigContext).locale;
-    var maxFileSize = props.maxFileSize, minFileSize = props.minFileSize, minFileSizeErrorCallback = props.minFileSizeErrorCallback, maxFileSizeErrorCallback = props.maxFileSizeErrorCallback, onError = props.onError, onChange = props.onChange, query = props.query, onStop = props.onStop, onSuccess = props.onSuccess, accept = props.accept, fileList = props.fileList, uploading = props.uploading, children = props.children, className = props.className, showUploadList = props.showUploadList, mode = props.mode, uploadIcon = props.uploadIcon, uploadDesc = props.uploadDesc, disabled = props.disabled, defaultImageUrl = props.defaultImageUrl, others = __rest(props, ["maxFileSize", "minFileSize", "minFileSizeErrorCallback", "maxFileSizeErrorCallback", "onError", "onChange", "query", "onStop", "onSuccess", "accept", "fileList", "uploading", "children", "className", "showUploadList", "mode", "uploadIcon", "uploadDesc", "disabled", "defaultImageUrl"]);
+    var maxFileSize = props.maxFileSize, minFileSize = props.minFileSize, minFileSizeErrorCallback = props.minFileSizeErrorCallback, maxFileSizeErrorCallback = props.maxFileSizeErrorCallback, onError = props.onError, onChange = props.onChange, query = props.query, onStop = props.onStop, onSuccess = props.onSuccess, accept = props.accept, fileList = props.fileList, uploading = props.uploading, children = props.children, className = props.className, showUploadList = props.showUploadList, mode = props.mode, uploadIcon = props.uploadIcon, uploadDesc = props.uploadDesc, disabled = props.disabled, defaultImageUrl = props.defaultImageUrl, _j = props.persistence, persistence = _j === void 0 ? 0 : _j, others = __rest(props, ["maxFileSize", "minFileSize", "minFileSizeErrorCallback", "maxFileSizeErrorCallback", "onError", "onChange", "query", "onStop", "onSuccess", "accept", "fileList", "uploading", "children", "className", "showUploadList", "mode", "uploadIcon", "uploadDesc", "disabled", "defaultImageUrl", "persistence"]);
     var handleRemove = react_1.useCallback(function () {
         onChange === null || onChange === void 0 ? void 0 : onChange(null);
     }, [onChange]);
@@ -276,7 +276,7 @@ function FileResumable(props) {
         var params, realFile_1, reader, extension_1;
         var _this = this;
         return __generator(this, function (_a) {
-            params = __assign({}, query);
+            params = __assign(__assign({}, query), { persistence: persistence });
             if (fileList.length === 1) {
                 realFile_1 = fileList[0];
                 reader = new FileReader();
@@ -335,7 +335,14 @@ function FileResumable(props) {
             setShowTool(true);
             return [2 /*return*/];
         });
-    }); }, [query, setShowTool, fileList, handleError, handleFileSuccess]);
+    }); }, [
+        query,
+        setShowTool,
+        fileList,
+        handleError,
+        handleFileSuccess,
+        persistence
+    ]);
     var handleUploadStart = react_1.useCallback(function () {
         setIsPlayDisabled(true);
         setIsPauseDisabled(false);

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

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

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

@@ -0,0 +1,45 @@
+"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 __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;
+};
+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 react_resizable_1 = require("react-resizable");
+var classnames_1 = __importDefault(require("classnames"));
+var pandora_component_icons_1 = require("@qn-pandora/pandora-component-icons");
+var style_1 = require("../../../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_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, { width: width, height: 0, onResize: onResize, minConstraints: [40, 0], draggableOpts: { enableUserSelectHack: false }, handle: react_1.default.createElement("span", { className: style_1.SDK_PREFIX + "-table-resizable-handle", onClick: function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+            } },
+            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") }))));
+};
+exports.default = ResizableTitle;

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

@@ -7,3 +7,18 @@ var ESearchType;
     /** fetch表示搜索为后端搜索 */
     ESearchType["Fetch"] = "fetch";
 })(ESearchType = exports.ESearchType || (exports.ESearchType = {}));
+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 = exports.ETableDragSaveKey || (exports.ETableDragSaveKey = {}));

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

@@ -89,6 +89,7 @@ var style_1 = require("../../constants/style");
 var type_1 = require("../../constants/language/table/type");
 var ColumnTag_1 = require("./ColumnTag/ColumnTag");
 var ColumnSetting_1 = __importDefault(require("./ColumnSetting"));
+var ResizableTitle_1 = __importDefault(require("./ResizableTitle"));
 /**
  * pandora2.0风格的表格
  */
@@ -99,6 +100,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) {
@@ -132,6 +134,11 @@ var Table = /** @class */ (function (_super) {
         if (lodash_1.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 () {
@@ -250,14 +257,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 || !lodash_1.includes(hiddenColumn, item.key)) {
                 return true;
             }
@@ -290,6 +297,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 = []; }
@@ -358,17 +368,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 (lodash_1.get(item, 'dataIndex') === col.dataIndex) {
+                item.width = size.width;
+            }
+        });
+        var sizeMap = {};
+        newColumns.forEach(function (element) {
+            if (element.dataIndex && lodash_1.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 = lodash_1.get(col, 'dataIndex');
+                    var width = sizeMap[dataIndex];
+                    return lodash_1.isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
+                });
+            }
+        }
+        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it) {
+            if (lodash_1.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(antd_1.Table, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames_1.default(style_1.SDK_PREFIX + "-table-wrapper", (_a = {}, _a[style_1.SDK_PREFIX + "-table-scrollX"] = lodash_1.get(scroll, 'x'), _a), (_b = {}, _b[style_1.SDK_PREFIX + "-table-scrollY"] = lodash_1.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_1.default
+                        }
+                    }
+                    : {})) })),
             this.props.batchOptions &&
                 this.props.rowSelection &&
                 this.props.dataSource &&
@@ -401,6 +474,10 @@ var Table = /** @class */ (function (_super) {
         mobx_1.observable.ref,
         __metadata("design:type", Object)
     ], Table.prototype, "hiddenColumn", void 0);
+    __decorate([
+        mobx_1.observable.ref,
+        __metadata("design:type", Array)
+    ], Table.prototype, "columns", void 0);
     __decorate([
         mobx_1.computed,
         __metadata("design:type", Object),
@@ -475,6 +552,13 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Array]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setHiddenColumn", null);
+    __decorate([
+        bind_1.default,
+        mobx_1.action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "setColumns", null);
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
@@ -517,6 +601,18 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "getDisabledStatus", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object, Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "handleResize", null);
+    __decorate([
+        bind_1.default,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "getResizeColumns", null);
     Table = __decorate([
         mobx_react_1.observer
     ], Table);