amis 1.10.0 → 1.10.1

package/lib/components/table/index.js

@@ -157,7 +157,6 @@ var Table = /** @class */ (function (_super) {
             colWidths: [],
             hoverRow: null
         };
-        _this.onTableContentScroll = _this.onTableContentScroll.bind(_this);
         _this.getPopOverContainer = _this.getPopOverContainer.bind(_this);
         return _this;
     }
@@ -191,6 +190,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.updateTableBodyFixed = function () {
         var tbodyDom = this.tbodyDom && this.tbodyDom.current;
         var tdColumns = (0, tslib_1.__spreadArray)([], this.tdColumns, true);
+        if (!tbodyDom) {
+            return;
+        }
         this.updateTbodyFixedRow(tbodyDom, tdColumns);
         this.updateHeadSummaryFixedRow(tbodyDom);
     };
@@ -205,12 +207,7 @@ var Table = /** @class */ (function (_super) {
             }
         });
     };
-    Table.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a, _b;
-        if (this.props.loading) {
-            return;
-        }
+    Table.prototype.updateTableFixedRows = function () {
         if (hasFixedColumn(this.props.columns)) {
             var headerDom = this.headerDom && this.headerDom.current;
             if (headerDom) {
@@ -222,13 +219,16 @@ var Table = /** @class */ (function (_super) {
             var tfootDom = this.tfootDom && this.tfootDom.current;
             tfootDom && this.updateFootSummaryFixedRow(tfootDom);
         }
-        var current = null;
-        if (this.contentDom && this.contentDom.current) {
-            current = this.contentDom.current;
-            current.addEventListener('scroll', this.onTableContentScroll.bind(this));
+    };
+    Table.prototype.componentDidMount = function () {
+        var _this = this;
+        var _a, _b;
+        if (this.props.loading) {
+            return;
         }
-        else {
-            current = (_a = this.headerDom) === null || _a === void 0 ? void 0 : _a.current;
+        this.updateTableFixedRows();
+        var current = (_a = this.contentDom) === null || _a === void 0 ? void 0 : _a.current;
+        if ((_b = this.headerDom) === null || _b === void 0 ? void 0 : _b.current) {
             // overflow设置为hidden的情况
             var hiddenDomRefs = [this.headerDom, this.footDom];
             hiddenDomRefs.forEach(function (ref) {
@@ -236,21 +236,11 @@ var Table = /** @class */ (function (_super) {
                     ref.current &&
                     ref.current.addEventListener('wheel', _this.onWheel.bind(_this));
             });
-            // 横向同步滚动
-            var scrollDomRefs = [this.bodyDom];
-            scrollDomRefs.forEach(function (ref) {
-                return ref &&
-                    ref.current &&
-                    ref.current.addEventListener('scroll', _this.onTableScroll.bind(_this));
-            });
         }
         current && this.updateTableDom(current);
         if (this.props.draggable) {
             this.initDragging();
         }
-        if (this.props.resizable) {
-            (_b = this.theadDom.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseup', this.onResizeMouseUp.bind(this));
-        }
         this.updateStickyHeader();
         this.updateColWidths();
     };
@@ -260,7 +250,14 @@ var Table = /** @class */ (function (_super) {
         // 数据源发生了变化
         if (!(0, isEqual_1.default)(prevProps.dataSource, this.props.dataSource)) {
             this.setState({ dataSource: (0, tslib_1.__spreadArray)([], this.props.dataSource, true) }, function () {
-                return _this.updateColWidths();
+                if (_this.props.draggable) {
+                    if (_this.sortable) {
+                        _this.destroyDragging();
+                    }
+                    _this.initDragging();
+                }
+                _this.updateTableFixedRows();
+                _this.updateColWidths();
             }); // 异步加载数据需求再更新一次
         }
         // 选择项发生了变化触发
@@ -316,21 +313,12 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.componentWillUnmount = function () {
         var _this = this;
-        this.contentDom &&
-            this.contentDom.current &&
-            this.contentDom.current.removeEventListener('scroll', this.onTableContentScroll.bind(this));
         var hiddenDomRefs = [this.headerDom, this.footDom];
         hiddenDomRefs.forEach(function (ref) {
             return ref &&
                 ref.current &&
                 ref.current.removeEventListener('wheel', _this.onWheel.bind(_this));
         });
-        var scrollDomRefs = [this.bodyDom];
-        scrollDomRefs.forEach(function (ref) {
-            return ref &&
-                ref.current &&
-                ref.current.removeEventListener('scroll', _this.onTableScroll.bind(_this));
-        });
         this.destroyDragging();
     };
     Table.prototype.initDragging = function () {
@@ -339,13 +327,13 @@ var Table = /** @class */ (function (_super) {
         this.sortable = new sortablejs_1.default(this.tbodyDom.current, {
             group: 'table',
             animation: 150,
-            handle: ".".concat(cx('Table-dragCell')),
+            handle: "." + cx('Table-dragCell'),
             ghostClass: 'is-dragging',
             onMove: function (e) {
                 var dragged = e.dragged;
                 var related = e.related;
                 if (related &&
-                    related.classList.contains("".concat(cx('Table-summary-row')))) {
+                    related.classList.contains("" + cx('Table-summary-row'))) {
                     return false;
                 }
                 var draggedLevels = dragged.getAttribute('row-levels');
@@ -365,7 +353,8 @@ var Table = /** @class */ (function (_super) {
                         return [2 /*return*/];
                     }
                     rowLevels = e.item.getAttribute('row-levels');
-                    onDrag && onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
+                    onDrag &&
+                        onDrag(e.oldIndex, e.newIndex, rowLevels ? rowLevels.split(',') : []);
                     return [2 /*return*/];
                 });
             }); }
@@ -373,6 +362,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.destroyDragging = function () {
         this.sortable && this.sortable.destroy();
+        this.sortable = null;
     };
     Table.prototype.updateStickyHeader = function () {
         var _this = this;
@@ -509,73 +499,58 @@ var Table = /** @class */ (function (_super) {
                 } })) : null,
             tdColumns.map(function (data, index) {
                 var width = colWidths ? colWidths[index + extraCount] : data.width;
-                return (react_1.default.createElement("col", { key: index, style: { width: typeof width === 'number' ? width + 'px' : width }, className: data.className ? cx("Table-colgroup-".concat(data.className)) : '' }));
+                return (react_1.default.createElement("col", { key: index, style: { width: typeof width === 'number' ? width + 'px' : width }, className: data.className ? cx("Table-colgroup-" + data.className) : '' }));
             })));
     };
     Table.prototype.onResizeMouseDown = function (event, key) {
+        var _a;
         // 点击记录起始坐标
         this.resizeStart = event.clientX;
-        // 记录点击的列名
         this.resizeKey = key;
+        var index = this.tdColumns.findIndex(function (c) { return c.key === key; }) + this.getExtraColumnCount();
+        var colGroup = (_a = this.tableDom.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('colgroup')[0];
+        var currentWidth = 0;
+        var child = null;
+        if (colGroup && colGroup.children[index]) {
+            child = colGroup.children[index];
+            currentWidth = child.offsetWidth;
+        }
+        this.resizeWidth = currentWidth;
+        this.resizeTarget = child;
+        if (colGroup) {
+            var maxDistance = 0;
+            for (var i = 0; i < colGroup.children.length; i++) {
+                var child_1 = colGroup.children[i];
+                // 自适应列 保证有一个最小宽度
+                // 如果都设置了固定宽度 那一个都拖不动
+                if (!this.tdColumns[i].width) {
+                    maxDistance += child_1.offsetWidth - DefaultCellWidth;
+                }
+            }
+            this.resizeMaxDistance = maxDistance;
+        }
+        document.addEventListener('mousemove', this.onResizeMouseMove);
+        document.addEventListener('mouseup', this.onResizeMouseUp);
         event && event.stopPropagation();
     };
-    Table.prototype.onResizeMouseUp = function (event) {
+    Table.prototype.onResizeMouseMove = function (event) {
         var _this = this;
-        var _a;
         // 点击了调整列宽
-        if (this.resizeStart && this.resizeKey) {
+        if (this.resizeStart && this.resizeTarget) {
             // 计算横向移动距离
             var distance = event.clientX - this.resizeStart;
             var tdColumns = (0, tslib_1.__spreadArray)([], this.tdColumns, true);
-            var index = tdColumns.findIndex(function (c) { return c.key === _this.resizeKey; }) +
-                this.getExtraColumnCount();
-            var colGroup = (_a = this.tableDom.current) === null || _a === void 0 ? void 0 : _a.getElementsByTagName('colgroup')[0];
-            var currentWidth = 0;
-            if (colGroup && colGroup.children[index]) {
-                var child = colGroup.children[index];
-                currentWidth = child.offsetWidth;
-            }
             var newWidth = 0;
-            if (colGroup) {
-                var maxDistance = 0; // 最多可以移动的距离
-                // 调宽列
-                if (distance > 0) {
-                    for (var i = 0; i < colGroup.children.length; i++) {
-                        var child = colGroup.children[i];
-                        // 自适应列 保证有一个最小宽度
-                        // 如果都设置了固定宽度 那一个都拖不动
-                        if (!this.tdColumns[i].width) {
-                            maxDistance += child.offsetWidth - DefaultCellWidth;
-                        }
-                    }
-                    if (colGroup.children[index]) {
-                        var child = colGroup.children[index];
-                        newWidth = currentWidth + Math.min(distance, maxDistance);
-                        child.style.width = newWidth + 'px';
-                    }
-                }
-                else {
-                    // 缩短列
-                    var autoColumns = [];
-                    for (var i = 0; i < colGroup.children.length; i++) {
-                        var child = colGroup.children[i];
-                        // 自适应列 保证有一个最小宽度
-                        // 如果都设置了固定宽度 那一个都拖不动
-                        if (!this.tdColumns[i].width) {
-                            autoColumns.push(child);
-                        }
-                    }
-                    maxDistance = DefaultCellWidth - currentWidth;
-                    if (colGroup.children[index]) {
-                        var child = colGroup.children[index];
-                        newWidth = currentWidth + Math.max(distance, maxDistance);
-                        child.style.width = newWidth + 'px';
-                    }
-                    var gap_1 = Math.abs(Math.max(distance, maxDistance)) / autoColumns.length;
-                    autoColumns.forEach(function (c) {
-                        c.style.width = c.offsetWidth + gap_1 + 'px';
-                    });
-                }
+            // 调宽列
+            if (distance > 0) {
+                newWidth =
+                    this.resizeWidth + Math.min(distance, this.resizeMaxDistance);
+                this.resizeTarget.style.width = newWidth + 'px';
+            }
+            else {
+                // 缩短列
+                newWidth = Math.max(this.resizeWidth + distance, DefaultCellWidth);
+                this.resizeTarget.style.width = newWidth + 'px';
             }
             var column = (0, find_1.default)(tdColumns, function (c) { return c.key === _this.resizeKey; });
             // 只有通过配置设置过的宽度保存到tdColumns
@@ -585,11 +560,18 @@ var Table = /** @class */ (function (_super) {
                 column.width = newWidth;
             }
             this.tdColumns = tdColumns;
-            this.resizeStart = 0;
-            this.resizeKey = '';
         }
         event && event.stopPropagation();
     };
+    Table.prototype.onResizeMouseUp = function (event) {
+        document.removeEventListener('mousemove', this.onResizeMouseMove);
+        document.removeEventListener('mouseup', this.onResizeMouseUp);
+        this.resizeStart = 0;
+        this.resizeKey = '';
+        this.resizeWidth = 0;
+        this.resizeTarget = null;
+        this.resizeMaxDistance = 0;
+    };
     Table.prototype.renderTHead = function () {
         var _this = this;
         var _a = this.props, rowSelection = _a.rowSelection, dataSource = _a.dataSource, cx = _a.classnames, onSort = _a.onSort, expandable = _a.expandable, draggable = _a.draggable, resizable = _a.resizable, onSelectAll = _a.onSelectAll, onFilter = _a.onFilter;
@@ -691,7 +673,7 @@ var Table = /** @class */ (function (_super) {
                         sort,
                         filter,
                         resizable ? (react_1.default.createElement("i", { className: cx('Table-thead-resizable'), onMouseDown: function (e) { return _this.onResizeMouseDown(e, item.key); } })) : null));
-                    return (react_1.default.createElement(Cell_1.default, { wrapperComponent: "th", rowSpan: item.rowSpan, colSpan: item.colSpan, key: "cell-".concat(i), fixed: item.fixed === true ? 'left' : item.fixed, className: cx({
+                    return (react_1.default.createElement(Cell_1.default, { wrapperComponent: "th", rowSpan: item.rowSpan, colSpan: item.colSpan, key: "cell-" + i, fixed: item.fixed === true ? 'left' : item.fixed, className: cx({
                             'Table-cell-last': i === maxCount - 1 && i === data.length - 1
                         }), groupId: item.groupId, depth: item.depth }, typeof item.title === 'function'
                         ? item.title(children)
@@ -744,7 +726,8 @@ var Table = /** @class */ (function (_super) {
             }
             this.setState({ hoverRow: { target: target, rowIndex: rowIndex, record: record } }, function () {
                 if (onRow) {
-                    onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+                    onRow.onRowMouseEnter &&
+                        onRow.onRowMouseEnter(event, record, rowIndex);
                 }
             });
         }
@@ -899,8 +882,9 @@ var Table = /** @class */ (function (_super) {
         var hasChildrenRow = this.hasChildrenRow(data);
         var isExpanded = !!(0, find_1.default)(this.state.expandedRowKeys, function (key) { return key == data[_this.getExpandableKeyField()]; }); // == 匹配 否则'3'、3匹配不上
         // 设置缩进效果
-        var indentDom = levels.length > 0 ? (react_1.default.createElement("span", { className: cx('Table-row-indent', "indent-level-".concat(levels.length)), style: levels.length > 0
-                ? { paddingLeft: (indentSize * levels.length) + 'px' } : {} })) : null;
+        var indentDom = levels.length > 0 ? (react_1.default.createElement("span", { className: cx('Table-row-indent', "indent-level-" + levels.length), style: levels.length > 0
+                ? { paddingLeft: indentSize * levels.length + 'px' }
+                : {} })) : null;
         var cells = tdColumns.map(function (item, i) {
             var _a, _b;
             var render = item.render && typeof item.render === 'function'
@@ -917,14 +901,15 @@ var Table = /** @class */ (function (_super) {
                 }
             }
             var className = typeof item.className === 'function'
-                ? item.className(data, rowIndex) : '';
+                ? item.className(data, rowIndex)
+                : '';
             return props.rowSpan === 0 || props.colSpan === 0 ? null : (react_1.default.createElement(Cell_1.default, (0, tslib_1.__assign)({ key: i }, props, { fixed: item.fixed === true ? 'left' : item.fixed, column: item, groupId: item.groupId, className: cx((_a = {},
-                    _a["".concat(className)] = !!className,
+                    _a["" + className] = !!className,
                     _a)) }),
                 react_1.default.createElement("div", { className: cx('Table-cell-wrapper', (_b = {},
                         _b[cx('Table-cell-wrapper-prefix')] = i === 0 &&
-                            (!!indentDom || levels.length === 0 && hasChildrenRow),
-                        _b[cx("Table-cell-height-".concat(lineHeight))] = !!lineHeight,
+                            (!!indentDom || (levels.length === 0 && hasChildrenRow)),
+                        _b[cx("Table-cell-height-" + lineHeight)] = !!lineHeight,
                         _b)) },
                     i === 0 && levels.length > 0 ? indentDom : null,
                     i === 0 && hasChildrenRow
@@ -959,13 +944,13 @@ var Table = /** @class */ (function (_super) {
         var hasChildrenChecked = this.hasCheckedChildrenRows(data);
         var isRadio = rowSelection && rowSelection.type === 'radio';
         return [
-            react_1.default.createElement("tr", { key: "".concat(data[keyField || 'key'] || rowIndex), "row-index": rowIndex, "row-levels": levels.join(','), className: cx('Table-row', "Table-row-level-".concat(levels.length), rowClassNameClass, {
+            react_1.default.createElement("tr", { key: "" + (data[keyField || 'key'] || rowIndex), "row-index": rowIndex, "row-levels": levels.join(','), className: cx('Table-row', "Table-row-level-" + levels.length, rowClassNameClass, {
                     'Table-row-disabled': !!checkboxProps.disabled
                 }), onMouseEnter: function (e) { return _this.onRowMouseEnter(e, data, rowIndex); }, onMouseLeave: function (e) { return _this.onRowMouseLeave(e, data, rowIndex); }, onClick: function (e) { return _this.onRowClick(e, data, rowIndex); } },
                 draggable ? (react_1.default.createElement(Cell_1.default, { className: cx('Table-dragCell') },
                     react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: "icon" }))) : null,
                 !draggable && rowSelection ? (react_1.default.createElement(Cell_1.default, { fixed: rowSelection.fixed ? 'left' : '', className: cx('Table-checkCell') },
-                    react_1.default.createElement(Checkbox_1.default, (0, tslib_1.__assign)({ name: 'Table-checkbox', type: rowSelection.type || 'checkbox', partial: !isRadio && hasChildrenChecked && !isChecked, checked: isRadio ? isChecked : (hasChildrenChecked || isChecked), onChange: function (value, shift) {
+                    react_1.default.createElement(Checkbox_1.default, (0, tslib_1.__assign)({ name: 'Table-checkbox', type: rowSelection.type || 'checkbox', partial: !isRadio && hasChildrenChecked && !isChecked, checked: isRadio ? isChecked : hasChildrenChecked || isChecked, onChange: function (value, shift) {
                             if (!(rowSelection && rowSelection.rowClick)) {
                                 _this.selectedSingleRow(value, data);
                             }
@@ -992,7 +977,9 @@ var Table = /** @class */ (function (_super) {
                 react_1.default.createElement(Cell_1.default, { colSpan: tdColumns.length + colCount },
                     react_1.default.createElement("div", { className: cx('Table-empty') }, typeof placeholder === 'function'
                         ? placeholder()
-                        : placeholder)))) : (this.state.dataSource.map(function (data, index) { return _this.renderRow(data, index, []); }))));
+                        : placeholder)))) : (this.state.dataSource.map(function (data, index) {
+                return _this.renderRow(data, index, []);
+            }))));
     };
     Table.prototype.isExpandableTable = function () {
         var expandable = this.props.expandable;
@@ -1106,10 +1093,10 @@ var Table = /** @class */ (function (_super) {
         // 设置了横向滚动轴 则table的table-layout为fixed
         var hasScrollX = scroll && scroll.x;
         var hoverRow = this.state.hoverRow;
-        return (react_1.default.createElement("div", { ref: this.contentDom, className: cx('Table-content'), style: hasScrollX ? { overflow: 'auto hidden' } : {}, onMouseLeave: this.onMouseLeave.bind(this) },
-            itemActions && hoverRow
-                ? react_1.default.createElement(ItemActionsWrapper_1.default, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
-                    ? itemActions(hoverRow.record, hoverRow.rowIndex) : null) : null,
+        return (react_1.default.createElement("div", { ref: this.contentDom, className: cx('Table-content'), style: hasScrollX ? { overflow: 'auto hidden' } : {}, onMouseLeave: this.onMouseLeave.bind(this), onScroll: this.onTableContentScroll.bind(this) },
+            itemActions && hoverRow ? (react_1.default.createElement(ItemActionsWrapper_1.default, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
+                ? itemActions(hoverRow.record, hoverRow.rowIndex)
+                : null)) : null,
             react_1.default.createElement("table", { style: hasScrollX
                     ? { width: scroll.x + 'px', tableLayout: 'fixed' }
                     : { tableLayout: 'auto' }, className: cx('Table-table') },
@@ -1156,10 +1143,10 @@ var Table = /** @class */ (function (_super) {
             });
         }
         var hoverRow = this.state.hoverRow;
-        return (react_1.default.createElement("div", { ref: this.bodyDom, className: cx('Table-body'), style: style, onMouseLeave: this.onMouseLeave.bind(this) },
-            itemActions && hoverRow
-                ? react_1.default.createElement(ItemActionsWrapper_1.default, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
-                    ? itemActions(hoverRow.record, hoverRow.rowIndex) : null) : null,
+        return (react_1.default.createElement("div", { ref: this.bodyDom, className: cx('Table-body'), style: style, onMouseLeave: this.onMouseLeave.bind(this), onScroll: this.onTableScroll.bind(this) },
+            itemActions && hoverRow ? (react_1.default.createElement(ItemActionsWrapper_1.default, { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'
+                ? itemActions(hoverRow.record, hoverRow.rowIndex)
+                : null)) : null,
             react_1.default.createElement("table", { className: cx('Table-table'), style: tableStyle },
                 this.renderColGroup(),
                 this.renderTBody())));
@@ -1191,7 +1178,7 @@ var Table = /** @class */ (function (_super) {
         var hasScrollX = scroll && scroll.x;
         return (react_1.default.createElement("div", { ref: this.tableDom, className: cx('Table-v2', className, (_a = {},
                 _a[cx('Table-scroll-horizontal')] = hasScrollX,
-                _a[cx("Table-".concat(size))] = size,
+                _a[cx("Table-" + size)] = size,
                 _a[cx('Table-bordered')] = bordered,
                 _a[cx('Table-resizable')] = resizable,
                 _a)) },
@@ -1199,6 +1186,7 @@ var Table = /** @class */ (function (_super) {
             hasScrollY || sticky ? (this.renderScrollTable()) : (react_1.default.createElement("div", { className: cx('Table-container') }, this.renderTable())),
             footer ? (react_1.default.createElement("div", { className: cx('Table-footer') }, typeof footer === 'function' ? footer() : footer)) : null));
     };
+    var _a;
     Table.defaultProps = {
         title: '',
         className: '',
@@ -1208,6 +1196,18 @@ var Table = /** @class */ (function (_super) {
         placeholder: '暂无数据',
         showHeader: true
     };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Table.prototype, "onResizeMouseMove", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _a : Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Table.prototype, "onResizeMouseUp", null);
     return Table;
 }(react_1.default.PureComponent));
 exports.Table = Table;