@qn-pandora/pandora-component 4.4.6 → 5.0.1

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

@@ -4,6 +4,7 @@ interface IInputNumberWithUnitProps {
     onChange?: (value: string) => void;
     onNumberChange?: (num?: number) => void;
     onUnitChange?: (unit: string) => void;
+    readOnly?: boolean;
     className?: string;
     unitClassName?: string;
     placeholder?: string;

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, min = props.min, max = props.max;
+    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, readOnly = props.readOnly;
     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');
@@ -50,7 +50,7 @@ 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, min: min, max: max }));
+    var addonAfterNode = (React.createElement(Selector, { options: unitOptions, className: unitClassName, value: controlled ? getUnit(value) : unit, style: { width: unitWidth }, onChange: onSelectorChange, disabled: readOnly }));
+    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, disabled: readOnly }));
 }
 export default InputNumberWithUnit;

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

@@ -20,21 +20,50 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+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;
+};
+import React, { useState, useRef, useEffect } 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) {
+    var onResize = props.onResize, propsWidth = props.width, className = props.className, isLastColumn = props.isLastColumn, restProps = __rest(props, ["onResize", "width", "className", "isLastColumn"]);
+    var _a = __read(useState(propsWidth), 2), width = _a[0], setWidth = _a[1];
+    var contentRef = useRef(null);
+    useEffect(function () {
+        // Set the initial width based on content
+        if (!width && contentRef.current) {
+            setWidth(contentRef.current.offsetWidth);
+        }
+    }, [width]);
+    var handleResize = function (event, params) {
+        setWidth(params.size.width);
+        onResize(event, params);
+    };
+    // 最后一列不添加拖拽按钮
+    if (!onResize || isLastColumn) {
         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) {
+    return (React.createElement(Resizable, { axis: "x", width: width, className: SDK_PREFIX + "-table-resizable-Resizable", height: 0, onResize: handleResize, 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") }))));
+        React.createElement("th", __assign({}, restProps, { className: classnames(className, SDK_PREFIX + "-table-resizable-th"), ref: contentRef }))));
 };
 export default ResizableTitle;

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

@@ -1,13 +1,14 @@
+.pandora-sdk-table-resizable-th {
+  width: 100%;
+}
 .pandora-sdk-table-resizable-th .pandora-sdk-table-resizable-handle {
   position: absolute;
   cursor: col-resize;
-  right: 6px;
-  margin-left: 6px;
+  right: 1px;
   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;

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

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

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

@@ -61,6 +61,12 @@ export interface ITableProps<T> extends Omit<TableProps<T>, 'columns'> {
     draggable?: boolean | ETableSettingType;
     saveSettingKey?: string;
     onSettingChange?: (fields: ISaveFieldItem[]) => void;
+    /**
+     * 是否需要填充空白列, 默认为true
+     * 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，会把剩余空间平均分到每一列上。那么拖拽一列会导致其他列的宽度都发生变更
+     * 添加一个空白列，宽度auto.可以解决此问题。如果可以接受上述问题，那就无需空白列，needEmptyColumn = false
+     */
+    needEmptyColumn?: boolean;
 }
 /**
  * pandora2.0风格的表格
@@ -108,7 +114,7 @@ declare class Table<T = any> extends React.Component<ITableProps<T>, any> {
     updateSettingFields(columns: Array<IColumnType<T>>, settingFields: ISaveFieldItem[]): void;
     handleHideColumnsChange(keys: string[]): Promise<void> | undefined;
     getSortedColumns(): IKeyValues<any>[];
-    transfromColumns(columns: IKeyValues[]): IKeyValues<any>[];
+    transfromColumns(columns: IKeyValues[], needEmptyColumn?: boolean): IKeyValues<any>[];
     getColumns(): IKeyValues<any>[];
     getRowKey(row: any, index: number): any;
     getSortCoulmns(columns: IKeyValues[]): IKeyValues<any>[];

package/es/components/Table/index.js

@@ -387,8 +387,8 @@ var Table = /** @class */ (function (_super) {
     };
     // 如果支持拖拽，在屏幕宽度大于table总的列宽的时候，添加一个空白列，宽度auto.
     // 空白列添加到右固定列的前面
-    Table.prototype.transfromColumns = function (columns) {
-        if (!this.resizable)
+    Table.prototype.transfromColumns = function (columns, needEmptyColumn) {
+        if (!this.resizable || needEmptyColumn === false)
             return columns;
         var cols = __spread(columns);
         var firstFixedRightIndex = cols.findIndex(function (item) { return get(item, 'fixed') === 'right'; });
@@ -406,14 +406,14 @@ var Table = /** @class */ (function (_super) {
         return cols;
     };
     Table.prototype.getColumns = function () {
-        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+        var _a = this.props, showColumnSetting = _a.showColumnSetting, columnSettingOverlayClass = _a.columnSettingOverlayClass, needEmptyColumn = _a.needEmptyColumn;
         if (!showColumnSetting) {
-            return this.transfromColumns(this.columns);
+            return this.transfromColumns(this.columns, needEmptyColumn);
         }
         // 获取到列设置的options
         var columnsSettingOptions = this.columnsSettingOptions;
         var allCols = this.getSortedColumns();
-        this.transfromColumns(allCols);
+        this.transfromColumns(allCols, needEmptyColumn);
         var length = allCols.length;
         if (length > 0) {
             var title = (React.createElement("span", { className: SDK_PREFIX + "-last-column-title" },
@@ -545,6 +545,7 @@ var Table = /** @class */ (function (_super) {
         return noneSelected || disabled;
     };
     Table.prototype.handleResize = function (col, size, oldColumn) {
+        console.log('handleResize', col, size);
         var newColumns = __spread(oldColumn);
         newColumns.forEach(function (item) {
             if (get(item, 'dataIndex') === col.dataIndex) {
@@ -554,11 +555,18 @@ var Table = /** @class */ (function (_super) {
         var sizeMap = {};
         var setttingFields = this.settingFields;
         newColumns.forEach(function (element) {
-            if (element.dataIndex && isNumber(element.width)) {
+            if (element.dataIndex &&
+                isNumber(element.width) &&
+                !isNaN(element.width)) {
                 sizeMap[element.dataIndex] = element.width;
             }
         });
         if (this.props.onSettingChange) {
+            setttingFields.forEach(function (field) {
+                if (sizeMap[field.field]) {
+                    field.width = sizeMap[field.field];
+                }
+            });
             this.props.onSettingChange(setttingFields);
         }
         else if (this.resizable && this.props.saveSettingKey) {
@@ -582,18 +590,22 @@ var Table = /** @class */ (function (_super) {
                 return isNumber(width) ? __assign(__assign({}, col), { width: width }) : col;
             });
         }
-        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it) {
+        var transformColumns = columns === null || columns === void 0 ? void 0 : columns.map(function (it, index) {
             if (get(it, 'resizable') && _this.resizable) {
                 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);
-                        }
-                    }); } });
+                    }, onHeaderCell: function (col) {
+                        var _a;
+                        return ({
+                            width: col.width,
+                            // !传入newColumn，而不传入column是因为需要拿到有onHeaderCell的值，外面collumn的变化内部监听不到
+                            onResize: function (_, _a) {
+                                var size = _a.size;
+                                _this.handleResize(col, size, transformColumns);
+                            },
+                            isLastColumn: index === ((_a = (columns || [])) === null || _a === void 0 ? void 0 : _a.length) - 1
+                        });
+                    } });
             }
             return it;
         });
@@ -750,7 +762,7 @@ var Table = /** @class */ (function (_super) {
     __decorate([
         bind,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
+        __metadata("design:paramtypes", [Array, Boolean]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "transfromColumns", null);
     __decorate([