amis-ui 3.1.1 → 3.3.0

package/lib/components/Transfer.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -9,7 +9,12 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var _ = require('lodash');
+var intersectionWith = require('lodash/intersectionWith');
+var differenceWith = require('lodash/differenceWith');
+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');
@@ -27,7 +32,16 @@ var ResultTreeList = require('./ResultTreeList.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 differenceWith__default = /*#__PURE__*/_interopDefaultLegacy(differenceWith);
+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() {
@@ -39,7 +53,7 @@ var Transfer = /** @class */ (function (_super) {
             resultSelectMode: 'list'
         };
         _this.unmounted = false;
-        _this.lazySearch = _.debounce(function () { return tslib.__awaiter(_this, void 0, void 0, function () {
+        _this.lazySearch = debounce__default["default"](function () { return tslib.__awaiter(_this, void 0, void 0, function () {
             var inputValue, onSearch, result;
             var _this = this;
             return tslib.__generator(this, function (_a) {
@@ -103,15 +117,15 @@ var Transfer = /** @class */ (function (_super) {
         var valueArray = Selection.BaseSelection.value2array(value, options, option2value);
         var availableOptions = this.availableOptions;
         // availableOptions 中选项是否都被选中了
-        var isAvailableOptionsAllSelected = _.intersectionWith(availableOptions, valueArray, _.isEqual).length ===
+        var isAvailableOptionsAllSelected = intersectionWith__default["default"](availableOptions, valueArray, isEqual__default["default"]).length ===
             availableOptions.length;
         // 全不选
         if (isAvailableOptionsAllSelected) {
-            valueArray = _.differenceWith(valueArray, availableOptions, _.isEqual);
+            valueArray = differenceWith__default["default"](valueArray, availableOptions, isEqual__default["default"]);
         }
         // 全选
         else {
-            valueArray = _.unionWith(valueArray, availableOptions, _.isEqual);
+            valueArray = unionWith__default["default"](valueArray, availableOptions, isEqual__default["default"]);
         }
         var newValue = option2value
             ? valueArray.map(function (item) { return option2value(item); })
@@ -171,17 +185,20 @@ var Transfer = /** @class */ (function (_super) {
     };
     // 树搜索处理
     Transfer.prototype.handleSearchTreeChange = function (values, searchOptions) {
-        var _a = this.props, onChange = _a.onChange, value = _a.value, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b;
+        var _a = this.props, onChange = _a.onChange, value = _a.value, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, multiple = _a.multiple;
         var searchAvailableOptions = this.getFlattenArr(searchOptions);
-        var useArr = _.intersectionWith(searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
-        var unuseArr = _.differenceWith(searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
+        values = Array.isArray(values) ? values : values ? [values] : [];
+        var useArr = intersectionWith__default["default"](searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
+        var unuseArr = differenceWith__default["default"](searchAvailableOptions, values, function (a, b) { return a[valueField] === b[valueField]; });
         var newArr = [];
-        Array.isArray(value) &&
-            value.forEach(function (item) {
-                if (!unuseArr.find(function (v) { return v[valueField] === item[valueField]; })) {
-                    newArr.push(item);
-                }
-            });
+        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);
@@ -191,7 +208,7 @@ var Transfer = /** @class */ (function (_super) {
     };
     Transfer.prototype.renderSelect = function (props) {
         var _this = this;
-        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;
+        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, useMobileUI = props.useMobileUI;
         if (selectRender) {
             return selectRender(tslib.__assign(tslib.__assign({}, props), { onSearch: this.handleSearch, onSearchCancel: this.handleSeachCancel, searchResult: this.state.searchResult }));
         }
@@ -200,13 +217,14 @@ var Transfer = /** @class */ (function (_super) {
         checkedAll = this.availableOptions.every(function (option) { return _this.valueArray.indexOf(option) > -1; });
         checkedPartial = this.availableOptions.some(function (option) { return _this.valueArray.indexOf(option) > -1; });
         // 不在当前 availableOptions 中的已选项 数量
-        var selectedNotInAvailableOptions = _.differenceWith(this.valueArray, this.availableOptions, _.isEqual).length;
-        return (React__default["default"].createElement(React__default["default"].Fragment, null,
-            React__default["default"].createElement("div", { className: cx('Transfer-title', selectMode === 'table' ? 'Transfer-title--light' : '') },
-                React__default["default"].createElement("span", null,
-                    _.includes(['list', 'tree'], selectMode) ? (React__default["default"].createElement(Checkbox["default"], { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: props.onToggleAll || this.toggleAll, size: "sm" })) : null,
+        var selectedNotInAvailableOptions = differenceWith__default["default"](this.valueArray, this.availableOptions, isEqual__default["default"]).length;
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        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" })) : null,
                     __(selectTitle || 'Transfer.available'),
-                    statistics !== false ? (React__default["default"].createElement("span", null,
+                    statistics !== false ? (_J$X_("span", null,
                         "\uFF08",
                         this.availableOptions.length -
                             this.valueArray.length +
@@ -214,10 +232,10 @@ var Transfer = /** @class */ (function (_super) {
                         "/",
                         this.availableOptions.length,
                         "\uFF09")) : null),
-                _.includes(['chained', 'associated'], selectMode) ? (React__default["default"].createElement("a", { onClick: props.onToggleAll || this.toggleAll, className: cx('Transfer-checkAll', disabled || !options.length ? 'is-disabled' : '') }, __('Select.checkAll'))) : null),
-            onSearch ? (React__default["default"].createElement("div", { className: cx('Transfer-search') },
-                React__default["default"].createElement(InputBox["default"], { value: this.state.inputValue, onChange: this.handleSearch, clearable: false, onKeyDown: this.handleSearchKeyDown, placeholder: searchPlaceholder }, this.state.searchResult !== null ? (React__default["default"].createElement("a", { onClick: this.handleSeachCancel },
-                    React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))) : (React__default["default"].createElement(icons.Icon, { icon: "search", className: "icon" }))))) : null,
+                includes__default["default"](['chained', 'associated'], selectMode) ? (_J$X_("a", { onClick: props.onToggleAll || this.toggleAll, className: cx('Transfer-checkAll', disabled || !options.length ? 'is-disabled' : '') }, __('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, useMobileUI: true }, this.state.searchResult !== null ? (_J$X_("a", { onClick: this.handleSeachCancel },
+                    _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)));
@@ -229,13 +247,13 @@ var Transfer = /** @class */ (function (_super) {
         var options = searchResult !== null && searchResult !== void 0 ? searchResult : [];
         var mode = searchResultMode || selectMode;
         var resultColumns = searchResultColumns || columns;
-        return mode === 'table' ? (React__default["default"].createElement(TableSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), columns: resultColumns, options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, cellRender: cellRender, itemRender: optionItemRender, valueField: valueField, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight })) : mode === 'tree' ? (React__default["default"].createElement(Tree["default"], { onRef: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: function (value) {
+        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: optionItemRender, valueField: valueField, multiple: multiple, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight })) : mode === 'tree' ? (_J$X_(Tree["default"], { onRef: this.domRef, placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: function (value) {
                 return _this.handleSearchTreeChange(value, options);
-            }, joinValues: false, showIcon: false, multiple: multiple, cascade: true, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !isTreeDeferLoad, itemRender: optionItemRender, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : mode === 'chained' ? (React__default["default"].createElement(ChainedSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (React__default["default"].createElement(GroupedSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
+            }, joinValues: false, showIcon: false, multiple: multiple, cascade: true, onlyChildren: onlyChildren !== null && onlyChildren !== void 0 ? onlyChildren : !isTreeDeferLoad, itemRender: optionItemRender, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, checkAllLabel: checkAllLabel, checkAll: checkAll })) : mode === 'chained' ? (_J$X_(ChainedSelection["default"], { placeholder: noResultsText, className: cx('Transfer-selection'), options: options, value: value, disabled: disabled, onChange: onChange, option2value: option2value, itemRender: 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: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
     };
     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, optionItemRender = props.optionItemRender, multiple = props.multiple, noResultsText = props.noResultsText, labelField = props.labelField, _a = props.valueField, valueField = _a === void 0 ? 'value' : _a, virtualThreshold = props.virtualThreshold, itemHeight = props.itemHeight, virtualListHeight = props.virtualListHeight, loadingConfig = props.loadingConfig, checkAll = props.checkAll, checkAllLabel = props.checkAllLabel, onlyChildren = props.onlyChildren;
-        return selectMode === 'table' ? (React__default["default"].createElement(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 })) : selectMode === 'tree' ? (React__default["default"].createElement(Tree["default"], { onRef: 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: 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 })) : selectMode === 'chained' ? (React__default["default"].createElement(ChainedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : selectMode === 'associated' ? (React__default["default"].createElement(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: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (React__default["default"].createElement(GroupedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
+        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 })) : selectMode === 'tree' ? (_J$X_(Tree["default"], { onRef: 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: 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 })) : selectMode === 'chained' ? (_J$X_(ChainedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : 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: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, loadingConfig: loadingConfig, checkAllLabel: checkAllLabel, checkAll: checkAll })) : (_J$X_(GroupedSelection["default"], { className: cx('Transfer-selection'), options: options || [], value: value, disabled: disabled, onChange: onChange, option2value: option2value, onDeferLoad: onDeferLoad, itemRender: optionItemRender, multiple: multiple, labelField: labelField, valueField: valueField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, virtualListHeight: virtualListHeight, checkAllLabel: checkAllLabel, checkAll: checkAll }));
     };
     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, resultItemRender = _a.resultItemRender, 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;
@@ -243,15 +261,15 @@ var Transfer = /** @class */ (function (_super) {
         var searchable = !isTreeDeferLoad && resultSearchable;
         switch (resultSelectMode) {
             case 'table':
-                return (React__default["default"].createElement(ResultTableList["default"], { classnames: cx, columns: columns, options: 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 }));
+                return (_J$X_(ResultTableList["default"], { classnames: cx, columns: columns, options: 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 }));
             case 'tree':
-                return (React__default["default"].createElement(ResultTreeList["default"], { loadingConfig: loadingConfig, classnames: cx, className: cx('Transfer-value'), options: options, valueField: 'value', value: value || [], onChange: onChange, itemRender: resultItemRender, searchable: searchable, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight }));
+                return (_J$X_(ResultTreeList["default"], { loadingConfig: loadingConfig, classnames: cx, className: cx('Transfer-value'), options: options, valueField: 'value', value: value || [], onChange: onChange, itemRender: resultItemRender, searchable: searchable, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight }));
             default:
-                return (React__default["default"].createElement(ResultList["default"], { className: cx('Transfer-value'), sortable: sortable, disabled: disabled, value: value, onChange: onChange, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, itemRender: resultItemRender, searchable: searchable, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, showInvalidMatch: showInvalidMatch }));
+                return (_J$X_(ResultList["default"], { className: cx('Transfer-value'), sortable: sortable, disabled: disabled, value: value, onChange: onChange, placeholder: placeholder, searchPlaceholder: resultSearchPlaceholder, itemRender: resultItemRender, searchable: searchable, onSearch: onResultSearch, labelField: labelField, virtualThreshold: virtualThreshold, itemHeight: itemHeight, showInvalidMatch: showInvalidMatch }));
         }
     };
     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;
+        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, useMobileUI = _a.useMobileUI;
         var searchResult = this.state.searchResult;
         this.valueArray = Selection.BaseSelection.value2array(value, options, option2value);
         this.availableOptions = amisCore.flattenTree(searchResult !== null && searchResult !== void 0 ? searchResult : options).filter(function (option, index, list) {
@@ -260,19 +278,20 @@ var Transfer = /** @class */ (function (_super) {
                 list.indexOf(option) === index;
         });
         var tableType = resultListModeFollowSelect && selectMode === 'table';
-        return (React__default["default"].createElement("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
-            React__default["default"].createElement("div", { className: cx('Transfer-select') }, this.renderSelect(this.props)),
-            React__default["default"].createElement("div", { className: cx('Transfer-mid') }, showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (React__default["default"].createElement("div", { className: cx('Transfer-arrow') },
-                React__default["default"].createElement(icons.Icon, { icon: "right-arrow", className: "icon" }))) : null),
-            React__default["default"].createElement("div", { className: cx('Transfer-result') },
-                React__default["default"].createElement("div", { className: cx('Transfer-title', tableType ? 'Transfer-table-title' : '', selectMode === 'table' ? 'Transfer-title--light' : '') },
-                    React__default["default"].createElement("span", null,
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return (_J$X_("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
+            _J$X_("div", { className: cx('Transfer-select') }, 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 }) },
+                _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 ? (React__default["default"].createElement("span", null,
+                        statistics !== false ? (_J$X_("span", null,
                             "\uFF08",
                             this.valueArray.length,
                             "\uFF09")) : null),
-                    React__default["default"].createElement("a", { onClick: this.clearAll, className: cx('Transfer-clearAll', disabled || !this.valueArray.length ? 'is-disabled' : '') }, __('clear'))),
+                    _J$X_("a", { onClick: this.clearAll, className: cx('Transfer-clearAll', disabled || !this.valueArray.length ? 'is-disabled' : '') }, __('clear'))),
                 this.renderResult())));
     };
     Transfer.defaultProps = {