amis 1.3.5-beta.6 → 1.4.2-beta.1

package/lib/renderers/Steps.js.map

@@ -6,8 +6,8 @@
         "/src/renderers/Steps.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "import React from 'react';\nimport {Renderer, RendererProps} from '../factory';\nimport {BaseSchema} from '../Schema';\nimport Steps, {StepStatus} from '../components/Steps';\nimport {\n  RemoteOptionsProps,\n  withRemoteConfig\n} from '../components/WithRemoteConfig';\nimport {resolveVariable} from '../utils/tpl-builtin';\nimport {filter} from '../utils/tpl';\nimport {getPropValue} from '../utils/helper';\n\nexport type StepSchema = {\n  /**\n   * 标题\n   */\n  title: string;\n\n  /**\n   * 子标题\n   */\n  subTitle?: string;\n\n  /**\n   * 图标\n   */\n  icon?: string;\n\n  value?: string | number;\n\n  /**\n   * 描述\n   */\n  description?: string;\n} & Omit<BaseSchema, 'type'>;\n\nexport interface StepsSchema extends BaseSchema {\n  /**\n   * 指定为 Steps 步骤条渲染器\n   */\n  type: 'steps';\n\n  /**\n   * 步骤\n   */\n  steps?: Array<StepSchema>;\n\n  /**\n   * API 或 数据映射\n   */\n  source?: string;\n\n  /**\n   * 指定当前步骤\n   */\n  value?: number | string;\n\n  /**\n   * 变量映射\n   */\n  name?: string;\n\n  status?: StepStatus | {\n    [propName: string]: StepStatus;\n  };\n\n  /**\n   * 展示模式\n   */\n  mode?: 'horizontal' | 'vertical';\n}\n\nexport interface StepsProps\n  extends RendererProps,\n    Omit<StepsSchema, 'className'> {}\n\nexport function StepsCmpt(props: StepsProps) {\n  const {\n    className,\n    steps,\n    status,\n    mode,\n    data,\n    source,\n    config\n  } = props;\n  \n  const stepsRow =\n    (resolveVariable(source, data) as Array<StepSchema>) ||\n    config ||\n    steps ||\n    [];\n\n  const value = getPropValue(props) ?? 0;\n  const resolveValue =\n    typeof value === 'string' && isNaN(+value)\n      ? +(resolveVariable(value, data) as string) || +value\n      : +value;\n  const valueIndex = stepsRow.findIndex(\n    item => item.value && item.value === resolveValue\n  );\n  const currentValue = valueIndex !== -1 ? valueIndex : resolveValue;\n  const resolveSteps = stepsRow.map((step, i) => {\n    const stepStatus = getStepStatus(step, i);\n    return {\n      ...step,\n      status: stepStatus,\n      title: filter(step.title, data),\n      subTitle: filter(step.subTitle || step.value, data),\n      description: filter(step.description, data)\n    }\n  });\n\n  function getStepStatus(\n    step: StepSchema,\n    i: number\n  ): StepStatus {\n    let stepStatus;\n\n    if (typeof status === 'string') {\n      if (i === currentValue) {\n        const resolveStatus = resolveVariable(status, data);\n        stepStatus = resolveStatus || status || StepStatus.process;\n      }\n    } else if (typeof status === 'object') {\n      const key = step.value;\n      key && status[key] && (stepStatus = status[key]);\n    }\n\n    return stepStatus;\n  }\n\n  return (\n    <Steps\n      current={currentValue}\n      steps={resolveSteps}\n      className={className}\n      status={status}\n      mode={mode}\n    ></Steps>\n  );\n}\n\nconst StepsWithRemoteConfig = withRemoteConfig({\n  adaptor: data => data.steps || data\n})(\n  class extends React.Component<\n    RemoteOptionsProps & React.ComponentProps<typeof StepsCmpt>\n  > {\n    render() {\n      const {config, deferLoad, loading, updateConfig, ...rest} = this.props;\n      return <StepsCmpt config={config} {...rest} />;\n    }\n  }\n);\n\n@Renderer({\n  type: 'steps'\n})\nexport class StepsRenderer extends React.Component<StepsProps> {\n  render() {\n    return <StepsWithRemoteConfig {...this.props} />;\n  }\n}\n"
+        "import React from 'react';\nimport {Renderer, RendererProps} from '../factory';\nimport {BaseSchema, SchemaCollection} from '../Schema';\nimport Steps, {StepStatus} from '../components/Steps';\nimport {\n  RemoteOptionsProps,\n  withRemoteConfig\n} from '../components/WithRemoteConfig';\nimport {resolveVariable} from '../utils/tpl-builtin';\nimport {filter} from '../utils/tpl';\nimport {getPropValue} from '../utils/helper';\n\nexport type StepSchema = {\n  /**\n   * 标题\n   */\n  title: string | SchemaCollection;\n\n  /**\n   * 子标题\n   */\n  subTitle?: string | SchemaCollection;\n\n  /**\n   * 图标\n   */\n  icon?: string;\n\n  value?: string | number;\n\n  /**\n   * 描述\n   */\n  description?: string | SchemaCollection;\n} & Omit<BaseSchema, 'type'>;\n\nexport interface StepsSchema extends BaseSchema {\n  /**\n   * 指定为 Steps 步骤条渲染器\n   */\n  type: 'steps';\n\n  /**\n   * 步骤\n   */\n  steps?: Array<StepSchema>;\n\n  /**\n   * API 或 数据映射\n   */\n  source?: string;\n\n  /**\n   * 指定当前步骤\n   */\n  value?: number | string;\n\n  /**\n   * 变量映射\n   */\n  name?: string;\n\n  status?: StepStatus | {\n    [propName: string]: StepStatus;\n  };\n\n  /**\n   * 展示模式\n   */\n  mode?: 'horizontal' | 'vertical';\n}\n\nexport interface StepsProps\n  extends RendererProps,\n    Omit<StepsSchema, 'className'> {}\n\nexport function StepsCmpt(props: StepsProps) {\n  const {\n    className,\n    steps,\n    status,\n    mode,\n    data,\n    source,\n    config,\n    render\n  } = props;\n  \n  const stepsRow =\n    (resolveVariable(source, data) as Array<StepSchema>) ||\n    config ||\n    steps ||\n    [];\n  const resolveRender = (val?: string | SchemaCollection) => typeof val === 'string'\n    ? filter(val, data)\n    : val && render('inner', val);\n  const value = getPropValue(props) ?? 0;\n  const resolveValue =\n    typeof value === 'string' && isNaN(+value)\n      ? +(resolveVariable(value, data) as string) || +value\n      : +value;\n  const valueIndex = stepsRow.findIndex(\n    item => item.value && item.value === resolveValue\n  );\n  const currentValue = valueIndex !== -1 ? valueIndex : resolveValue;\n  const resolveSteps = stepsRow.map((step, i) => {\n    const stepStatus = getStepStatus(step, i);\n    return {\n      ...step,\n      status: stepStatus,\n      title: resolveRender(step.title),\n      subTitle: resolveRender(step.subTitle),\n      description: resolveRender(step.description)\n    }\n  });\n\n  function getStepStatus(\n    step: StepSchema,\n    i: number\n  ): StepStatus {\n    let stepStatus;\n\n    if (typeof status === 'string') {\n      if (i === currentValue) {\n        const resolveStatus = resolveVariable(status, data);\n        stepStatus = resolveStatus || status || StepStatus.process;\n      }\n    } else if (typeof status === 'object') {\n      const key = step.value;\n      key && status[key] && (stepStatus = status[key]);\n    }\n\n    return stepStatus;\n  }\n\n  return (\n    <Steps\n      current={currentValue}\n      steps={resolveSteps}\n      className={className}\n      status={status}\n      mode={mode}\n    ></Steps>\n  );\n}\n\nconst StepsWithRemoteConfig = withRemoteConfig({\n  adaptor: data => data.steps || data\n})(\n  class extends React.Component<\n    RemoteOptionsProps & React.ComponentProps<typeof StepsCmpt>\n  > {\n    render() {\n      const {config, deferLoad, loading, updateConfig, ...rest} = this.props;\n      return <StepsCmpt config={config} {...rest} />;\n    }\n  }\n);\n\n@Renderer({\n  type: 'steps'\n})\nexport class StepsRenderer extends React.Component<StepsProps> {\n  render() {\n    return <StepsWithRemoteConfig {...this.props} />;\n  }\n}\n"
     ]
 }

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

