amis-rev-ui 6.13.0

package/esm/components/Transfer.js

@@ -0,0 +1,485 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __awaiter, __generator, __rest, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import intersectionWith from 'lodash/intersectionWith';
+import includes from 'lodash/includes';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+import unionWith from 'lodash/unionWith';
+import { findTree, differenceFromAll, flattenTree, autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import { BaseSelection } from './Selection.js';
+import ResultList from './ResultList.js';
+import TableCheckboxes from './TableSelection.js';
+import InputBox from './InputBox.js';
+import Checkbox from './Checkbox.js';
+import Tree from './Tree.js';
+import { Icon } from './icons.js';
+import AssociatedCheckboxes from './AssociatedSelection.js';
+import GroupedSelection from './GroupedSelection.js';
+import ChainedCheckboxes from './ChainedSelection.js';
+import ResultTableList from './ResultTableList.js';
+import ResultTreeList from './ResultTreeList.js';
+import Pagination from './Pagination.js';
+
+var Transfer = /** @class */ (function (_super) {
+    __extends(Transfer, _super);
+    function Transfer() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            inputValue: '',
+            searchResult: null,
+            searchResultPage: null,
+            isTreeDeferLoad: false,
+            resultSelectMode: 'list'
+        };
+        _this.unmounted = false;
+        _this.lazySearch = debounce(_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' &&
+            !!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 = 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(availableOptions, valueArray, isEqual).length ===
+            availableOptions.length;
+        // 全不选
+        if (isAvailableOptionsAllSelected) {
+            valueArray = differenceFromAll(availableOptions, valueArray, function (item) { return item[valueField]; });
+        }
+        // 全选
+        else {
+            // to do 需要优化
+            valueArray = unionWith(valueArray, availableOptions, isEqual);
+        }
+        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 = 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) {
+        return __awaiter(this, void 0, void 0, function () {
+            var pagination, inputValue, onSearch, result, items, currentPage;
+            var _this = this;
+            var _a;
+            return __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 = __rest(result, ["items"]);
+                            if (!Array.isArray(items)) {
+                                throw new Error('onSearch 需要返回数组');
+                            }
+                            this.setState({
+                                searchResult: items,
+                                searchResultPage: __assign({}, currentPage)
+                            });
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    Transfer.prototype.getFlattenArr = function (options) {
+        var _a = this.props.valueField, valueField = _a === void 0 ? 'value' : _a;
+        return 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(searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
+        var unuseArr = 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)
+            : BaseSelection.itemRender(option, __assign(__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.itemRender(option, __assign(__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(__assign(__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 = differenceFromAll(this.availableOptions, this.valueArray, function (item) { return item[valueField]; }).length;
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement("div", { className: cx('Transfer-title', selectMode === 'table' ? 'Transfer-title--light' : '') },
+                React__default.createElement("span", null,
+                    includes(['list', 'tree'], selectMode) ? (React__default.createElement(Checkbox, { 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 ? (React__default.createElement("span", null,
+                        "\uFF08",
+                        this.availableOptions.length -
+                            this.valueArray.length +
+                            selectedNotInAvailableOptions,
+                        "/",
+                        this.availableOptions.length,
+                        "\uFF09")) : null),
+                includes(['chained', 'associated'], selectMode) ? (React__default.createElement("a", __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 ? (React__default.createElement("div", { className: cx('Transfer-search', { 'is-mobile': mobileUI }) },
+                React__default.createElement(InputBox, { 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 ? (React__default.createElement("a", __assign({ onClick: this.handleSeachCancel }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('search-cancel').getTestId()),
+                    React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(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 (React__default.createElement("div", { className: cx('Transfer-footer') },
+            React__default.createElement(Pagination, { 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' ? (React__default.createElement(TableCheckboxes, { 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' ? (React__default.createElement(Tree, { 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' ? (React__default.createElement(ChainedCheckboxes, { 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 })) : (React__default.createElement(GroupedSelection, { 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' ? (React__default.createElement(TableCheckboxes, { 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' ? (React__default.createElement(Tree, { 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' ? (React__default.createElement(ChainedCheckboxes, { 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' ? (React__default.createElement(AssociatedCheckboxes, { 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') })) : (React__default.createElement(GroupedSelection, { 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 (React__default.createElement(ResultTableList, { 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 (React__default.createElement(ResultTreeList, { 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 (React__default.createElement(ResultList, { 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 = BaseSelection.value2array(value, options, option2value, valueField);
+        this.availableOptions = 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 (React__default.createElement("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
+            React__default.createElement("div", { className: cx('Transfer-select', {
+                    'Transfer-select--pagination': !!(pagination === null || pagination === void 0 ? void 0 : pagination.enable)
+                }) }, this.renderSelect(this.props)),
+            React__default.createElement("div", { className: cx('Transfer-mid', { 'is-mobile': mobileUI }) }, showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (React__default.createElement("div", { className: cx('Transfer-arrow') },
+                React__default.createElement(Icon, { icon: "right-arrow", className: "icon" }))) : null),
+            React__default.createElement("div", { className: cx('Transfer-result', {
+                    'is-mobile': mobileUI,
+                    'Transfer-select--pagination': !!(pagination === null || pagination === void 0 ? void 0 : pagination.enable)
+                }) },
+                React__default.createElement("div", { className: cx('Transfer-title', tableType ? 'Transfer-table-title' : '', selectMode === 'table' ? 'Transfer-title--light' : '') },
+                    React__default.createElement("span", null,
+                        __(resultTitle || 'Transfer.selectd'),
+                        statistics !== false ? (React__default.createElement("span", null,
+                            "\uFF08",
+                            this.valueArray.length,
+                            "\uFF09")) : null),
+                    React__default.createElement("a", __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'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "domRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "domResultRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "toggleAll", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "clearAll", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearchKeyDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearch", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSeachCancel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number, Number]),
+        __metadata("design:returntype", Promise)
+    ], Transfer.prototype, "searchRequest", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array,
+            Array, Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "handleSearchTreeChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "optionItemRender", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Object]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "resultItemRender", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Number, Number, String]),
+        __metadata("design:returntype", void 0)
+    ], Transfer.prototype, "onPageChangeHandle", null);
+    return Transfer;
+}(React__default.Component));
+var Transfer$1 = themeable(localeable(uncontrollable(/** @class */ (function (_super) {
+    __extends(class_1, _super);
+    function class_1() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return class_1;
+}(Transfer)), {
+    value: 'onChange'
+})));
+
+export { Transfer, Transfer$1 as default };

package/esm/components/TransferDropDown.js

@@ -0,0 +1,98 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __assign, __decorate, __metadata } from 'tslib';
+import { autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import { Transfer } from './Transfer.js';
+import React__default from 'react';
+import ResultBox from './ResultBox.js';
+import { Icon } from './icons.js';
+import InputBox from './InputBox.js';
+import { PopOverContainer } from './PopOverContainer.js';
+
+var TransferDropDown = /** @class */ (function (_super) {
+    __extends(TransferDropDown, _super);
+    function TransferDropDown(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            tempValue: props.value,
+            inputValue: '',
+            searchResult: null,
+            isTreeDeferLoad: false,
+            resultSelectMode: 'list'
+        };
+        return _this;
+    }
+    TransferDropDown.prototype.componentDidUpdate = function (prevProps) {
+        if (this.props.value !== prevProps.value) {
+            this.setState({
+                tempValue: this.props.value
+            });
+        }
+    };
+    TransferDropDown.prototype.handleAfterPopoverHide = function () {
+        this.setState({ inputValue: '', searchResult: null });
+    };
+    TransferDropDown.prototype.handleChange = function (value, onClose) {
+        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, mobileUI = _a.mobileUI;
+        if (mobileUI) {
+            this.setState({ tempValue: value });
+        }
+        else {
+            onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            if (!multiple) {
+                onClose();
+            }
+        }
+    };
+    TransferDropDown.prototype.onConfirm = function () {
+        var onChange = this.props.onChange;
+        onChange === null || onChange === void 0 ? void 0 : onChange(this.state.tempValue);
+    };
+    TransferDropDown.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, value = _a.value, itemRender = _a.itemRender, __ = _a.translate, disabled = _a.disabled, clearable = _a.clearable, className = _a.className, onChange = _a.onChange, onSearch = _a.onSearch, multiple = _a.multiple, borderMode = _a.borderMode, mobileUI = _a.mobileUI, popOverContainer = _a.popOverContainer, placeholder = _a.placeholder, maxTagCount = _a.maxTagCount, overflowTagPopover = _a.overflowTagPopover; _a.itemHeight; _a.virtualThreshold; var showInvalidMatch = _a.showInvalidMatch, overlay = _a.overlay;
+        var _b = this.state, inputValue = _b.inputValue, searchResult = _b.searchResult;
+        return (React__default.createElement(PopOverContainer, { onAfterHide: this.handleAfterPopoverHide, mobileUI: mobileUI, popOverContainer: popOverContainer, overlayWidth: overlay && (overlay === null || overlay === void 0 ? void 0 : overlay.width), align: overlay && (overlay === null || overlay === void 0 ? void 0 : overlay.align), popOverClassName: cx('TransferDropDown-popover'), showConfirm: true, onConfirm: this.onConfirm, popOverRender: function (_a) {
+                var onClose = _a.onClose;
+                return (React__default.createElement("div", { className: cx('TransferDropDown-content', {
+                        'is-mobile': mobileUI
+                    }) },
+                    onSearch ? (React__default.createElement("div", { className: cx('Transfer-search') },
+                        React__default.createElement(InputBox, { value: inputValue, onChange: _this.handleSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : __('Transfer.searchKeyword'), clearable: false, onKeyDown: _this.handleSearchKeyDown, mobileUI: mobileUI }, searchResult !== null ? (React__default.createElement("a", { onClick: _this.handleSeachCancel },
+                            React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(Icon, { icon: "search", className: "icon" }))))) : null,
+                    searchResult !== null
+                        ? _this.renderSearchResult(__assign(__assign({}, _this.props), { value: _this.state.tempValue, onChange: function (value) { return _this.handleChange(value, onClose); }, multiple: multiple }))
+                        : _this.renderOptions(__assign(__assign({}, _this.props), { value: _this.state.tempValue, onChange: function (value) { return _this.handleChange(value, onClose); }, multiple: multiple }))));
+            } }, function (_a) {
+            var onClick = _a.onClick, isOpened = _a.isOpened, ref = _a.ref;
+            return (React__default.createElement(ResultBox, { className: cx('TransferDropDown', className, isOpened ? 'is-opened' : ''), borderMode: borderMode, allowInput: false, result: multiple ? value : (value === null || value === void 0 ? void 0 : value[0]) ? value === null || value === void 0 ? void 0 : value[0] : null, onResultChange: onChange, onResultClick: onClick, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : __('Select.placeholder'), disabled: disabled, clearable: clearable, maxTagCount: maxTagCount, overflowTagPopover: overflowTagPopover, popOverContainer: popOverContainer, ref: ref, itemRender: itemRender, mobileUI: mobileUI, hasDropDownArrow: !mobileUI, showInvalidMatch: showInvalidMatch }));
+        }));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferDropDown.prototype, "handleAfterPopoverHide", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Function]),
+        __metadata("design:returntype", void 0)
+    ], TransferDropDown.prototype, "handleChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferDropDown.prototype, "onConfirm", null);
+    return TransferDropDown;
+}(Transfer));
+var TransferDropDown$1 = themeable(localeable(uncontrollable(TransferDropDown, {
+    value: 'onChange'
+})));
+
+export { TransferDropDown, TransferDropDown$1 as default };