amis 2.0.2 → 2.2.0

package/esm/renderers/Table/index.js

@@ -1,12 +1,12 @@
 /**
- * amis v2.0.2
+ * amis v2.2.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,7 +120,21 @@ var Table = /** @class */ (function (_super) {
         return updateRows;
     };
     Table.prototype.componentDidMount = function () {
-        var parent = getScrollParent(findDOMNode(this));
+        var currentNode = findDOMNode(this);
+        // 获取小于所有子元素高度之和的父元素
+        var parent = getScrollParent(currentNode, function (parent) {
+            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) {
             parent = window;
         }
@@ -187,11 +201,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) {
@@ -346,7 +365,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;
         }
@@ -364,14 +383,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 () {
@@ -479,7 +499,10 @@ var Table = /** @class */ (function (_super) {
         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');
         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');
@@ -518,8 +541,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);
@@ -543,7 +572,7 @@ var Table = /** @class */ (function (_super) {
                 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;");
         });
@@ -842,33 +871,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',
@@ -883,6 +919,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,
@@ -892,6 +929,7 @@ var Table = /** @class */ (function (_super) {
                             },
                             onChange: function (value) {
                                 column.setEnableSearch(value);
+                                store.setSearchFormExpanded(true);
                             }
                         };
                     })
@@ -906,8 +944,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'),
@@ -1088,7 +1134,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 &&
@@ -1101,31 +1149,33 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, store = _a.store, affixHeader = _a.affixHeader, render = _a.render, cx = _a.classnames;
         var hideHeader = store.filteredColumns.every(function (column) { return !column.label; });
         var columnsGroup = store.columnGroup;
-        return affixHeader ? (React.createElement("div", { className: cx('Table-fixedTop', {
-                'is-fakeHide': hideHeader
-            }) },
-            this.renderHeader(false),
-            this.renderHeading(),
-            React.createElement("div", { className: cx('Table-fixedLeft') }, store.leftFixedColumns.length
-                ? this.renderFixedColumns(store.rows, store.leftFixedColumns, true, tableClassName)
-                : null),
-            React.createElement("div", { className: cx('Table-fixedRight') }, store.rightFixedColumns.length
-                ? this.renderFixedColumns(store.rows, store.rightFixedColumns, true, tableClassName)
-                : null),
-            React.createElement("div", { className: cx('Table-wrapper') },
-                React.createElement("table", { ref: this.affixedTableRef, className: tableClassName },
-                    React.createElement("colgroup", null, store.filteredColumns.map(function (column) { return (React.createElement("col", { key: column.index, "data-index": column.index })); })),
-                    React.createElement("thead", null,
-                        columnsGroup.length ? (React.createElement("tr", null, columnsGroup.map(function (item, index) { return (React.createElement("th", { key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan }, item.label ? render('tpl', item.label) : null)); }))) : null,
-                        React.createElement("tr", null, store.filteredColumns.map(function (column) {
-                            var _a;
-                            return ((_a = columnsGroup.find(function (group) { return ~group.has.indexOf(column); })) === null || _a === void 0 ? void 0 : _a.rowSpan) === 2
-                                ? null
-                                : _this.renderHeadCell(column, {
-                                    'key': column.index,
-                                    'data-index': column.index
-                                });
-                        }))))))) : null;
+        return affixHeader ? (React.createElement(React.Fragment, null,
+            React.createElement("div", { className: cx('Table-fixedTop', {
+                    'is-fakeHide': hideHeader
+                }) },
+                this.renderHeader(false),
+                this.renderHeading(),
+                React.createElement("div", { className: cx('Table-fixedLeft') }, store.leftFixedColumns.length
+                    ? this.renderFixedColumns(store.rows, store.leftFixedColumns, true, tableClassName)
+                    : null),
+                React.createElement("div", { className: cx('Table-fixedRight') }, store.rightFixedColumns.length
+                    ? this.renderFixedColumns(store.rows, store.rightFixedColumns, true, tableClassName)
+                    : null),
+                React.createElement("div", { className: cx('Table-wrapper') },
+                    React.createElement("table", { ref: this.affixedTableRef, className: tableClassName },
+                        React.createElement("colgroup", null, store.filteredColumns.map(function (column) { return (React.createElement("col", { key: column.index, "data-index": column.index })); })),
+                        React.createElement("thead", null,
+                            columnsGroup.length ? (React.createElement("tr", null, columnsGroup.map(function (item, index) { return (React.createElement("th", { key: index, "data-index": item.index, colSpan: item.colSpan, rowSpan: item.rowSpan }, item.label ? render('tpl', item.label) : null)); }))) : null,
+                            React.createElement("tr", null, store.filteredColumns.map(function (column) {
+                                var _a;
+                                return ((_a = columnsGroup.find(function (group) { return ~group.has.indexOf(column); })) === null || _a === void 0 ? void 0 : _a.rowSpan) === 2
+                                    ? null
+                                    : _this.renderHeadCell(column, {
+                                        'key': column.index,
+                                        'data-index': column.index
+                                    });
+                            })))))),
+            React.createElement("div", { className: cx('Table-fixedTop-shadow') }))) : null;
     };
     Table.prototype.renderFixedColumns = function (rows, columns, headerOnly, tableClassName) {
         var _this = this;
@@ -1134,7 +1184,9 @@ var Table = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, store = _a.store, cx = _a.classnames, render = _a.render, data = _a.data, translate = _a.translate, locale = _a.locale, checkOnItemClick = _a.checkOnItemClick, buildItemProps = _a.buildItemProps, rowClassNameExpr = _a.rowClassNameExpr, rowClassName = _a.rowClassName, itemAction = _a.itemAction, dispatchEvent = _a.dispatchEvent, onEvent = _a.onEvent;
         var hideHeader = store.filteredColumns.every(function (column) { return !column.label; });
         var columnsGroup = store.columnGroup;
-        return (React.createElement("table", { className: cx('Table-table', store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName) },
+        return (React.createElement("table", { className: cx('Table-table', tableClassName, {
+                'Table-table--withCombine': store.combineNum > 0
+            }) },
             React.createElement("thead", null,
                 columnsGroup.length ? (React.createElement("tr", null, columnsGroup.map(function (item, index) {
                     var renderColumns = columns.filter(function (a) { return ~item.has.indexOf(a); });
@@ -1151,7 +1203,9 @@ var Table = /** @class */ (function (_super) {
                 }))),
             headerOnly ? null : !rows.length ? (React.createElement("tbody", null,
                 React.createElement("tr", { className: cx('Table-placeholder') },
-                    React.createElement("td", { colSpan: columns.length }, render('placeholder', translate(placeholder || 'placeholder.noData')))))) : (React.createElement(TableBody, { tableClassName: cx(store.combineNum > 0 ? 'Table-table--withCombine' : '', tableClassName), itemAction: itemAction, classnames: cx, render: render, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, ignoreFootableContent: true, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, columns: columns, rows: rows, locale: locale, translate: translate, rowsProps: {
+                    React.createElement("td", { colSpan: columns.length }, render('placeholder', translate(placeholder || 'placeholder.noData')))))) : (React.createElement(TableBody, { tableClassName: cx(tableClassName, {
+                    'Table-table--withCombine': store.combineNum > 0
+                }), itemAction: itemAction, classnames: cx, render: render, renderCell: this.renderCell, onCheck: this.handleCheck, onQuickChange: store.dragging ? undefined : this.handleQuickChange, footable: store.footable, ignoreFootableContent: true, footableColumns: store.footableColumns, checkOnItemClick: checkOnItemClick, buildItemProps: buildItemProps, onAction: this.handleAction, rowClassNameExpr: rowClassNameExpr, rowClassName: rowClassName, columns: columns, rows: rows, locale: locale, translate: translate, rowsProps: {
                     regionPrefix: 'fixed/',
                     renderCell: function (region, column, item, props) { return _this.renderCell(region, column, item, props, true); },
                     data: data,
@@ -1346,7 +1400,10 @@ var Table = /** @class */ (function (_super) {
         // 不过目前看来只有这样写它才会重新更新视图
         store.rows.length;
         return (React.createElement(React.Fragment, null,
-            React.createElement(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, prefixRowClassName: prefixRowClassName, affixRowClassName: affixRowClassName, locale: locale, translate: translate, dispatchEvent: dispatchEvent, onEvent: onEvent, loading: loading }),
+            React.createElement(TableContent, { tableClassName: cx({
+                    'Table-table--checkOnItemClick': checkOnItemClick,
+                    'Table-table--withCombine': store.combineNum > 0
+                }, 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, prefixRowClassName: prefixRowClassName, affixRowClassName: affixRowClassName, locale: locale, translate: translate, dispatchEvent: dispatchEvent, onEvent: onEvent, loading: loading }),
             React.createElement(Spinner, { overlay: true, show: loading })));
     };
     Table.prototype.doAction = function (action, args, throwErrors) {
@@ -1386,7 +1443,9 @@ var Table = /** @class */ (function (_super) {
         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);
+        var tableClassName = cx('Table-table', this.props.tableClassName, {
+            'Table-table--withCombine': store.combineNum > 0
+        });
         return (React.createElement("div", { className: cx('Table', className, {
                 'Table--unsaved': !!store.modified || !!store.moved,
                 'Table--autoFillHeight': autoFillHeight

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

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

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

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

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

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

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

@@ -1,5 +1,5 @@
 /**
- * amis v2.0.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.2.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;
 }