amis 1.9.1-beta.25 → 1.9.1-beta.28

package/lib/renderers/Table/index.js

@@ -34,6 +34,7 @@ var Table = /** @class */ (function (_super) {
     function Table(props, context) {
         var _this = _super.call(this, props) || this;
         _this.lastScrollLeft = -1;
+        _this.lastScrollTop = 0;
         _this.totalWidth = 0;
         _this.totalHeight = 0;
         _this.outterWidth = 0;
@@ -166,6 +167,8 @@ var Table = /** @class */ (function (_super) {
         var tableContent = table.querySelector(".".concat(ns, "Table-content"));
         var tableContentWrap = table.querySelector(".".concat(ns, "Table-contentWrap"));
         var footToolbar = table.querySelector(".".concat(ns, "Table-footToolbar"));
+        var leftFixedColumns = table.querySelector(".".concat(ns, "Table-fixedLeft"));
+        var rightFixedColumns = table.querySelector(".".concat(ns, "Table-fixedRight"));
         if (!tableContent) {
             return;
         }
@@ -192,11 +195,21 @@ var Table = /** @class */ (function (_super) {
                 allParentPaddingButtom + paddingButtom + borderBottom;
             parentNode = parentNode.parentElement;
         }
-        tableContent.style.height = "".concat(viewportHeight -
+        var tableContentHeight = "".concat(viewportHeight -
             tableContentTop -
             tableContentWrapMarginButtom -
             footToolbarHeight -
             allParentPaddingButtom, "px");
+        tableContent.style.height = tableContentHeight;
+        /**autoFillHeight开启后固定列会溢出Table高度，需要同步一下 */
+        if (leftFixedColumns) {
+            leftFixedColumns.style.height = tableContentHeight;
+            leftFixedColumns.style.overflowY = 'auto';
+        }
+        if (rightFixedColumns) {
+            rightFixedColumns.style.height = tableContentHeight;
+            rightFixedColumns.style.overflowY = 'auto';
+        }
     };
     Table.prototype.componentDidUpdate = function (prevProps) {
         var props = this.props;
@@ -551,34 +564,55 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.handleOutterScroll = function () {
         var outter = this.table.parentNode;
         var scrollLeft = outter.scrollLeft;
-        if (scrollLeft === this.lastScrollLeft) {
-            return;
-        }
-        this.lastScrollLeft = scrollLeft;
-        var leading = scrollLeft === 0;
-        var trailing = Math.ceil(scrollLeft) + this.outterWidth >= this.totalWidth;
-        // console.log(scrollLeft, store.outterWidth, store.totalWidth, (scrollLeft + store.outterWidth) === store.totalWidth);
-        // store.setLeading(leading);
-        // store.setTrailing(trailing);
         var ns = this.props.classPrefix;
         var dom = (0, react_dom_1.findDOMNode)(this);
         var fixedLeft = dom.querySelectorAll(".".concat(ns, "Table-fixedLeft"));
-        if (fixedLeft && fixedLeft.length) {
-            for (var i = 0, len = fixedLeft.length; i < len; i++) {
-                var node = fixedLeft[i];
-                leading ? node.classList.remove('in') : node.classList.add('in');
+        var fixedRight = dom.querySelectorAll(".".concat(ns, "Table-fixedRight"));
+        if (scrollLeft !== this.lastScrollLeft) {
+            this.lastScrollLeft = scrollLeft;
+            var leading = scrollLeft === 0;
+            var trailing = Math.ceil(scrollLeft) + this.outterWidth >= this.totalWidth;
+            // console.log(scrollLeft, store.outterWidth, store.totalWidth, (scrollLeft + store.outterWidth) === store.totalWidth);
+            // store.setLeading(leading);
+            // store.setTrailing(trailing);
+            if (fixedLeft && fixedLeft.length) {
+                for (var i = 0, len = fixedLeft.length; i < len; i++) {
+                    var node = fixedLeft[i];
+                    leading ? node.classList.remove('in') : node.classList.add('in');
+                }
+            }
+            if (fixedRight && fixedRight.length) {
+                for (var i = 0, len = fixedRight.length; i < len; i++) {
+                    var node = fixedRight[i];
+                    trailing ? node.classList.remove('in') : node.classList.add('in');
+                }
+            }
+            var table = this.affixedTable;
+            if (table) {
+                table.style.cssText += "transform: translateX(-".concat(scrollLeft, "px)");
             }
         }
-        var fixedRight = dom.querySelectorAll(".".concat(ns, "Table-fixedRight"));
-        if (fixedRight && fixedRight.length) {
-            for (var i = 0, len = fixedRight.length; i < len; i++) {
-                var node = fixedRight[i];
-                trailing ? node.classList.remove('in') : node.classList.add('in');
+        /* 同步固定列内容的垂直滚动 */
+        if (outter.scrollTop !== this.lastScrollTop) {
+            this.lastScrollTop = outter.scrollTop;
+            if (fixedLeft && fixedLeft.length) {
+                (0, forEach_1.default)(fixedLeft, function (node) { return node.scrollTo({ top: outter.scrollTop }); });
+            }
+            if (fixedRight && fixedRight.length) {
+                (0, forEach_1.default)(fixedRight, function (node) { return node.scrollTo({ top: outter.scrollTop }); });
             }
         }
-        var table = this.affixedTable;
-        if (table) {
-            table.style.cssText += "transform: translateX(-".concat(scrollLeft, "px)");
+    };
+    Table.prototype.handleFixedColumnsScroll = function (event) {
+        /** table内容区当前Top */
+        var currentScrollTop = this.lastScrollTop;
+        /** 固定列的新Top */
+        var fixedScrollTop = event.currentTarget.scrollTop;
+        if (currentScrollTop !== fixedScrollTop) {
+            this.lastScrollTop = fixedScrollTop;
+            var tableContentDom = this.table
+                .parentNode;
+            tableContentDom.scrollTo({ top: fixedScrollTop });
         }
     };
     Table.prototype.tableRef = function (ref) {
@@ -796,7 +830,8 @@ var Table = /** @class */ (function (_super) {
     // 垂直线拖拽移动
     Table.prototype.handleColResizeMouseMove = function (e) {
         var moveX = e.clientX - this.lineStartX;
-        this.resizeLine.style.left = this.resizeLineLeft + moveX + 'px';
+        // 光标right为-4px，列宽改变时会自动跟随，不需要单独处理位置
+        // this.resizeLine.style.left = this.resizeLineLeft + moveX + 'px';
         this.targetTh.style.width = this.targetThWidth + moveX + 'px';
     };
     // 垂直线拖拽结束
@@ -1365,17 +1400,21 @@ var Table = /** @class */ (function (_super) {
             header,
             heading,
             react_1.default.createElement("div", { className: cx('Table-contentWrap'), onMouseLeave: this.handleMouseLeave },
-                react_1.default.createElement("div", { className: cx('Table-fixedLeft'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.leftFixedColumns.length
+                react_1.default.createElement("div", { className: cx('Table-fixedLeft', {
+                        'Table-fixedLeft--autoFillHeight': autoFillHeight
+                    }), onMouseMove: this.handleMouseMove, onScroll: this.handleFixedColumnsScroll }, affixColumns !== false && store.leftFixedColumns.length
                     ? this.renderFixedColumns(store.rows, store.leftFixedColumns, false, tableClassName)
                     : null),
-                react_1.default.createElement("div", { className: cx('Table-fixedRight'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.rightFixedColumns.length
+                react_1.default.createElement("div", { className: cx('Table-fixedRight', {
+                        'Table-fixedLeft--autoFillHeight': autoFillHeight
+                    }), onMouseMove: this.handleMouseMove, onScroll: this.handleFixedColumnsScroll }, affixColumns !== false && store.rightFixedColumns.length
                     ? this.renderFixedColumns(store.rows, store.rightFixedColumns, false, tableClassName)
                     : null),
                 this.renderTableContent()),
             this.renderAffixHeader(tableClassName),
             footer));
     };
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     Table.contextType = Scoped_1.ScopedContext;
     Table.propsList = [
         'header',
@@ -1447,7 +1486,13 @@ var Table = /** @class */ (function (_super) {
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.DragEvent) === "function" ? _a : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.UIEvent) === "function" ? _a : Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Table.prototype, "handleFixedColumnsScroll", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.DragEvent) === "function" ? _b : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Table.prototype, "handleDragStart", null);
     (0, tslib_1.__decorate)([
@@ -1477,19 +1522,19 @@ var Table = /** @class */ (function (_super) {
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _b : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _c : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Table.prototype, "handleColResizeMouseDown", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _c : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_d = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _d : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Table.prototype, "handleColResizeMouseMove", null);
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_d = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _d : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_e = typeof MouseEvent !== "undefined" && MouseEvent) === "function" ? _e : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Table.prototype, "handleColResizeMouseUp", null);
     return Table;