amis 2.1.1-beta.2 → 2.2.0

package/lib/renderers/Table/index.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.1.1-beta.2
+ * amis v2.2.0
  * Copyright 2018-2022 baidu
  */
 
@@ -132,11 +132,19 @@ var Table = /** @class */ (function (_super) {
         return updateRows;
     };
     Table.prototype.componentDidMount = function () {
-        var _a = this.props, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
         var currentNode = ReactDOM.findDOMNode(this);
         // 获取小于所有子元素高度之和的父元素
         var parent = amisCore.getScrollParent(currentNode, function (parent) {
-            // 具备 overflow-*:auto 的父元素的高度小于当前元素
+            if (parent.getAttribute('role') === 'dialog') {
+                /**
+                 *
+                 * * 兼容在 Dialog 中的场景,
+                 * ! 有时 dialog 内容并没有撑出滚动条，这里需要做一下特殊处理
+                 * TODO 有没有一种更好的方式来判断
+                 */
+                return true;
+            }
+            // * 具备 overflow-*:auto 的父元素的高度小于当前元素
             return (parent.offsetHeight > 0 && parent.offsetHeight < parent.scrollHeight);
         });
         if (!parent || parent === document.body) {
@@ -150,15 +158,10 @@ 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 _b = this.props, store = _b.store, autoGenerateFilter = _b.autoGenerateFilter, onSearchableFromInit = _b.onSearchableFromInit;
+        var _a = this.props, store = _a.store, autoGenerateFilter = _a.autoGenerateFilter, onSearchableFromInit = _a.onSearchableFromInit;
         // autoGenerateFilter 开启后
         // 如果没有一个 searchable 的 column crud 就不会初始化加载
         // 所以这里加个判断默认初始加载一次
@@ -210,11 +213,16 @@ var Table = /** @class */ (function (_super) {
                 allParentPaddingButtom + paddingButtom + borderBottom;
             parentNode = parentNode.parentElement;
         }
-        var tableContentHeight = "".concat(viewportHeight -
-            tableContentTop -
-            tableContentWrapMarginButtom -
-            footToolbarHeight -
-            allParentPaddingButtom, "px");
+        var height = amisCore.isObject(autoFillHeight)
+            ? autoFillHeight.height
+            : 0;
+        var tableContentHeight = height
+            ? "".concat(height, "px")
+            : "".concat(viewportHeight -
+                tableContentTop -
+                tableContentWrapMarginButtom -
+                footToolbarHeight -
+                allParentPaddingButtom, "px");
         tableContent.style.height = tableContentHeight;
         /**autoFillHeight开启后固定列会溢出Table高度，需要同步一下 */
         if (leftFixedColumns) {
@@ -289,14 +297,9 @@ var Table = /** @class */ (function (_super) {
         this.updateTableInfoLazy();
     };
     Table.prototype.componentWillUnmount = function () {
-        var _a = this.props, formItem = _a.formItem, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
+        var formItem = this.props.formItem;
         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();
@@ -374,7 +377,7 @@ var Table = /** @class */ (function (_super) {
             });
         });
     };
-    Table.prototype.handleQuickChange = function (item, values, saveImmediately, savePristine, resetOnFailed) {
+    Table.prototype.handleQuickChange = function (item, values, saveImmediately, savePristine, options) {
         if (!mobxStateTree.isAlive(item)) {
             return;
         }
@@ -392,14 +395,15 @@ var Table = /** @class */ (function (_super) {
         if (saveImmediately && saveImmediately.api) {
             this.props.onAction(null, {
                 actionType: 'ajax',
-                api: saveImmediately.api
+                api: saveImmediately.api,
+                reload: options === null || options === void 0 ? void 0 : options.reload
             }, values);
             return;
         }
         if (!onSave) {
             return;
         }
-        onSave(item.data, amisCore.difference(item.data, item.pristine, ['id', primaryField]), item.path, undefined, item.pristine, resetOnFailed);
+        onSave(item.data, amisCore.difference(item.data, item.pristine, ['id', primaryField]), item.path, undefined, item.pristine, options);
     };
     Table.prototype.handleSave = function () {
         return tslib.__awaiter(this, void 0, void 0, function () {
@@ -493,51 +497,27 @@ 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;
-        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) {
+        var _a, _b, _c, _d;
+        if (!this.props.affixHeader || !this.table || this.props.autoFillHeight) {
             return;
         }
+        var ns = this.props.classPrefix;
         var dom = ReactDOM.findDOMNode(this);
-        var headerHeight = ((_a = dom.querySelector(".".concat(ns, "Table-headToolbar"))) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().height) || 0;
+        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 affixedDom = dom.querySelector(".".concat(ns, "Table-fixedTop"));
+        var affixedShadowDom = dom.querySelector(".".concat(ns, "Table-fixedTop-shadow"));
         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");
-            var preStatus = affixedDom.classList.contains('in');
-            affixed
-                ? affixedDom.classList.add('in')
-                : affixedDom.classList.remove('in');
-            // 出现affixHeader时重新计算列表宽度
-            if (!preStatus && affixed) {
-                this.updateTableInfoLazy();
-            }
-        }
+        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 () {
@@ -573,8 +553,14 @@ var Table = /** @class */ (function (_super) {
             widths2[item.getAttribute('data-index')] =
                 item.getBoundingClientRect().width;
         });
-        forEach__default["default"](table.querySelectorAll('tbody>tr>*:last-child'), function (item, index) {
-            return (heights[index] = item.getBoundingClientRect().height);
+        forEach__default["default"](table.querySelectorAll('tbody>tr>*:last-child'), 
+        /**
+         * ! 弹窗中的特殊说明
+         * ! 在弹窗中，modal 有一个 scale 的动画，导致 getBoundingClientRect 获取的高度不准确
+         * ! width 准确是因为 table-layout: auto 导致
+         */
+        function (item, index) {
+            return (heights[index] = getComputedStyle(item).height);
         });
         // 让 react 去更新非常慢，还是手动更新吧。
         var dom = ReactDOM.findDOMNode(this);
@@ -598,7 +584,7 @@ var Table = /** @class */ (function (_super) {
                 item.setAttribute('width', "".concat(width));
             });
             forEach__default["default"](table.querySelectorAll('tbody>tr'), function (item, index) {
-                item.style.cssText += "height: ".concat(heights[index], "px");
+                item.style.cssText += "height: ".concat(heights[index]);
             });
             table.style.cssText += "width: ".concat(Math.max(totalWidth, totalWidth2), "px;table-layout: auto;");
         });
@@ -897,33 +883,40 @@ var Table = /** @class */ (function (_super) {
         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(tslib.__assign(tslib.__assign({}, (column.searchable === true
-                ? {
-                    type: 'input-text',
-                    name: column.name,
-                    label: column.label
-                }
-                : tslib.__assign({ type: 'input-text', name: column.name }, 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' }));
+        var body = [];
+        amisCore.padArr(activedSearchableColumns, 3, true).forEach(function (group) {
+            var children = [];
+            group.forEach(function (column) {
+                var _a, _b, _c, _d;
+                children.push(column
+                    ? tslib.__assign(tslib.__assign({}, (column.searchable === true
+                        ? {
+                            type: 'input-text',
+                            name: column.name,
+                            label: column.label
+                        }
+                        : tslib.__assign({ type: 'input-text', name: column.name }, 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 }) : {
+                    type: 'tpl',
+                    tpl: ''
+                });
+            });
+            body.push({
+                type: 'group',
+                body: children
+            });
         });
+        var showExpander = body.length > 1;
+        // todo 以后做动画
+        if (!store.searchFormExpanded) {
+            body.splice(1, body.length - 1);
+        }
         return render('searchable-form', {
             type: 'form',
             api: null,
             title: '',
-            mode: 'normal',
+            mode: 'horizontal',
             submitText: __('search'),
-            body: [
-                {
-                    type: 'grid',
-                    columns: groupedSearchableColumns
-                }
-            ],
+            body: body,
             actions: [
                 {
                     type: 'dropdown-button',
@@ -938,6 +931,7 @@ var Table = /** @class */ (function (_super) {
                         return {
                             type: 'checkbox',
                             className: cx('Table-searchableForm-checkbox'),
+                            inputClassName: cx('Table-searchableForm-checkbox-inner'),
                             name: "__search_".concat((_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,
@@ -947,6 +941,7 @@ var Table = /** @class */ (function (_super) {
                             },
                             onChange: function (value) {
                                 column.setEnableSearch(value);
+                                store.setSearchFormExpanded(true);
                             }
                         };
                     })
@@ -961,8 +956,16 @@ var Table = /** @class */ (function (_super) {
                     type: 'reset',
                     label: __('reset'),
                     className: 'w-18'
-                }
-            ]
+                },
+                showExpander
+                    ? {
+                        children: function () { return (React__default["default"].createElement("a", { className: cx('Table-SFToggler', store.searchFormExpanded ? 'is-expanded' : ''), onClick: store.toggleSearchFormExpanded },
+                            __(store.searchFormExpanded ? 'collapse' : 'expand'),
+                            React__default["default"].createElement("span", { className: cx('Table-SFToggler-arrow') },
+                                React__default["default"].createElement(amisUi.Icon, { icon: "right-arrow-bold", className: "icon" })))); }
+                    }
+                    : null
+            ].filter(function (item) { return item; })
         }, {
             key: 'searchable-form',
             panelClassName: cx('Table-searchableForm'),
@@ -1143,7 +1146,9 @@ var Table = /** @class */ (function (_super) {
             prefix = (React__default["default"].createElement("a", { draggable: true, onDragStart: this.handleDragStart, className: cx('Table-dragBtn') },
                 React__default["default"].createElement(amisUi.Icon, { icon: "drag", className: "icon" })));
         }
-        var subProps = tslib.__assign(tslib.__assign({}, props), { btnDisabled: store.dragging, data: item.locals, value: column.name
+        var subProps = tslib.__assign(tslib.__assign({}, props), { 
+            // 操作列不下发loading，否则会导致操作栏里面的所有按钮都出现loading
+            loading: column.type === 'operation' ? false : props.loading, btnDisabled: store.dragging, data: item.locals, value: column.name
                 ? amisCore.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, row: item, itemBadge: itemBadge, showBadge: !props.isHead &&
                 itemBadge &&

package/lib/renderers/Table2/ColumnToggler.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ClassNamesFn } from 'amis-core';
+import { ColumnTogglerProps } from '../Table/ColumnToggler';
+import { BaseSchema } from '../../Schema';
+export interface ColumnTogglerSchema extends BaseSchema {
+    label?: string;
+    tooltip?: string;
+    size?: string;
+    icon?: string;
+    draggable?: boolean;
+    align?: string;
+}
+export interface ColumnTogglerRendererProps extends ColumnTogglerProps {
+    toggleAllColumns?: Function;
+    toggleToggle?: Function;
+    cols: Array<any>;
+    classnames: ClassNamesFn;
+    classPrefix: string;
+}
+export declare class ColumnTogglerRenderer extends React.Component<ColumnTogglerRendererProps> {
+    render(): JSX.Element | null;
+}

package/lib/renderers/{Table-v2 → Table2}/ColumnToggler.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.1.1-beta.2
+ * amis v2.2.0
  * Copyright 2018-2022 baidu
  */
 
@@ -28,7 +28,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
         if (!cols) {
             return null;
         }
-        var toggableColumns = cols.filter(function (item) { return amisCore.isVisible(item.pristine || item, data) && item.toggable !== false; });
+        var toggableColumns = cols.filter(function (item) {
+            return amisCore.isVisible(item.pristine || item, data) && item.toggable !== false;
+        });
         var activeToggaleColumns = toggableColumns.filter(function (item) { return item.toggled !== false; });
         return (React__default["default"].createElement(ColumnToggler["default"], tslib.__assign({}, rest, { render: render, tooltip: tooltip || __('Table.columnsVisibility'), tooltipContainer: env && env.getModalContainer ? env.getModalContainer : undefined, isActived: cols.findIndex(function (column) { return !column.toggled; }) !== -1, align: align !== null && align !== void 0 ? align : 'right', classnames: cx, classPrefix: ns, key: "columns-toggable", columns: cols, activeToggaleColumns: activeToggaleColumns, data: data }),
             (toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.length) ? (React__default["default"].createElement("li", { className: cx('ColumnToggler-menuItem'), key: 'selectAll', onClick: function () { return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -37,8 +39,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
                         switch (_b.label) {
                             case 0:
                                 _a = this.props, data = _a.data, dispatchEvent = _a.dispatchEvent;
-                                allToggled = !((activeToggaleColumns === null || activeToggaleColumns === void 0 ? void 0 : activeToggaleColumns.length) ===
-                                    (toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.length));
+                                allToggled = !((activeToggaleColumns === null || activeToggaleColumns === void 0 ? void 0 : activeToggaleColumns.length) === (toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.length));
                                 return [4 /*yield*/, dispatchEvent('columnToggled', amisCore.createObject(data, {
                                         columns: allToggled
                                             ? toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.map(function (column) { return column; })
@@ -67,7 +68,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
                                     columns.push(column);
                                 }
                                 else {
-                                    columns = columns.filter(function (c) { return c.key !== column.key; });
+                                    columns = columns.filter(function (c) { return c.name !== column.name; });
                                 }
                                 return [4 /*yield*/, dispatchEvent('columnToggled', amisCore.createObject(data, {
                                         columns: columns

package/lib/renderers/Table2/HeadCellSearchDropdown.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { RendererProps, ActionObject, ITableStore2, ClassNamesFn } from 'amis-core';
+export interface QuickSearchConfig {
+    type?: string;
+    controls?: any;
+    tabs?: any;
+    fieldSet?: any;
+    [propName: string]: any;
+}
+export interface HeadCellSearchProps extends RendererProps {
+    name: string;
+    searchable: boolean | QuickSearchConfig;
+    onSearch?: (values: object) => void;
+    onAction?: Function;
+    store: ITableStore2;
+    sortable?: boolean;
+    label?: string;
+    orderBy: string;
+    orderDir: string;
+    popOverContainer?: any;
+    classnames: ClassNamesFn;
+    classPrefix: string;
+}
+export declare class HeadCellSearchDropDown extends React.Component<HeadCellSearchProps, any> {
+    formItems: Array<string>;
+    constructor(props: HeadCellSearchProps);
+    buildSchema(): any;
+    handleAction(e: any, action: ActionObject, ctx: object, confirm: Function): Promise<void>;
+    handleReset(): Promise<void>;
+    handleSubmit(values: any, confirm: Function): Promise<void>;
+    isActive(): boolean;
+    render(): JSX.Element;
+}

package/lib/renderers/{Table-v2 → Table2}/HeadCellSearchDropdown.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.1.1-beta.2
+ * amis v2.2.0
  * Copyright 2018-2022 baidu
  */
 
@@ -10,8 +10,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var React = require('react');
 var ReactDOM = require('react-dom');
-var amisUi = require('amis-ui');
 var amisCore = require('amis-core');
+var amisUi = require('amis-ui');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -198,9 +198,7 @@ var HeadCellSearchDropDown = /** @class */ (function (_super) {
         return (React__default["default"].createElement(amisUi.HeadCellDropDown, { className: "".concat(ns, "TableCell-searchBtn"), layerClassName: cx("".concat(ns, "TableCell-searchPopOver"), searchable.className), active: isActive, filterIcon: React__default["default"].createElement(amisUi.Icon, { icon: "search", className: "icon" }), popOverContainer: popOverContainer ? popOverContainer : function () { return ReactDOM.findDOMNode(_this); }, filterDropdown: function (_a) {
                 _a.setSelectedKeys; _a.selectedKeys; var confirm = _a.confirm; _a.clearFilters;
                 return render('quick-search-form', formSchema, {
-                    data: tslib.__assign(tslib.__assign({}, data), { orderBy: orderBy, order: orderBy && orderBy === name
-                            ? store.order
-                            : '' }),
+                    data: tslib.__assign(tslib.__assign({}, data), { orderBy: orderBy, order: orderBy && orderBy === name ? store.order : '' }),
                     onSubmit: function (values) { return _this.handleSubmit(values, confirm); },
                     onAction: function (e, action, ctx) {
                         _this.handleAction(e, action, ctx, confirm);

package/lib/renderers/Table2/TableCell.d.ts

@@ -0,0 +1,6 @@
+import { TableCell } from '../Table';
+export declare class CellFieldRenderer extends TableCell {
+    static defaultProps: {
+        wrapperComponent: string;
+    };
+}

package/lib/renderers/{Table-v2 → Table2}/TableCell.js

@@ -1,5 +1,5 @@
 /**
- * amis v2.1.1-beta.2
+ * amis v2.2.0
  * Copyright 2018-2022 baidu
  */