amis 2.0.0-rc.9 → 2.0.2

package/esm/renderers/Status.js

@@ -0,0 +1,84 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __decorate } from 'tslib';
+import React from 'react';
+import { getPropValue, filter, Renderer } from 'amis-core';
+import { Icon } from 'amis-ui';
+
+var StatusField = /** @class */ (function (_super) {
+    __extends(StatusField, _super);
+    function StatusField() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StatusField.prototype.render = function () {
+        var _a = this.props, className = _a.className, placeholder = _a.placeholder, map = _a.map, labelMap = _a.labelMap, cx = _a.classnames, data = _a.data;
+        var value = getPropValue(this.props);
+        var viewValue = (React.createElement("span", { className: "text-muted", key: "status-value" }, placeholder));
+        var wrapClassName = '';
+        if (value !== undefined && value !== '' && map) {
+            if (typeof value === 'boolean') {
+                value = value ? 1 : 0;
+            }
+            else if (/^\d+$/.test(value)) {
+                value = parseInt(value, 10) || 0;
+            }
+            wrapClassName = "StatusField--".concat(value);
+            var itemClassName = map[value] || '';
+            var svgIcon_1 = '';
+            itemClassName = itemClassName.replace(/\bsvg-([^\s|$]+)\b/g, function (_, icon) {
+                svgIcon_1 = icon;
+                return 'icon';
+            });
+            if (svgIcon_1) {
+                viewValue = (React.createElement(Icon, { icon: svgIcon_1, className: cx('Status-icon icon', itemClassName), key: "icon" }));
+            }
+            else if (itemClassName) {
+                viewValue = (React.createElement("i", { className: cx('Status-icon', itemClassName), key: "icon" }));
+            }
+            if (labelMap && labelMap[value]) {
+                viewValue = [
+                    viewValue,
+                    React.createElement("span", { className: cx('StatusField-label'), key: "label" }, filter(labelMap[value], data))
+                ];
+            }
+        }
+        return (React.createElement("span", { className: cx('StatusField', wrapClassName, className) }, viewValue));
+    };
+    StatusField.defaultProps = {
+        placeholder: '-',
+        map: {
+            0: 'svg-fail',
+            1: 'svg-success',
+            success: 'svg-success',
+            pending: 'rolling',
+            fail: 'svg-fail',
+            queue: 'svg-warning',
+            schedule: 'svg-schedule'
+        },
+        labelMap: {
+            success: '成功',
+            pending: '运行中',
+            fail: '失败',
+            queue: '排队中',
+            schedule: '调度中'
+        }
+    };
+    return StatusField;
+}(React.Component));
+/** @class */ ((function (_super) {
+    __extends(StatusFieldRenderer, _super);
+    function StatusFieldRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StatusFieldRenderer = __decorate([
+        Renderer({
+            type: 'status'
+        })
+    ], StatusFieldRenderer);
+    return StatusFieldRenderer;
+})(StatusField));
+
+export { StatusField };

package/esm/renderers/Steps.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+import { BaseSchema, SchemaCollection } from '../Schema';
+import { StepStatus } from 'amis-ui';
+export declare type StepSchema = {
+    /**
+     * 标题
+     */
+    title: string | SchemaCollection;
+    /**
+     * 子标题
+     */
+    subTitle?: string | SchemaCollection;
+    /**
+     * 图标
+     */
+    icon?: string;
+    value?: string | number;
+    /**
+     * 描述
+     */
+    description?: string | SchemaCollection;
+} & Omit<BaseSchema, 'type'>;
+export interface StepsSchema extends BaseSchema {
+    /**
+     * 指定为 Steps 步骤条渲染器
+     */
+    type: 'steps';
+    /**
+     * 步骤
+     */
+    steps?: Array<StepSchema>;
+    /**
+     * API 或 数据映射
+     */
+    source?: string;
+    /**
+     * 指定当前步骤
+     */
+    value?: number | string;
+    /**
+     * 变量映射
+     */
+    name?: string;
+    status?: StepStatus | {
+        [propName: string]: StepStatus;
+    };
+    /**
+     * 展示模式
+     */
+    mode?: 'horizontal' | 'vertical';
+    /**
+     * 标签放置位置
+     */
+    labelPlacement?: 'horizontal' | 'vertical';
+    /**
+     * 点状步骤条
+     */
+    progressDot?: boolean;
+}
+export interface StepsProps extends RendererProps, Omit<StepsSchema, 'className'> {
+}
+export declare function StepsCmpt(props: StepsProps): JSX.Element;
+export declare class StepsRenderer extends React.Component<StepsProps> {
+    render(): JSX.Element;
+}

