amis-rev-ui 6.13.0

package/esm/components/Spinner.js

@@ -0,0 +1,202 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read } from 'tslib';
+import React__default from 'react';
+import ReactDOM from 'react-dom';
+import { themeable } from 'amis-rev-core';
+import Transition, { ENTERED, ENTERING } from 'react-transition-group/Transition';
+import { Icon } from './icons.js';
+import { types } from 'mobx-state-tree';
+import { observable, reaction } from 'mobx';
+
+/**
+ * @file Spinner
+ * @description
+ * @author fex
+ * @date 2017-11-07
+ */
+var _a;
+var fadeStyles = (_a = {},
+    _a[ENTERED] = 'in',
+    _a[ENTERING] = 'in',
+    _a);
+var SpinnerSharedStore = types
+    .model('SpinnerSharedStore', {})
+    .volatile(function (self) {
+    return {
+        // 保存所有可以进入 loading 状态（props.show = true）的 Spinner 的父级容器
+        spinningContainers: observable.set([], {
+            deep: false
+        })
+    };
+})
+    .actions(function (self) {
+    return {
+        push: function (spinnerContainer) {
+            if (self.spinningContainers.has(spinnerContainer)) {
+                return;
+            }
+            self.spinningContainers.add(spinnerContainer);
+        },
+        remove: function (spinnerContainer) {
+            if (self.spinningContainers.has(spinnerContainer)) {
+                self.spinningContainers.delete(spinnerContainer);
+            }
+        },
+        /**
+         *  判断当前 Spinner 是否可以进入 loading 状态
+         * @param spinnerContainerWillCheck 待检查的 Spinner 父容器
+         * @returns {boolean} 是否可以进入 loading
+         */
+        checkLoading: function (spinnerContainerWillCheck) {
+            if (self.spinningContainers.has(spinnerContainerWillCheck)) {
+                if (!self.spinningContainers.size) {
+                    return false;
+                }
+                var loading_1 = true;
+                // 检查缓存的容器中是否有当前容器的父级元素
+                self.spinningContainers.forEach(function (container) {
+                    if (container.contains(spinnerContainerWillCheck) &&
+                        container !== spinnerContainerWillCheck) {
+                        loading_1 = false;
+                    }
+                });
+                return loading_1;
+            }
+            return false;
+        }
+    };
+});
+var store = SpinnerSharedStore.create({});
+var Spinner = /** @class */ (function (_super) {
+    __extends(Spinner, _super);
+    function Spinner() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            spinning: false,
+            showMarker: true,
+            idDarkBg: false
+        };
+        _this.parent = null;
+        /**
+         * 解决同级（same parent node） spinner 的 show 不全为 true 时
+         * 标记 loading 是由当前组件触发的
+         */
+        _this.loadingTriggered = false;
+        _this.spinnerRef = function (dom) {
+            if (dom) {
+                _this.parent = dom.parentNode;
+            }
+        };
+        /**
+         * 监控着 spinningContainers 的变化
+         */
+        _this.loadingChecker = reaction(function () { return store.spinningContainers.size; }, function () {
+            if (_this.parent) {
+                _this.setState({
+                    spinning: store.checkLoading(_this.parent) && _this.loadingTriggered
+                });
+            }
+        });
+        return _this;
+    }
+    Spinner.prototype.componentDidUpdate = function () {
+        var _a, _b;
+        var showLoading = ((_a = this.props.loadingConfig) === null || _a === void 0 ? void 0 : _a.show) === true ||
+            typeof ((_b = this.props.loadingConfig) === null || _b === void 0 ? void 0 : _b.show) === 'undefined';
+        if (this.parent && showLoading) {
+            if (this.props.show) {
+                this.loadingTriggered = true;
+                store.push(this.parent);
+            }
+            else if (this.state.spinning && this.loadingTriggered) {
+                this.loadingTriggered = false;
+                store.remove(this.parent);
+            }
+        }
+    };
+    Spinner.prototype.componentDidMount = function () {
+        var _a, _b;
+        if (this.parent && this.state.showMarker) {
+            this.setState({ showMarker: false });
+        }
+        if (this.parent) {
+            var backgroundColor = getComputedStyle(this.parent).getPropertyValue('background-color');
+            var rgba = ((_a = backgroundColor.match(/\d+/g)) === null || _a === void 0 ? void 0 : _a.map(Number)) || [];
+            var brightness = (rgba[0] * 299 + rgba[1] * 587 + rgba[2] * 114) / 1000;
+            rgba[3] = (_b = rgba[3]) !== null && _b !== void 0 ? _b : 1; // 没有设置颜色时取到的是 rgba(0, 0, 0, 0)
+            if (brightness < 200 && rgba[3] > 0.4) {
+                this.setState({ idDarkBg: true });
+            }
+        }
+    };
+    Spinner.prototype.componentWillUnmount = function () {
+        // 卸载 reaction
+        this.loadingChecker();
+        // 删除 当前 parent 元素
+        store.remove(this.parent);
+    };
+    Spinner.prototype.renderBody = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, className = _a.className, spinnerClassName = _a.spinnerClassName, _b = _a.size, size = _b === void 0 ? '' : _b, overlay = _a.overlay, delay = _a.delay, iconConfig = _a.icon, tip = _a.tip, _c = _a.tipPlacement, tipPlacement = _c === void 0 ? '' : _c, loadingConfig = _a.loadingConfig, disabled = _a.disabled;
+        // 定义了挂载位置时只能使用默认icon
+        var icon = (loadingConfig === null || loadingConfig === void 0 ? void 0 : loadingConfig.root) ? undefined : iconConfig;
+        var isCustomIcon = icon && React__default.isValidElement(icon);
+        var timeout = { enter: delay, exit: 0 };
+        var showOverlay = (loadingConfig === null || loadingConfig === void 0 ? void 0 : loadingConfig.root) || overlay;
+        return (React__default.createElement(React__default.Fragment, null,
+            this.state.showMarker && (React__default.createElement("span", { className: cx('Spinner-mark'), ref: this.spinnerRef })),
+            React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, in: this.state.spinning, timeout: timeout }, function (status) {
+                var _a, _b, _c;
+                return (React__default.createElement(React__default.Fragment, null,
+                    showOverlay ? (React__default.createElement("div", { className: cx("Spinner-overlay", fadeStyles[status]) })) : null,
+                    React__default.createElement("div", { "data-testid": "spinner", className: cx("Spinner", tip && (_a = {},
+                            _a["Spinner-tip--".concat(tipPlacement)] = [
+                                'top',
+                                'right',
+                                'bottom',
+                                'left'
+                            ].includes(tipPlacement),
+                            _a), (_b = {}, _b["Spinner--overlay"] = showOverlay, _b), fadeStyles[status], className) },
+                        React__default.createElement("div", { className: cx("Spinner-icon", (_c = {},
+                                _c["Spinner-icon--".concat(size)] = ['lg', 'sm'].includes(size),
+                                _c['Spinner-icon--default'] = !icon,
+                                _c['Spinner-icon--simple'] = !isCustomIcon && icon,
+                                _c['Spinner-icon--custom'] = isCustomIcon,
+                                _c['Spinner-icon--disabled'] = disabled,
+                                _c), spinnerClassName, _this.state.idDarkBg && 'Spinner-icon--darkBg') }, icon ? (React__default.createElement(Icon, { cx: cx, icon: icon, className: "icon" })) : null),
+                        tip ? React__default.createElement("span", { className: cx("Spinner-tip") }, tip) : '')));
+            })));
+    };
+    Spinner.prototype.render = function () {
+        var loadingConfig = this.props.loadingConfig;
+        var spinnerBody = this.renderBody();
+        var root = loadingConfig === null || loadingConfig === void 0 ? void 0 : loadingConfig.root;
+        var dom = root ? document.querySelector(root) : null;
+        if (dom) {
+            // TODO: 找到准确的 元素
+            return ReactDOM.createPortal(spinnerBody, dom);
+        }
+        return spinnerBody;
+    };
+    Spinner.defaultProps = {
+        show: true,
+        className: '',
+        spinnerClassName: '',
+        size: '',
+        icon: '',
+        tip: '',
+        tipPlacement: 'bottom',
+        delay: 0,
+        overlay: false,
+        loadingConfig: {},
+        disabled: false
+    };
+    return Spinner;
+}(React__default.Component));
+var Spinner$1 = themeable(Spinner);
+
+export { Spinner, Spinner$1 as default };

