amis 1.9.1-beta.0 → 1.9.1-beta.4

package/lib/components/table/index.js

@@ -24,6 +24,7 @@ var Spinner_1 = (0, tslib_1.__importDefault)(require("../Spinner"));
 var HeadCellSort_1 = (0, tslib_1.__importDefault)(require("./HeadCellSort"));
 var HeadCellFilter_1 = (0, tslib_1.__importDefault)(require("./HeadCellFilter"));
 var HeadCellSelect_1 = (0, tslib_1.__importDefault)(require("./HeadCellSelect"));
+var ItemActionsWrapper_1 = (0, tslib_1.__importDefault)(require("./ItemActionsWrapper"));
 var Cell_1 = (0, tslib_1.__importDefault)(require("./Cell"));
 function getMaxLevelThRowSpan(columns) {
     var maxLevel = 0;
@@ -152,7 +153,8 @@ var Table = /** @class */ (function (_super) {
             expandedRowKeys: (0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], (props.expandable ? props.expandable.expandedRowKeys || [] : []), true), (props.expandable
                 ? props.expandable.defaultExpandedRowKeys || []
                 : []), true),
-            colWidths: []
+            colWidths: [],
+            hoverRow: null
         };
         _this.onTableContentScroll = _this.onTableContentScroll.bind(_this);
         _this.getPopOverContainer = _this.getPopOverContainer.bind(_this);
@@ -716,7 +718,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' + (item.key || 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-".concat(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)
@@ -747,8 +749,16 @@ var Table = /** @class */ (function (_super) {
                 td.classList.add(cx('Table-cell-row-hover')); // 保证有列fixed的时候样式一致
             }
         }
-        if (record && onRow) {
-            onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+        if (record) {
+            var target = event.target;
+            if (target.tagName !== 'TR') {
+                target = target.closest('tr');
+            }
+            this.setState({ hoverRow: { target: target, rowIndex: rowIndex, record: record } }, function () {
+                if (onRow) {
+                    onRow.onRowMouseEnter && onRow.onRowMouseEnter(event, record, rowIndex);
+                }
+            });
         }
     };
     Table.prototype.onRowMouseLeave = function (event, record, rowIndex) {
@@ -763,10 +773,15 @@ var Table = /** @class */ (function (_super) {
                 td.classList.remove(cx('Table-cell-row-hover'));
             }
         }
-        if (record && onRow) {
-            onRow.onRowMouseLeave && onRow.onRowMouseLeave(event, record, rowIndex);
+        if (record) {
+            if (onRow) {
+                onRow.onRowMouseLeave && onRow.onRowMouseLeave(event, record, rowIndex);
+            }
         }
     };
+    Table.prototype.onMouseLeave = function (event) {
+        this.setState({ hoverRow: null });
+    };
     Table.prototype.onExpandRow = function (data) {
         var expandedRowKeys = this.state.expandedRowKeys;
         var expandable = this.props.expandable;
@@ -897,9 +912,10 @@ 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: { paddingLeft: indentSize * levels.length + 'px' } })) : null;
+        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 cells = tdColumns.map(function (item, i) {
-            var _a;
+            var _a, _b;
             var render = item.render && typeof item.render === 'function'
                 ? item.render(data[item.key], data, rowIndex, i)
                 : null;
@@ -913,12 +929,16 @@ var Table = /** @class */ (function (_super) {
                     props.rowSpan === 1;
                 }
             }
-            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 }),
-                react_1.default.createElement("div", { className: cx('Table-cell-wrapper', (_a = {},
-                        _a[cx('Table-cell-wrapper-prefix')] = i === 0 &&
-                            (!!indentDom || (levels.length === 0 && hasChildrenRow)),
-                        _a[cx("Table-cell-height-".concat(lineHeight))] = !!lineHeight,
-                        _a)) },
+            var className = typeof item.className === 'function'
+                ? 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)) }),
+                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,
+                        _b)) },
                     i === 0 && levels.length > 0 ? indentDom : null,
                     i === 0 && hasChildrenRow
                         ? _this.getExpandedIcons(isExpanded, data)
@@ -1096,10 +1116,14 @@ var Table = /** @class */ (function (_super) {
         return (react_1.default.createElement("div", { className: cx('Table-loading') }, typeof loading === 'boolean' ? react_1.default.createElement(Spinner_1.default, null) : loading));
     };
     Table.prototype.renderTable = function () {
-        var _a = this.props, scroll = _a.scroll, footSummary = _a.footSummary, loading = _a.loading, showHeader = _a.showHeader, cx = _a.classnames;
+        var _a = this.props, scroll = _a.scroll, footSummary = _a.footSummary, loading = _a.loading, showHeader = _a.showHeader, itemActions = _a.itemActions, cx = _a.classnames;
         // 设置了横向滚动轴 则table的table-layout为fixed
         var hasScrollX = scroll && scroll.x;
-        return (react_1.default.createElement("div", { ref: this.contentDom, className: cx('Table-content'), style: hasScrollX ? { overflow: 'auto hidden' } : {} },
+        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,
             react_1.default.createElement("table", { style: hasScrollX
                     ? { width: scroll.x + 'px', tableLayout: 'fixed' }
                     : { tableLayout: 'auto' }, className: cx('Table-table') },
@@ -1132,7 +1156,7 @@ var Table = /** @class */ (function (_super) {
                 headSummary ? (react_1.default.createElement("tbody", null, this.renderSummaryRow(headSummary))) : null)));
     };
     Table.prototype.renderScrollTableBody = function () {
-        var _a = this.props, scroll = _a.scroll, cx = _a.classnames;
+        var _a = this.props, scroll = _a.scroll, itemActions = _a.itemActions, cx = _a.classnames;
         var style = {};
         var tableStyle = {};
         if (scroll && (scroll.y || scroll.x)) {
@@ -1145,7 +1169,11 @@ var Table = /** @class */ (function (_super) {
                 tableLayout: 'fixed'
             });
         }
-        return (react_1.default.createElement("div", { ref: this.bodyDom, className: cx('Table-body'), style: style },
+        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,
             react_1.default.createElement("table", { className: cx('Table-table'), style: tableStyle },
                 this.renderColGroup(),
                 this.renderTBody())));