amis 2.0.0 → 2.1.0

package/lib/renderers/Table/index.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 
@@ -38,6 +38,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;
@@ -131,7 +132,20 @@ var Table = /** @class */ (function (_super) {
         return updateRows;
     };
     Table.prototype.componentDidMount = function () {
-        var parent = amisCore.getScrollParent(ReactDOM.findDOMNode(this));
+        var _a = this.props, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
+        var currentNode = ReactDOM.findDOMNode(this);
+        var parent = amisCore.getScrollParent(currentNode, function (parent) {
+            var parentStyle = getComputedStyle(parent);
+            var currentStyle = getComputedStyle(currentNode);
+            var parentHeight = parseInt(parentStyle.getPropertyValue('height')) -
+                parseInt(parentStyle.getPropertyValue('padding-top')) -
+                parseInt(parentStyle.getPropertyValue('padding-bottom'));
+            var currentHeight = parseInt(currentStyle.getPropertyValue('height')) +
+                parseInt(currentStyle.getPropertyValue('margin-bottom')) +
+                parseInt(currentStyle.getPropertyValue('margin-top'));
+            // 具备 overflow-*:auto 的父元素的高度小于当前元素
+            return parentHeight > 0 && parentHeight < currentHeight;
+        });
         if (!parent || parent === document.body) {
             parent = window;
         }
@@ -143,10 +157,15 @@ var Table = /** @class */ (function (_super) {
         }
         this.affixDetect();
         parent.addEventListener('scroll', this.affixDetect);
+        if (autoFillHeight) {
+            document
+                .querySelector(".".concat(ns, "Table-content"))
+                .addEventListener('scroll', this.affixDetect);
+        }
         window.addEventListener('resize', this.affixDetect);
         this.updateAutoFillHeight();
         window.addEventListener('resize', this.updateAutoFillHeight);
-        var _a = this.props, store = _a.store, autoGenerateFilter = _a.autoGenerateFilter, onSearchableFromInit = _a.onSearchableFromInit;
+        var _b = this.props, store = _b.store, autoGenerateFilter = _b.autoGenerateFilter, onSearchableFromInit = _b.onSearchableFromInit;
         // autoGenerateFilter 开启后
         // 如果没有一个 searchable 的 column crud 就不会初始化加载
         // 所以这里加个判断默认初始加载一次
@@ -170,6 +189,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;
         }
@@ -196,11 +217,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;
@@ -265,9 +296,14 @@ var Table = /** @class */ (function (_super) {
         this.updateTableInfoLazy();
     };
     Table.prototype.componentWillUnmount = function () {
-        var formItem = this.props.formItem;
+        var _a = this.props, formItem = _a.formItem, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
         var parent = this.parentNode;
         parent && parent.removeEventListener('scroll', this.affixDetect);
+        if (autoFillHeight) {
+            document
+                .querySelector(".".concat(ns, "Table-content"))
+                .addEventListener('scroll', this.affixDetect);
+        }
         window.removeEventListener('resize', this.affixDetect);
         window.removeEventListener('resize', this.updateAutoFillHeight);
         this.updateTableInfoLazy.cancel();
@@ -464,24 +500,46 @@ var Table = /** @class */ (function (_super) {
         var store = this.props.store;
         return store.selectedRows.map(function (item) { return item.data; });
     };
+    /**
+     * 滚动重新定位Table-fixedTop
+     */
     Table.prototype.affixDetect = function () {
-        var _a, _b, _c, _d;
-        if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
+        var _a, _b, _c;
+        var _d = this.props, affixHeader = _d.affixHeader, ns = _d.classPrefix, affixOffsetTop = _d.affixOffsetTop, env = _d.env, autoFillHeight = _d.autoFillHeight;
+        if (!(affixHeader || autoFillHeight) || !this.table) {
+            // if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
             return;
         }
-        var ns = this.props.classPrefix;
         var dom = ReactDOM.findDOMNode(this);
-        var clip = this.table.getBoundingClientRect();
-        var offsetY = (_b = (_a = this.props.affixOffsetTop) !== null && _a !== void 0 ? _a : this.props.env.affixOffsetTop) !== null && _b !== void 0 ? _b : 0;
-        var headingHeight = ((_c = dom.querySelector(".".concat(ns, "Table-heading"))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) || 0;
-        var headerHeight = ((_d = dom.querySelector(".".concat(ns, "Table-headToolbar"))) === null || _d === void 0 ? void 0 : _d.getBoundingClientRect().height) || 0;
-        var affixed = clip.top - headerHeight - headingHeight < offsetY &&
-            clip.top + clip.height - 40 > offsetY;
+        var headerHeight = ((_a = dom.querySelector(".".concat(ns, "Table-headToolbar"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
         var affixedDom = dom.querySelector(".".concat(ns, "Table-fixedTop"));
-        affixedDom.style.cssText += "top: ".concat(offsetY, "px;width: ").concat(this.table.parentNode.offsetWidth, "px");
-        affixed
-            ? affixedDom.classList.add('in')
-            : affixedDom.classList.remove('in');
+        var affixedDomHeight = getComputedStyle(affixedDom).getPropertyValue('height');
+        if (autoFillHeight) {
+            //! 解决 sticky 不兼容的问题
+            var tableContentDom = document.querySelector(".".concat(ns, "Table-content"));
+            var clip = tableContentDom.getBoundingClientRect();
+            var tableHeaderClip = affixedDom
+                .querySelector(".".concat(ns, "Table-wrapper"))
+                .getBoundingClientRect();
+            var offsetHeight = affixedDom.getBoundingClientRect().height - tableHeaderClip.height;
+            var offsetY = clip.top - offsetHeight;
+            affixedDom.style.cssText += "top: ".concat(offsetY, "px;width: ").concat(clip.width, "px");
+            affixedDom.classList.add('in');
+        }
+        else {
+            // 配置了 affixHeader
+            var clip = this.table.getBoundingClientRect();
+            var offsetY = (_b = affixOffsetTop !== null && affixOffsetTop !== void 0 ? affixOffsetTop : env.affixOffsetTop) !== null && _b !== void 0 ? _b : 0;
+            var headingHeight = ((_c = dom.querySelector(".".concat(ns, "Table-heading"))) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect().height) || 0;
+            var affixedShadowDom = dom.querySelector(".".concat(ns, "Table-fixedTop-shadow"));
+            var affixed = clip.top - headerHeight - headingHeight < offsetY &&
+                clip.top + clip.height - 40 > offsetY;
+            affixedDom.style.cssText += "top: ".concat(offsetY, "px;width: ").concat(this.table.parentNode.offsetWidth, "px");
+            affixedShadowDom.style.cssText += "top: ".concat(affixedDomHeight, ";width: ").concat(this.table.parentNode.offsetWidth, "px");
+            affixed
+                ? affixedDom.classList.add('in')
+                : affixedDom.classList.remove('in');
+        }
         // store.markHeaderAffix(clip.top < offsetY && (clip.top + clip.height - 40) > offsetY);
     };
     Table.prototype.updateTableInfo = function () {
@@ -555,34 +613,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 = ReactDOM.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) {
+                forEach__default["default"](fixedLeft, function (node) { return node.scrollTo({ top: outter.scrollTop }); });
+            }
+            if (fixedRight && fixedRight.length) {
+                forEach__default["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) {
@@ -1017,7 +1096,7 @@ var Table = /** @class */ (function (_super) {
                 'TableCell--filterable': column.filterable,
                 'Table-operationCell': column.type === 'operation'
             }) }),
-            React__default["default"].createElement("div", { className: cx("".concat(ns, "TableCell--title"), column.pristine.className, column.pristine.labelClassName) },
+            React__default["default"].createElement("div", { className: cx("".concat(ns, "TableCell--title"), column.pristine.className, column.pristine.labelClassName), style: props.style },
                 column.label ? render('tpl', column.label) : null,
                 column.remark
                     ? render('remark', {
@@ -1039,7 +1118,7 @@ var Table = /** @class */ (function (_super) {
         }
         if (column.type === '__checkme') {
             return (React__default["default"].createElement("td", { key: props.key, className: cx(column.pristine.className) },
-                React__default["default"].createElement(amisUi.Checkbox, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: item.checked, disabled: item.checkdisable, onChange: checkOnItemClick ? amisCore.noop : this.handleCheck.bind(this, item) })));
+                React__default["default"].createElement(amisUi.Checkbox, { classPrefix: ns, type: multiple ? 'checkbox' : 'radio', checked: item.checked, disabled: item.checkdisable || !item.checkable, onChange: checkOnItemClick ? amisCore.noop : this.handleCheck.bind(this, item) })));
         }
         else if (column.type === '__dragme') {
             return (React__default["default"].createElement("td", { key: props.key, className: cx(column.pristine.className, {
@@ -1079,31 +1158,33 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, store = _a.store, affixHeader = _a.affixHeader, render = _a.render, cx = _a.classnames;
         var hideHeader = store.filteredColumns.every(function (column) { return !column.label; });
         var columnsGroup = store.columnGroup;
-        return affixHeader ? (React__default["default"].createElement("div", { className: cx('Table-fixedTop', {
-                'is-fakeHide': hideHeader
-            }) },
-            this.renderHeader(false),
-            this.renderHeading(),
-            React__default["default"].createElement("div", { className: cx('Table-fixedLeft') }, store.leftFixedColumns.length
-                ? this.renderFixedColumns(store.rows, store.leftFixedColumns, true, tableClassName)
-                : null),
-            React__default["default"].createElement("div", { className: cx('Table-fixedRight') }, store.rightFixedColumns.length
-                ? this.renderFixedColumns(store.rows, store.rightFixedColumns, true, tableClassName)
-                : null),
-            React__default["default"].createElement("div", { className: cx('Table-wrapper') },
-                React__default["default"].createElement("table", { ref: this.affixedTableRef, className: tableClassName },
-                    React__default["default"].createElement("colgroup", null, store.filteredColumns.map(function (column) { return (React__default["default"].createElement("col", { key: column.index, "data-index": column.index })); })),
-                    React__default["default"].createElement("thead", null,
-                        columnsGroup.length ? (React__default["default"].createElement("tr", null, columnsGroup.map(function (item, index) { return (React__default["default"].createElement("th", { key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan }, item.label ? render('tpl', item.label) : null)); }))) : null,
-                        React__default["default"].createElement("tr", null, store.filteredColumns.map(function (column) {
-                            var _a;
-                            return ((_a = columnsGroup.find(function (group) { return ~group.has.indexOf(column); })) === null || _a === void 0 ? void 0 : _a.rowSpan) === 2
-                                ? null
-                                : _this.renderHeadCell(column, {
-                                    'key': column.index,
-                                    'data-index': column.index
-                                });
-                        }))))))) : null;
+        return affixHeader ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement("div", { className: cx('Table-fixedTop', {
+                    'is-fakeHide': hideHeader
+                }) },
+                this.renderHeader(false),
+                this.renderHeading(),
+                React__default["default"].createElement("div", { className: cx('Table-fixedLeft') }, store.leftFixedColumns.length
+                    ? this.renderFixedColumns(store.rows, store.leftFixedColumns, true, tableClassName)
+                    : null),
+                React__default["default"].createElement("div", { className: cx('Table-fixedRight') }, store.rightFixedColumns.length
+                    ? this.renderFixedColumns(store.rows, store.rightFixedColumns, true, tableClassName)
+                    : null),
+                React__default["default"].createElement("div", { className: cx('Table-wrapper') },
+                    React__default["default"].createElement("table", { ref: this.affixedTableRef, className: tableClassName },
+                        React__default["default"].createElement("colgroup", null, store.filteredColumns.map(function (column) { return (React__default["default"].createElement("col", { key: column.index, "data-index": column.index })); })),
+                        React__default["default"].createElement("thead", null,
+                            columnsGroup.length ? (React__default["default"].createElement("tr", null, columnsGroup.map(function (item, index) { return (React__default["default"].createElement("th", { key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan }, item.label ? render('tpl', item.label) : null)); }))) : null,
+                            React__default["default"].createElement("tr", null, store.filteredColumns.map(function (column) {
+                                var _a;
+                                return ((_a = columnsGroup.find(function (group) { return ~group.has.indexOf(column); })) === null || _a === void 0 ? void 0 : _a.rowSpan) === 2
+                                    ? null
+                                    : _this.renderHeadCell(column, {
+                                        'key': column.index,
+                                        'data-index': column.index
+                                    });
+                            })))))),
+            React__default["default"].createElement("div", { className: cx('Table-fixedTop-shadow') }))) : null;
     };
     Table.prototype.renderFixedColumns = function (rows, columns, headerOnly, tableClassName) {
         var _this = this;
@@ -1112,7 +1193,9 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, store = _a.store, cx = _a.classnames, render = _a.render, data = _a.data, translate = _a.translate, locale = _a.locale, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, itemAction = _a.itemAction, dispatchEvent = _a.dispatchEvent, onEvent = _a.onEvent;
         var hideHeader = store.filteredColumns.every(function (column) { return !column.label; });
         var columnsGroup = store.columnGroup;
-        return (React__default["default"].createElement("table", { className: cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName) },
+        return (React__default["default"].createElement("table", { className: cx('Table-table', tableClassName, {
+                'Table-table--withCombine': store.combineNum > 0
+            }) },
             React__default["default"].createElement("thead", null,
                 columnsGroup.length ? (React__default["default"].createElement("tr", null, columnsGroup.map(function (item, index) {
                     var renderColumns = columns.filter(function (a) { return ~item.has.indexOf(a); });
@@ -1129,7 +1212,9 @@ var Table = /** @class */ (function (_super) {
                 }))),
             headerOnly ? null : !rows.length ? (React__default["default"].createElement("tbody", null,
                 React__default["default"].createElement("tr", { className: cx('Table-placeholder') },
-                    React__default["default"].createElement("td", { colSpan: columns.length }, render('placeholder', translate(placeholder || 'placeholder.noData')))))) : (React__default["default"].createElement(TableBody.TableBody, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName), itemAction: itemAction, classnames: cx, render: render, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, ignoreFootableContent: true, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, columns: columns, rows: rows, locale: locale, translate: translate, rowsProps: {
+                    React__default["default"].createElement("td", { colSpan: columns.length }, render('placeholder', translate(placeholder || 'placeholder.noData')))))) : (React__default["default"].createElement(TableBody.TableBody, { tableClassName: cx(tableClassName, {
+                    'Table-table--withCombine': store.combineNum > 0
+                }), itemAction: itemAction, classnames: cx, render: render, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, ignoreFootableContent: true, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, columns: columns, rows: rows, locale: locale, translate: translate, rowsProps: {
                     regionPrefix: 'fixed/',
                     renderCell: function (region, column, item, props) { return _this.renderCell(region, column, item, props, true); },
                     data: data,
@@ -1324,7 +1409,10 @@ var Table = /** @class */ (function (_super) {
         // 不过目前看来只有这样写它才会重新更新视图
         store.rows.length;
         return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement(TableContent.TableContent, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', { 'Table-table--checkOnItemClick': checkOnItemClick }, tableClassName), className: tableContentClassName, itemActions: itemActions, itemAction: itemAction, store: store, classnames: cx, columns: store.filteredColumns, columnsGroup: store.columnGroup, rows: store.rows, placeholder: placeholder, render: render, onMouseMove: this.handleMouseMove, onScroll: this.handleOutterScroll, tableRef: this.tableRef, renderHeadCell: this.renderHeadCell, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, data: store.data, prefixRow: prefixRow, affixRow: affixRow, prefixRowClassName: prefixRowClassName, affixRowClassName: affixRowClassName, locale: locale, translate: translate, dispatchEvent: dispatchEvent, onEvent: onEvent, loading: loading }),
+            React__default["default"].createElement(TableContent.TableContent, { tableClassName: cx({
+                    'Table-table--checkOnItemClick': checkOnItemClick,
+                    'Table-table--withCombine': store.combineNum > 0
+                }, tableClassName), className: tableContentClassName, itemActions: itemActions, itemAction: itemAction, store: store, classnames: cx, columns: store.filteredColumns, columnsGroup: store.columnGroup, rows: store.rows, placeholder: placeholder, render: render, onMouseMove: this.handleMouseMove, onScroll: this.handleOutterScroll, tableRef: this.tableRef, renderHeadCell: this.renderHeadCell, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, data: store.data, prefixRow: prefixRow, affixRow: affixRow, prefixRowClassName: prefixRowClassName, affixRowClassName: affixRowClassName, locale: locale, translate: translate, dispatchEvent: dispatchEvent, onEvent: onEvent, loading: loading }),
             React__default["default"].createElement(amisUi.Spinner, { overlay: true, show: loading })));
     };
     Table.prototype.doAction = function (action, args, throwErrors) {
@@ -1364,7 +1452,9 @@ var Table = /** @class */ (function (_super) {
         var heading = this.renderHeading();
         var header = this.renderHeader();
         var footer = this.renderFooter();
-        var tableClassName = cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', this.props.tableClassName);
+        var tableClassName = cx('Table-table', this.props.tableClassName, {
+            'Table-table--withCombine': store.combineNum > 0
+        });
         return (React__default["default"].createElement("div", { className: cx('Table', className, {
                 'Table--unsaved': !!store.modified || !!store.moved,
                 'Table--autoFillHeight': autoFillHeight
@@ -1373,10 +1463,14 @@ var Table = /** @class */ (function (_super) {
             header,
             heading,
             React__default["default"].createElement("div", { className: cx('Table-contentWrap'), onMouseLeave: this.handleMouseLeave },
-                React__default["default"].createElement("div", { className: cx('Table-fixedLeft'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.leftFixedColumns.length
+                React__default["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__default["default"].createElement("div", { className: cx('Table-fixedRight'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.rightFixedColumns.length
+                React__default["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()),
@@ -1451,6 +1545,12 @@ var Table = /** @class */ (function (_super) {
         canAccessSuperData: false,
         resizable: true
     };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Table.prototype, "handleFixedColumnsScroll", null);
     tslib.__decorate([
         amisCore.autobind,
         tslib.__metadata("design:type", Function),

package/lib/renderers/Table-v2/ColumnToggler.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Table-v2/HeadCellSearchDropdown.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Table-v2/TableCell.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Table-v2/index.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/TableView.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 
@@ -25,13 +25,13 @@ var TableView = /** @class */ (function (_super) {
         return _super.call(this, props) || this;
     }
     TableView.prototype.renderTd = function (td, colIndex, rowIndex) {
-        var _a = this.props, border = _a.border, borderColor = _a.borderColor; _a.render; var style = _a.style, padding = _a.padding;
+        var _a = this.props, border = _a.border, borderColor = _a.borderColor; _a.render; _a.style; var padding = _a.padding;
         var key = "td-".concat(colIndex);
         var styleBorder;
         if (border) {
             styleBorder = "1px solid ".concat(borderColor);
         }
-        return (React__default["default"].createElement("td", { style: tslib.__assign({ border: styleBorder, color: td.color, fontWeight: td.bold ? 'bold' : 'normal', background: td.background, padding: td.padding || padding, width: td.width || 'auto', textAlign: td.align || 'left', verticalAlign: td.valign || 'center' }, style), align: td.align, valign: td.valign, rowSpan: td.rowspan, colSpan: td.colspan, key: key }, this.renderTdBody(td.body)));
+        return (React__default["default"].createElement("td", { style: tslib.__assign({ border: styleBorder, color: td.color, fontWeight: td.bold ? 'bold' : 'normal', background: td.background, padding: td.padding || padding, width: td.width || 'auto', textAlign: td.align || 'left', verticalAlign: td.valign || 'center' }, td.style), align: td.align, valign: td.valign, rowSpan: td.rowspan, colSpan: td.colspan, key: key }, this.renderTdBody(td.body)));
     };
     TableView.prototype.renderTdBody = function (body) {
         var render = this.props.render;
@@ -39,7 +39,10 @@ var TableView = /** @class */ (function (_super) {
     };
     TableView.prototype.renderTds = function (tds, rowIndex) {
         var _this = this;
-        return tds.map(function (td, colIndex) { return _this.renderTd(td, colIndex, rowIndex); });
+        var data = this.props.data;
+        return tds.map(function (td, colIndex) {
+            return _this.renderTd(amisCore.resolveMappingObject(td, data), colIndex, rowIndex);
+        });
     };
     TableView.prototype.renderTr = function (tr, rowIndex) {
         var key = "tr-".concat(rowIndex);
@@ -47,13 +50,17 @@ var TableView = /** @class */ (function (_super) {
     };
     TableView.prototype.renderTrs = function (trs) {
         var _this = this;
-        var tr = trs.map(function (tr, rowIndex) { return _this.renderTr(tr, rowIndex); });
+        var data = this.props.data;
+        var tr = trs.map(function (tr, rowIndex) {
+            return _this.renderTr(amisCore.resolveMappingObject(tr, data), rowIndex);
+        });
         return tr;
     };
     TableView.prototype.renderCols = function () {
-        var cols = this.props.cols;
+        var _a = this.props, cols = _a.cols, data = _a.data;
         if (cols) {
             var colsElement = cols.map(function (col) {
+                col = amisCore.resolveMappingObject(col, data);
                 return React__default["default"].createElement("col", { span: col.span, style: col.style });
             });
             return React__default["default"].createElement("colgroup", null, colsElement);
@@ -69,12 +76,8 @@ var TableView = /** @class */ (function (_super) {
         return null;
     };
     TableView.prototype.render = function () {
-        var _a = this.props, width = _a.width, border = _a.border, borderColor = _a.borderColor, trs = _a.trs, cx = _a.classnames, className = _a.className;
-        var styleBorder;
-        if (border) {
-            styleBorder = "1px solid ".concat(borderColor);
-        }
-        return (React__default["default"].createElement("table", { className: cx('TableView', className), style: { width: width, border: styleBorder, borderCollapse: 'collapse' } },
+        var _a = this.props, width = _a.width, trs = _a.trs, cx = _a.classnames, className = _a.className;
+        return (React__default["default"].createElement("table", { className: cx('TableView', className), style: { width: width, borderCollapse: 'collapse' } },
             this.renderCaption(),
             this.renderCols(),
             React__default["default"].createElement("tbody", null, this.renderTrs(trs))));
@@ -94,7 +97,8 @@ var TableView = /** @class */ (function (_super) {
     }
     TableViewRenderer = tslib.__decorate([
         amisCore.Renderer({
-            type: 'table-view'
+            type: 'table-view',
+            autoVar: true
         })
     ], TableViewRenderer);
     return TableViewRenderer;

package/lib/renderers/Tabs.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Tag.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 
@@ -22,7 +22,7 @@ var TagField = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     TagField.prototype.render = function () {
-        var _a = this.props, label = _a.label, icon = _a.icon, displayMode = _a.displayMode, color = _a.color, className = _a.className, data = _a.data, _b = _a.style, style = _b === void 0 ? {} : _b;
+        var _a = this.props, label = _a.label, icon = _a.icon, displayMode = _a.displayMode, color = _a.color, className = _a.className, closable = _a.closable, data = _a.data, _b = _a.style, style = _b === void 0 ? {} : _b;
         label =
             amisCore.getPropValue(this.props) ||
                 (label ? amisCore.resolveVariableAndFilter(label, data, '| raw') : null);
@@ -35,7 +35,7 @@ var TagField = /** @class */ (function (_super) {
         if (amisCore.isPureVariable(color)) {
             color = amisCore.resolveVariableAndFilter(color, data);
         }
-        return (React__default["default"].createElement(amisUi.Tag, { className: className, displayMode: displayMode, color: color, icon: icon, style: style }, label));
+        return (React__default["default"].createElement(amisUi.Tag, { className: className, displayMode: displayMode, color: color, icon: icon, closable: closable, style: style }, label));
     };
     TagField.defaultProps = {
         displayMode: 'normal'

package/lib/renderers/Tasks.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Timeline.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/TooltipWrapper.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Tpl.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/VBox.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Video.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/WebComponent.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 

package/lib/renderers/Wizard.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */
 
@@ -482,7 +482,9 @@ var Wizard = /** @class */ (function (_super) {
                                     var dispatcher;
                                     return tslib.__generator(this, function (_a) {
                                         switch (_a.label) {
-                                            case 0: return [4 /*yield*/, this.dispatchEvent('submitFail', amisCore.createObject(this.props.data, { error: error }))];
+                                            case 0:
+                                                store.markSaving(false);
+                                                return [4 /*yield*/, this.dispatchEvent('submitFail', amisCore.createObject(this.props.data, { error: error }))];
                                             case 1:
                                                 dispatcher = _a.sent();
                                                 return [2 /*return*/, {

package/lib/renderers/Wrapper.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.0
+ * amis v2.1.0
  * Copyright 2018-2022 baidu
  */