package/esm/components/Steps.js

@@ -0,0 +1,76 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import React__default from 'react';
+import { themeable } from 'amis-rev-core';
+import { Icon } from './icons.js';
+
+var StepStatus;
+(function (StepStatus) {
+    StepStatus["wait"] = "wait";
+    StepStatus["process"] = "process";
+    StepStatus["finish"] = "finish";
+    StepStatus["error"] = "error";
+})(StepStatus || (StepStatus = {}));
+function Steps(props) {
+    var stepsRow = props.steps, cx = props.classnames, className = props.className, style = props.style, current = props.current, status = props.status, _a = props.mode, mode = _a === void 0 ? 'horizontal' : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? 'horizontal' : _b, _c = props.progressDot, progressDot = _c === void 0 ? false : _c, iconPosition = props.iconPosition, mobileUI = props.mobileUI, iconClassName = props.iconClassName, subTitleClassName = props.subTitleClassName, titleClassName = props.titleClassName, descriptionClassName = props.descriptionClassName, onClickStep = props.onClickStep;
+    var FINISH_ICON = 'check';
+    var ERROR_ICON = 'close';
+    function getStepStatus(step, i) {
+        var stepStatus = StepStatus.wait;
+        var icon = step.icon;
+        if (i < current) {
+            stepStatus = StepStatus.finish;
+            !icon && (icon = FINISH_ICON);
+        }
+        else if (i === current) {
+            stepStatus = StepStatus.process;
+        }
+        if (typeof status === 'string') {
+            if (i === current) {
+                stepStatus = step.status || status || StepStatus.process;
+                stepStatus === StepStatus.error && !icon && (icon = ERROR_ICON);
+            }
+        }
+        else if (typeof status === 'object') {
+            var key = step.value;
+            key && status[key] && (stepStatus = status[key]);
+        }
+        return {
+            stepStatus: stepStatus,
+            icon: icon
+        };
+    }
+    return (React__default.createElement("ul", { className: cx(
+        // 纵向步骤条暂时不支持labelPlacement属性
+        'Steps', "Steps--Placement-".concat(progressDot || (labelPlacement === 'vertical' && mode != 'vertical')
+            ? 'vertical'
+            : ''), "Steps--".concat(progressDot ? 'ProgressDot' : ''), "Steps--".concat(mode), mobileUI ? 'Steps-mobile' : '', className), style: style }, stepsRow.map(function (step, i) {
+        var _a = getStepStatus(step, i), stepStatus = _a.stepStatus, icon = _a.icon;
+        return (React__default.createElement("li", { key: i, className: cx('StepsItem', "is-".concat(stepStatus), step.className, "".concat(progressDot ? 'StepsItem-ProgressDot' : ''), "".concat(onClickStep && stepStatus === StepStatus.finish
+                ? 'is-clickable'
+                : '')) },
+            React__default.createElement("div", { className: cx('StepsItem-container', iconPosition && mode != 'vertical' && 'StepsItem-vertical') },
+                React__default.createElement("div", { className: cx('StepsItem-containerTail') }),
+                progressDot ? (React__default.createElement("div", { className: cx('StepsItem-containerProgressDot'), onClick: function () { return onClickStep && onClickStep(i, step); } })) : (React__default.createElement("div", { className: cx('StepsItem-containerIcon', i < current && 'is-success'), onClick: function () { return onClickStep && onClickStep(i, step); } },
+                    React__default.createElement("span", { className: cx('StepsItem-icon', iconClassName, step.iconClassName) }, icon ? React__default.createElement(Icon, { icon: icon, className: "icon" }) : i + 1))),
+                React__default.createElement("div", { className: cx('StepsItem-containerWrapper'), onClick: function () { return onClickStep && onClickStep(i, step); } },
+                    React__default.createElement("div", { className: cx('StepsItem-body') },
+                        React__default.createElement("div", { className: cx('StepsItem-title', "StepsItem-".concat(progressDot ? 'vertical-ProgressDot' : ''), i < current && 'is-success') },
+                            React__default.createElement("span", { className: cx('StepsItem-ellText', titleClassName), title: typeof step.title === 'string' ? step.title : undefined }, step.title),
+                            step.subTitle && (React__default.createElement("span", { className: cx('StepsItem-subTitle', 'StepsItem-ellText', subTitleClassName), title: typeof step.subTitle === 'string'
+                                    ? step.subTitle
+                                    : undefined }, step.subTitle))),
+                        React__default.createElement("div", { className: cx('StepsItem-description', 'StepsItem-ellText'), title: typeof step.description === 'string'
+                                ? step.description
+                                : undefined },
+                            React__default.createElement("span", { className: cx(descriptionClassName) }, step.description))),
+                    mode === 'simple' && i < stepsRow.length - 1 && (React__default.createElement("div", { className: cx('StepsItem-icon-line') },
+                        React__default.createElement(Icon, { icon: "right-arrow", className: "icon", iconContent: "StepsItem-icon-line" })))))));
+    })));
+}
+var Steps$1 = themeable(Steps);
+
+export { StepStatus, Steps, Steps$1 as default };