package/esm/renderers/Steps.js

@@ -0,0 +1,77 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __rest, __assign, __decorate } from 'tslib';
+import React from 'react';
+import { Renderer, resolveVariableAndFilter, getPropValue, resolveVariable, filter } from 'amis-core';
+import { withRemoteConfig, StepStatus, Steps } from 'amis-ui';
+
+function StepsCmpt(props) {
+    var _a;
+    var className = props.className, steps = props.steps, status = props.status, mode = props.mode, labelPlacement = props.labelPlacement, progressDot = props.progressDot, data = props.data, source = props.source, config = props.config, render = props.render, useMobileUI = props.useMobileUI;
+    var sourceResult = resolveVariableAndFilter(source, data, '| raw');
+    var stepsRow = (Array.isArray(sourceResult) ? sourceResult : undefined) ||
+        config ||
+        steps ||
+        [];
+    var resolveRender = function (val) {
+        return typeof val === 'string' ? filter(val, data) : val && render('inner', val);
+    };
+    var value = (_a = getPropValue(props)) !== null && _a !== void 0 ? _a : 0;
+    var resolveValue = typeof value === 'string' && isNaN(+value)
+        ? +resolveVariable(value, data) || +value
+        : +value;
+    var valueIndex = stepsRow.findIndex(function (item) { return item.value && item.value === resolveValue; });
+    var currentValue = valueIndex !== -1 ? valueIndex : resolveValue;
+    var resolveSteps = stepsRow.map(function (step, i) {
+        var stepStatus = getStepStatus(step, i);
+        return __assign(__assign({}, step), { status: stepStatus, title: resolveRender(step.title), subTitle: resolveRender(step.subTitle), description: resolveRender(step.description) });
+    });
+    function getStepStatus(step, i) {
+        var stepStatus;
+        if (typeof status === 'string') {
+            if (i === currentValue) {
+                var resolveStatus = resolveVariable(status, data);
+                stepStatus = resolveStatus || status || StepStatus.process;
+            }
+        }
+        else if (typeof status === 'object') {
+            var key = step.value;
+            key && status[key] && (stepStatus = status[key]);
+        }
+        return stepStatus;
+    }
+    return (React.createElement(Steps, { current: currentValue, steps: resolveSteps, className: className, status: status, mode: mode, progressDot: progressDot, labelPlacement: labelPlacement, useMobileUI: useMobileUI }));
+}
+var StepsWithRemoteConfig = withRemoteConfig({
+    adaptor: function (data) { return data.steps || data; }
+})(/** @class */ (function (_super) {
+    __extends(class_1, _super);
+    function class_1() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    class_1.prototype.render = function () {
+        var _a = this.props, config = _a.config; _a.deferLoad; _a.loading; _a.updateConfig; var rest = __rest(_a, ["config", "deferLoad", "loading", "updateConfig"]);
+        return React.createElement(StepsCmpt, __assign({ config: config }, rest));
+    };
+    return class_1;
+}(React.Component)));
+/** @class */ ((function (_super) {
+    __extends(StepsRenderer, _super);
+    function StepsRenderer() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    StepsRenderer.prototype.render = function () {
+        return React.createElement(StepsWithRemoteConfig, __assign({}, this.props));
+    };
+    StepsRenderer = __decorate([
+        Renderer({
+            type: 'steps'
+        })
+    ], StepsRenderer);
+    return StepsRenderer;
+})(React.Component));
+
+export { StepsCmpt };

package/esm/renderers/Table/ColumnToggler.d.ts

