amis-ui 2.2.0 → 2.3.0

package/lib/components/table/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.0
  * Copyright 2018-2022 fex
  */
 
@@ -238,13 +238,14 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.componentDidMount = function () {
         var _this = this;
-        var _a, _b;
+        var _a, _b, _c, _d;
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onRef) === null || _b === void 0 ? void 0 : _b.call(_a, this);
         if (this.props.loading) {
             return;
         }
         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) {
+        var current = (_c = this.contentDom) === null || _c === void 0 ? void 0 : _c.current;
+        if ((_d = this.headerDom) === null || _d === void 0 ? void 0 : _d.current) {
             // overflow设置为hidden的情况
             var hiddenDomRefs = [this.headerDom, this.footDom];
             hiddenDomRefs.forEach(function (ref) {
@@ -504,19 +505,25 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, rowSelection = _a.rowSelection, cx = _a.classnames, expandable = _a.expandable, draggable = _a.draggable;
         var tdColumns = this.tdColumns;
         var isExpandable = this.isExpandableTable();
-        var extraCount = this.getExtraColumnCount();
+        var extraCount = this.getExtraColumnCount() - (this.isRightExpandable() ? 1 : 0);
+        var isLeftExpandable = this.isLeftExpandable();
+        var isRightExpandable = this.isRightExpandable();
+        var expandableCol = !draggable && isExpandable ? (React__default["default"].createElement("col", { className: cx('Table-expand-col'), style: {
+                width: ((expandable === null || expandable === void 0 ? void 0 : expandable.columnWidth) || DefaultCellWidth) + 'px'
+            } })) : null;
         return (React__default["default"].createElement("colgroup", null,
             draggable ? (React__default["default"].createElement("col", { className: cx('Table-drag-col'), style: { width: DefaultCellWidth + 'px' } })) : null,
             !draggable && rowSelection ? (React__default["default"].createElement("col", { className: cx('Table-selection-col'), style: {
                     width: (rowSelection.columnWidth || DefaultCellWidth) + 'px'
                 } })) : null,
-            !draggable && isExpandable ? (React__default["default"].createElement("col", { className: cx('Table-expand-col'), style: {
-                    width: ((expandable === null || expandable === void 0 ? void 0 : expandable.columnWidth) || DefaultCellWidth) + 'px'
-                } })) : null,
+            isLeftExpandable ? expandableCol : null,
             tdColumns.map(function (data, index) {
-                var width = colWidths ? colWidths[index + extraCount] : data.width;
+                var width = colWidths
+                    ? colWidths[index + extraCount - (isRightExpandable ? 1 : 0)]
+                    : data.width;
                 return (React__default["default"].createElement("col", { key: index, style: { width: typeof width === 'number' ? width + 'px' : width }, className: data.className ? cx("Table-colgroup-".concat(data.className)) : '' }));
-            })));
+            }),
+            isRightExpandable ? expandableCol : null));
     };
     Table.prototype.onResizeMouseDown = function (event, index) {
         var _a;
@@ -593,16 +600,22 @@ var Table = /** @class */ (function (_super) {
             })
             : this.state.dataSource;
         var isExpandable = this.isExpandableTable();
+        var isLeftExpandable = this.isLeftExpandable();
+        var isRightExpandable = this.isRightExpandable();
+        var expandableCell = !draggable && isExpandable ? (React__default["default"].createElement(Cell["default"], { wrapperComponent: "th", rowSpan: thColumns.length, fixed: expandable && expandable.fixed ? 'left' : '', className: cx('Table-row-expand-icon-cell') })) : null;
         var allRowKeys = [];
         var allRows = [];
+        var maxSelectedLength = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.maxSelectedLength;
         dataList.forEach(function (data) {
-            allRowKeys.push(data[keyField]);
-            allRows.push(data);
-            if (!expandable && _this.hasChildrenRow(data)) {
-                allRowKeys = tslib.__spreadArray(tslib.__spreadArray([], allRowKeys, true), _this.getDataChildrenKeys(data), true);
-                data[_this.getChildrenColumnName()].forEach(function (item) {
-                    return allRows.push(item);
-                });
+            if (!!maxSelectedLength && allRows.length < maxSelectedLength) {
+                allRowKeys.push(data[keyField]);
+                allRows.push(data);
+                if (!expandable && _this.hasChildrenRow(data)) {
+                    allRowKeys = tslib.__spreadArray(tslib.__spreadArray([], allRowKeys, true), _this.getDataChildrenKeys(data), true);
+                    data[_this.getChildrenColumnName()].forEach(function (item) {
+                        return allRows.push(item);
+                    });
+                }
             }
         });
         return (React__default["default"].createElement("thead", { ref: this.theadDom, className: cx('Table-thead') }, thColumns.map(function (data, index) {
@@ -613,21 +626,21 @@ var Table = /** @class */ (function (_super) {
                         React__default["default"].createElement(Checkbox["default"], { key: "checkAll", partial: _this.state.selectedRowKeys.length > 0 &&
                                 _this.state.selectedRowKeys.length <
                                     allRowKeys.length, checked: _this.state.selectedRowKeys.length > 0, onChange: function (value) { return tslib.__awaiter(_this, void 0, void 0, function () {
-                                var changeRows, selectedRows, selectedRowKeys, prevented;
+                                var selectedRows, selectedRowKeys, prevented;
                                 var _this = this;
                                 return tslib.__generator(this, function (_a) {
                                     switch (_a.label) {
                                         case 0:
                                             if (value) {
-                                                changeRows = dataList.filter(function (data) { return !_this.hasCheckedRows(data); });
+                                                dataList.filter(function (data) { return !_this.hasCheckedRows(data); });
                                             }
                                             else {
-                                                changeRows = this.selectedRows;
+                                                this.selectedRows;
                                             }
                                             selectedRows = value ? allRows : [];
                                             selectedRowKeys = value ? allRowKeys : [];
                                             if (!onSelectAll) return [3 /*break*/, 2];
-                                            return [4 /*yield*/, onSelectAll(selectedRows, value ? [] : selectedRows, changeRows)];
+                                            return [4 /*yield*/, onSelectAll(selectedRows, value ? selectedRowKeys : [], value ? [] : selectedRows)];
                                         case 1:
                                             prevented = _a.sent();
                                             if (prevented) {
@@ -644,7 +657,7 @@ var Table = /** @class */ (function (_super) {
                             rowSelection.selections.length > 0 ? (React__default["default"].createElement(HeadCellSelect["default"], { key: "checkSelection", keys: allRowKeys, selections: rowSelection.selections, popOverContainer: _this.getPopOverContainer })) : null
                     ]
                     : null)) : null,
-                !draggable && isExpandable && index === 0 ? (React__default["default"].createElement(Cell["default"], { wrapperComponent: "th", rowSpan: thColumns.length, fixed: expandable && expandable.fixed ? 'left' : '', className: cx('Table-row-expand-icon-cell') })) : null,
+                isLeftExpandable && index === 0 ? expandableCell : null,
                 data.map(function (item, i) {
                     var _a, _b;
                     var sort = null;
@@ -691,7 +704,8 @@ var Table = /** @class */ (function (_super) {
                         }), groupId: item.groupId, depth: item.depth }, typeof item.title === 'function'
                         ? item.title(children)
                         : item.title));
-                })));
+                }),
+                isRightExpandable && index === 0 ? expandableCell : null));
         })));
     };
     Table.prototype.onRowClick = function (event, record, rowIndex) {
@@ -766,20 +780,24 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.onMouseLeave = function () {
         this.setState({ hoverRow: null });
     };
-    Table.prototype.onExpandRow = function (data) {
+    Table.prototype.onExpandRows = function (data) {
+        var _this = this;
         var expandedRowKeys = this.state.expandedRowKeys;
         var expandable = this.props.expandable;
-        var key = data[this.getExpandableKeyField()];
-        this.setState({ expandedRowKeys: tslib.__spreadArray(tslib.__spreadArray([], expandedRowKeys, true), [key], false) });
+        var keys = data.map(function (d) { return d[_this.getExpandableKeyField()]; });
+        this.setState({ expandedRowKeys: tslib.__spreadArray(tslib.__spreadArray([], expandedRowKeys, true), keys, true) });
         (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand) && (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand(true, data));
     };
-    Table.prototype.onCollapseRow = function (data) {
+    Table.prototype.onCollapseRows = function (data) {
+        var _this = this;
         var expandedRowKeys = this.state.expandedRowKeys;
         var expandable = this.props.expandable;
-        var key = data[this.getExpandableKeyField()];
-        // 还是得模糊匹配 否则'3'、3匹配不上
-        this.setState({ expandedRowKeys: expandedRowKeys.filter(function (k) { return k != key; }) });
-        (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand) && (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand(false, data));
+        var keys = data.map(function (d) { return d[_this.getExpandableKeyField()]; });
+        this.setState({
+            expandedRowKeys: expandedRowKeys.filter(function (k) { return !keys.find(function (v) { return v == k; }); } // 模糊匹配 否则'3'、3匹配不上
+            )
+        });
+        (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand) && (expandable === null || expandable === void 0 ? void 0 : expandable.onExpand(true, data));
     };
     Table.prototype.getChildrenColumnName = function () {
         var childrenColumnName = this.props.childrenColumnName;
@@ -801,8 +819,8 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.isExpandableRow = function (data, rowIndex) {
         var expandable = this.props.expandable;
         return (expandable &&
-            expandable.rowExpandable &&
-            expandable.rowExpandable(data, rowIndex));
+            (!expandable.rowExpandable ||
+                (expandable.rowExpandable && expandable.rowExpandable(data, rowIndex))));
     };
     // 获取当前行数据所有子行的key值
     Table.prototype.getDataChildrenKeys = function (data) {
@@ -831,10 +849,14 @@ var Table = /** @class */ (function (_super) {
         var length = intersection__default["default"](selectedRowKeys, childrenKeys).length;
         return length > 0;
     };
-    Table.prototype.getExpandedIcons = function (isExpanded, record) {
+    Table.prototype.isExpanded = function (record) {
+        var _this = this;
+        return !!find__default["default"](this.state.expandedRowKeys, function (key) { return key == record[_this.getExpandableKeyField()]; }); // == 匹配 否则'3'、3匹配不上
+    };
+    Table.prototype.getExpandedIcons = function (record) {
         var cx = this.props.classnames;
-        return isExpanded ? (React__default["default"].createElement("i", { className: cx('Table-expandBtn', 'is-active'), onClick: this.onCollapseRow.bind(this, record) },
-            React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon" }))) : (React__default["default"].createElement("i", { className: cx('Table-expandBtn'), onClick: this.onExpandRow.bind(this, record) },
+        return this.isExpanded(record) ? (React__default["default"].createElement("i", { className: cx('Table-expandBtn', 'is-active'), onClick: this.onCollapseRows.bind(this, [record]) },
+            React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon" }))) : (React__default["default"].createElement("i", { className: cx('Table-expandBtn'), onClick: this.onExpandRows.bind(this, [record]) },
             React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon" })));
     };
     Table.prototype.selectedSingleRow = function (value, data) {
@@ -889,11 +911,13 @@ var Table = /** @class */ (function (_super) {
         var isExpandable = this.isExpandableTable();
         var defaultKey = this.getRowSelectionKeyField();
         var colCount = this.getExtraColumnCount();
+        var isLeftExpandable = this.isLeftExpandable();
+        var isRightExpandable = this.isRightExpandable();
         // 当前行是否可展开
         var isExpandableRow = this.isExpandableRow(data, rowIndex);
         // 当前行是否有children
         var hasChildrenRow = this.hasChildrenRow(data);
-        var isExpanded = !!find__default["default"](this.state.expandedRowKeys, function (key) { return key == data[_this.getExpandableKeyField()]; }); // == 匹配 否则'3'、3匹配不上
+        var isExpanded = this.isExpanded(data);
         // 设置缩进效果
         var indentDom = levels.length > 0 ? (React__default["default"].createElement("span", { className: cx('Table-row-indent', "indent-level-".concat(levels.length)), style: levels.length > 0
                 ? { paddingLeft: indentSize * levels.length + 'px' }
@@ -925,9 +949,7 @@ var Table = /** @class */ (function (_super) {
                         _b[cx("Table-cell-height-".concat(lineHeight))] = !!lineHeight,
                         _b)) },
                     i === 0 && levels.length > 0 ? indentDom : null,
-                    i === 0 && hasChildrenRow
-                        ? _this.getExpandedIcons(isExpanded, data)
-                        : null,
+                    i === 0 && hasChildrenRow ? _this.getExpandedIcons(data) : null,
                     render ? children : data[item.name])));
         });
         var rowClassNameClass = rowClassName && typeof rowClassName === 'function'
@@ -956,6 +978,13 @@ var Table = /** @class */ (function (_super) {
         var isChecked = !!find__default["default"](this.state.selectedRowKeys, function (key) { return key === data[defaultKey]; });
         var hasChildrenChecked = this.hasCheckedChildrenRows(data);
         var isRadio = rowSelection && rowSelection.type === 'radio';
+        var expandableCell = !draggable && isExpandable ? (React__default["default"].createElement(Cell["default"], { fixed: expandable && expandable.fixed
+                ? isRightExpandable
+                    ? 'right'
+                    : 'left'
+                : '', className: cx('Table-cell-expand-icon-cell') }, isExpandableRow || hasChildrenRow
+            ? this.getExpandedIcons(data)
+            : null)) : null;
         return [
             React__default["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, {
                     'Table-row-disabled': !!checkboxProps.disabled
@@ -969,10 +998,9 @@ var Table = /** @class */ (function (_super) {
                             }
                             event && event.stopPropagation();
                         } }, checkboxProps)))) : null,
-                !draggable && isExpandable ? (React__default["default"].createElement(Cell["default"], { fixed: expandable && expandable.fixed ? 'left' : '', className: cx('Table-cell-expand-icon-cell') }, isExpandableRow || hasChildrenRow
-                    ? this.getExpandedIcons(isExpanded, data)
-                    : null)) : null,
-                cells),
+                isLeftExpandable ? expandableCell : null,
+                cells,
+                isRightExpandable ? expandableCell : null),
             children
         ];
     };
@@ -1000,19 +1028,31 @@ var Table = /** @class */ (function (_super) {
         // 就不支持默认嵌套了
         return !!expandable;
     };
+    // 展开列放到右侧 会影响之前的一些合并的规则
+    Table.prototype.isRightExpandable = function () {
+        var expandable = this.props.expandable;
+        return expandable && expandable.position === 'right';
+    };
+    // 展开列放到左侧
+    Table.prototype.isLeftExpandable = function () {
+        var expandable = this.props.expandable;
+        return (expandable && (!expandable.position || expandable.position === 'left'));
+    };
     Table.prototype.isNestedTable = function () {
         var _this = this;
         var dataSource = this.props.dataSource;
         return !!find__default["default"](dataSource, function (item) { return _this.hasChildrenRow(item); });
     };
+    // 计算自动增加的列数
+    // 选择、拖拽、展开
     Table.prototype.getExtraColumnCount = function () {
-        var _a = this.props, draggable = _a.draggable, rowSelection = _a.rowSelection;
+        var _a = this.props, draggable = _a.draggable, rowSelection = _a.rowSelection, expandable = _a.expandable;
         var count = 0;
         if (draggable) {
             count++;
         }
         else {
-            if (this.isExpandableTable()) {
+            if (this.isExpandableTable() && (expandable === null || expandable === void 0 ? void 0 : expandable.position) !== 'none') {
                 count++;
             }
             if (rowSelection) {
@@ -1027,17 +1067,26 @@ var Table = /** @class */ (function (_super) {
         var cells = [];
         var trs = [];
         var colCount = this.getExtraColumnCount();
+        var isRightExpandable = this.isRightExpandable() ? 1 : 0;
         Array.isArray(summary)
             ? summary.forEach(function (s, index) {
                 Array.isArray(s)
                     ? trs.push(React__default["default"].createElement("tr", { onMouseEnter: function (e) { return _this.onRowMouseEnter(e); }, onMouseLeave: function (e) { return _this.onRowMouseLeave(e); }, key: 'summary-tr-' + index, className: cx('Table-summary-row') }, s.map(function (d, i) {
                         // 将操作列自动添加到第一列，用户的colSpan只需要关心实际的列数
-                        var colSpan = i === 0 ? (d.colSpan || 1) + colCount : d.colSpan;
+                        var colSpan = i === 0
+                            ? (d.colSpan || 1) + colCount - isRightExpandable
+                            : i === s.length - 1
+                                ? (d.colSpan || 1) + isRightExpandable
+                                : d.colSpan;
                         return (React__default["default"].createElement(Cell["default"], { key: 'summary-tr-cell-' + i, fixed: d.fixed, colSpan: colSpan }, typeof d.render === 'function'
                             ? d.render(dataSource)
                             : d.render));
                     })))
-                    : cells.push(React__default["default"].createElement(Cell["default"], { key: 'summary-cell-' + index, fixed: s.fixed, colSpan: cells.length === 0 ? (s.colSpan || 1) + colCount : s.colSpan }, typeof s.render === 'function'
+                    : cells.push(React__default["default"].createElement(Cell["default"], { key: 'summary-cell-' + index, fixed: s.fixed, colSpan: cells.length === 0
+                            ? (s.colSpan || 1) + colCount - isRightExpandable
+                            : index === summary.length - 1
+                                ? (s.colSpan || 1) + isRightExpandable
+                                : s.colSpan }, typeof s.render === 'function'
                         ? s.render(dataSource)
                         : s.render));
             })
@@ -1106,9 +1155,7 @@ var Table = /** @class */ (function (_super) {
         // 设置了横向滚动轴 则table的table-layout为fixed
         var hasScrollX = scroll && scroll.x;
         var hoverRow = this.state.hoverRow;
-        // 如果设置了列宽 那么table-layout为fixed才能生效
-        var columnWidth = this.tdColumns.some(function (item) { return item.width; });
-        var tableLayout = hasScrollX || columnWidth ? 'fixed' : 'auto';
+        var tableLayout = hasScrollX ? 'fixed' : 'auto';
         var tableStyle = hasScrollX ? { width: scroll.x + 'px' } : {};
         return (React__default["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__default["default"].createElement(ItemActionsWrapper["default"], { dom: hoverRow.target, classnames: cx }, typeof itemActions === 'function'

package/lib/components/virtual-list/SizeAndPositionManager.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.0
  * Copyright 2018-2022 fex
  */
 

package/lib/components/virtual-list/constants.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.0
  * Copyright 2018-2022 fex
  */
 

package/lib/components/virtual-list/index.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.0
  * Copyright 2018-2022 fex
  */