package/esm/components/Switch.js

@@ -0,0 +1,73 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __rest, __assign } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-rev-core';
+import { Spinner } from './Spinner.js';
+
+/**
+ * @file Switch
+ * @description
+ * @author fex
+ */
+var sizeMap = {
+    sm: 'Switch--sm',
+    md: 'Switch--md',
+    middle: 'Switch--md',
+    lg: 'Switch--lg',
+    large: 'Switch--lg'
+};
+var levelMap = {
+    info: 'bg-info',
+    primary: 'bg-primary',
+    danger: 'bg-danger'
+};
+var Switch = /** @class */ (function (_super) {
+    __extends(Switch, _super);
+    function Switch(props) {
+        var _this = _super.call(this, props) || this;
+        _this.hanldeCheck = _this.hanldeCheck.bind(_this);
+        return _this;
+    }
+    Switch.prototype.hanldeCheck = function (e) {
+        var _a = this.props, trueValue = _a.trueValue, falseValue = _a.falseValue, onChange = _a.onChange;
+        if (!onChange) {
+            return;
+        }
+        onChange(e.currentTarget.checked ? trueValue : falseValue);
+    };
+    Switch.prototype.render = function () {
+        var _a = this.props, size = _a.size, level = _a.level, className = _a.className, classPrefix = _a.classPrefix; _a.onChange; var value = _a.value; _a.inline; var trueValue = _a.trueValue; _a.falseValue; var _b = _a.onText, onText = _b === void 0 ? '' : _b, _c = _a.offText, offText = _c === void 0 ? '' : _c, disabled = _a.disabled, readOnly = _a.readOnly, checked = _a.checked, cx = _a.classnames, loading = _a.loading, loadingConfig = _a.loadingConfig, testIdBuilder = _a.testIdBuilder, rest = __rest(_a, ["size", "level", "className", "classPrefix", "onChange", "value", "inline", "trueValue", "falseValue", "onText", "offText", "disabled", "readOnly", "checked", "classnames", "loading", "loadingConfig", "testIdBuilder"]);
+        className =
+            (className ? className : '') +
+                (size && sizeMap[size] ? " ".concat(sizeMap[size]) : '') +
+                (level && levelMap[level] ? " ".concat(levelMap[level]) : '');
+        var isChecked = typeof checked !== 'undefined'
+            ? checked
+            : typeof value === 'undefined'
+                ? false
+                : value == trueValue;
+        var isDisabled = disabled || loading;
+        return (React__default.createElement("label", __assign({ className: cx("Switch", className, {
+                'is-checked': isChecked,
+                'is-disabled': isDisabled
+            }), "data-role": "switch" }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()),
+            React__default.createElement("input", __assign({ type: "checkbox", checked: isChecked, onChange: this.hanldeCheck, disabled: isDisabled, readOnly: readOnly }, rest)),
+            React__default.createElement("span", { className: "text" }, isChecked ? onText : offText),
+            React__default.createElement("span", { className: "slider" }, loading ? (React__default.createElement(Spinner, { classnames: cx, classPrefix: classPrefix, className: cx('Switch-spinner', {
+                    'Switch-spinner--sm': size === 'sm',
+                    'Switch-spinner--checked': isChecked
+                }), spinnerClassName: cx('Switch-spinner-icon'), disabled: !isChecked, size: "sm", icon: "loading-outline", loadingConfig: loadingConfig })) : null)));
+    };
+    Switch.defaultProps = {
+        trueValue: true,
+        falseValue: false
+    };
+    return Switch;
+}(React__default.PureComponent));
+var Switch$1 = themeable(Switch);
+
+export { Switch, Switch$1 as default };