@@ -0,0 +1,113 @@
+import React from 'react';
+import Sortable from 'sortablejs';
+import { RendererProps } from '../../factory';
+import type { TooltipObject } from '../../components/TooltipWrapper';
+import { IColumn } from '../../store/table';
+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>;
+    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;
+    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): void;
+    dragRef(ref: any): void;
+    initDragging(): void;
+    destroyDragging(): void;
+    onConfirm(): void;
+    renderOuter(): JSX.Element;
+    renderModal(): JSX.Element;
+    render(): JSX.Element;
+}

package/lib/renderers/Table/ColumnToggler.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var react_dom_1 = require("react-dom");
+var sortablejs_1 = (0, tslib_1.__importDefault)(require("sortablejs"));
+var cloneDeep_1 = (0, tslib_1.__importDefault)(require("lodash/cloneDeep"));
+var Overlay_1 = (0, tslib_1.__importDefault)(require("../../components/Overlay"));
+var PopOver_1 = (0, tslib_1.__importDefault)(require("../../components/PopOver"));
+var Modal_1 = (0, tslib_1.__importDefault)(require("../../components/Modal"));
+var Button_1 = (0, tslib_1.__importDefault)(require("../../components/Button"));
+var Checkbox_1 = (0, tslib_1.__importDefault)(require("../../components/Checkbox"));
+var TooltipWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/TooltipWrapper"));
+var helper_1 = require("../../utils/helper");
+var tpl_1 = require("../../utils/tpl");
+var icons_1 = require("../../components/icons");
+var RootClose_1 = require("../../utils/RootClose");
+var ColumnToggler = /** @class */ (function (_super) {
+    (0, tslib_1.__extends)(ColumnToggler, _super);
+    function ColumnToggler(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            enableSorting: false,
+            tempColumns: (0, cloneDeep_1.default)(_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.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: (0, cloneDeep_1.default)(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) {
+        var tempColumns = this.state.tempColumns.concat();
+        tempColumns.splice(index, 1, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, column), { toggled: value }));
+        this.setState({ tempColumns: tempColumns });
+    };
+    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 = (0, react_dom_1.findDOMNode)(this);
+        var ns = this.props.classPrefix;
+        this.sortable = new sortablejs_1.default(dom.querySelector("." + ns + "ColumnToggler-modal-content"), {
+            group: "ColumnToggler-modal-content",
+            animation: 150,
+            handle: "." + ns + "ColumnToggler-menuItem-dragBar",
+            ghostClass: 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 () {
+        var tempColumns = this.state.tempColumns;
+        var onColumnToggle = this.props.onColumnToggle;
+        onColumnToggle && onColumnToggle((0, tslib_1.__spreadArray)([], tempColumns, true));
+        this.setState({
+            isOpened: false,
+            enableSorting: false
+        });
+    };
+    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_1.default.createElement(RootClose_1.RootClose, { disabled: !this.state.isOpened, onRootClose: closeOnOutside !== false ? this.close : helper_1.noop }, function (ref) {
+            return (react_1.default.createElement("ul", { className: cx('ColumnToggler-menu'), onClick: closeOnClick ? _this.close : helper_1.noop, ref: ref }, children));
+        }));
+        if (popOverContainer) {
+            return (react_1.default.createElement(Overlay_1.default, { container: popOverContainer, target: function () { return _this.target; }, show: true },
+                react_1.default.createElement(PopOver_1.default, { 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, render = _a.render, cx = _a.classnames, ns = _a.classPrefix, modalContainer = _a.modalContainer, draggable = _a.draggable, overlay = _a.overlay, __ = _a.translate;
+        var _b = this.state, enableSorting = _b.enableSorting, tempColumns = _b.tempColumns;
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Modal_1.default, { closeOnEsc: true, onHide: this.close, show: this.state.isOpened, contentClassName: cx('ColumnToggler-modal'), container: modalContainer || this.target, overlay: typeof overlay === 'boolean' ? overlay : false },
+                react_1.default.createElement("header", { className: cx('ColumnToggler-modal-header') },
+                    react_1.default.createElement("span", { className: cx('ColumnToggler-modal-title') }, "\u5217\u8BBE\u7F6E"),
+                    react_1.default.createElement("a", { "data-tooltip": __('Dialog.close'), "data-position": "left", className: cx('Modal-close'), onClick: this.close },
+                        react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))),
+                react_1.default.createElement("ul", { className: cx('ColumnToggler-modal-content'), ref: this.dragRef }, Array.isArray(tempColumns)
+                    ? tempColumns.map(function (column, index) { return (react_1.default.createElement(TooltipWrapper_1.default, { tooltipClassName: cx('ColumnToggler-tooltip'), placement: "top", tooltip: column.label || '', trigger: enableSorting ? 'click' : 'hover', key: column.index },
+                        react_1.default.createElement("li", { className: cx('ColumnToggler-menuItem'), key: column.index }, enableSorting && draggable && tempColumns.length > 1 ? (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement("a", { className: cx('ColumnToggler-menuItem-dragBar') },
+                                react_1.default.createElement(icons_1.Icon, { icon: "drag-bar", className: cx('icon') })),
+                            react_1.default.createElement("span", null, column.label ? render('tpl', column.label) : null))) : (react_1.default.createElement(Checkbox_1.default, { size: "sm", classPrefix: ns, checked: column.toggled, disabled: !column.toggable || enableSorting, onChange: _this.updateToggledColumn.bind(_this, column, index) },
+                            react_1.default.createElement("span", null, column.label ? render('tpl', column.label) : null)))))); })
+                    : null),
+                react_1.default.createElement("footer", { className: cx('ColumnToggler-modal-footer') },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement(Button_1.default, { className: cx("ColumnToggler-modeSelect", {
+                                'is-actived': !enableSorting
+                            }), onClick: function () { return _this.setState({ enableSorting: false }); }, level: "link" }, __('Table.toggleColumn')),
+                        react_1.default.createElement(Button_1.default, { 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_1.default.createElement("div", null,
+                        react_1.default.createElement(Button_1.default, { className: "mr-4", onClick: this.close }, __('cancel')),
+                        react_1.default.createElement(Button_1.default, { 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_1.default.createElement("button", { onClick: this.toggle, disabled: disabled || btnDisabled, className: cx('Button', btnClassName, typeof level === 'undefined'
+                ? 'Button--default'
+                : level
+                    ? "Button--" + level
+                    : '', {
+                'Button--block': block,
+                'Button--primary': primary,
+                'Button--iconOnly': iconOnly
+            }, size ? "Button--" + size : '') },
+            icon ? (typeof icon === 'string' ? (react_1.default.createElement("i", { className: cx(icon, 'm-r-xs') })) : (icon)) : null,
+            typeof label === 'string' ? (0, tpl_1.filter)(label, data) : label,
+            hideExpandIcon || draggable ? null : (react_1.default.createElement("span", { className: cx('ColumnToggler-caret') },
+                react_1.default.createElement(icons_1.Icon, { icon: "caret", className: "icon" })))));
+        return (react_1.default.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_1.default.createElement(TooltipWrapper_1.default, { 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
+    };
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], ColumnToggler.prototype, "dragRef", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], ColumnToggler.prototype, "onConfirm", null);
+    return ColumnToggler;
+}(react_1.default.Component));
+exports.default = ColumnToggler;
+//# sourceMappingURL=./renderers/Table/ColumnToggler.js.map

package/lib/renderers/Table/ColumnToggler.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "ColumnToggler.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/renderers/Table/ColumnToggler.tsx"
+    ],
+    "names": [],
+    "mappings": ";;;AAAA,6DAA0B;AAC1B,uCAAsC;AACtC,uEAAkC;AAClC,4EAAyC;AAEzC,kFAA+C;AAC/C,kFAA+C;AAC/C,8EAA2C;AAC3C,gFAA6C;AAC7C,oFAAiD;AACjD,gGAA6D;AAE7D,6CAAkD;AAClD,uCAAuC;AACvC,gDAA4C;AAC5C,mDAAgD;AA6GhD;IAA2C,8CAG1C;IAqBC,uBAAY,KAAyB;QAArC,YACE,kBAAM,KAAK,CAAC,SAOb;QA5BD,WAAK,GAAuB;YAC1B,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,KAAK;YACpB,WAAW,EAAE,IAAA,mBAAS,EAAC,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC;SAC3C,CAAC;QAmBA,KAAI,CAAC,IAAI,GAAG,KAAI,CAAC,IAAI,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACjC,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACnC,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACrC,KAAI,CAAC,MAAM,GAAG,KAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;QACrC,KAAI,CAAC,OAAO,GAAG,KAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAI,CAAC,CAAC;;IACzC,CAAC;IAED,yCAAiB,GAAjB;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,eAAe,EAAE;YAC9B,IAAI,CAAC,QAAQ,CAAC;gBACZ,QAAQ,EAAE,IAAI;aACf,CAAC,CAAC;SACJ;IACH,CAAC;IAED,4CAAoB,GAApB;QACE,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAED,8BAAM,GAAN,UAAO,GAAQ;QACb,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;IACpB,CAAC;IAED,8BAAM,GAAN,UAAO,CAAwB;QAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ;SAC/B,CAAC,CAAC;IACL,CAAC;IAED,4BAAI,GAAJ;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;IACL,CAAC;IAED,6BAAK,GAAL;QACE,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,KAAK;YACpB,WAAW,EAAE,IAAA,mBAAS,EAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;SAC3C,CAAC,CAAC;IACL,CAAC;IAED,0CAAkB,GAAlB,UAAmB,QAAgB,EAAE,QAAgB;QACnD,IAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;QAEvC,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,EAAC,WAAW,EAAE,OAAO,EAAC,CAAC,CAAC;IACxC,CAAC;IAED,2CAAmB,GAAnB,UACE,MAAe,EACf,KAAa,EACb,KAAU,EACV,KAAe;QAEf,IAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;QAEpD,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,kDACtB,MAAM,KACT,OAAO,EAAE,KAAK,IACd,CAAC;QACH,IAAI,CAAC,QAAQ,CAAC,EAAC,WAAW,aAAA,EAAC,CAAC,CAAC;IAC/B,CAAC;IAGD,+BAAO,GAAP,UAAQ,GAAQ;QACP,IAAA,aAAa,GAAI,IAAI,CAAC,KAAK,cAAd,CAAe;QAC5B,IAAA,SAAS,GAAI,IAAI,CAAC,KAAK,UAAd,CAAe;QAE/B,IAAI,aAAa,IAAI,SAAS,IAAI,GAAG,EAAE;YACrC,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;IACH,CAAC;IAED,oCAAY,GAAZ;QAAA,iBA2BC;QA1BC,IAAM,GAAG,GAAG,IAAA,uBAAW,EAAC,IAAI,CAAgB,CAAC;QAC7C,IAAM,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC;QAElC,IAAI,CAAC,QAAQ,GAAG,IAAI,oBAAQ,CAC1B,GAAG,CAAC,aAAa,CAAC,MAAI,EAAE,gCAA6B,CAAgB,EACrE;YACE,KAAK,EAAE,6BAA6B;YACpC,SAAS,EAAE,GAAG;YACd,MAAM,EAAE,MAAI,EAAE,mCAAgC;YAC9C,UAAU,EAAK,EAAE,qCAAkC;YACnD,KAAK,EAAE,UAAC,CAAM;gBACZ,IAAI,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,QAAQ,EAAE;oBAC7B,OAAO;iBACR;gBAED,IAAM,MAAM,GAAG,CAAC,CAAC,EAAiB,CAAC;gBACnC,IAAI,CAAC,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE;oBAC7C,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;iBAC5D;qBAAM;oBACL,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;iBAC5B;gBAED,KAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;YAClD,CAAC;SACF,CACF,CAAC;IACJ,CAAC;IAED,uCAAe,GAAf;QACE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC;IAC3C,CAAC;IAGD,iCAAS,GAAT;QACS,IAAA,WAAW,GAAI,IAAI,CAAC,KAAK,YAAd,CAAe;QAC1B,IAAA,cAAc,GAAI,IAAI,CAAC,KAAK,eAAd,CAAe;QAEpC,cAAc,IAAI,cAAc,gCAAK,WAAW,QAAE,CAAC;QACnD,IAAI,CAAC,QAAQ,CAAC;YACZ,QAAQ,EAAE,KAAK;YACf,aAAa,EAAE,KAAK;SACrB,CAAC,CAAC;IACL,CAAC;IAED,mCAAW,GAAX;QAAA,iBA6CC;;QA5CO,IAAA,KAOF,IAAI,CAAC,KAAK,EANZ,gBAAgB,sBAAA,EACJ,EAAE,gBAAA,EACD,EAAE,iBAAA,EACf,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,cAAc,oBACF,CAAC;QACf,IAAM,IAAI,GAAG,CACX,8BAAC,qBAAS,IACR,QAAQ,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAC9B,WAAW,EAAE,cAAc,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAI,IAExD,UAAC,GAAQ;YACR,OAAO,CACL,sCACE,SAAS,EAAE,EAAE,CAAC,oBAAoB,CAAC,EACnC,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,KAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAI,EACzC,GAAG,EAAE,GAAG,IAEP,QAAQ,CACN,CACN,CAAC;QACJ,CAAC,CACS,CACb,CAAC;QAEF,IAAI,gBAAgB,EAAE;YACpB,OAAO,CACL,8BAAC,iBAAO,IAAC,SAAS,EAAE,gBAAgB,EAAE,MAAM,EAAE,cAAM,OAAA,KAAI,CAAC,MAAM,EAAX,CAAW,EAAE,IAAI;gBACnE,8BAAC,iBAAO,IACN,OAAO,QACP,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,WAAW,EAAE,EAAE,EACf,SAAS,EAAE,EAAE,CAAC,uBAAuB,CAAC,EACtC,KAAK,EAAE,EAAC,QAAQ,EAAE,MAAA,IAAI,CAAC,MAAM,0CAAE,WAAW,EAAC,IAE1C,IAAI,CACG,CACF,CACX,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,mCAAW,GAAX;QAAA,iBA2HC;QA1HO,IAAA,KAQF,IAAI,CAAC,KAAK,EAPZ,MAAM,YAAA,EACM,EAAE,gBAAA,EACD,EAAE,iBAAA,EACf,cAAc,oBAAA,EACd,SAAS,eAAA,EACT,OAAO,aAAA,EACI,EAAE,eACD,CAAC;QAET,IAAA,KAA+B,IAAI,CAAC,KAAK,EAAxC,aAAa,mBAAA,EAAE,WAAW,iBAAc,CAAC;QAEhD,OAAO,CACL;YACE,8BAAC,eAAK,IACJ,UAAU,QACV,MAAM,EAAE,IAAI,CAAC,KAAK,EAClB,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ,EACzB,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAAC,EAC3C,SAAS,EAAE,cAAc,IAAI,IAAI,CAAC,MAAM,EACxC,OAAO,EAAE,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;gBAEvD,0CAAQ,SAAS,EAAE,EAAE,CAAC,4BAA4B,CAAC;oBACjD,wCAAM,SAAS,EAAE,EAAE,CAAC,2BAA2B,CAAC,yBAAY;oBAC5D,qDACgB,EAAE,CAAC,cAAc,CAAC,mBAClB,MAAM,EACpB,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK;wBAEnB,8BAAC,YAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,GAAG,CACpC,CACG;gBAET,sCAAI,SAAS,EAAE,EAAE,CAAC,6BAA6B,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,IAChE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC;oBACzB,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,KAAK,IAAK,OAAA,CACjC,8BAAC,wBAAc,IACb,gBAAgB,EAAE,EAAE,CAAC,uBAAuB,CAAC,EAC7C,SAAS,EAAC,KAAK,EACf,OAAO,EAAE,MAAM,CAAC,KAAK,IAAI,EAAE,EAC3B,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,EAC1C,GAAG,EAAE,MAAM,CAAC,KAAK;wBAEjB,sCACE,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EACvC,GAAG,EAAE,MAAM,CAAC,KAAK,IAEhB,aAAa,IAAI,SAAS,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CACtD;4BACE,qCAAG,SAAS,EAAE,EAAE,CAAC,gCAAgC,CAAC;gCAChD,8BAAC,YAAI,IAAC,IAAI,EAAC,UAAU,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,GAAI,CAC7C;4BACJ,4CACG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7C,CACN,CACJ,CAAC,CAAC,CAAC,CACF,8BAAC,kBAAQ,IACP,IAAI,EAAC,IAAI,EACT,WAAW,EAAE,EAAE,EACf,OAAO,EAAE,MAAM,CAAC,OAAO,EACvB,QAAQ,EAAE,CAAC,MAAM,CAAC,QAAQ,IAAI,aAAa,EAC3C,QAAQ,EAAE,KAAI,CAAC,mBAAmB,CAAC,IAAI,CACrC,KAAI,EACJ,MAAM,EACN,KAAK,CACN;4BAED,4CACG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAC7C,CACE,CACZ,CACE,CACU,CAClB,EAxCkC,CAwClC,CAAC;oBACJ,CAAC,CAAC,IAAI,CACL;gBAEL,0CAAQ,SAAS,EAAE,EAAE,CAAC,4BAA4B,CAAC;oBACjD;wBACE,8BAAC,gBAAM,IACL,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;gCACxC,YAAY,EAAE,CAAC,aAAa;6BAC7B,CAAC,EACF,OAAO,EAAE,cAAM,OAAA,KAAI,CAAC,QAAQ,CAAC,EAAC,aAAa,EAAE,KAAK,EAAC,CAAC,EAArC,CAAqC,EACpD,KAAK,EAAC,MAAM,IAEX,EAAE,CAAC,oBAAoB,CAAC,CAClB;wBACT,8BAAC,gBAAM,IACL,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE;gCACxC,YAAY,EAAE,aAAa;6BAC5B,CAAC,EACF,OAAO,EAAE;gCACP,OAAA,KAAI,CAAC,QAAQ,CACX,EAAC,aAAa,EAAE,IAAI,EAAC,EACrB;oCACE,OAAA,KAAI,CAAC,KAAK,CAAC,aAAa;wCACxB,KAAI,CAAC,KAAK,CAAC,SAAS;wCACpB,KAAI,CAAC,YAAY,EAAE;gCAFnB,CAEmB,CACtB;4BAND,CAMC,EAEH,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC,IAE/B,EAAE,CAAC,MAAM,CAAC,CACJ,CACL;oBACN;wBACE,8BAAC,gBAAM,IAAC,SAAS,EAAC,MAAM,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,IACzC,EAAE,CAAC,QAAQ,CAAC,CACN;wBACT,8BAAC,gBAAM,IAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,SAAS,IAC5C,EAAE,CAAC,SAAS,CAAC,CACP,CACL,CACC,CACH,CACP,CACJ,CAAC;IACJ,CAAC;IAED,8BAAM,GAAN;QACQ,IAAA,KAwBF,IAAI,CAAC,KAAK,EAvBZ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,cAAc,oBAAA,EACd,gBAAgB,sBAAA,EAChB,WAAW,iBAAA,EACX,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,WAAW,iBAAA,EACX,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,OAAO,aAAA,EACP,SAAS,eAAA,EACG,EAAE,gBAAA,EACd,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,cAAc,oBACF,CAAC;QAEf,IAAM,MAAM,GAAG,CACb,0CACE,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,QAAQ,IAAI,WAAW,EACjC,SAAS,EAAE,EAAE,CACX,QAAQ,EACR,YAAY,EACZ,OAAO,KAAK,KAAK,WAAW;gBAC1B,CAAC,CAAC,iBAAiB;gBACnB,CAAC,CAAC,KAAK;oBACP,CAAC,CAAC,aAAW,KAAO;oBACpB,CAAC,CAAC,EAAE,EACN;gBACE,eAAe,EAAE,KAAK;gBACtB,iBAAiB,EAAE,OAAO;gBAC1B,kBAAkB,EAAE,QAAQ;aAC7B,EACD,IAAI,CAAC,CAAC,CAAC,aAAW,IAAM,CAAC,CAAC,CAAC,EAAE,CAC9B;YAEA,IAAI,CAAC,CAAC,CAAC,CACN,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CACzB,qCAAG,SAAS,EAAE,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,GAAI,CACrC,CAAC,CAAC,CAAC,CACF,IAAI,CACL,CACF,CAAC,CAAC,CAAC,IAAI;YACP,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAA,YAAM,EAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK;YACvD,cAAc,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CACpC,wCAAM,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC;gBACxC,8BAAC,YAAI,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,MAAM,GAAG,CACjC,CACR,CACM,CACV,CAAC;QAEF,OAAO,CACL,uCACE,SAAS,EAAE,EAAE,CACX,eAAe,EACf;gBACE,qBAAqB,EAAE,KAAK;gBAC5B,2BAA2B,EAAE,KAAK,KAAK,OAAO;gBAC9C,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,QAAQ;gBAChC,YAAY,EAAE,SAAS;aACxB,EACD,SAAS,CACV,EACD,GAAG,EAAE,IAAI,CAAC,MAAM;YAEf,SAAS,CAAC,CAAC,CAAC,CACX,MAAM,CACP,CAAC,CAAC,CAAC,CACF,8BAAC,wBAAc,IACb,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EACzC,SAAS,EAAE,gBAAgB,EAC3B,OAAO,EAAE,cAAc,EACvB,SAAS,EAAE,gBAAgB,IAE1B,MAAM,CACQ,CAClB;YACA,IAAI,CAAC,KAAK,CAAC,QAAQ;gBAClB,CAAC,CAAC,SAAS;oBACT,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;oBACpB,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE;gBACtB,CAAC,CAAC,IAAI,CACJ,CACP,CAAC;IACJ,CAAC;IAxZM,0BAAY,GAGf;QACF,SAAS,EAAE,KAAK;QAChB,cAAc,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;QAClC,gBAAgB,EAAE,KAAK;QACvB,SAAS,EAAE,KAAK;KACjB,CAAC;IA6EF;QADC,iBAAQ;;;;gDAQR;IAoCD;QADC,iBAAQ;;;;kDAUR;IAgRH,oBAAC;CAAA,AAnaD,CAA2C,eAAK,CAAC,SAAS,GAmazD;kBAnaoB,aAAa",
+    "sourcesContent": [
+        "import React from 'react';\nimport {findDOMNode} from 'react-dom';\nimport Sortable from 'sortablejs';\nimport cloneDeep from 'lodash/cloneDeep';\nimport {RendererProps} from '../../factory';\nimport Overlay from '../../components/Overlay';\nimport PopOver from '../../components/PopOver';\nimport Modal from '../../components/Modal';\nimport Button from '../../components/Button';\nimport Checkbox from '../../components/Checkbox';\nimport TooltipWrapper from '../../components/TooltipWrapper';\nimport type {TooltipObject} from '../../components/TooltipWrapper';\nimport {noop, autobind} from '../../utils/helper';\nimport {filter} from '../../utils/tpl';\nimport {Icon} from '../../components/icons';\nimport {RootClose} from '../../utils/RootClose';\nimport {IColumn} from '../../store/table';\n\nexport interface ColumnTogglerProps extends RendererProps {\n  /**\n   * 按钮文字\n   */\n  label?: string | React.ReactNode;\n\n  /**\n   * 按钮提示文字，hover focus 时显示\n   */\n  tooltip?: string | TooltipObject;\n\n  /**\n   * 禁用状态下的提示\n   */\n  disabledTip?: string | TooltipObject;\n\n  /**\n   * 点击外部是否关闭\n   */\n  closeOnOutside?: boolean;\n\n  /**\n   * 点击内容是否关闭\n   */\n  closeOnClick?: boolean;\n\n  /**\n   * 下拉菜单对齐方式\n   */\n  align?: 'left' | 'right';\n\n  /**\n   *  ColumnToggler的CSS类名\n   */\n  className?: string;\n\n  /**\n   * 按钮的CSS类名\n   */\n  btnClassName?: string;\n\n  /**\n   * 按钮大小\n   */\n  size?: 'xs' | 'sm' | 'md' | 'lg';\n\n  /**\n   * 按钮级别，样式\n   */\n  level?: 'info' | 'success' | 'danger' | 'warning' | 'primary' | 'link';\n\n  /**\n   * 是否独占一行 `display: block`\n   */\n  block?: boolean;\n\n  /**\n   * 是否可通过拖拽排序\n   */\n  draggable?: boolean;\n\n  /**\n   * 默认是否展开\n   */\n  defaultIsOpened?: boolean;\n\n  /**\n   * 激活状态\n   */\n  isActived?: boolean;\n\n  /**\n   * ICON名称\n   */\n  icon?: string | React.ReactNode;\n\n  /**\n   * 是否只显示图标。\n   */\n  iconOnly?: boolean;\n\n  /**\n   * 是否隐藏展开的Icon\n   */\n  hideExpandIcon?: boolean;\n\n  /**\n   * 是否显示遮罩层\n   */\n  overlay?: boolean;\n\n  /**\n   * 列数据\n   */\n  columns: Array<IColumn>;\n\n  onColumnToggle: (columns: Array<IColumn>) => void;\n  modalContainer?: () => HTMLElement;\n}\n\nexport interface ColumnTogglerState {\n  isOpened: boolean;\n  enableSorting: boolean;\n  tempColumns: any[];\n}\n\nexport default class ColumnToggler extends React.Component<\n  ColumnTogglerProps,\n  ColumnTogglerState\n> {\n  state: ColumnTogglerState = {\n    isOpened: false,\n    enableSorting: false,\n    tempColumns: cloneDeep(this.props.columns)\n  };\n\n  static defaultProps: Pick<\n    ColumnTogglerProps,\n    'placement' | 'tooltipTrigger' | 'tooltipRootClose' | 'draggable'\n  > = {\n    placement: 'top',\n    tooltipTrigger: ['hover', 'focus'],\n    tooltipRootClose: false,\n    draggable: false\n  };\n\n  target: any;\n  sortable?: Sortable;\n  dragRefDOM: HTMLElement;\n\n  constructor(props: ColumnTogglerProps) {\n    super(props);\n\n    this.open = this.open.bind(this);\n    this.close = this.close.bind(this);\n    this.toggle = this.toggle.bind(this);\n    this.domRef = this.domRef.bind(this);\n    this.dragRef = this.dragRef.bind(this);\n  }\n\n  componentDidMount() {\n    if (this.props.defaultIsOpened) {\n      this.setState({\n        isOpened: true\n      });\n    }\n  }\n\n  componentWillUnmount() {\n    this.destroyDragging();\n  }\n\n  domRef(ref: any) {\n    this.target = ref;\n  }\n\n  toggle(e: React.MouseEvent<any>) {\n    e.preventDefault();\n\n    this.setState({\n      isOpened: !this.state.isOpened\n    });\n  }\n\n  open() {\n    this.setState({\n      isOpened: true\n    });\n  }\n\n  close() {\n    this.setState({\n      isOpened: false,\n      enableSorting: false,\n      tempColumns: cloneDeep(this.props.columns)\n    });\n  }\n\n  swapColumnPosition(oldIndex: number, newIndex: number) {\n    const columns = this.state.tempColumns;\n\n    columns[oldIndex] = columns.splice(newIndex, 1, columns[oldIndex])[0];\n    this.setState({tempColumns: columns});\n  }\n\n  updateToggledColumn(\n    column: IColumn,\n    index: number,\n    value: any,\n    shift?: boolean\n  ) {\n    const tempColumns = this.state.tempColumns.concat();\n\n    tempColumns.splice(index, 1, {\n      ...column,\n      toggled: value\n    });\n    this.setState({tempColumns});\n  }\n\n  @autobind\n  dragRef(ref: any) {\n    const {enableSorting} = this.state;\n    const {draggable} = this.props;\n\n    if (enableSorting && draggable && ref) {\n      this.initDragging();\n    }\n  }\n\n  initDragging() {\n    const dom = findDOMNode(this) as HTMLElement;\n    const ns = this.props.classPrefix;\n\n    this.sortable = new Sortable(\n      dom.querySelector(`.${ns}ColumnToggler-modal-content`) as HTMLElement,\n      {\n        group: `ColumnToggler-modal-content`,\n        animation: 150,\n        handle: `.${ns}ColumnToggler-menuItem-dragBar`,\n        ghostClass: `${ns}ColumnToggler-menuItem--dragging`,\n        onEnd: (e: any) => {\n          if (e.newIndex === e.oldIndex) {\n            return;\n          }\n\n          const parent = e.to as HTMLElement;\n          if (e.oldIndex < parent.childNodes.length - 1) {\n            parent.insertBefore(e.item, parent.childNodes[e.oldIndex]);\n          } else {\n            parent.appendChild(e.item);\n          }\n\n          this.swapColumnPosition(e.oldIndex, e.newIndex);\n        }\n      }\n    );\n  }\n\n  destroyDragging() {\n    this.sortable && this.sortable.destroy();\n  }\n\n  @autobind\n  onConfirm() {\n    const {tempColumns} = this.state;\n    const {onColumnToggle} = this.props;\n\n    onColumnToggle && onColumnToggle([...tempColumns]);\n    this.setState({\n      isOpened: false,\n      enableSorting: false\n    });\n  }\n\n  renderOuter() {\n    const {\n      popOverContainer,\n      classnames: cx,\n      classPrefix: ns,\n      children,\n      closeOnClick,\n      closeOnOutside\n    } = this.props;\n    const body = (\n      <RootClose\n        disabled={!this.state.isOpened}\n        onRootClose={closeOnOutside !== false ? this.close : noop}\n      >\n        {(ref: any) => {\n          return (\n            <ul\n              className={cx('ColumnToggler-menu')}\n              onClick={closeOnClick ? this.close : noop}\n              ref={ref}\n            >\n              {children}\n            </ul>\n          );\n        }}\n      </RootClose>\n    );\n\n    if (popOverContainer) {\n      return (\n        <Overlay container={popOverContainer} target={() => this.target} show>\n          <PopOver\n            overlay\n            onHide={this.close}\n            classPrefix={ns}\n            className={cx('ColumnToggler-popover')}\n            style={{minWidth: this.target?.offsetWidth}}\n          >\n            {body}\n          </PopOver>\n        </Overlay>\n      );\n    }\n\n    return body;\n  }\n\n  renderModal() {\n    const {\n      render,\n      classnames: cx,\n      classPrefix: ns,\n      modalContainer,\n      draggable,\n      overlay,\n      translate: __\n    } = this.props;\n\n    const {enableSorting, tempColumns} = this.state;\n\n    return (\n      <>\n        <Modal\n          closeOnEsc\n          onHide={this.close}\n          show={this.state.isOpened}\n          contentClassName={cx('ColumnToggler-modal')}\n          container={modalContainer || this.target}\n          overlay={typeof overlay === 'boolean' ? overlay : false}\n        >\n          <header className={cx('ColumnToggler-modal-header')}>\n            <span className={cx('ColumnToggler-modal-title')}>列设置</span>\n            <a\n              data-tooltip={__('Dialog.close')}\n              data-position=\"left\"\n              className={cx('Modal-close')}\n              onClick={this.close}\n            >\n              <Icon icon=\"close\" className=\"icon\" />\n            </a>\n          </header>\n\n          <ul className={cx('ColumnToggler-modal-content')} ref={this.dragRef}>\n            {Array.isArray(tempColumns)\n              ? tempColumns.map((column, index) => (\n                  <TooltipWrapper\n                    tooltipClassName={cx('ColumnToggler-tooltip')}\n                    placement=\"top\"\n                    tooltip={column.label || ''}\n                    trigger={enableSorting ? 'click' : 'hover'}\n                    key={column.index}\n                  >\n                    <li\n                      className={cx('ColumnToggler-menuItem')}\n                      key={column.index}\n                    >\n                      {enableSorting && draggable && tempColumns.length > 1 ? (\n                        <>\n                          <a className={cx('ColumnToggler-menuItem-dragBar')}>\n                            <Icon icon=\"drag-bar\" className={cx('icon')} />\n                          </a>\n                          <span>\n                            {column.label ? render('tpl', column.label) : null}\n                          </span>\n                        </>\n                      ) : (\n                        <Checkbox\n                          size=\"sm\"\n                          classPrefix={ns}\n                          checked={column.toggled}\n                          disabled={!column.toggable || enableSorting}\n                          onChange={this.updateToggledColumn.bind(\n                            this,\n                            column,\n                            index\n                          )}\n                        >\n                          <span>\n                            {column.label ? render('tpl', column.label) : null}\n                          </span>\n                        </Checkbox>\n                      )}\n                    </li>\n                  </TooltipWrapper>\n                ))\n              : null}\n          </ul>\n\n          <footer className={cx('ColumnToggler-modal-footer')}>\n            <div>\n              <Button\n                className={cx(`ColumnToggler-modeSelect`, {\n                  'is-actived': !enableSorting\n                })}\n                onClick={() => this.setState({enableSorting: false})}\n                level=\"link\"\n              >\n                {__('Table.toggleColumn')}\n              </Button>\n              <Button\n                className={cx(`ColumnToggler-modeSelect`, {\n                  'is-actived': enableSorting\n                })}\n                onClick={() =>\n                  this.setState(\n                    {enableSorting: true},\n                    () =>\n                      this.state.enableSorting &&\n                      this.props.draggable &&\n                      this.initDragging()\n                  )\n                }\n                level=\"link\"\n                disabled={tempColumns.length < 2}\n              >\n                {__('sort')}\n              </Button>\n            </div>\n            <div>\n              <Button className=\"mr-4\" onClick={this.close}>\n                {__('cancel')}\n              </Button>\n              <Button level=\"primary\" onClick={this.onConfirm}>\n                {__('confirm')}\n              </Button>\n            </div>\n          </footer>\n        </Modal>\n      </>\n    );\n  }\n\n  render() {\n    const {\n      tooltip,\n      placement,\n      tooltipContainer,\n      tooltipTrigger,\n      tooltipRootClose,\n      disabledTip,\n      block,\n      disabled,\n      btnDisabled,\n      btnClassName,\n      size,\n      label,\n      level,\n      primary,\n      className,\n      classnames: cx,\n      align,\n      iconOnly,\n      icon,\n      isActived,\n      data,\n      draggable,\n      hideExpandIcon\n    } = this.props;\n\n    const button = (\n      <button\n        onClick={this.toggle}\n        disabled={disabled || btnDisabled}\n        className={cx(\n          'Button',\n          btnClassName,\n          typeof level === 'undefined'\n            ? 'Button--default'\n            : level\n            ? `Button--${level}`\n            : '',\n          {\n            'Button--block': block,\n            'Button--primary': primary,\n            'Button--iconOnly': iconOnly\n          },\n          size ? `Button--${size}` : ''\n        )}\n      >\n        {icon ? (\n          typeof icon === 'string' ? (\n            <i className={cx(icon, 'm-r-xs')} />\n          ) : (\n            icon\n          )\n        ) : null}\n        {typeof label === 'string' ? filter(label, data) : label}\n        {hideExpandIcon || draggable ? null : (\n          <span className={cx('ColumnToggler-caret')}>\n            <Icon icon=\"caret\" className=\"icon\" />\n          </span>\n        )}\n      </button>\n    );\n\n    return (\n      <div\n        className={cx(\n          'ColumnToggler',\n          {\n            'ColumnToggler-block': block,\n            'ColumnToggler--alignRight': align === 'right',\n            'is-opened': this.state.isOpened,\n            'is-actived': isActived\n          },\n          className\n        )}\n        ref={this.domRef}\n      >\n        {draggable ? (\n          button\n        ) : (\n          <TooltipWrapper\n            placement={placement}\n            tooltip={disabled ? disabledTip : tooltip}\n            container={tooltipContainer}\n            trigger={tooltipTrigger}\n            rootClose={tooltipRootClose}\n          >\n            {button}\n          </TooltipWrapper>\n        )}\n        {this.state.isOpened\n          ? draggable\n            ? this.renderModal()\n            : this.renderOuter()\n          : null}\n      </div>\n    );\n  }\n}\n"
+    ]
+}

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ITableStore } from '../../store/table';
+import { ClassNamesFn } from '../../theme';
+export interface ItemActionsProps {
+    classnames: ClassNamesFn;
+    children: JSX.Element;
+    store: ITableStore;
+}
+declare function ItemActionsWrapper(props: ItemActionsProps): JSX.Element;
+declare const _default: typeof ItemActionsWrapper;
+export default _default;

package/lib/renderers/Table/ItemActionsWrapper.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var mobx_react_1 = require("mobx-react");
+var react_1 = tslib_1.__importStar(require("react"));
+function ItemActionsWrapper(props) {
+    var _a;
+    var cx = props.classnames;
+    var children = props.children;
+    var store = props.store;
+    var divRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var _a;
+        var row = store.hoverRow;
+        if (!row) {
+            return;
+        }
+        var frame = (_a = divRef.current.parentElement) === null || _a === void 0 ? void 0 : _a.querySelector('table');
+        var dom = frame === null || frame === void 0 ? void 0 : frame.querySelector("tr[data-id=\"" + row.id + "\"]");
+        if (!dom) {
+            return;
+        }
+        var rect = dom.getBoundingClientRect();
+        var height = rect.height;
+        var top = rect.top - frame.getBoundingClientRect().top;
+        divRef.current.style.cssText += "top: " + top + "px;height: " + height + "px;";
+    }, [(_a = store.hoverRow) === null || _a === void 0 ? void 0 : _a.id]);
+    return (react_1.default.createElement("div", { className: cx('Table-itemActions-wrap'), ref: divRef }, children));
+}
+exports.default = (0, mobx_react_1.observer)(ItemActionsWrapper);
+//# sourceMappingURL=./renderers/Table/ItemActionsWrapper.js.map

package/lib/renderers/Table/ItemActionsWrapper.js.map

@@ -0,0 +1,13 @@
+{
+    "version": 3,
+    "file": "ItemActionsWrapper.js",
+    "sourceRoot": "",
+    "sources": [
+        "/src/renderers/Table/ItemActionsWrapper.tsx"
+    ],
+    "names": [],
+    "mappings": ";;;AAAA,yCAAoC;AACpC,0DAA+C;AAU/C,SAAS,kBAAkB,CAAC,KAAuB;;IACjD,IAAM,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC;IAC5B,IAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAChC,IAAM,KAAK,GAAG,KAAK,CAAC,KAAK,CAAC;IAC1B,IAAM,MAAM,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAE5C,IAAA,iBAAS,EAAC;;QACR,IAAM,GAAG,GAAG,KAAK,CAAC,QAAS,CAAC;QAC5B,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QAED,IAAM,KAAK,GAAG,MAAA,MAAM,CAAC,OAAQ,CAAC,aAAa,0CAAE,aAAa,CACxD,OAAO,CACO,CAAC;QACjB,IAAM,GAAG,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAC,kBAAe,GAAG,CAAC,EAAE,QAAI,CAAgB,CAAC;QAC3E,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,IAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE,CAAC;QACzC,IAAM,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACzD,MAAM,CAAC,OAAQ,CAAC,KAAK,CAAC,OAAO,IAAI,UAAQ,GAAG,mBAAc,MAAM,QAAK,CAAC;IACxE,CAAC,EAAE,CAAC,MAAA,KAAK,CAAC,QAAQ,0CAAE,EAAE,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,uCAAK,SAAS,EAAE,EAAE,CAAC,wBAAwB,CAAC,EAAE,GAAG,EAAE,MAAM,IACtD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAED,kBAAe,IAAA,qBAAQ,EAAC,kBAAkB,CAAC,CAAC",
+    "sourcesContent": [
+        "import {observer} from 'mobx-react';\nimport React, {useEffect, useRef} from 'react';\nimport {ITableStore} from '../../store/table';\nimport {ClassNamesFn} from '../../theme';\n\nexport interface ItemActionsProps {\n  classnames: ClassNamesFn;\n  children: JSX.Element;\n  store: ITableStore;\n}\n\nfunction ItemActionsWrapper(props: ItemActionsProps) {\n  const cx = props.classnames;\n  const children = props.children;\n  const store = props.store;\n  const divRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const row = store.hoverRow!;\n    if (!row) {\n      return;\n    }\n\n    const frame = divRef.current!.parentElement?.querySelector(\n      'table'\n    ) as HTMLElement;\n    const dom = frame?.querySelector(`tr[data-id=\"${row.id}\"]`) as HTMLElement;\n    if (!dom) {\n      return;\n    }\n    const rect = dom.getBoundingClientRect();\n    const height = rect.height;\n    const top = rect.top - frame.getBoundingClientRect().top;\n    divRef.current!.style.cssText += `top: ${top}px;height: ${height}px;`;\n  }, [store.hoverRow?.id]);\n\n  return (\n    <div className={cx('Table-itemActions-wrap')} ref={divRef}>\n      {children}\n    </div>\n  );\n}\n\nexport default observer(ItemActionsWrapper);\n"
+    ]
+}

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

@@ -13,7 +13,7 @@ export interface TableBodyProps extends LocaleProps {
     rows: Array<IRow>;
     render: (region: string, node: SchemaNode, props?: any) => JSX.Element;
     renderCell: (region: string, column: IColumn, item: IRow, props: any) => React.ReactNode;
-    onCheck: (item: IRow) => void;
+    onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
     onQuickChange?: (item: IRow, values: object, saveImmediately?: boolean | any, savePristine?: boolean) => void;
     footable?: boolean;
     ignoreFootableContent?: boolean;
@@ -41,6 +41,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
         checkdisable: boolean;
         isPrimary: boolean;
         searchable: any;
+        enableSearch: boolean;
         sortable: boolean;
         filterable: any;
         fixed: string;
@@ -53,6 +54,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
     } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
         toggleToggle(): void;
         setToggled(value: boolean): void;
+        setEnableSearch(value: boolean): void;
     } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
         label: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<any, any, any>, [undefined]>;
         type: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
@@ -65,6 +67,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
         checkdisable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         isPrimary: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         searchable: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IType<any, any, any>>;
+        enableSearch: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         sortable: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
         filterable: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<any, any, any>, [undefined]>;
         fixed: import("mobx-state-tree").IType<string | undefined, string, string>;
@@ -77,6 +80,7 @@ export declare class TableBody extends React.Component<TableBodyProps> {
     }, {
         toggleToggle(): void;
         setToggled(value: boolean): void;
+        setEnableSearch(value: boolean): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>)[], rowProps?: any): any;
     renderSummaryRow(position: 'prefix' | 'affix', items?: Array<any>, rowIndex?: number): JSX.Element | null;
     renderSummary(position: 'prefix' | 'affix', items?: Array<any>): JSX.Element | (JSX.Element | null)[] | null;

package/lib/renderers/Table/TableBody.js

@@ -5,6 +5,7 @@ var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
 var TableRow_1 = require("./TableRow");
 var tpl_1 = require("../../utils/tpl");
+var mobx_react_1 = require("mobx-react");
 var helper_1 = require("../../utils/helper");
 var TableBody = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(TableBody, _super);
@@ -34,7 +35,7 @@ var TableBody = /** @class */ (function (_super) {
                             : rowClassName), columns: footableColumns, renderCell: renderCell, render: render, onAction: onAction, onCheck: onCheck, footableMode: true, footableColSpan: columns.length, onQuickChange: onQuickChange, ignoreFootableContent: ignoreFootableContent }, rowProps)));
                 }
             }
-            else if (item.children.length) {
+            else if (item.children.length && item.expanded) {
                 // 嵌套表格
                 doms.push.apply(doms, _this.renderRows(item.children, columns, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, rowProps), { parent: item })));
             }
@@ -93,6 +94,9 @@ var TableBody = /** @class */ (function (_super) {
             this.renderRows(rows, columns, rowsProps),
             this.renderSummary('affix', affixRow))) : null));
     };
+    TableBody = (0, tslib_1.__decorate)([
+        mobx_react_1.observer
+    ], TableBody);
     return TableBody;
 }(react_1.default.Component));
 exports.TableBody = TableBody;