amis-ui 6.13.0-beta.8 → 6.13.0

package/lib/components/Transfer.js

@@ -0,0 +1,502 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var intersectionWith = require('lodash/intersectionWith');
+var includes = require('lodash/includes');
+var debounce = require('lodash/debounce');
+var isEqual = require('lodash/isEqual');
+var unionWith = require('lodash/unionWith');
+var amisCore = require('amis-core');
+var Selection = require('./Selection.js');
+var ResultList = require('./ResultList.js');
+var TableSelection = require('./TableSelection.js');
+var InputBox = require('./InputBox.js');
+var Checkbox = require('./Checkbox.js');
+var Tree = require('./Tree.js');
+var icons = require('./icons.js');
+var AssociatedSelection = require('./AssociatedSelection.js');
+var GroupedSelection = require('./GroupedSelection.js');
+var ChainedSelection = require('./ChainedSelection.js');
+var ResultTableList = require('./ResultTableList.js');
+var ResultTreeList = require('./ResultTreeList.js');
+var Pagination = require('./Pagination.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var intersectionWith__default = /*#__PURE__*/_interopDefaultLegacy(intersectionWith);
+var includes__default = /*#__PURE__*/_interopDefaultLegacy(includes);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var unionWith__default = /*#__PURE__*/_interopDefaultLegacy(unionWith);
+
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var Transfer = /** @class */ (function (_super) {
+    tslib.__extends(Transfer, _super);
+    function Transfer() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            inputValue: '',
+            searchResult: null,
+            searchResultPage: null,
+            isTreeDeferLoad: false,
+            resultSelectMode: 'list'
+        };
+        _this.unmounted = false;
+        _this.lazySearch = debounce__default["default"](_this.searchRequest, 250, {
+            trailing: true,
+            leading: false
+        });
+        return _this;
+    }
+    Transfer.prototype.componentDidMount = function () {
+        var _a, _b;
+        (_b = (_a = this.props) === null || _a === void 0 ? void 0 : _a.onRef) === null || _b === void 0 ? void 0 : _b.call(_a, this);
+    };
+    Transfer.getDerivedStateFromProps = function (props) {
+        // 计算是否是懒加载模式
+        var isTreeDeferLoad = props.selectMode === 'tree' &&
+            !!amisCore.findTree(props.options, function (option) {
+                return option.deferApi || option[props.deferField || 'defer'];
+            });
+        // 计算结果的selectMode
+        var resultSelectMode = 'list';
+        if (props.selectMode === 'tree' &&
+            props.resultListModeFollowSelect &&
+            !isTreeDeferLoad) {
+            resultSelectMode = 'tree';
+        }
+        if (props.selectMode === 'table' && props.resultListModeFollowSelect) {
+            resultSelectMode = 'table';
+        }
+        return {
+            isTreeDeferLoad: isTreeDeferLoad,
+            resultSelectMode: resultSelectMode
+        };
+    };
+    Transfer.prototype.componentWillUnmount = function () {
+        this.lazySearch.cancel();
+        this.unmounted = true;
+    };
+    Transfer.prototype.domRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.treeRef = ref;
+    };
+    Transfer.prototype.domResultRef = function (ref) {
+        while (ref && ref.getWrappedInstance) {
+            ref = ref.getWrappedInstance();
+        }
+        this.resultRef = ref;
+    };
+    Transfer.prototype.toggleAll = function () {
+        var _a;
+        var _b = this.props, options = _b.options, option2value = _b.option2value, onChange = _b.onChange, value = _b.value, onSelectAll = _b.onSelectAll, _c = _b.valueField, valueField = _c === void 0 ? 'value' : _c, selectMode = _b.selectMode;
+        var valueArray = Selection.BaseSelection.value2array(value, options, option2value, valueField);
+        var availableOptions = this.availableOptions;
+        if (selectMode === 'tree') {
+            (_a = this.treeRef) === null || _a === void 0 ? void 0 : _a.handleToggle();
+            return;
+        }
+        // availableOptions 中选项是否都被选中了
+        // to do intersectionWith 需要优化，大数据会卡死
+        var isAvailableOptionsAllSelected = intersectionWith__default["default"](availableOptions, valueArray, isEqual__default["default"]).length ===
+            availableOptions.length;
+        // 全不选
+        if (isAvailableOptionsAllSelected) {
+            valueArray = amisCore.differenceFromAll(availableOptions, valueArray, function (item) { return item[valueField]; });
+        }
+        // 全选
+        else {
+            // to do 需要优化
+            valueArray = unionWith__default["default"](valueArray, availableOptions, isEqual__default["default"]);
+        }
+        var newValue = option2value
+            ? valueArray.map(function (item) { return option2value(item); })
+            : valueArray;
+        isAvailableOptionsAllSelected || (onSelectAll === null || onSelectAll === void 0 ? void 0 : onSelectAll(newValue));
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    // 全选，给予动作全选使用
+    Transfer.prototype.selectAll = function () {
+        var _a;
+        var _b = this.props, options = _b.options, option2value = _b.option2value, onChange = _b.onChange, _c = _b.valueField, valueField = _c === void 0 ? 'value' : _c, selectMode = _b.selectMode;
+        if (selectMode === 'tree') {
+            (_a = this.treeRef) === null || _a === void 0 ? void 0 : _a.handleToggle(true);
+            return;
+        }
+        var availableOptions = amisCore.flattenTree(options).filter(function (option, index, list) {
+            return !option.disabled &&
+                option[valueField] !== void 0 &&
+                list.indexOf(option) === index;
+        });
+        var newValue = option2value
+            ? availableOptions.map(function (item) { return option2value(item); })
+            : availableOptions;
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
+    };
+    // 清空搜索
+    Transfer.prototype.clearSearch = function (target) {
+        var _a, _b;
+        if (!target) {
+            this.handleSeachCancel();
+            (_a = this.resultRef) === null || _a === void 0 ? void 0 : _a.clearInput();
+        }
+        if (target === null || target === void 0 ? void 0 : target.left) {
+            this.handleSeachCancel();
+        }
+        if (target === null || target === void 0 ? void 0 : target.right) {
+            (_b = this.resultRef) === null || _b === void 0 ? void 0 : _b.clearInput();
+        }
+    };
+    Transfer.prototype.clearAll = function () {
+        var onChange = this.props.onChange;
+        onChange && onChange([]);
+    };
+    Transfer.prototype.handleSearchKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+        }
+    };
+    Transfer.prototype.handleSearch = function (inputValue) {
+        var _this = this;
+        // text 有值的时候，走搜索否则直接走 handleSeachCancel ，等同于右侧的 clear 按钮
+        this.setState({ inputValue: inputValue }, function () {
+            if (inputValue) {
+                // 如果有取消搜索，先取消掉。
+                _this.cancelSearch && _this.cancelSearch();
+                _this.lazySearch();
+            }
+            else {
+                _this.handleSeachCancel();
+            }
+        });
+    };
+    Transfer.prototype.handleSeachCancel = function () {
+        this.setState({
+            inputValue: '',
+            searchResult: null,
+            searchResultPage: null
+        });
+    };
+    Transfer.prototype.searchRequest = function (page, perPage) {
+        var _a;
+        return tslib.__awaiter(this, void 0, void 0, function () {
+            var pagination, inputValue, onSearch, result, items, currentPage;
+            var _this = this;
+            return tslib.__generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        pagination = this.props.pagination;
+                        inputValue = this.state.inputValue;
+                        if (!inputValue) {
+                            return [2 /*return*/];
+                        }
+                        onSearch = this.props.onSearch;
+                        return [4 /*yield*/, onSearch(inputValue, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); }, ((_a = this.props.pagination) === null || _a === void 0 ? void 0 : _a.enable)
+                                ? { page: page || 1, perPage: perPage || (pagination === null || pagination === void 0 ? void 0 : pagination.perPage) || 10 }
+                                : undefined)];
+                    case 1:
+                        result = _b.sent();
+                        if (this.unmounted) {
+                            return [2 /*return*/];
+                        }
+                        if (result) {
+                            items = result.items, currentPage = tslib.__rest(result, ["items"]);
+                            if (!Array.isArray(items)) {
+                                throw new Error('onSearch 需要返回数组');
+                            }
+                            this.setState({
+                                searchResult: items,
+                                searchResultPage: tslib.__assign({}, currentPage)
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Transfer.prototype.getFlattenArr = function (options) {
+        var _a = this.props.valueField, valueField = _a === void 0 ? 'value' : _a;
+        return amisCore.flattenTree(options).filter(function (option, index, list) {
+            return !option.disabled &&
+                option[valueField] !== void 0 &&
+                list.indexOf(option) === index;
+        });
+    };
+    // 树搜索处理
+    Transfer.prototype.handleSearchTreeChange = function (values, searchOptions, props) {
+        /** TransferDropDown的renderSearchResult&renderOptions中对一些属性覆写了  */
+        var value = props.value, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, multiple = props.multiple, onChange = props.onChange;
+        var searchAvailableOptions = this.getFlattenArr(searchOptions);
+        values = Array.isArray(values) ? values : values ? [values] : [];
+        var useArr = intersectionWith__default["default"](searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
+        var unuseArr = amisCore.differenceFromAll(values, searchAvailableOptions, function (item) { return item[valueField]; });
+        var newArr = [];
+        if (multiple) {
+            Array.isArray(value) &&
+                value.forEach(function (item) {
+                    if (!unuseArr.find(function (v) { return v[valueField] === item[valueField]; })) {
+                        newArr.push(item);
+                    }
+                });
+        }
+        useArr.forEach(function (item) {
+            if (!newArr.find(function (v) { return v[valueField] === item[valueField]; })) {
+                newArr.push(item);
+            }
+        });
+        onChange && onChange(newArr);
+    };
+    Transfer.prototype.optionItemRender = function (option, states) {
+        var _a = this.props, optionItemRender = _a.optionItemRender, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, classnames = _a.classnames;
+        return optionItemRender
+            ? optionItemRender(option, states)
+            : Selection.BaseSelection.itemRender(option, tslib.__assign(tslib.__assign({ labelField: labelField }, states), { classnames: classnames }));
+    };
+    Transfer.prototype.resultItemRender = function (option, states) {
+        var _a = this.props, resultItemRender = _a.resultItemRender, classnames = _a.classnames;
+        return resultItemRender
+            ? resultItemRender(option, states)
+            : ResultList["default"].itemRender(option, tslib.__assign(tslib.__assign({}, states), { classnames: classnames }));
+    };
+    Transfer.prototype.onPageChangeHandle = function (page, perPage, direction) {
+        var _a = this.props, onPageChange = _a.onPageChange; _a.onSearch;
+        var _b = this.state, searchResult = _b.searchResult; _b.inputValue;
+        if (searchResult) {
+            this.searchRequest(page, perPage);
+        }
+        else if (onPageChange) {
+            onPageChange(page, perPage, direction);
+        }
+    };
+    Transfer.prototype.renderSelect = function (props) {
+        var selectRender = props.selectRender, selectMode = props.selectMode, cx = props.classnames, selectTitle = props.selectTitle, onSearch = props.onSearch, disabled = props.disabled, options = props.options, statistics = props.statistics, __ = props.translate, _a = props.searchPlaceholder, searchPlaceholder = _a === void 0 ? __('Transfer.searchKeyword') : _a, mobileUI = props.mobileUI, _b = props.valueField, valueField = _b === void 0 ? 'value' : _b, testIdBuilder = props.testIdBuilder;
+        if (selectRender) {
+            return selectRender(tslib.__assign(tslib.__assign({}, props), { onSearch: this.handleSearch, onSearchCancel: this.handleSeachCancel, searchResult: this.state.searchResult }));
+        }
+        var checkedPartial = false;
+        var checkedAll = false;
+        var valueArraySet = new Set(this.valueArray);
+        checkedAll = this.availableOptions.every(function (option) {
+            return valueArraySet.has(option);
+        });
+        checkedPartial = this.availableOptions.some(function (option) {
+            return valueArraySet.has(option);
+        });
+        // 不在当前 availableOptions 中的已选项 数量
+        var selectedNotInAvailableOptions = amisCore.differenceFromAll(this.availableOptions, this.valueArray, function (item) { return item[valueField]; }).length;
+        return (_J$X_(React__default["default"].Fragment, null,
+            _J$X_("div", { className: cx('Transfer-title', selectMode === 'table' ? 'Transfer-title--light' : '') },
+                _J$X_("span", null,
+                    includes__default["default"](['list', 'tree'], selectMode) ? (_J$X_(Checkbox["default"], { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: props.onToggleAll || this.toggleAll, size: "sm", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('toggle-all') })) : null,
+                    __(selectTitle || 'Transfer.available'),
+                    statistics !== false ? (_J$X_("span", null,
+                        "\uFF08",
+                        this.availableOptions.length -
+                            this.valueArray.length +
+                            selectedNotInAvailableOptions,
+                        "/",
+                        this.availableOptions.length,
+                        "\uFF09")) : null),
+                includes__default["default"](['chained', 'associated'], selectMode) ? (_J$X_("a", tslib.__assign({ onClick: props.onToggleAll || this.toggleAll, className: cx('Transfer-checkAll', disabled || !options.length ? 'is-disabled' : '') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('toggle-all').getTestId()), __('Select.checkAll'))) : null),
+            onSearch ? (_J$X_("div", { className: cx('Transfer-search', { 'is-mobile': mobileUI }) },
+                _J$X_(InputBox["default"], { value: this.state.inputValue, onChange: this.handleSearch, clearable: false, onKeyDown: this.handleSearchKeyDown, placeholder: searchPlaceholder, mobileUI: mobileUI, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-input') }, this.state.searchResult !== null ? (_J$X_("a", tslib.__assign({ onClick: this.handleSeachCancel }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-cancel').getTestId()),
+                    _J$X_(icons.Icon, { icon: "close", className: "icon" }))) : (_J$X_(icons.Icon, { icon: "search", className: "icon" }))))) : null,
+            this.state.searchResult !== null
+                ? this.renderSearchResult(props)
+                : this.renderOptions(props),
+            this.renderFooter()));
+    };
+    Transfer.prototype.renderFooter = function () {
+        var _a = this.props, cx = _a.classnames, pagination = _a.pagination;
+        var _b = this.state, searchResult = _b.searchResult, searchResultPage = _b.searchResultPage;
+        if (!pagination || !(pagination === null || pagination === void 0 ? void 0 : pagination.enable)) {
+            return null;
+        }
+        var currentPage = searchResult && searchResultPage
+            ? {
+                page: searchResultPage.page,
+                perPage: searchResultPage.perPage,
+                total: searchResultPage.total
+            }
+            : {
+                page: pagination.page,
+                perPage: pagination.perPage,
+                total: pagination.total
+            };
+        return (_J$X_("div", { className: cx('Transfer-footer') },
+            _J$X_(Pagination["default"], { className: cx('Transfer-footer-pagination', pagination.className), activePage: currentPage.page, perPage: currentPage.perPage, total: currentPage.total, layout: pagination.layout, maxButtons: pagination.maxButtons, perPageAvailable: pagination.perPageAvailable, popOverContainer: pagination.popOverContainer, popOverContainerSelector: pagination.popOverContainerSelector, onPageChange: this.onPageChangeHandle })));
+    };
+    Transfer.prototype.renderSearchResult = function (props) {
+        var _this = this;
+        var searchResultMode = props.searchResultMode, selectMode = props.selectMode, noResultsText = props.noResultsText, searchResultColumns = props.searchResultColumns, columns = props.columns, cx = props.classnames, value = props.value, disabled = props.disabled, onChange = props.onChange, option2value = props.option2value, optionItemRender = props.optionItemRender, cellRender = props.cellRender, multiple = props.multiple, labelField = props.labelField, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, virtualThreshold = props.virtualThreshold, itemHeight = props.itemHeight, virtualListHeight = props.virtualListHeight, checkAll = props.checkAll, checkAllLabel = props.checkAllLabel, onlyChildren = props.onlyChildren, autoCheckChildren = props.autoCheckChildren, testIdBuilder = props.testIdBuilder;
+        var _b = this.state, isTreeDeferLoad = _b.isTreeDeferLoad, searchResult = _b.searchResult, inputValue = _b.inputValue;
+        var options = searchResult !== null && searchResult !== void 0 ? searchResult : [];
+        var mode = searchResultMode || selectMode;
+        var resultColumns = searchResultColumns || columns;
+        var treeItemRender = !searchResult || optionItemRender ? this.optionItemRender : undefined;
+        var highlightTxt = searchResult ? inputValue : undefined;
+        return mode === 'table' ? (_J$X_(TableSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), columns: resultColumns, options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, cellRender: cellRender, itemRender: this.optionItemRender, valueField: valueField, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-result') })) : mode === 'tree' ? (_J$X_(Tree["default"], { ref: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: function (value) {
+                return _this.handleSearchTreeChange(value, options, props);
+            }, joinValues: false, showIcon: false, multiple: multiple, cascade: true, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !isTreeDeferLoad, highlightTxt: highlightTxt, itemRender: treeItemRender, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, 
+            // itemHeight={itemHeight}
+            checkAllLabel: checkAllLabel, checkAll: checkAll, autoCheckChildren: autoCheckChildren })) : mode === 'chained' ? (_J$X_(ChainedSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (_J$X_(GroupedSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-result') }));
+    };
+    Transfer.prototype.renderOptions = function (props) {
+        var selectMode = props.selectMode, columns = props.columns, options = props.options, value = props.value, disabled = props.disabled, onChange = props.onChange, option2value = props.option2value, cx = props.classnames, onDeferLoad = props.onDeferLoad, leftOptions = props.leftOptions, leftMode = props.leftMode, rightMode = props.rightMode, cellRender = props.cellRender, leftDefaultValue = props.leftDefaultValue, multiple = props.multiple, noResultsText = props.noResultsText, labelField = props.labelField, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, _b = props.deferField, deferField = _b === void 0 ? 'defer' : _b, virtualThreshold = props.virtualThreshold, itemHeight = props.itemHeight, virtualListHeight = props.virtualListHeight, loadingConfig = props.loadingConfig, checkAll = props.checkAll, checkAllLabel = props.checkAllLabel, onlyChildren = props.onlyChildren, _c = props.autoCheckChildren, autoCheckChildren = _c === void 0 ? true : _c, _d = props.initiallyOpen, initiallyOpen = _d === void 0 ? true : _d, testIdBuilder = props.testIdBuilder;
+        return selectMode === 'table' ? (_J$X_(TableSelection["default"], { className: cx('Transfer-selection'), columns: columns, options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, cellRender: cellRender, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection') })) : selectMode === 'tree' ? (_J$X_(Tree["default"], { ref: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, onChange: onChange, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !this.state.isTreeDeferLoad, itemRender: this.optionItemRender, onDeferLoad: onDeferLoad, joinValues: false, showIcon: false, multiple: multiple, cascade: true, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, 
+            // itemHeight={itemHeight}
+            loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, initiallyOpen: initiallyOpen, autoCheckChildren: autoCheckChildren, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection') })) : selectMode === 'chained' ? (_J$X_(ChainedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection') })) : selectMode === 'associated' ? (_J$X_(AssociatedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, columns: columns, leftOptions: leftOptions || [], leftMode: leftMode, rightMode: rightMode, leftDefaultValue: leftDefaultValue, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, deferField: deferField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection') })) : (_J$X_(GroupedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: this.optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('selection') }));
+    };
+    Transfer.prototype.renderResult = function () {
+        var _a = this.props, columns = _a.columns, options = _a.options, disabled = _a.disabled, option2value = _a.option2value, cx = _a.classnames, cellRender = _a.cellRender, onChange = _a.onChange, value = _a.value, resultSearchable = _a.resultSearchable, resultSearchPlaceholder = _a.resultSearchPlaceholder, onResultSearch = _a.onResultSearch, sortable = _a.sortable, labelField = _a.labelField, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? __('Transfer.selectFromLeft') : _b, virtualThreshold = _a.virtualThreshold, itemHeight = _a.itemHeight, loadingConfig = _a.loadingConfig, showInvalidMatch = _a.showInvalidMatch, pagination = _a.pagination, accumulatedOptions = _a.accumulatedOptions, testIdBuilder = _a.testIdBuilder;
+        var _c = this.state, resultSelectMode = _c.resultSelectMode, isTreeDeferLoad = _c.isTreeDeferLoad;
+        var searchable = !isTreeDeferLoad && resultSearchable;
+        switch (resultSelectMode) {
+            case 'table':
+                return (_J$X_(ResultTableList["default"], { ref: this.domResultRef, classnames: cx, columns: columns, options: ((pagination === null || pagination === void 0 ? void 0 : pagination.enable) ? accumulatedOptions : options) || [], value: value, disabled: disabled, option2value: option2value, cellRender: cellRender, onChange: onChange, multiple: false, searchable: searchable, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, onSearch: onResultSearch, virtualThreshold: virtualThreshold, itemHeight: itemHeight, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('result') }));
+            case 'tree':
+                return (_J$X_(ResultTreeList["default"], { ref: this.domResultRef, loadingConfig: loadingConfig, classnames: cx, className: cx('Transfer-value'), options: ((pagination === null || pagination === void 0 ? void 0 : pagination.enable) ? accumulatedOptions : options) || [], valueField: 'value', value: value || [], onChange: onChange, itemRender: this.resultItemRender, searchable: searchable, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('result') }));
+            default:
+                return (_J$X_(ResultList["default"], { ref: this.domResultRef, className: cx('Transfer-value'), sortable: sortable, disabled: disabled, value: value, onChange: onChange, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, itemRender: this.resultItemRender, searchable: searchable, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, showInvalidMatch: showInvalidMatch, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('result') }));
+        }
+    };
+    Transfer.prototype.render = function () {
+        var _a = this.props, inline = _a.inline, cx = _a.classnames, className = _a.className, value = _a.value, resultTitle = _a.resultTitle, options = _a.options, option2value = _a.option2value, disabled = _a.disabled, statistics = _a.statistics, showArrow = _a.showArrow, resultListModeFollowSelect = _a.resultListModeFollowSelect, _b = _a.selectMode, selectMode = _b === void 0 ? 'list' : _b, __ = _a.translate, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, mobileUI = _a.mobileUI, pagination = _a.pagination, testIdBuilder = _a.testIdBuilder;
+        var searchResult = this.state.searchResult;
+        this.valueArray = Selection.BaseSelection.value2array(value, options, option2value, valueField);
+        this.availableOptions = amisCore.flattenTree(searchResult !== null && searchResult !== void 0 ? searchResult : options).filter(function (option, index, list) {
+            return !option.disabled &&
+                option[valueField] !== void 0 &&
+                list.indexOf(option) === index;
+        });
+        var tableType = resultListModeFollowSelect && selectMode === 'table';
+        return (_J$X_("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
+            _J$X_("div", { className: cx('Transfer-select', {
+                    'Transfer-select--pagination': !!(pagination === null || pagination === void 0 ? void 0 : pagination.enable)
+                }) }, this.renderSelect(this.props)),
+            _J$X_("div", { className: cx('Transfer-mid', { 'is-mobile': mobileUI }) }, showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (_J$X_("div", { className: cx('Transfer-arrow') },
+                _J$X_(icons.Icon, { icon: "right-arrow", className: "icon" }))) : null),
+            _J$X_("div", { className: cx('Transfer-result', {
+                    'is-mobile': mobileUI,
+                    'Transfer-select--pagination': !!(pagination === null || pagination === void 0 ? void 0 : pagination.enable)
+                }) },
+                _J$X_("div", { className: cx('Transfer-title', tableType ? 'Transfer-table-title' : '', selectMode === 'table' ? 'Transfer-title--light' : '') },
+                    _J$X_("span", null,
+                        __(resultTitle || 'Transfer.selectd'),
+                        statistics !== false ? (_J$X_("span", null,
+                            "\uFF08",
+                            this.valueArray.length,
+                            "\uFF09")) : null),
+                    _J$X_("a", tslib.__assign({ onClick: this.clearAll, className: cx('Transfer-clearAll', disabled || !this.valueArray.length ? 'is-disabled' : '') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('clear-all').getTestId()), __('clear'))),
+                this.renderResult())));
+    };
+    Transfer.defaultProps = {
+        multiple: true,
+        resultListModeFollowSelect: false,
+        selectMode: 'list',
+        statistics: true,
+        virtualThreshold: 100,
+        itemHeight: 38,
+        checkAllLabel: 'Select.checkAll',
+        valueField: 'value'
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "domRef", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "domResultRef", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "toggleAll", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "clearAll", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearchKeyDown", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearch", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSeachCancel", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Number, Number]),
+        tslib.__metadata("design:returntype", Promise)
+    ], Transfer.prototype, "searchRequest", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Array,
+            Array, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearchTreeChange", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "optionItemRender", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object, Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "resultItemRender", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Number, Number, String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Transfer.prototype, "onPageChangeHandle", null);
+    return Transfer;
+}(React__default["default"].Component));
+var Transfer$1 = amisCore.themeable(amisCore.localeable(amisCore.uncontrollable(/** @class */ (function (_super) {
+    tslib.__extends(class_1, _super);
+    function class_1() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return class_1;
+}(Transfer)), {
+    value: 'onChange'
+})));
+
+exports.Transfer = Transfer;
+exports["default"] = Transfer$1;