amis 1.4.2-beta.6 → 1.5.0

package/lib/renderers/Table/index.js

@@ -11,6 +11,7 @@ require("./ColumnToggler");
 var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
 var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
 var table_1 = require("../../store/table");
+var file_saver_1 = require("file-saver");
 var helper_1 = require("../../utils/helper");
 var tpl_builtin_1 = require("../../utils/tpl-builtin");
 var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
@@ -26,8 +27,9 @@ var TableContent_1 = require("./TableContent");
 var image_1 = require("../../utils/image");
 var TableBody_1 = require("./TableBody");
 var mobx_state_tree_1 = require("mobx-state-tree");
-var ItemActionsWrapper_1 = (0, tslib_1.__importDefault)(require("./ItemActionsWrapper"));
 var ColumnToggler_1 = (0, tslib_1.__importDefault)(require("./ColumnToggler"));
+var offset_1 = (0, tslib_1.__importDefault)(require("../../utils/offset"));
+var dom_1 = require("../../utils/dom");
 /**
  * 将 url 转成绝对地址
  */
@@ -79,6 +81,7 @@ var Table = /** @class */ (function (_super) {
         _this.subFormRef = _this.subFormRef.bind(_this);
         _this.handleColumnToggle = _this.handleColumnToggle.bind(_this);
         _this.renderAutoFilterForm = _this.renderAutoFilterForm.bind(_this);
+        _this.updateAutoFillHeight = _this.updateAutoFillHeight.bind(_this);
         var store = props.store, columns = props.columns, selectable = props.selectable, columnsTogglable = props.columnsTogglable, draggable = props.draggable, orderBy = props.orderBy, orderDir = props.orderDir, multiple = props.multiple, footable = props.footable, primaryField = props.primaryField, itemCheckableOn = props.itemCheckableOn, itemDraggableOn = props.itemDraggableOn, hideCheckToggler = props.hideCheckToggler, combineFromIndex = props.combineFromIndex, expandConfig = props.expandConfig, formItem = props.formItem, keepItemSelectionOnPageChange = props.keepItemSelectionOnPageChange, maxKeepItemSelectionLength = props.maxKeepItemSelectionLength;
         var combineNum = props.combineNum;
         if (typeof combineNum === 'string') {
@@ -149,6 +152,54 @@ var Table = /** @class */ (function (_super) {
         this.affixDetect();
         parent.addEventListener('scroll', this.affixDetect);
         window.addEventListener('resize', this.affixDetect);
+        this.updateAutoFillHeight();
+        window.addEventListener('resize', this.updateAutoFillHeight);
+    };
+    /**
+     * 自动设置表格高度占满界面剩余区域
+     * 用 css 实现有点麻烦，要改很多结构，所以先用 dom hack 了，避免对之前的功能有影响
+     */
+    Table.prototype.updateAutoFillHeight = function () {
+        var _this = this;
+        var _a = this.props, autoFillHeight = _a.autoFillHeight, footerToolbar = _a.footerToolbar, ns = _a.classPrefix;
+        if (!autoFillHeight) {
+            return;
+        }
+        var table = (0, react_dom_1.findDOMNode)(this);
+        var tableContent = table.querySelector("." + ns + "Table-content");
+        var tableContentWrap = table.querySelector("." + ns + "Table-contentWrap");
+        var footToolbar = table.querySelector("." + ns + "Table-footToolbar");
+        if (!tableContent) {
+            return;
+        }
+        // 计算 table-content 在 dom 中的位置
+        var tableContentTop = (0, offset_1.default)(tableContent).top;
+        var viewportHeight = window.innerHeight;
+        // 有时候会拿不到 footToolbar？
+        var footToolbarHeight = footToolbar ? (0, offset_1.default)(footToolbar).height : 0;
+        // 有时候会拿不到 footToolbar，等一下在执行
+        if (!footToolbarHeight && footerToolbar && footerToolbar.length) {
+            setTimeout(function () {
+                _this.updateAutoFillHeight();
+            }, 100);
+            return;
+        }
+        var tableContentWrapMarginButtom = (0, dom_1.getStyleNumber)(tableContentWrap, 'margin-bottom');
+        // 循环计算父级节点的 pddding，这里不考虑父级节点还可能会有其它兄弟节点的情况了
+        var allParentPaddingButtom = 0;
+        var parentNode = tableContent.parentElement;
+        while (parentNode) {
+            var paddingButtom = (0, dom_1.getStyleNumber)(parentNode, 'padding-bottom');
+            var borderBottom = (0, dom_1.getStyleNumber)(parentNode, 'border-bottom-width');
+            allParentPaddingButtom =
+                allParentPaddingButtom + paddingButtom + borderBottom;
+            parentNode = parentNode.parentElement;
+        }
+        tableContent.style.height = viewportHeight -
+            tableContentTop -
+            tableContentWrapMarginButtom -
+            footToolbarHeight -
+            allParentPaddingButtom + "px";
     };
     Table.prototype.componentDidUpdate = function (prevProps) {
         var props = this.props;
@@ -217,6 +268,7 @@ var Table = /** @class */ (function (_super) {
         var parent = this.parentNode;
         parent && parent.removeEventListener('scroll', this.affixDetect);
         window.removeEventListener('resize', this.affixDetect);
+        window.removeEventListener('resize', this.updateAutoFillHeight);
         this.updateTableInfoLazy.cancel();
         this.unSensor && this.unSensor();
         formItem && (0, mobx_state_tree_1.isAlive)(formItem) && formItem.setSubStore(null);
@@ -351,7 +403,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.affixDetect = function () {
         var _a, _b, _c, _d;
-        if (!this.props.affixHeader || !this.table) {
+        if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
             return;
         }
         var ns = this.props.classPrefix;
@@ -684,7 +736,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.handleColumnToggle = function (columns) {
         var store = this.props.store;
-        store.update({ columns: columns });
+        store.updateColumns(columns);
     };
     Table.prototype.renderAutoFilterForm = function () {
         var _a = this.props, render = _a.render, store = _a.store, onSearchableFromReset = _a.onSearchableFromReset, onSearchableFromSubmit = _a.onSearchableFromSubmit, onSearchableFromInit = _a.onSearchableFromInit, cx = _a.classnames, __ = _a.translate;
@@ -1234,7 +1286,7 @@ var Table = /** @class */ (function (_super) {
                                 return [3 /*break*/, 17];
                             case 16:
                                 if (column.tpl) {
-                                    sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)((0, tpl_1.filter)(column.tpl, row.data));
+                                    sheetRow.getCell(columIndex).value = (0, helper_1.removeHTMLTag)((0, tpl_1.filter)(column.tpl, (0, helper_1.createObject)(data, row.data)));
                                 }
                                 else {
                                     sheetRow.getCell(columIndex).value = value;
@@ -1253,7 +1305,7 @@ var Table = /** @class */ (function (_super) {
                                     blob = new Blob([buffer], {
                                         type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                                     });
-                                    saveAs(blob, filename + '.xlsx');
+                                    (0, file_saver_1.saveAs)(blob, filename + '.xlsx');
                                 }
                                 return [2 /*return*/];
                         }
@@ -1331,40 +1383,23 @@ var Table = /** @class */ (function (_super) {
             ? [toolbarNode, footerNode]
             : footerNode || toolbarNode || null;
     };
-    Table.prototype.renderItemActions = function () {
-        var _a = this.props, itemActions = _a.itemActions, render = _a.render, store = _a.store, cx = _a.classnames;
-        var finalActions = Array.isArray(itemActions)
-            ? itemActions.filter(function (action) { return !action.hiddenOnHover; })
-            : [];
-        if (!finalActions.length) {
-            return null;
-        }
-        return (react_1.default.createElement(ItemActionsWrapper_1.default, { store: store, classnames: cx },
-            react_1.default.createElement("div", { className: cx('Table-itemActions') }, finalActions.map(function (action, index) {
-                return render("itemAction/" + index, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, action), { isMenuItem: true }), {
-                    key: index,
-                    item: store.hoverRow,
-                    data: store.hoverRow.locals,
-                    rowIndex: store.hoverRow.index
-                });
-            }))));
-    };
     Table.prototype.renderTableContent = function () {
-        var _a = this.props, cx = _a.classnames, tableClassName = _a.tableClassName, store = _a.store, placeholder = _a.placeholder, render = _a.render, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, prefixRow = _a.prefixRow, locale = _a.locale, affixRow = _a.affixRow, translate = _a.translate, itemAction = _a.itemAction;
+        var _a = this.props, cx = _a.classnames, tableClassName = _a.tableClassName, store = _a.store, placeholder = _a.placeholder, render = _a.render, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, prefixRow = _a.prefixRow, locale = _a.locale, affixRow = _a.affixRow, tableContentClassName = _a.tableContentClassName, translate = _a.translate, itemAction = _a.itemAction, autoFillHeight = _a.autoFillHeight, itemActions = _a.itemActions;
         // 理论上来说 store.rows 应该也行啊
         // 不过目前看来只有这样写它才会重新更新视图
         store.rows.length;
-        return (react_1.default.createElement(TableContent_1.TableContent, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName), itemAction: itemAction, 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, locale: locale, translate: translate }));
+        return (react_1.default.createElement(TableContent_1.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, locale: locale, translate: translate }));
     };
     Table.prototype.render = function () {
-        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns, autoGenerateFilter = _a.autoGenerateFilter;
+        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns, autoFillHeight = _a.autoFillHeight, autoGenerateFilter = _a.autoGenerateFilter;
         this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
         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);
         return (react_1.default.createElement("div", { className: cx('Table', className, {
-                'Table--unsaved': !!store.modified || !!store.moved
+                'Table--unsaved': !!store.modified || !!store.moved,
+                'Table--autoFillHeight': autoFillHeight
             }) },
             autoGenerateFilter ? this.renderAutoFilterForm() : null,
             header,
@@ -1376,8 +1411,7 @@ var Table = /** @class */ (function (_super) {
                 react_1.default.createElement("div", { className: cx('Table-fixedRight'), onMouseMove: this.handleMouseMove }, affixColumns !== false && store.rightFixedColumns.length
                     ? this.renderFixedColumns(store.rows, store.rightFixedColumns, false, tableClassName)
                     : null),
-                this.renderTableContent(),
-                store.hoverRow ? this.renderItemActions() : null),
+                this.renderTableContent()),
             this.renderAffixHeader(tableClassName),
             footer));
     };
@@ -1421,7 +1455,8 @@ var Table = /** @class */ (function (_super) {
         'headerToolbarClassName',
         'toolbarClassName',
         'footerToolbarClassName',
-        'itemBadge'
+        'itemBadge',
+        'autoFillHeight'
     ];
     Table.defaultProps = {
         className: '',