@qn-pandora/pandora-component 4.4.6 → 5.0.1

package/es/index.less

@@ -1,36 +1,36 @@
 @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/AutoComplete/style.less';
 @import './components/Card/style.less';
-@import './components/Checkbox/style.less';
+@import './components/Button/style.less';
 @import './components/CheckTransformList/style.less';
+@import './components/Checkbox/style.less';
 @import './components/Collapse/style.less';
 @import './components/CheckboxList/style.less';
 @import './components/CollapsiblePanel/style.less';
-@import './components/DateTimePicker/style.less';
 @import './components/Descriptions/style.less';
+@import './components/DateTimePicker/style.less';
 @import './components/Drawer/style.less';
-@import './components/Input/style.less';
 @import './components/FileResumable/style.less';
+@import './components/Input/style.less';
 @import './components/KeyValuePair/style.less';
 @import './components/Menu/style.less';
 @import './components/Modal/style.less';
 @import './components/NameExplainTooltip/style.less';
-@import './components/NameLimiter/style.less';
 @import './components/OptionList/style.less';
 @import './components/RadioGroup/style.less';
 @import './components/RangeInput/style.less';
-@import './components/RemarkName/style.less';
 @import './components/Selector/style.less';
+@import './components/RemarkName/style.less';
 @import './components/Spin/style.less';
-@import './components/Steps/style.less';
+@import './components/NameLimiter/style.less';
 @import './components/Table/style.less';
-@import './components/Tabs/style.less';
+@import './components/Steps/style.less';
 @import './components/TagList/style.less';
-@import './components/TreeSelector/style.less';
+@import './components/Tabs/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';
@@ -41,14 +41,14 @@
 @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/ColumnTag/style.less';
 @import './components/Table/ColumnSetting/style.less';
+@import './components/Table/ColumnTag/style.less';
 @import './components/Table/ResizableTitle/style.less';
-@import './components/TagList/Tag/style.less';
 @import './components/TagList/TagSwitch/style.less';
-@import './components/Timeline/TimelineItem/style.less';
-@import './components/Transfer/List/style.less';
+@import './components/TagList/Tag/style.less';
+@import './components/Steps/ControlButton/style.less';
 @import './components/Transfer/ListBody/style.less';
+@import './components/Transfer/List/style.less';
+@import './components/Timeline/TimelineItem/style.less';
 @import './components/DateTimePicker/Collapse/Panel/style.less';
 @import './components/DateTimePicker/BaseMobile/Absolute/style.less';

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

@@ -50,7 +50,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(react_1.useState(), 2), num = _b[0], setNum = _b[1];
     var _c = __read(react_1.useState(), 2), unit = _c[0], setUnit = _c[1];
     var controlled = Object.hasOwnProperty.call(props, 'value');
@@ -74,7 +74,7 @@ function InputNumberWithUnit(props) {
         }
         onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(unit);
     }, [num, onChange, onUnitChange, controlled, value]);
-    var addonAfterNode = (react_1.default.createElement(Selector_1.default, { options: unitOptions, className: unitClassName, value: controlled ? getUnit(value) : unit, style: { width: unitWidth }, onChange: onSelectorChange }));
-    return (react_1.default.createElement(InputNumber_1.default, { className: style_1.SDK_PREFIX + "-input-number-unit " + className, value: controlled ? getNum(value) : num, onChange: onInputChange, placeholder: placeholder, addonAfter: addonAfterNode, min: min, max: max }));
+    var addonAfterNode = (react_1.default.createElement(Selector_1.default, { options: unitOptions, className: unitClassName, value: controlled ? getUnit(value) : unit, style: { width: unitWidth }, onChange: onSelectorChange, disabled: readOnly }));
+    return (react_1.default.createElement(InputNumber_1.default, { className: style_1.SDK_PREFIX + "-input-number-unit " + className, value: controlled ? getNum(value) : num, onChange: onInputChange, placeholder: placeholder, addonAfter: addonAfterNode, min: min, max: max, disabled: readOnly }));
 }
 exports.default = InputNumberWithUnit;

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

@@ -10,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 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)
@@ -21,25 +40,54 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+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 __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_1 = __importStar(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) {
+    var onResize = props.onResize, propsWidth = props.width, className = props.className, isLastColumn = props.isLastColumn, restProps = __rest(props, ["onResize", "width", "className", "isLastColumn"]);
+    var _a = __read(react_1.useState(propsWidth), 2), width = _a[0], setWidth = _a[1];
+    var contentRef = react_1.useRef(null);
+    react_1.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_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) {
+    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) {
                 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") }))));
+        react_1.default.createElement("th", __assign({}, restProps, { className: classnames_1.default(className, style_1.SDK_PREFIX + "-table-resizable-th"), ref: contentRef }))));
 };
 exports.default = ResizableTitle;

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

@@ -412,8 +412,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 lodash_1.get(item, 'fixed') === 'right'; });
@@ -431,14 +431,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: style_1.SDK_PREFIX + "-last-column-title" },
@@ -570,6 +570,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 (lodash_1.get(item, 'dataIndex') === col.dataIndex) {
@@ -579,11 +580,18 @@ var Table = /** @class */ (function (_super) {
         var sizeMap = {};
         var setttingFields = this.settingFields;
         newColumns.forEach(function (element) {
-            if (element.dataIndex && lodash_1.isNumber(element.width)) {
+            if (element.dataIndex &&
+                lodash_1.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) {
@@ -607,18 +615,22 @@ var Table = /** @class */ (function (_super) {
                 return lodash_1.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 (lodash_1.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;
         });
@@ -775,7 +787,7 @@ var Table = /** @class */ (function (_super) {
     __decorate([
         bind_1.default,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Array]),
+        __metadata("design:paramtypes", [Array, Boolean]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "transfromColumns", null);
     __decorate([