@@ -0,0 +1,120 @@
+import React from 'react';
+import Sortable from 'sortablejs';
+import { RendererProps } from 'amis-core';
+import type { TooltipObject } from 'amis-ui/lib/components/TooltipWrapper';
+import { IColumn } from 'amis-core/lib/store/table';
+import type { IColumnV2 } from 'amis-core/lib/store/table-v2';
+export interface ColumnTogglerProps extends RendererProps {
+    /**
+     * 按钮文字
+     */
+    label?: string | React.ReactNode;
+    /**
+     * 按钮提示文字，hover focus 时显示
+     */
+    tooltip?: string | TooltipObject;
+    /**
+     * 禁用状态下的提示
+     */
+    disabledTip?: string | TooltipObject;
+    /**
+     * 点击外部是否关闭
+     */
+    closeOnOutside?: boolean;
+    /**
+     * 点击内容是否关闭
+     */
+    closeOnClick?: boolean;
+    /**
+     * 下拉菜单对齐方式
+     */
+    align?: 'left' | 'right';
+    /**
+     *  ColumnToggler的CSS类名
+     */
+    className?: string;
+    /**
+     * 按钮的CSS类名
+     */
+    btnClassName?: string;
+    /**
+     * 按钮大小
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    /**
+     * 按钮级别，样式
+     */
+    level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';
+    /**
+     * 是否独占一行 `display: block`
+     */
+    block?: boolean;
+    /**
+     * 是否可通过拖拽排序
+     */
+    draggable?: boolean;
+    /**
+     * 默认是否展开
+     */
+    defaultIsOpened?: boolean;
+    /**
+     * 激活状态
+     */
+    isActived?: boolean;
+    /**
+     * ICON名称
+     */
+    icon?: string | React.ReactNode;
+    /**
+     * 是否只显示图标。
+     */
+    iconOnly?: boolean;
+    /**
+     * 是否隐藏展开的Icon
+     */
+    hideExpandIcon?: boolean;
+    /**
+     * 是否显示遮罩层
+     */
+    overlay?: boolean;
+    /**
+     * 列数据
+     */
+    columns: Array<IColumn | IColumnV2>;
+    /**
+     * 弹窗底部按钮大小
+     */
+    footerBtnSize?: 'xs' | 'sm' | 'md' | 'lg';
+    activeToggaleColumns: Array<IColumn | IColumnV2>;
+    onColumnToggle: (columns: Array<IColumn>) => void;
+    modalContainer?: () => HTMLElement;
+}
+export interface ColumnTogglerState {
+    isOpened: boolean;
+    enableSorting: boolean;
+    tempColumns: any[];
+}
+export default class ColumnToggler extends React.Component<ColumnTogglerProps, ColumnTogglerState> {
+    state: ColumnTogglerState;
+    static defaultProps: Pick<ColumnTogglerProps, 'placement' | 'tooltipTrigger' | 'tooltipRootClose' | 'draggable'>;
+    target: any;
+    sortable?: Sortable;
+    dragRefDOM: HTMLElement;
+    constructor(props: ColumnTogglerProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ColumnTogglerProps): void;
+    componentWillUnmount(): void;
+    domRef(ref: any): void;
+    toggle(e: React.MouseEvent<any>): void;
+    open(): void;
+    close(): void;
+    swapColumnPosition(oldIndex: number, newIndex: number): void;
+    updateToggledColumn(column: IColumn, index: number, value: any, shift?: boolean): Promise<void>;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    onConfirm(): Promise<void>;
+    renderOuter(): JSX.Element;
+    renderModal(): JSX.Element;
+    render(): JSX.Element;
+}

package/esm/renderers/Table/ColumnToggler.js

