amis 2.1.1-beta.2 → 2.3.0

package/esm/renderers/Table/index.js

@@ -1,12 +1,12 @@
 /**
- * amis v2.1.1-beta.2
+ * amis v2.3.0
  * Copyright 2018-2022 baidu
  */
 
 import { __extends, __awaiter, __generator, __spreadArray, __assign, __rest, __decorate, __metadata } from 'tslib';
 import React from 'react';
 import { findDOMNode } from 'react-dom';
-import { resolveVariableAndFilter, getScrollParent, offset, getStyleNumber, anyChanged, isPureVariable, isArrayChildrenModified, createObject, difference, resizeSensor, eachTree, resolveVariable, filter, noop, isObject, evalExpression, ScopedContext, autobind, Renderer, TableStore } from 'amis-core';
+import { resolveVariableAndFilter, getScrollParent, offset, getStyleNumber, isObject, anyChanged, isPureVariable, isArrayChildrenModified, createObject, difference, resizeSensor, eachTree, resolveVariable, filter, padArr, noop, evalExpression, ScopedContext, autobind, Renderer, TableStore } from 'amis-core';
 import forEach from 'lodash/forEach';
 import { Icon, Checkbox, Button, Spinner } from 'amis-ui';
 import debouce from 'lodash/debounce';
