amis-ui 3.1.1 → 3.3.0

package/esm/components/TransferDropDown.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -14,41 +14,63 @@ import { PopOverContainer } from './PopOverContainer.js';
 
 var TransferDropDown = /** @class */ (function (_super) {
     __extends(TransferDropDown, _super);
-    function TransferDropDown() {
-        return _super !== null && _super.apply(this, arguments) || this;
+    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, useMobileUI = _a.useMobileUI;
+        var mobileUI = useMobileUI && isMobile();
+        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, useMobileUI = _a.useMobileUI, 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;
         var mobileUI = useMobileUI && isMobile();
-        return (React__default.createElement(PopOverContainer, { onAfterHide: this.handleAfterPopoverHide, useMobileUI: useMobileUI, 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'), popOverRender: function (_a) {
+        return (React__default.createElement(PopOverContainer, { onAfterHide: this.handleAfterPopoverHide, useMobileUI: useMobileUI, 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 }, searchResult !== null ? (React__default.createElement("a", { onClick: _this.handleSeachCancel },
+                        React__default.createElement(InputBox, { value: inputValue, onChange: _this.handleSearch, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : __('Transfer.searchKeyword'), clearable: false, onKeyDown: _this.handleSearchKeyDown, useMobileUI: true }, 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: value, onChange: multiple
-                                ? onChange
-                                : function (value) {
-                                    onClose();
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-                                }, multiple: multiple }))
-                        : _this.renderOptions(__assign(__assign({}, _this.props), { value: value, onChange: multiple
-                                ? onChange
-                                : function (value) {
-                                    onClose();
-                                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
-                                }, multiple: multiple }))));
+                        ? _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, ref: ref, itemRender: itemRender, useMobileUI: useMobileUI, hasDropDownArrow: !mobileUI, showInvalidMatch: showInvalidMatch }));
+            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, useMobileUI: useMobileUI, hasDropDownArrow: !mobileUI, showInvalidMatch: showInvalidMatch }));
         }));
     };
     __decorate([
@@ -57,6 +79,18 @@ var TransferDropDown = /** @class */ (function (_super) {
         __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, {

package/esm/components/TransferPicker.d.ts

@@ -9,6 +9,8 @@ export interface TransferPickerProps extends Omit<TransferProps, 'itemRender'> {
     borderMode?: 'full' | 'half' | 'none';
     onFocus?: () => void;
     onBlur?: () => void;
+    useMobileUI?: boolean;
+    popOverContainer?: any;
 }
 export declare class TransferPicker extends React.Component<TransferPickerProps> {
     optionModified: boolean;

package/esm/components/TransferPicker.js

@@ -1,10 +1,10 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __rest, __assign, __decorate, __metadata } from 'tslib';
-import { mapTree, autobind, themeable, localeable, uncontrollable } from 'amis-core';
+import { isMobile, mapTree, autobind, themeable, localeable, uncontrollable } from 'amis-core';
 import Transfer from './Transfer.js';
 import React__default from 'react';
 import ResultBox from './ResultBox.js';
@@ -33,10 +33,11 @@ var TransferPicker = /** @class */ (function (_super) {
     };
     TransferPicker.prototype.render = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, value = _a.value, __ = _a.translate, disabled = _a.disabled, className = _a.className, onChange = _a.onChange, size = _a.size, borderMode = _a.borderMode, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, rest = __rest(_a, ["classnames", "value", "translate", "disabled", "className", "onChange", "size", "borderMode", "labelField"]);
-        return (React__default.createElement(PickerContainer, { title: __('Select.placeholder'), onFocus: this.onFoucs, onClose: this.onBlur, bodyRender: function (_a) {
+        var _a = this.props, cx = _a.classnames, value = _a.value, __ = _a.translate, disabled = _a.disabled, className = _a.className, onChange = _a.onChange, size = _a.size, borderMode = _a.borderMode, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, useMobileUI = _a.useMobileUI, popOverContainer = _a.popOverContainer, rest = __rest(_a, ["classnames", "value", "translate", "disabled", "className", "onChange", "size", "borderMode", "labelField", "useMobileUI", "popOverContainer"]);
+        var mobileUI = useMobileUI && isMobile();
+        return (React__default.createElement(PickerContainer, { title: __('Select.placeholder'), onFocus: this.onFoucs, onClose: this.onBlur, useMobileUI: useMobileUI, popOverContainer: popOverContainer, bodyRender: function (_a) {
                 _a.onClose; var value = _a.value, onChange = _a.onChange, setState = _a.setState, states = __rest(_a, ["onClose", "value", "onChange", "setState"]);
-                return (React__default.createElement(Transfer, __assign({}, rest, states, { value: value, labelField: labelField, onChange: function (value, optionModified) {
+                return (React__default.createElement(Transfer, __assign({ useMobileUI: useMobileUI }, rest, states, { value: value, labelField: labelField, onChange: function (value, optionModified) {
                         if (optionModified) {
                             var options = mapTree(rest.options, function (item) {
                                 return (value.find(function (a) { return a.value === item.value; }) || item);
@@ -50,9 +51,8 @@ var TransferPicker = /** @class */ (function (_super) {
                     } })));
             }, value: value, onConfirm: this.handleConfirm, size: size }, function (_a) {
             var onClick = _a.onClick, isOpened = _a.isOpened;
-            return (React__default.createElement(ResultBox, { className: cx('TransferPicker', className, isOpened ? 'is-active' : ''), allowInput: false, result: value, onResultChange: onChange, onResultClick: onClick, placeholder: __('Select.placeholder'), disabled: disabled, borderMode: borderMode, itemRender: function (option) { return (React__default.createElement("span", null, (option && option[labelField]) || 'undefined')); } },
-                React__default.createElement("span", { className: cx('TransferPicker-icon') },
-                    React__default.createElement(Icon, { icon: "pencil", className: "icon" }))));
+            return (React__default.createElement(ResultBox, { className: cx('TransferPicker', className, isOpened ? 'is-active' : ''), allowInput: false, result: value, onResultChange: onChange, onResultClick: onClick, placeholder: __('Select.placeholder'), disabled: disabled, borderMode: borderMode, itemRender: function (option) { return (React__default.createElement("span", null, (option && option[labelField]) || 'undefined')); }, useMobileUI: useMobileUI }, !mobileUI ? (React__default.createElement("span", { className: cx('TransferPicker-icon') },
+                React__default.createElement(Icon, { icon: "pencil", className: "icon" }))) : null));
         }));
     };
     __decorate([

package/esm/components/TransferSearch.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 import { autobind, themeable, localeable } from 'amis-core';
 import { Icon } from './icons.js';
 import InputBox from './InputBox.js';
@@ -61,7 +61,7 @@ var TransferSearch = /** @class */ (function (_super) {
         var _a = this.props, cx = _a.classnames; _a.translate; var placeholder = _a.placeholder;
         var inputValue = this.state.inputValue;
         return (React__default.createElement("div", { className: cx('Transfer-search') },
-            React__default.createElement(InputBox, { value: inputValue, onChange: this.handleSearch, clearable: false, onKeyDown: this.handleSearchKeyDown, placeholder: placeholder }, !!inputValue ? (React__default.createElement("a", { onClick: this.handleSeachCancel },
+            React__default.createElement(InputBox, { value: inputValue, onChange: this.handleSearch, clearable: false, onKeyDown: this.handleSearchKeyDown, placeholder: placeholder, useMobileUI: true }, !!inputValue ? (React__default.createElement("a", { onClick: this.handleSeachCancel },
                 React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(Icon, { icon: "search", className: "icon" })))));
     };
     __decorate([