package/esm/components/Tab.d.ts

@@ -0,0 +1,2 @@
+import { Tab } from './Tabs';
+export default Tab;

package/esm/components/Tab.js

@@ -0,0 +1,7 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { Tab } from './Tabs.js';
+export { Tab as default } from './Tabs.js';

package/esm/components/Table.d.ts

@@ -0,0 +1,2 @@
+import Table from './table/index';
+export default Table;

package/esm/components/Table.js

@@ -0,0 +1,7 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import Table from './table/index.js';
+export { default } from './table/index.js';

package/esm/components/TableSelection.js

@@ -0,0 +1,169 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import { BaseSelection } from './Selection.js';
+import { noop, resolveVariable, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import React__default from 'react';
+import Checkbox from './Checkbox.js';
+import VirtualList from './virtual-list/index.js';
+import isEqual from 'lodash/isEqual';
+import forEach from 'lodash/forEach';
+import AutoSizer from './virtual-list/AutoSizer.js';
+
+var TableSelection = /** @class */ (function (_super) {
+    __extends(TableSelection, _super);
+    function TableSelection(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            rowRenderScope: null,
+            colsWidth: [],
+            tableWidth: 0
+        };
+        return _this;
+    }
+    TableSelection.prototype.getColumns = function () {
+        var columns = this.props.columns;
+        if (!Array.isArray(columns) || !columns.length) {
+            columns = [{ label: 'Label', name: 'label' }];
+        }
+        return columns;
+    };
+    TableSelection.prototype.renderTHead = function () {
+        var _a = this.props, options = _a.options, cx = _a.classnames, value = _a.value, disabled = _a.disabled, option2value = _a.option2value, multiple = _a.multiple, testIdBuilder = _a.testIdBuilder;
+        var columns = this.getColumns();
+        var valueArray = BaseSelection.value2array(value, options, option2value);
+        var availableOptions = options.filter(function (option) { return !option.disabled; });
+        var partialChecked = false;
+        var allChecked = !!availableOptions.length;
+        availableOptions.forEach(function (option) {
+            var isIn = !!~valueArray.indexOf(option);
+            if (isIn && !partialChecked) {
+                partialChecked = true;
+            }
+            else if (!isIn && allChecked) {
+                allChecked = false;
+            }
+        });
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("thead", null,
+                React__default.createElement("tr", null,
+                    multiple && Array.isArray(options) && options.length ? (React__default.createElement("th", { className: cx('Table-checkCell') },
+                        React__default.createElement(Checkbox, { key: "checkbox", size: "sm", disabled: disabled, onChange: this.toggleAll, checked: partialChecked, partial: partialChecked && !allChecked, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('check-all') }))) : null,
+                    columns.map(function (column, index) { return (React__default.createElement("th", { key: index }, column.label)); })))));
+    };
+    TableSelection.prototype.renderTr = function (_a) {
+        var _this = this;
+        var option = _a.option, rowIndex = _a.rowIndex, valueArray = _a.valueArray, columns = _a.columns, styles = _a.styles;
+        var _b = this.props, cx = _b.classnames, cellRender = _b.cellRender, disabled = _b.disabled, multiple = _b.multiple; _b.translate; var itemClassName = _b.itemClassName, resultMode = _b.resultMode, testIdBuilder = _b.testIdBuilder;
+        var checked = valueArray.indexOf(option) !== -1;
+        var itemTIB = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("item-".concat(option.value || rowIndex));
+        return (React__default.createElement("tr", { style: styles !== null && styles !== void 0 ? styles : {}, key: rowIndex, 
+            /** 被ResultTableList引用，如果设置click事件，会导致错误删除结果列表的内容，先加一个开关判断 */
+            onClick: resultMode
+                ? noop
+                : function (e) { return e.defaultPrevented || _this.toggleOption(option); }, className: cx(itemClassName, option.className, disabled || option.disabled ? 'is-disabled' : '', !!~valueArray.indexOf(option) ? 'is-active' : '') },
+            multiple ? (React__default.createElement("td", { className: cx('Table-checkCell'), key: "checkbox", onClick: function (e) {
+                    e.stopPropagation();
+                    _this.toggleOption(option);
+                } },
+                React__default.createElement(Checkbox, { size: "sm", checked: checked, disabled: disabled, testIdBuilder: itemTIB }))) : null,
+            columns.map(function (column, colIndex) { return (React__default.createElement("td", { key: colIndex }, cellRender(column, option, colIndex, rowIndex))); })));
+    };
+    TableSelection.prototype.renderTBody = function () {
+        var _this = this;
+        var _a = this.props, options = _a.options, placeholder = _a.placeholder, value = _a.value, option2value = _a.option2value, __ = _a.translate;
+        var columns = this.getColumns();
+        var valueArray = BaseSelection.value2array(value, options, option2value);
+        return (React__default.createElement("tbody", null, Array.isArray(options) && options.length ? (options.map(function (option, rowIndex) {
+            return _this.renderTr({ option: option, rowIndex: rowIndex, valueArray: valueArray, columns: columns });
+        })) : (React__default.createElement("tr", null,
+            React__default.createElement("td", { colSpan: columns.length }, __(placeholder))))));
+    };
+    TableSelection.prototype.tableHeadRef = function (ref) {
+        ref && (this.ref = ref);
+    };
+    TableSelection.prototype.handleVirtualTableResize = function (_a) {
+        var width = _a.width;
+        if (width && width === this.state.width) {
+            return;
+        }
+        var widths = {};
+        this.ref &&
+            forEach(this.ref.querySelectorAll('thead>tr:last-child>th'), function (item, index) {
+                widths[index] = item.getBoundingClientRect().width;
+            });
+        var colsWidth = [];
+        Object.keys(widths)
+            .filter(function (key) { return !isNaN(Number(key)); })
+            .sort()
+            .forEach(function (key) {
+            colsWidth.push(widths[key]);
+        });
+        this.setState({ colsWidth: colsWidth, tableWidth: width });
+    };
+    TableSelection.prototype.renderVirtualTable = function () {
+        var _this = this;
+        var _a = this.props, options = _a.options, value = _a.value, cx = _a.classnames, option2value = _a.option2value; _a.translate; var _b = _a.itemHeight, itemHeight = _b === void 0 ? 30 : _b, virtualListHeight = _a.virtualListHeight;
+        var columns = this.getColumns();
+        var valueArray = BaseSelection.value2array(value, options, option2value);
+        var _c = this.state.rowRenderScope || {}, _d = _c.startIndex, startIndex = _d === void 0 ? 0 : _d, _e = _c.stopIndex, stopIndex = _e === void 0 ? 10 : _e;
+        var tableList = null;
+        if (startIndex !== undefined && stopIndex !== undefined) {
+            var trs = [];
+            for (var index = startIndex; index <= stopIndex; index++) {
+                var option = options[index];
+                if (!option) {
+                    break;
+                }
+                trs.push(this.renderTr({
+                    option: option,
+                    rowIndex: index,
+                    valueArray: valueArray,
+                    columns: columns,
+                    styles: {
+                        height: "".concat(itemHeight, "px")
+                    }
+                }));
+            }
+            tableList = (React__default.createElement("table", { className: cx('Table-table'), style: {
+                    marginTop: (startIndex || 0) * itemHeight + 'px'
+                } },
+                this.state.colsWidth.length ? (React__default.createElement("colgroup", null, this.state.colsWidth.map(function (colWidth, index) { return (React__default.createElement("col", { style: { width: "".concat(colWidth, "px") }, key: "col-".concat(index) })); }))) : null,
+                React__default.createElement("tbody", null, trs)));
+        }
+        return (React__default.createElement("div", { className: cx('Table-content', 'is-virtual') },
+            React__default.createElement("table", { className: cx('Table-table'), ref: this.tableHeadRef.bind(this) }, this.renderTHead()),
+            React__default.createElement("div", { className: cx('Table-content-virtual') },
+                React__default.createElement(AutoSizer, { minHeight: virtualListHeight, onResize: this.handleVirtualTableResize.bind(this) }, function (_a) {
+                    var height = _a.height;
+                    return (React__default.createElement(VirtualList, { onItemsRendered: function (res) {
+                            if (!isEqual(_this.state.rowRenderScope, res)) {
+                                // 需要延后执行，否则报 warning
+                                setTimeout(function () {
+                                    _this.setState({
+                                        rowRenderScope: res
+                                    });
+                                });
+                            }
+                        }, height: height, itemCount: options.length, itemSize: itemHeight, WrapperComponent: "div", InnerComponent: "div", prefix: tableList, innerStyleFilter: function (styles) { return (__assign(__assign({}, styles), { position: 'absolute', top: 0, minWidth: undefined, width: '1px', visibility: 'hidden' })); }, renderItem: function () { return null; } }));
+                }))));
+    };
+    TableSelection.prototype.render = function () {
+        var _a = this.props, className = _a.className, cx = _a.classnames, options = _a.options, _b = _a.virtualThreshold, virtualThreshold = _b === void 0 ? 1000 : _b;
+        var table = Array.isArray(options) && options.length > virtualThreshold ? (this.renderVirtualTable()) : (React__default.createElement("div", { className: cx('Table-content') },
+            React__default.createElement("table", { className: cx('Table-table') },
+                this.renderTHead(),
+                this.renderTBody())));
+        return React__default.createElement("div", { className: cx('TableSelection', className) }, table);
+    };
+    TableSelection.defaultProps = __assign(__assign({}, BaseSelection.defaultProps), { cellRender: function (column, option, colIndex, rowIndex) { return React__default.createElement("span", null, resolveVariable(column.name, option)); } });
+    return TableSelection;
+}(BaseSelection));
+var TableCheckboxes = themeable(localeable(uncontrollable(TableSelection, {
+    value: 'onChange'
+})));
+
+export { TableSelection, TableCheckboxes as default };