@@ -120,13 +120,8 @@ var Table = /** @class */ (function (_super) {
         return updateRows;
     };
     Table.prototype.componentDidMount = function () {
-        var _a = this.props, autoFillHeight = _a.autoFillHeight, ns = _a.classPrefix;
         var currentNode = findDOMNode(this);
-        // 获取小于所有子元素高度之和的父元素
-        var parent = getScrollParent(currentNode, function (parent) {
-            // 具备 overflow-*:auto 的父元素的高度小于当前元素
-            return (parent.offsetHeight > 0 && parent.offsetHeight < parent.scrollHeight);
-        });
+        var parent = getScrollParent(currentNode);
         if (!parent || parent === document.body) {
             parent = window;
         }
@@ -138,15 +133,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 就不会初始化加载
         // 所以这里加个判断默认初始加载一次
@@ -198,11 +188,16 @@ var Table = /** @class */ (function (_super) {
                 allParentPaddingButtom + paddingButtom + borderBottom;
             parentNode = parentNode.parentElement;
         }
-        var tableContentHeight = "".concat(viewportHeight -
-            tableContentTop -
-            tableContentWrapMarginButtom -
-            footToolbarHeight -
-            allParentPaddingButtom, "px");
+        var height = 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) {
@@ -277,14 +272,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();
@@ -362,7 +352,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 (!isAlive(item)) {
             return;
         }
@@ -380,14 +370,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, difference(item.data, item.pristine, ['id', primaryField]), item.path, undefined, item.pristine, resetOnFailed);
+        onSave(item.data, difference(item.data, item.pristine, ['id', primaryField]), item.path, undefined, item.pristine, options);
     };
     Table.prototype.handleSave = function () {
         return __awaiter(this, void 0, void 0, function () {
@@ -481,51 +472,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 = 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 () {
@@ -561,8 +528,14 @@ var Table = /** @class */ (function (_super) {
             widths2[item.getAttribute('data-index')] =
                 item.getBoundingClientRect().width;
         });
-        forEach(table.querySelectorAll('tbody>tr>*:last-child'), function (item, index) {
-            return (heights[index] = item.getBoundingClientRect().height);
+        forEach(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 = findDOMNode(this);
@@ -577,16 +550,27 @@ var Table = /** @class */ (function (_super) {
                 totalWidth += width;
             });
             forEach(table.querySelectorAll('thead>tr:first-child>th'), function (item) {
-                var width = widths2[item.getAttribute('data-index')];
-                item.style.cssText += "width: ".concat(width, "px; height: ").concat(heights.header2, "px");
-                totalWidth2 += width;
+                var rowSpan = Number(item.getAttribute('rowspan'));
+                var colSpan = Number(item.getAttribute('colspan'));
+                var thWidth = widths2[item.getAttribute('data-index')];
+                var thHeight = Number(heights.header2);
+                /* 考虑表头分组的情况，需要将固定列中对应的表头的高度按照rowSpan扩大指定倍数 */
+                if (!isNaN(thHeight) && !isNaN(rowSpan)) {
+                    thHeight *= rowSpan;
+                }
+                /* 考虑表头分组的情况，需要将分组表头按照colSpan缩小至指定倍数 */
+                if (!isNaN(thWidth) && !isNaN(colSpan) && colSpan !== 0) {
+                    thWidth /= colSpan;
+                }
+                item.style.cssText += "width: ".concat(thWidth, "px; height: ").concat(thHeight, "px");
+                totalWidth2 += thWidth;
             });
             forEach(table.querySelectorAll('colgroup>col'), function (item) {
                 var width = widths[item.getAttribute('data-index')];
                 item.setAttribute('width', "".concat(width));
             });
             forEach(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;");
         });
@@ -885,33 +869,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(__assign(__assign({}, (column.searchable === true
-                ? {
-                    type: 'input-text',
-                    name: column.name,
-                    label: column.label
-                }
-                : __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 = [];
+        padArr(activedSearchableColumns, 3, true).forEach(function (group) {
+            var children = [];
+            group.forEach(function (column) {
+                var _a, _b, _c, _d;
+                children.push(column
+                    ? __assign(__assign({}, (column.searchable === true
+                        ? {
+                            type: 'input-text',
+                            name: column.name,
+                            label: column.label
+                        }
+                        : __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',
@@ -926,6 +917,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,
@@ -935,6 +927,7 @@ var Table = /** @class */ (function (_super) {
                             },
                             onChange: function (value) {
                                 column.setEnableSearch(value);
+                                store.setSearchFormExpanded(true);
                             }
                         };
                     })
@@ -949,8 +942,16 @@ var Table = /** @class */ (function (_super) {
                     type: 'reset',
                     label: __('reset'),
                     className: 'w-18'
-                }
-            ]
+                },
+                showExpander
+                    ? {
+                        children: function () { return (React.createElement("a", { className: cx('Table-SFToggler', store.searchFormExpanded ? 'is-expanded' : ''), onClick: store.toggleSearchFormExpanded },
+                            __(store.searchFormExpanded ? 'collapse' : 'expand'),
+                            React.createElement("span", { className: cx('Table-SFToggler-arrow') },
+                                React.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })))); }
+                    }
+                    : null
+            ].filter(function (item) { return item; })
         }, {
             key: 'searchable-form',
             panelClassName: cx('Table-searchableForm'),
@@ -1011,12 +1012,12 @@ var Table = /** @class */ (function (_super) {
                 onClick: store.toggleExpandAll },
                 React.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })))));
         }
-        var affix = null;
+        var affix = [];
         if (column.searchable && column.name && !autoGenerateFilter) {
-            affix = (React.createElement(HeadCellSearchDropDown, __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 })));
+            affix.push(React.createElement(HeadCellSearchDropDown, __assign({}, this.props, { onQuery: onQuery, name: column.name, searchable: column.searchable, sortable: false, type: column.type, data: query, orderBy: store.orderBy, orderDir: store.orderDir, popOverContainer: this.getPopOverContainer })));
         }
-        else if (column.sortable && column.name) {
-            affix = (React.createElement("span", { className: cx('TableCell-sortBtn'), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+        if (column.sortable && column.name) {
+            affix.push(React.createElement("span", { className: cx('TableCell-sortBtn'), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
                     var orderBy, orderDir, order, rendererEvent;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
@@ -1064,8 +1065,8 @@ var Table = /** @class */ (function (_super) {
                 React.createElement("i", { className: cx('TableCell-sortBtn--default', store.orderBy === column.name ? '' : 'is-active') },
                     React.createElement(Icon, { icon: "sort-default", className: "icon" }))));
         }
-        else if (column.filterable && column.name) {
-            affix = (React.createElement(HeadCellFilterDropDown, __assign({}, this.props, { onQuery: onQuery, name: column.name, type: column.type, data: query, filterable: column.filterable, popOverContainer: this.getPopOverContainer })));
+        if (!column.searchable && column.filterable && column.name) {
+            affix.push(React.createElement(HeadCellFilterDropDown, __assign({}, this.props, { onQuery: onQuery, name: column.name, type: column.type, data: query, filterable: column.filterable, popOverContainer: this.getPopOverContainer })));
         }
         if (column.pristine.width) {
             props.style = props.style || {};
@@ -1131,7 +1132,9 @@ var Table = /** @class */ (function (_super) {
             prefix = (React.createElement("a", { draggable: true, onDragStart: this.handleDragStart, className: cx('Table-dragBtn') },
                 React.createElement(Icon, { icon: "drag", className: "icon" })));
         }
-        var subProps = __assign(__assign({}, props), { btnDisabled: store.dragging, data: item.locals, value: column.name
+        var subProps = __assign(__assign({}, props), { 
+            // 操作列不下发loading，否则会导致操作栏里面的所有按钮都出现loading
+            loading: column.type === 'operation' ? false : props.loading, btnDisabled: store.dragging, data: item.locals, value: column.name
                 ? 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/esm/renderers/Table-v2/ColumnToggler.js

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

package/esm/renderers/Table-v2/HeadCellSearchDropdown.js

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

package/esm/renderers/Table-v2/TableCell.js

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

package/esm/renderers/Table-v2/index.js

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

package/{lib/renderers/Table-v2 → esm/renderers/Table2}/ColumnToggler.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { ClassNamesFn } from 'amis-core';
 import { ColumnTogglerProps } from '../Table/ColumnToggler';
 import { BaseSchema } from '../../Schema';
 export interface ColumnTogglerSchema extends BaseSchema {
@@ -13,6 +14,8 @@ 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/esm/renderers/Table2/ColumnToggler.js

@@ -0,0 +1,89 @@
+/**
+ * amis v2.3.0
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __assign, __awaiter, __generator, __decorate } from 'tslib';
+import React from 'react';
+import { isVisible, createObject, Renderer } from 'amis-core';
+import { Checkbox } from 'amis-ui';
+import ColumnToggler from '../Table/ColumnToggler.js';
+
+/** @class */ ((function (_super) {
+    __extends(ColumnTogglerRenderer, _super);
+    function ColumnTogglerRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    ColumnTogglerRenderer.prototype.render = function () {
+        var _this = this;
+        var _a = this.props; _a.className; _a.store; var render = _a.render, ns = _a.classPrefix, cx = _a.classnames, tooltip = _a.tooltip, align = _a.align, cols = _a.cols, toggleAllColumns = _a.toggleAllColumns, toggleToggle = _a.toggleToggle, data = _a.data, rest = __rest(_a, ["className", "store", "render", "classPrefix", "classnames", "tooltip", "align", "cols", "toggleAllColumns", "toggleToggle", "data"]);
+        var __ = rest.translate;
+        var env = rest.env;
+        if (!cols) {
+            return null;
+        }
+        var toggableColumns = cols.filter(function (item) {
+            return isVisible(item.pristine || item, data) && item.toggable !== false;
+        });
+        var activeToggaleColumns = toggableColumns.filter(function (item) { return item.toggled !== false; });
+        return (React.createElement(ColumnToggler, __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.createElement("li", { className: cx('ColumnToggler-menuItem'), key: 'selectAll', onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, data, dispatchEvent, allToggled, rendererEvent;
+                    return __generator(this, function (_b) {
+                        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));
+                                return [4 /*yield*/, dispatchEvent('columnToggled', createObject(data, {
+                                        columns: allToggled
+                                            ? toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.map(function (column) { return column; })
+                                            : []
+                                    }))];
+                            case 1:
+                                rendererEvent = _b.sent();
+                                if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                                    return [2 /*return*/];
+                                }
+                                toggleAllColumns && toggleAllColumns(allToggled);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); } },
+                React.createElement(Checkbox, { size: "sm", classPrefix: ns, key: "checkall", checked: !!(activeToggaleColumns === null || activeToggaleColumns === void 0 ? void 0 : activeToggaleColumns.length), partial: !!((activeToggaleColumns === null || activeToggaleColumns === void 0 ? void 0 : activeToggaleColumns.length) &&
+                        (activeToggaleColumns === null || activeToggaleColumns === void 0 ? void 0 : activeToggaleColumns.length) !== (toggableColumns === null || toggableColumns === void 0 ? void 0 : toggableColumns.length)) }, __('Checkboxes.selectAll')))) : null, toggableColumns === null || toggableColumns === void 0 ? void 0 :
+            toggableColumns.map(function (column, index) { return (React.createElement("li", { className: cx('ColumnToggler-menuItem'), key: 'item' + (column.index || index), onClick: function () { return __awaiter(_this, void 0, void 0, function () {
+                    var _a, data, dispatchEvent, columns, rendererEvent;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                _a = this.props, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                                columns = activeToggaleColumns.map(function (item) { return item; });
+                                if (column.toggled !== false) {
+                                    columns.push(column);
+                                }
+                                else {
+                                    columns = columns.filter(function (c) { return c.name !== column.name; });
+                                }
+                                return [4 /*yield*/, dispatchEvent('columnToggled', createObject(data, {
+                                        columns: columns
+                                    }))];
+                            case 1:
+                                rendererEvent = _b.sent();
+                                if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                                    return [2 /*return*/];
+                                }
+                                toggleToggle && toggleToggle(!(column.toggled !== false), index);
+                                return [2 /*return*/];
+                        }
+                    });
+                }); } },
+                React.createElement(Checkbox, { size: "sm", classPrefix: ns, checked: column.toggled !== false }, column.title ? render('tpl', column.title) : null))); })));
+    };
+    ColumnTogglerRenderer = __decorate([
+        Renderer({
+            type: 'column-toggler',
+            name: 'column-toggler'
+        })
+    ], ColumnTogglerRenderer);
+    return ColumnTogglerRenderer;
+})(React.Component));

package/{lib/renderers/Table-v2 → esm/renderers/Table2}/HeadCellSearchDropdown.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { RendererProps } from 'amis-core';
-import { ActionObject } from 'amis-core';
-import { ITableStoreV2 } from 'amis-core';
+import { RendererProps, ActionObject, ITableStore2, ClassNamesFn } from 'amis-core';
 export interface QuickSearchConfig {
     type?: string;
     controls?: any;
@@ -12,10 +10,16 @@ export interface QuickSearchConfig {
 export interface HeadCellSearchProps extends RendererProps {
     name: string;
     searchable: boolean | QuickSearchConfig;
-    classPrefix: string;
     onSearch?: (values: object) => void;
     onAction?: Function;
-    store: ITableStoreV2;
+    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>;
@@ -24,6 +28,6 @@ export declare class HeadCellSearchDropDown extends React.Component<HeadCellSear
     handleAction(e: any, action: ActionObject, ctx: object, confirm: Function): Promise<void>;
     handleReset(): Promise<void>;
     handleSubmit(values: any, confirm: Function): Promise<void>;
-    isActive(): any;
+    isActive(): boolean;
     render(): JSX.Element;
 }