amis-ui 3.1.1 → 3.3.0

package/esm/components/Transfer.js

@@ -1,12 +1,17 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { debounce, intersectionWith, isEqual, differenceWith, unionWith, includes } from 'lodash';
-import { findTree, flattenTree, autobind, themeable, localeable, uncontrollable } from 'amis-core';
+import intersectionWith from 'lodash/intersectionWith';
+import differenceWith from 'lodash/differenceWith';
+import includes from 'lodash/includes';
+import debounce from 'lodash/debounce';
+import isEqual from 'lodash/isEqual';
+import unionWith from 'lodash/unionWith';
+import { findTree, flattenTree, isMobile, autobind, themeable, localeable, uncontrollable } from 'amis-core';
 import { BaseSelection } from './Selection.js';
 import ResultList from './ResultList.js';
 import TableCheckboxes from './TableSelection.js';
@@ -163,17 +168,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);
+        values = Array.isArray(values) ? values : values ? [values] : [];
         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]; });
         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);
@@ -183,7 +191,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(__assign(__assign({}, props), { onSearch: this.handleSearch, onSearchCancel: this.handleSeachCancel, searchResult: this.state.searchResult }));
         }
@@ -193,6 +201,7 @@ var Transfer = /** @class */ (function (_super) {
         checkedPartial = this.availableOptions.some(function (option) { return _this.valueArray.indexOf(option) > -1; });
         // 不在当前 availableOptions 中的已选项 数量
         var selectedNotInAvailableOptions = differenceWith(this.valueArray, this.availableOptions, isEqual).length;
+        var mobileUI = useMobileUI && isMobile();
         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,
@@ -207,8 +216,8 @@ var Transfer = /** @class */ (function (_super) {
                         this.availableOptions.length,
                         "\uFF09")) : null),
                 includes(['chained', 'associated'], selectMode) ? (React__default.createElement("a", { onClick: props.onToggleAll || this.toggleAll, className: cx('Transfer-checkAll', disabled || !options.length ? 'is-disabled' : '') }, __('Select.checkAll'))) : null),
-            onSearch ? (React__default.createElement("div", { className: cx('Transfer-search') },
-                React__default.createElement(InputBox, { value: this.state.inputValue, onChange: this.handleSearch, clearable: false, onKeyDown: this.handleSearchKeyDown, placeholder: searchPlaceholder }, this.state.searchResult !== null ? (React__default.createElement("a", { onClick: this.handleSeachCancel },
+            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, useMobileUI: true }, this.state.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,
             this.state.searchResult !== null
                 ? this.renderSearchResult(props)
@@ -243,7 +252,7 @@ var Transfer = /** @class */ (function (_super) {
         }
     };
     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 = BaseSelection.value2array(value, options, option2value);
         this.availableOptions = flattenTree(searchResult !== null && searchResult !== void 0 ? searchResult : options).filter(function (option, index, list) {
@@ -252,11 +261,12 @@ var Transfer = /** @class */ (function (_super) {
                 list.indexOf(option) === index;
         });
         var tableType = resultListModeFollowSelect && selectMode === 'table';
+        var mobileUI = useMobileUI && isMobile();
         return (React__default.createElement("div", { className: cx('Transfer', className, inline ? 'Transfer--inline' : '') },
             React__default.createElement("div", { className: cx('Transfer-select') }, this.renderSelect(this.props)),
-            React__default.createElement("div", { className: cx('Transfer-mid') }, showArrow /*todo 需要改成确认模式，即：点了按钮才到右边 */ ? (React__default.createElement("div", { className: cx('Transfer-arrow') },
+            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') },
+            React__default.createElement("div", { className: cx('Transfer-result', { 'is-mobile': mobileUI }) },
                 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'),