amis 1.4.1 → 1.4.2-beta.1

package/lib/renderers/Table/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RendererProps } from '../../factory';
 import { SchemaNode, Action } from '../../types';
+import './ColumnToggler';
 import { ITableStore, IColumn, IRow } from '../../store/table';
 import Sortable from 'sortablejs';
 import { TableCell } from './TableCell';
@@ -9,6 +10,7 @@ import { SchemaPopOver } from '../PopOver';
 import { SchemaQuickEdit } from '../QuickEdit';
 import { SchemaCopyable } from '../Copyable';
 import { SchemaRemark } from '../Remark';
+import { BadgeSchema } from '../../components/Badge';
 /**
  * 表格列，不指定类型时默认为文本类型。
  */
@@ -48,7 +50,7 @@ export declare type TableColumnObject = {
     /**
      * 是否可快速搜索
      */
-    searchable?: boolean;
+    searchable?: boolean | SchemaObject;
     /**
      * 配置是否默认展示
      */
@@ -191,6 +193,14 @@ export interface TableSchema extends BaseSchema {
      * 行样式表表达式
      */
     rowClassNameExpr?: string;
+    /**
+     * 行角标
+     */
+    itemBadge?: BadgeSchema;
+    /**
+     * 开启查询区域，会根据列元素的searchable属性值，自动生成查询条件表单
+     */
+    autoGenerateFilter?: boolean;
 }
 export interface TableProps extends RendererProps {
     title?: string;
@@ -245,6 +255,7 @@ export interface TableProps extends RendererProps {
     popOverContainer?: any;
     canAccessSuperData?: boolean;
     reUseRow?: boolean;
+    itemBadge?: BadgeSchema;
 }
 declare type ExportExcelToolbar = SchemaNode & {
     api?: SchemaApi;
@@ -323,6 +334,8 @@ export default class Table extends React.Component<TableProps, object> {
     handleColResizeMouseDown(e: React.MouseEvent<HTMLElement>): void;
     handleColResizeMouseMove(e: MouseEvent): void;
     handleColResizeMouseUp(e: MouseEvent): void;
+    handleColumnToggle(columns: Array<IColumn>): void;
+    renderAutoFilterForm(): React.ReactNode;
     renderHeading(): JSX.Element | null;
     renderHeadCell(column: IColumn, props?: any): JSX.Element;
     renderCell(region: string, column: IColumn, item: IRow, props: any, ignoreDrag?: boolean): JSX.Element | null;

package/lib/renderers/Table/index.js

@@ -7,7 +7,7 @@ var react_dom_1 = require("react-dom");
 var factory_1 = require("../../factory");
 var forEach_1 = (0, tslib_1.__importDefault)(require("lodash/forEach"));
 var tpl_1 = require("../../utils/tpl");
-var DropDownButton_1 = (0, tslib_1.__importDefault)(require("../DropDownButton"));
+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");
@@ -26,6 +26,8 @@ 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"));
 /**
  * 将 url 转成绝对地址
  */
@@ -75,6 +77,8 @@ var Table = /** @class */ (function (_super) {
         _this.handleMouseMove = _this.handleMouseMove.bind(_this);
         _this.handleMouseLeave = _this.handleMouseLeave.bind(_this);
         _this.subFormRef = _this.subFormRef.bind(_this);
+        _this.handleColumnToggle = _this.handleColumnToggle.bind(_this);
+        _this.renderAutoFilterForm = _this.renderAutoFilterForm.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') {
@@ -199,8 +203,12 @@ var Table = /** @class */ (function (_super) {
             Table.syncRows(store, props, prevProps) && this.syncSelected();
         }
         else if ((0, helper_1.isArrayChildrenModified)(prevProps.selected, props.selected)) {
+            var prevSelectedRows = store.selectedRows
+                .map(function (item) { return item.id; })
+                .join(',');
             store.updateSelected(props.selected || [], props.valueField);
-            this.syncSelected();
+            var selectedRows = store.selectedRows.map(function (item) { return item.id; }).join(',');
+            prevSelectedRows !== selectedRows && this.syncSelected();
         }
         this.updateTableInfoLazy();
     };
@@ -515,7 +523,7 @@ var Table = /** @class */ (function (_super) {
         return (0, react_dom_1.findDOMNode)(this);
     };
     Table.prototype.handleMouseMove = function (e) {
-        var tr = e.target.closest('tr[data-index]');
+        var tr = e.target.closest('tr[data-id]');
         if (!tr) {
             return;
         }
@@ -526,17 +534,17 @@ var Table = /** @class */ (function (_super) {
             (!itemActions || !itemActions.filter(function (item) { return !item.hiddenOnHover; }).length)) {
             return;
         }
-        var index = parseInt(tr.getAttribute('data-index'), 10);
-        if (store.hoverIndex === index) {
+        var id = tr.getAttribute('data-id');
+        var row = store.hoverRow;
+        if ((row === null || row === void 0 ? void 0 : row.id) === id) {
             return;
         }
-        store.rows.forEach(function (item, key) { return item.setIsHover(index === key); });
+        (0, helper_1.eachTree)(store.rows, function (item) { return item.setIsHover(item.id === id); });
     };
     Table.prototype.handleMouseLeave = function () {
         var store = this.props.store;
-        if (~store.hoverIndex) {
-            store.rows[store.hoverIndex].setIsHover(false);
-        }
+        var row = store.hoverRow;
+        row === null || row === void 0 ? void 0 : row.setIsHover(false);
     };
     Table.prototype.handleDragStart = function (e) {
         var store = this.props.store;
@@ -674,6 +682,87 @@ var Table = /** @class */ (function (_super) {
         document.removeEventListener('mousemove', this.handleColResizeMouseMove);
         document.removeEventListener('mouseup', this.handleColResizeMouseUp);
     };
+    Table.prototype.handleColumnToggle = function (columns) {
+        var store = this.props.store;
+        store.update({ columns: 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;
+        var searchableColumns = store.searchableColumns;
+        var activedSearchableColumns = store.activedSearchableColumns;
+        if (!searchableColumns.length) {
+            return null;
+        }
+        var groupedSearchableColumns = [
+            { body: [], md: 4 },
+            { body: [], md: 4 },
+            { body: [], md: 4 }
+        ];
+        activedSearchableColumns.forEach(function (column, index) {
+            var _a, _b, _c, _d;
+            groupedSearchableColumns[index % 3].body.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.searchable), { name: (_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name, label: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label, mode: 'horizontal' }));
+        });
+        return render('searchable-form', {
+            type: 'form',
+            api: null,
+            title: '',
+            mode: 'normal',
+            submitText: __('search'),
+            body: [
+                {
+                    type: 'grid',
+                    columns: groupedSearchableColumns
+                }
+            ],
+            actions: [
+                {
+                    type: 'dropdown-button',
+                    label: __('Table.searchFields'),
+                    className: cx('Table-searchableForm-dropdown', 'mr-2'),
+                    level: 'link',
+                    trigger: 'click',
+                    size: 'sm',
+                    align: 'right',
+                    buttons: searchableColumns.map(function (column) {
+                        var _a, _b, _c, _d;
+                        return {
+                            type: 'checkbox',
+                            className: cx('Table-searchableForm-checkbox'),
+                            name: "__search_" + ((_b = (_a = column.searchable) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : column.name),
+                            option: (_d = (_c = column.searchable) === null || _c === void 0 ? void 0 : _c.label) !== null && _d !== void 0 ? _d : column.label,
+                            value: column.enableSearch,
+                            badge: {
+                                offset: [-10, 5],
+                                visibleOn: "" + (column.toggable && !column.toggled && column.enableSearch)
+                            },
+                            onChange: function (value) {
+                                column.setEnableSearch(value);
+                            }
+                        };
+                    })
+                },
+                {
+                    type: 'submit',
+                    label: __('search'),
+                    level: 'primary',
+                    className: 'w-18'
+                },
+                {
+                    type: 'reset',
+                    label: __('reset'),
+                    className: 'w-18'
+                }
+            ]
+        }, {
+            key: 'searchable-form',
+            panelClassName: cx('Table-searchableForm'),
+            actionsClassName: cx('Table-searchableForm-footer'),
+            onReset: onSearchableFromReset,
+            onSubmit: onSearchableFromSubmit,
+            onInit: onSearchableFromInit,
+            formStore: undefined
+        });
+    };
     Table.prototype.renderHeading = function () {
         var _a = this.props, title = _a.title, store = _a.store, hideQuickSaveBtn = _a.hideQuickSaveBtn, data = _a.data, cx = _a.classnames, saveImmediately = _a.saveImmediately, headingClassName = _a.headingClassName, quickSaveApi = _a.quickSaveApi, __ = _a.translate;
         if (title ||
@@ -705,7 +794,7 @@ var Table = /** @class */ (function (_super) {
         return null;
     };
     Table.prototype.renderHeadCell = function (column, props) {
-        var _a = this.props, store = _a.store, query = _a.query, onQuery = _a.onQuery, multiple = _a.multiple, env = _a.env, render = _a.render, ns = _a.classPrefix, resizable = _a.resizable, cx = _a.classnames;
+        var _a = this.props, store = _a.store, query = _a.query, onQuery = _a.onQuery, multiple = _a.multiple, env = _a.env, render = _a.render, ns = _a.classPrefix, resizable = _a.resizable, cx = _a.classnames, autoGenerateFilter = _a.autoGenerateFilter;
         if (column.type === '__checkme') {
             return (react_1.default.createElement("th", (0, tslib_1.__assign)({}, props, { className: cx(column.pristine.className) }), store.rows.length && multiple ? (react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, partial: !store.allChecked, checked: store.someChecked, disabled: store.disabledHeadCheckbox, onChange: this.handleCheckAll })) : ('\u00A0')));
         }
@@ -724,7 +813,7 @@ var Table = /** @class */ (function (_super) {
                 react_1.default.createElement(icons_1.Icon, { icon: "right-arrow-bold", className: "icon" })))));
         }
         var affix = null;
-        if (column.searchable && column.name) {
+        if (column.searchable && column.name && !autoGenerateFilter) {
             affix = (react_1.default.createElement(HeadCellSearchDropdown_1.HeadCellSearchDropDown, (0, tslib_1.__assign)({}, this.props, { onQuery: onQuery, name: column.name, searchable: column.searchable, sortable: column.sortable, type: column.type, data: query, orderBy: store.orderBy, orderDir: store.orderDir, popOverContainer: this.getPopOverContainer })));
         }
         else if (column.sortable && column.name) {
@@ -793,7 +882,7 @@ var Table = /** @class */ (function (_super) {
     };
     Table.prototype.renderCell = function (region, column, item, props, ignoreDrag) {
         if (ignoreDrag === void 0) { ignoreDrag = false; }
-        var _a = this.props, render = _a.render, store = _a.store, multiple = _a.multiple, ns = _a.classPrefix, cx = _a.classnames, checkOnItemClick = _a.checkOnItemClick, popOverContainer = _a.popOverContainer, canAccessSuperData = _a.canAccessSuperData;
+        var _a = this.props, render = _a.render, store = _a.store, multiple = _a.multiple, ns = _a.classPrefix, cx = _a.classnames, checkOnItemClick = _a.checkOnItemClick, popOverContainer = _a.popOverContainer, canAccessSuperData = _a.canAccessSuperData, itemBadge = _a.itemBadge;
         if (column.name && item.rowSpans[column.name] === 0) {
             return null;
         }
@@ -826,7 +915,9 @@ var Table = /** @class */ (function (_super) {
         }
         var subProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { btnDisabled: store.dragging, data: item.locals, value: column.name
                 ? (0, tpl_builtin_1.resolveVariable)(column.name, canAccessSuperData ? item.locals : item.data)
-                : column.value, popOverContainer: popOverContainer || this.getPopOverContainer, rowSpan: item.rowSpans[column.name], quickEditFormRef: this.subFormRef, prefix: prefix, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData });
+                : column.value, popOverContainer: popOverContainer || this.getPopOverContainer, rowSpan: item.rowSpans[column.name], quickEditFormRef: this.subFormRef, prefix: prefix, onImageEnlarge: this.handleImageEnlarge, canAccessSuperData: canAccessSuperData, row: item, itemBadge: itemBadge, showBadge: !props.isHead &&
+                itemBadge &&
+                store.firstToggledColumnIndex === props.colIndex });
         delete subProps.label;
         return render(region, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column.pristine), { column: column.pristine, type: 'cell' }), subProps);
     };
@@ -907,14 +998,15 @@ var Table = /** @class */ (function (_super) {
         return void 0;
     };
     Table.prototype.renderColumnsToggler = function (config) {
-        var _a = this.props, className = _a.className, store = _a.store, ns = _a.classPrefix, cx = _a.classnames, rest = (0, tslib_1.__rest)(_a, ["className", "store", "classPrefix", "classnames"]);
+        var _a;
+        var _b = this.props, className = _b.className, store = _b.store, ns = _b.classPrefix, cx = _b.classnames, rest = (0, tslib_1.__rest)(_b, ["className", "store", "classPrefix", "classnames"]);
         var __ = rest.translate;
         var env = rest.env;
         var render = this.props.render;
         if (!store.columnsTogglable) {
             return null;
         }
-        return (react_1.default.createElement(DropDownButton_1.default, (0, tslib_1.__assign)({}, rest, { tooltip: __('Table.columnsVisibility'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : undefined, align: config ? config.align : 'left', isActived: store.hasColumnHidden(), classnames: cx, classPrefix: ns, key: "columns-toggable", size: "sm", label: react_1.default.createElement(icons_1.Icon, { icon: "columns", className: "icon m-r-none" }) }), store.toggableColumns.map(function (column) { return (react_1.default.createElement("li", { className: cx('DropDown-menuItem'), key: column.index, onClick: column.toggleToggle },
+        return (react_1.default.createElement(ColumnToggler_1.default, (0, tslib_1.__assign)({}, rest, ((0, helper_1.isObject)(config) ? config : {}), { tooltip: (config === null || config === void 0 ? void 0 : config.tooltip) || __('Table.columnsVisibility'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : undefined, align: (_a = config === null || config === void 0 ? void 0 : config.align) !== null && _a !== void 0 ? _a : 'left', isActived: store.hasColumnHidden(), classnames: cx, classPrefix: ns, key: "columns-toggable", size: (config === null || config === void 0 ? void 0 : config.size) || 'sm', label: (config === null || config === void 0 ? void 0 : config.label) || react_1.default.createElement(icons_1.Icon, { icon: "columns", className: "icon m-r-none" }), draggable: config === null || config === void 0 ? void 0 : config.draggable, columns: store.columnsData, onColumnToggle: this.handleColumnToggle }), store.toggableColumns.map(function (column) { return (react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index, onClick: column.toggleToggle },
             react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: column.toggled }, column.label ? render('tpl', column.label) : null))); })));
     };
     Table.prototype.renderDragToggler = function () {
@@ -1247,27 +1339,13 @@ var Table = /** @class */ (function (_super) {
         if (!finalActions.length) {
             return null;
         }
-        var rowIndex = store.hoverIndex;
-        var heights = this.heights;
-        var height = 40;
-        var top = 0;
-        if (heights && heights[rowIndex]) {
-            height = heights[rowIndex];
-            top += heights.header;
-            for (var i = rowIndex - 1; i >= 0; i--) {
-                top += heights[i];
-            }
-        }
-        return (react_1.default.createElement("div", { className: cx('Table-itemActions-wrap'), style: {
-                top: top,
-                height: height
-            } },
+        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.rows[rowIndex],
-                    data: store.rows[rowIndex].locals,
-                    rowIndex: rowIndex
+                    item: store.hoverRow,
+                    data: store.hoverRow.locals,
+                    rowIndex: store.hoverRow.index
                 });
             }))));
     };
@@ -1279,7 +1357,7 @@ var Table = /** @class */ (function (_super) {
         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 }));
     };
     Table.prototype.render = function () {
-        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns;
+        var _a = this.props, className = _a.className, store = _a.store, cx = _a.classnames, affixColumns = _a.affixColumns, autoGenerateFilter = _a.autoGenerateFilter;
         this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了，已经渲染了就不重复渲染了。
         var heading = this.renderHeading();
         var header = this.renderHeader();
@@ -1288,6 +1366,7 @@ var Table = /** @class */ (function (_super) {
         return (react_1.default.createElement("div", { className: cx('Table', className, {
                 'Table--unsaved': !!store.modified || !!store.moved
             }) },
+            autoGenerateFilter ? this.renderAutoFilterForm() : null,
             header,
             heading,
             react_1.default.createElement("div", { className: cx('Table-contentWrap'), onMouseLeave: this.handleMouseLeave },
@@ -1298,7 +1377,7 @@ var Table = /** @class */ (function (_super) {
                     ? this.renderFixedColumns(store.rows, store.rightFixedColumns, false, tableClassName)
                     : null),
                 this.renderTableContent(),
-                ~store.hoverIndex ? this.renderItemActions() : null),
+                store.hoverRow ? this.renderItemActions() : null),
             this.renderAffixHeader(tableClassName),
             footer));
     };
@@ -1341,7 +1420,8 @@ var Table = /** @class */ (function (_super) {
         'popOverContainer',
         'headerToolbarClassName',
         'toolbarClassName',
-        'footerToolbarClassName'
+        'footerToolbarClassName',
+        'itemBadge'
     ];
     Table.defaultProps = {
         className: '',