@@ -0,0 +1,255 @@
+/**
+ * amis v2.0.2
+ * Copyright 2018-2022 baidu
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata, __spreadArray } from 'tslib';
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import Sortable from 'sortablejs';
+import cloneDeep from 'lodash/cloneDeep';
+import { anyChanged, createObject, RootClose, noop, Overlay, PopOver, generateIcon, filter, autobind } from 'amis-core';
+import { Modal, Icon, TooltipWrapper, Checkbox, Button, getIcon } from 'amis-ui';
+
+var ColumnToggler = /** @class */ (function (_super) {
+    __extends(ColumnToggler, _super);
+    function ColumnToggler(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            enableSorting: false,
+            tempColumns: cloneDeep(_this.props.columns)
+        };
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.toggle = _this.toggle.bind(_this);
+        _this.domRef = _this.domRef.bind(_this);
+        _this.dragRef = _this.dragRef.bind(_this);
+        return _this;
+    }
+    ColumnToggler.prototype.componentDidMount = function () {
+        if (this.props.defaultIsOpened) {
+            this.setState({
+                isOpened: true
+            });
+        }
+    };
+    ColumnToggler.prototype.componentDidUpdate = function (prevProps) {
+        if (anyChanged('activeToggaleColumns', prevProps, this.props)) {
+            this.setState({ tempColumns: this.props.columns });
+        }
+    };
+    ColumnToggler.prototype.componentWillUnmount = function () {
+        this.destroyDragging();
+    };
+    ColumnToggler.prototype.domRef = function (ref) {
+        this.target = ref;
+    };
+    ColumnToggler.prototype.toggle = function (e) {
+        e.preventDefault();
+        this.setState({
+            isOpened: !this.state.isOpened
+        });
+    };
+    ColumnToggler.prototype.open = function () {
+        this.setState({
+            isOpened: true
+        });
+    };
+    ColumnToggler.prototype.close = function () {
+        this.setState({
+            isOpened: false,
+            enableSorting: false,
+            tempColumns: cloneDeep(this.props.columns)
+        });
+    };
+    ColumnToggler.prototype.swapColumnPosition = function (oldIndex, newIndex) {
+        var columns = this.state.tempColumns;
+        columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];
+        this.setState({ tempColumns: columns });
+    };
+    ColumnToggler.prototype.updateToggledColumn = function (column, index, value, shift) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, data, dispatchEvent, tempColumns, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = this.props, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        tempColumns = this.state.tempColumns.concat();
+                        tempColumns.splice(index, 1, __assign(__assign({}, column), { toggled: value }));
+                        return [4 /*yield*/, dispatchEvent('columnToggled', createObject(data, {
+                                columns: tempColumns
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        this.setState({ tempColumns: tempColumns });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ColumnToggler.prototype.dragRef = function (ref) {
+        var enableSorting = this.state.enableSorting;
+        var draggable = this.props.draggable;
+        if (enableSorting && draggable && ref) {
+            this.initDragging();
+        }
+    };
+    ColumnToggler.prototype.initDragging = function () {
+        var _this = this;
+        var dom = findDOMNode(this);
+        var ns = this.props.classPrefix;
+        this.sortable = new Sortable(dom.querySelector(".".concat(ns, "ColumnToggler-modal-content")), {
+            group: "ColumnToggler-modal-content",
+            animation: 150,
+            handle: ".".concat(ns, "ColumnToggler-menuItem-dragBar"),
+            ghostClass: "".concat(ns, "ColumnToggler-menuItem--dragging"),
+            onEnd: function (e) {
+                if (e.newIndex === e.oldIndex) {
+                    return;
+                }
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                _this.swapColumnPosition(e.oldIndex, e.newIndex);
+            }
+        });
+    };
+    ColumnToggler.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    ColumnToggler.prototype.onConfirm = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var tempColumns, _a, onColumnToggle, data, dispatchEvent, rendererEvent;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        tempColumns = this.state.tempColumns;
+                        _a = this.props, onColumnToggle = _a.onColumnToggle, data = _a.data, dispatchEvent = _a.dispatchEvent;
+                        return [4 /*yield*/, dispatchEvent('columnToggled', createObject(data, {
+                                columns: tempColumns
+                            }))];
+                    case 1:
+                        rendererEvent = _b.sent();
+                        if (rendererEvent === null || rendererEvent === void 0 ? void 0 : rendererEvent.prevented) {
+                            return [2 /*return*/];
+                        }
+                        onColumnToggle && onColumnToggle(__spreadArray([], tempColumns, true));
+                        this.setState({
+                            isOpened: false,
+                            enableSorting: false
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    ColumnToggler.prototype.renderOuter = function () {
+        var _this = this;
+        var _a;
+        var _b = this.props, popOverContainer = _b.popOverContainer, cx = _b.classnames, ns = _b.classPrefix, children = _b.children, closeOnClick = _b.closeOnClick, closeOnOutside = _b.closeOnOutside;
+        var body = (React.createElement(RootClose, { disabled: !this.state.isOpened, onRootClose: closeOnOutside !== false ? this.close : noop }, function (ref) {
+            return (React.createElement("ul", { className: cx('ColumnToggler-menu'), onClick: closeOnClick ? _this.close : noop, ref: ref }, children));
+        }));
+        if (popOverContainer) {
+            return (React.createElement(Overlay, { container: popOverContainer, target: function () { return _this.target; }, show: true },
+                React.createElement(PopOver, { overlay: true, onHide: this.close, classPrefix: ns, className: cx('ColumnToggler-popover'), style: { minWidth: (_a = this.target) === null || _a === void 0 ? void 0 : _a.offsetWidth } }, body)));
+        }
+        return body;
+    };
+    ColumnToggler.prototype.renderModal = function () {
+        var _this = this;
+        var _a = this.props; _a.render; var cx = _a.classnames, ns = _a.classPrefix, modalContainer = _a.modalContainer, draggable = _a.draggable, overlay = _a.overlay, __ = _a.translate, footerBtnSize = _a.footerBtnSize;
+        var _b = this.state, enableSorting = _b.enableSorting, tempColumns = _b.tempColumns;
+        return (React.createElement(React.Fragment, null,
+            React.createElement(Modal, { closeOnEsc: true, onHide: this.close, show: this.state.isOpened, contentClassName: cx('ColumnToggler-modal'), container: modalContainer || this.target, overlay: typeof overlay === 'boolean' ? overlay : false },
+                React.createElement("header", { className: cx('ColumnToggler-modal-header') },
+                    React.createElement("span", { className: cx('ColumnToggler-modal-title') }, __('Table.columnsVisibility')),
+                    React.createElement("a", { "data-tooltip": __('Dialog.close'), "data-position": "left", className: cx('Modal-close'), onClick: this.close },
+                        React.createElement(Icon, { icon: "close", className: "icon" }))),
+                React.createElement("ul", { className: cx('ColumnToggler-modal-content'), ref: this.dragRef }, Array.isArray(tempColumns)
+                    ? tempColumns.map(function (column, index) { return (React.createElement(TooltipWrapper, { tooltipClassName: cx('ColumnToggler-tooltip'), placement: "top", tooltip: column.label || '', trigger: enableSorting ? [] : 'hover', key: column.index },
+                        React.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index }, enableSorting && draggable && tempColumns.length > 1 ? (React.createElement(React.Fragment, null,
+                            React.createElement("a", { className: cx('ColumnToggler-menuItem-dragBar') },
+                                React.createElement(Icon, { icon: "drag", className: cx('icon') })),
+                            React.createElement("span", { className: cx('ColumnToggler-menuItem-label') },
+                                React.createElement("span", null, column.label || '-')))) : (React.createElement(Checkbox, { size: "sm", labelClassName: cx('ColumnToggler-menuItem-label'), classPrefix: ns, checked: column.toggled, disabled: !column.toggable || enableSorting, onChange: _this.updateToggledColumn.bind(_this, column, index) },
+                            React.createElement("span", null, column.label || '-')))))); })
+                    : null),
+                React.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
+                    React.createElement("div", null,
+                        React.createElement(Button, { className: cx("ColumnToggler-modeSelect", {
+                                'is-actived': !enableSorting
+                            }), onClick: function () { return _this.setState({ enableSorting: false }); }, level: "link" }, __('Table.toggleColumn')),
+                        React.createElement(Button, { className: cx("ColumnToggler-modeSelect", {
+                                'is-actived': enableSorting
+                            }), onClick: function () {
+                                return _this.setState({ enableSorting: true }, function () {
+                                    return _this.state.enableSorting &&
+                                        _this.props.draggable &&
+                                        _this.initDragging();
+                                });
+                            }, level: "link", disabled: tempColumns.length < 2 }, __('sort'))),
+                    React.createElement("div", null,
+                        React.createElement(Button, { size: footerBtnSize, className: "mr-3", onClick: this.close }, __('cancel')),
+                        React.createElement(Button, { size: footerBtnSize, level: "primary", onClick: this.onConfirm }, __('confirm')))))));
+    };
+    ColumnToggler.prototype.render = function () {
+        var _a = this.props, tooltip = _a.tooltip, placement = _a.placement, tooltipContainer = _a.tooltipContainer, tooltipTrigger = _a.tooltipTrigger, tooltipRootClose = _a.tooltipRootClose, disabledTip = _a.disabledTip, block = _a.block, disabled = _a.disabled, btnDisabled = _a.btnDisabled, btnClassName = _a.btnClassName, size = _a.size, label = _a.label, level = _a.level, primary = _a.primary, className = _a.className, cx = _a.classnames, align = _a.align, iconOnly = _a.iconOnly, icon = _a.icon, isActived = _a.isActived, data = _a.data, draggable = _a.draggable, hideExpandIcon = _a.hideExpandIcon;
+        var button = (React.createElement("button", { onClick: this.toggle, disabled: disabled || btnDisabled, className: cx('Button', btnClassName, typeof level === 'undefined'
+                ? 'Button--default'
+                : level
+                    ? "Button--".concat(level)
+                    : '', {
+                'Button--block': block,
+                'Button--primary': primary,
+                'Button--iconOnly': iconOnly
+            }, size ? "Button--".concat(size) : '') },
+            icon ? (typeof icon === 'string' ? (getIcon(icon) ? (React.createElement(Icon, { icon: icon, className: cx('icon', { 'm-r-xs': !!label }) })) : (generateIcon(cx, icon, label ? 'm-r-xs' : ''))) : React.isValidElement(icon) ? (React.cloneElement(icon, {
+                className: cx({ 'm-r-xs': !!label })
+            })) : (React.createElement(Icon, { icon: "columns", className: "icon m-r-none" }))) : (React.createElement(Icon, { icon: "columns", className: "icon m-r-none" })),
+            typeof label === 'string' ? filter(label, data) : label,
+            hideExpandIcon || draggable ? null : (React.createElement("span", { className: cx('ColumnToggler-caret') },
+                React.createElement(Icon, { icon: "caret", className: "icon" })))));
+        return (React.createElement("div", { className: cx('ColumnToggler', {
+                'ColumnToggler-block': block,
+                'ColumnToggler--alignRight': align === 'right',
+                'is-opened': this.state.isOpened,
+                'is-actived': isActived
+            }, className), ref: this.domRef },
+            draggable ? (button) : (React.createElement(TooltipWrapper, { placement: placement, tooltip: disabled ? disabledTip : tooltip, container: tooltipContainer, trigger: tooltipTrigger, rootClose: tooltipRootClose }, button)),
+            this.state.isOpened
+                ? draggable
+                    ? this.renderModal()
+                    : this.renderOuter()
+                : null));
+    };
+    ColumnToggler.defaultProps = {
+        placement: 'top',
+        tooltipTrigger: ['hover', 'focus'],
+        tooltipRootClose: false,
+        draggable: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], ColumnToggler.prototype, "dragRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], ColumnToggler.prototype, "onConfirm", null);
+    return ColumnToggler;
+}(React.Component));
+
+export { ColumnToggler as default };

package/esm/renderers/Table/HeadCellFilterDropdown.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { RendererProps } from 'amis-core';
+export interface QuickFilterConfig {
+    options: Array<any>;
+    multiple: boolean;
+    [propName: string]: any;
+}
+export interface HeadCellFilterProps extends RendererProps {
+    data: any;
+    name: string;
+    filterable: QuickFilterConfig;
+    onQuery: (values: object) => void;
+}
+export declare class HeadCellFilterDropDown extends React.Component<HeadCellFilterProps, any> {
+    state: {
+        isOpened: boolean;
+        filterOptions: never[];
+    };
+    sourceInvalid: boolean;
+    constructor(props: HeadCellFilterProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: HeadCellFilterProps, prevState: any): void;
+    fetchOptions(): void;
+    alterOptions(options: Array<any>): any[];
+    handleClickOutside(): void;
+    open(): void;
+    close(): void;
+    handleClick(value: string): Promise<void>;
+    handleCheck(value: string): Promise<void>;
+    handleReset(): void;
+    render(): JSX.Element;
+}