amis-rev-ui 6.13.0

package/esm/components/TransferPicker.js

@@ -0,0 +1,98 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __rest, __assign, __decorate, __metadata } from 'tslib';
+import { mapTree, 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 PickerContainer from './PickerContainer.js';
+
+var TransferPicker = /** @class */ (function (_super) {
+    __extends(TransferPicker, _super);
+    function TransferPicker() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            tempValue: null
+        };
+        _this.optionModified = false;
+        return _this;
+    }
+    TransferPicker.prototype.handleConfirm = function (value) {
+        var _a, _b;
+        this.setState({
+            tempValue: null
+        });
+        (_b = (_a = this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, value, this.optionModified);
+        this.optionModified = false;
+    };
+    TransferPicker.prototype.onFocus = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onFocus) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    TransferPicker.prototype.onBlur = function () {
+        var _a, _b;
+        this.setState({
+            tempValue: null
+        });
+        (_b = (_a = this.props).onBlur) === null || _b === void 0 ? void 0 : _b.call(_a);
+    };
+    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, onItemClick = _a.onItemClick, size = _a.size, borderMode = _a.borderMode, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, mobileUI = _a.mobileUI, popOverContainer = _a.popOverContainer, maxTagCount = _a.maxTagCount, overflowTagPopover = _a.overflowTagPopover, placeholder = _a.placeholder, rest = __rest(_a, ["classnames", "value", "translate", "disabled", "className", "onChange", "onItemClick", "size", "borderMode", "labelField", "mobileUI", "popOverContainer", "maxTagCount", "overflowTagPopover", "placeholder"]);
+        var tp = {
+            value: this.state.tempValue || value,
+            onChange: function (value) {
+                _this.setState({
+                    tempValue: value
+                });
+            }
+        };
+        return (React__default.createElement(PickerContainer, { title: __('Select.placeholder'), onFocus: this.onFocus, onClose: this.onBlur, mobileUI: mobileUI, popOverContainer: popOverContainer, bodyRender: function (_a) {
+                _a.onClose; var value = _a.value; _a.onChange; var setState = _a.setState, states = __rest(_a, ["onClose", "value", "onChange", "setState"]);
+                return (React__default.createElement(Transfer, __assign({ mobileUI: mobileUI }, 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);
+                            });
+                            _this.optionModified = true;
+                            setState({ options: options, value: value });
+                        }
+                        else {
+                            tp.onChange(value);
+                        }
+                    } })));
+            }, value: tp.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, onItemClick: onItemClick, onResultChange: onChange, onResultClick: onClick, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : __('Select.placeholder'), disabled: disabled, borderMode: borderMode, itemRender: function (option) { return (React__default.createElement("span", null, (option && option[labelField]) || 'undefined')); }, mobileUI: mobileUI, maxTagCount: maxTagCount, overflowTagPopover: overflowTagPopover }, !mobileUI ? (React__default.createElement("span", { className: cx('TransferPicker-icon') },
+                React__default.createElement(Icon, { icon: "pencil", className: "icon" }))) : null));
+        }));
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TransferPicker.prototype, "handleConfirm", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferPicker.prototype, "onFocus", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferPicker.prototype, "onBlur", null);
+    return TransferPicker;
+}(React__default.Component));
+var TransferPicker$1 = themeable(localeable(uncontrollable(TransferPicker, {
+    value: 'onChange'
+})));
+
+export { TransferPicker, TransferPicker$1 as default };

package/esm/components/TransferSearch.js

@@ -0,0 +1,100 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import debounce from 'lodash/debounce';
+import { autobind, themeable, localeable } from 'amis-rev-core';
+import { Icon } from './icons.js';
+import InputBox from './InputBox.js';
+
+var TransferSearch = /** @class */ (function (_super) {
+    __extends(TransferSearch, _super);
+    function TransferSearch() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            inputValue: ''
+        };
+        _this.lazySearch = debounce(function () {
+            var inputValue = _this.state.inputValue;
+            // 防止由于防抖导致空值问题
+            if (!inputValue) {
+                return;
+            }
+            var onSearch = _this.props.onSearch;
+            onSearch(inputValue);
+        }, 250, { trailing: true, leading: false });
+        return _this;
+    }
+    TransferSearch.prototype.componentWillUnmount = function () {
+        this.lazySearch.cancel();
+    };
+    TransferSearch.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();
+            }
+        });
+    };
+    TransferSearch.prototype.handleSearchKeyDown = function (e) {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+        }
+    };
+    TransferSearch.prototype.handleSeachCancel = function () {
+        var _a, _b;
+        (_b = (_a = this.props).onCancelSearch) === null || _b === void 0 ? void 0 : _b.call(_a);
+        this.setState({
+            inputValue: ''
+        });
+    };
+    TransferSearch.prototype.clearInput = function () {
+        this.setState({
+            inputValue: ''
+        });
+    };
+    TransferSearch.prototype.render = function () {
+        var _a = this.props, cx = _a.classnames; _a.translate; var placeholder = _a.placeholder, mobileUI = _a.mobileUI;
+        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, mobileUI: mobileUI }, !!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([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], TransferSearch.prototype, "handleSearch", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TransferSearch.prototype, "handleSearchKeyDown", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferSearch.prototype, "handleSeachCancel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], TransferSearch.prototype, "clearInput", null);
+    return TransferSearch;
+}(React__default.Component));
+var TransferSearch$1 = themeable(localeable(TransferSearch));
+
+export { TransferSearch, TransferSearch$1 as default };