amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/UserSelect.js

@@ -0,0 +1,674 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { eachTree, findTree, autobind, themeable, localeable } from 'amis-core';
+import ResultBox from './ResultBox.js';
+import Sortable from 'sortablejs';
+import PopUp from './PopUp.js';
+import InputBox from './InputBox.js';
+import { Icon } from './icons.js';
+import debounce from 'lodash/debounce';
+import Checkbox from './Checkbox.js';
+import { value2array, optionValueCompare } from './Select.js';
+import Spinner from './Spinner.js';
+import flatten from 'lodash/flatten';
+
+/**
+ * @file 移动端人员、部门、角色、岗位选择
+ * @author fex
+ */
+var defaultIcons = [
+    'user-default-department',
+    'user-default-role',
+    'user-default-post'
+];
+var UserSelect = /** @class */ (function (_super) {
+    __extends(UserSelect, _super);
+    function UserSelect(props) {
+        var _this = _super.call(this, props) || this;
+        _this.unmounted = false;
+        _this.lazySearch = debounce(function (text) {
+            (function (text) { return __awaiter(_this, void 0, void 0, function () {
+                var onSearch, result;
+                var _this = this;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            onSearch = this.props.onSearch;
+                            return [4 /*yield*/, onSearch(text, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); })];
+                        case 1:
+                            result = _a.sent();
+                            if (this.unmounted) {
+                                return [2 /*return*/];
+                            }
+                            if (!Array.isArray(result)) {
+                                throw new Error('onSearch 需要返回数组');
+                            }
+                            this.setState({
+                                searchList: result,
+                                searchLoading: false
+                            });
+                            return [2 /*return*/];
+                    }
+                });
+            }); })(text).catch(function (e) {
+                _this.setState({ searchLoading: false });
+                console.error(e);
+            });
+        }, 250, {
+            trailing: true,
+            leading: false
+        });
+        _this.state = {
+            isOpened: false,
+            isSelectOpened: false,
+            inputValue: '',
+            options: _this.props.options || [],
+            breadList: [],
+            searchList: [],
+            tempSelection: [],
+            selection: props.selection || [],
+            isSearch: false,
+            searchLoading: false,
+            isEdit: false
+        };
+        return _this;
+    }
+    UserSelect.prototype.componentDidMount = function () { };
+    UserSelect.prototype.componentDidUpdate = function (prevProps) {
+        var _a;
+        var _b = this.props, options = _b.options, value = _b.value;
+        if (prevProps.options !== options) {
+            if (options &&
+                options.length &&
+                options[0].leftOptions &&
+                Array.isArray(options[0].children)) {
+                var leftOptions = options[0].leftOptions;
+                this.setState({
+                    options: leftOptions
+                });
+            }
+            else {
+                // 部门选择
+                this.setState({
+                    options: options
+                });
+            }
+        }
+        if (JSON.stringify(value) !== JSON.stringify(prevProps.value) ||
+            (JSON.stringify(options) !== JSON.stringify(prevProps.options) &&
+                ((_a = prevProps.options) === null || _a === void 0 ? void 0 : _a.length))) {
+            var selection = value2array(value, this.props);
+            this.setState({
+                selection: selection
+            });
+        }
+    };
+    UserSelect.prototype.componentWillUnmount = function () {
+        this.unmounted = true;
+    };
+    UserSelect.prototype.onClose = function () {
+        this.setState({
+            isOpened: false,
+            isSearch: false,
+            inputValue: '',
+            searchList: [],
+            searchLoading: false
+        });
+    };
+    UserSelect.prototype.handleSearch = function (text) {
+        var _this = this;
+        if (text) {
+            this.setState({
+                isSearch: true,
+                searchLoading: true,
+                inputValue: text
+            }, function () {
+                // 如果有取消搜索，先取消掉。
+                _this.cancelSearch && _this.cancelSearch();
+                _this.lazySearch(text);
+            });
+        }
+        else {
+            this.handleSeachCancel();
+        }
+    };
+    UserSelect.prototype.handleSeachCancel = function () {
+        this.setState({
+            isSearch: false,
+            searchLoading: false,
+            inputValue: ''
+        });
+    };
+    UserSelect.prototype.swapSelectPosition = function (oldIndex, newIndex) {
+        var tempSelection = this.state.tempSelection;
+        tempSelection.splice(newIndex, 0, tempSelection.splice(oldIndex, 1)[0]);
+        this.setState({ tempSelection: tempSelection });
+    };
+    UserSelect.prototype.dragRef = function (ref) {
+        if (ref) {
+            this.initDragging();
+        }
+    };
+    UserSelect.prototype.initDragging = function () {
+        var _this = this;
+        var ns = this.props.classPrefix;
+        this.sortable = new Sortable(document.querySelector(".".concat(ns, "UserSelect-checkContent")), {
+            group: "UserSelect-checkContent",
+            animation: 150,
+            handle: ".".concat(ns, "UserSelect-dragBar"),
+            ghostClass: "".concat(ns, "UserSelect--dragging"),
+            onEnd: function (e) {
+                if (!_this.state.isEdit || e.newIndex === e.oldIndex) {
+                    return;
+                }
+                var parent = e.to;
+                if (e.oldIndex < parent.childNodes.length - 1) {
+                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
+                }
+                else {
+                    parent.appendChild(e.item);
+                }
+                _this.swapSelectPosition(e.oldIndex, e.newIndex);
+            }
+        });
+    };
+    UserSelect.prototype.destroyDragging = function () {
+        this.sortable && this.sortable.destroy();
+    };
+    UserSelect.prototype.onOpen = function () {
+        var selection = this.props.selection;
+        this.setState({
+            isOpened: true,
+            selection: selection || []
+        });
+    };
+    UserSelect.prototype.handleBack = function () {
+        this.setState({
+            isOpened: false,
+            inputValue: '',
+            isSearch: false,
+            searchList: [],
+            selection: [],
+            breadList: []
+        });
+    };
+    UserSelect.prototype.handleExpand = function (option) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function () {
+            var _b, deferLoad, isRef, isDep, deferParam, res, res, breadList;
+            return __generator(this, function (_c) {
+                switch (_c.label) {
+                    case 0:
+                        _b = this.props, deferLoad = _b.deferLoad, isRef = _b.isRef, isDep = _b.isDep;
+                        if (!(!option.isLoaded || (!isRef && isDep && !((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)))) return [3 /*break*/, 4];
+                        option.isLoaded = true;
+                        deferParam = option.deferApi ? { deferApi: option.deferApi } : {};
+                        if (!isRef) return [3 /*break*/, 2];
+                        return [4 /*yield*/, Promise.all([
+                                deferLoad(option, false, deferParam)
+                                // deferLoad({...option, ref: option.value}, true, deferParam)
+                            ])];
+                    case 1:
+                        res = _c.sent();
+                        option.children = flatten(res);
+                        return [3 /*break*/, 4];
+                    case 2:
+                        if (!option.deferApi) return [3 /*break*/, 4];
+                        return [4 /*yield*/, deferLoad(option, false, deferParam)];
+                    case 3:
+                        res = _c.sent();
+                        option.children = res || [];
+                        _c.label = 4;
+                    case 4:
+                        breadList = this.state.breadList;
+                        breadList.push(option);
+                        this.setState({
+                            breadList: breadList
+                        });
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    UserSelect.prototype.handleSelectChange = function (option, isReplace) {
+        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, controlled = _a.controlled;
+        if (controlled) {
+            onChange(option);
+            return;
+        }
+        var selection = this.state.selection.slice();
+        // 直接替换的option 肯定是数组
+        if (isReplace) {
+            selection = option;
+            // ResultBox 删除场景
+            onChange(selection);
+        }
+        else {
+            var selectionVals = selection.map(function (option) { return option[valueField]; });
+            var pos = selectionVals.indexOf(option[valueField]);
+            if (pos !== -1) {
+                selection.splice(selection.indexOf(option), 1);
+            }
+            else {
+                if (multiple) {
+                    selection.push(option);
+                }
+                else {
+                    selection = [option];
+                }
+            }
+        }
+        // onChange(multiple ? selection : selection?.[0]);
+        this.setState({
+            selection: selection
+        });
+        return false;
+    };
+    UserSelect.prototype.handleSubmit = function () {
+        var _a = this.props, onChange = _a.onChange, multiple = _a.multiple;
+        var selection = this.state.selection;
+        var value = multiple ? selection : selection === null || selection === void 0 ? void 0 : selection[0];
+        onChange(value);
+        this.handleBack();
+    };
+    UserSelect.prototype.onDelete = function (option, isTemp) {
+        if (isTemp === void 0) { isTemp = false; }
+        var _a = this.props, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, controlled = _a.controlled, onChange = _a.onChange;
+        var _c = this.state, tempSelection = _c.tempSelection, selection = _c.selection;
+        var _selection = isTemp ? tempSelection : selection;
+        _selection = _selection.filter(function (item) { return item[valueField] !== option[valueField]; });
+        if (isTemp) {
+            this.setState({ tempSelection: _selection });
+        }
+        else {
+            if (controlled) {
+                onChange(option, false, true);
+            }
+            else {
+                this.setState({ selection: _selection });
+            }
+        }
+    };
+    UserSelect.prototype.handleBreadChange = function (option, index) {
+        var breadList = this.state.breadList.slice(0, index);
+        this.setState({
+            breadList: breadList
+        });
+    };
+    UserSelect.prototype.handleSort = function () {
+        var _a;
+        var controlled = this.props.controlled;
+        this.setState({
+            isSelectOpened: true,
+            isEdit: true,
+            tempSelection: controlled
+                ? ((_a = this.props.selection) === null || _a === void 0 ? void 0 : _a.slice()) || []
+                : this.state.selection.slice()
+        });
+    };
+    UserSelect.prototype.handleEdit = function () {
+        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, controlled = _a.controlled;
+        var _b = this.state, isEdit = _b.isEdit, tempSelection = _b.tempSelection;
+        if (isEdit) {
+            if (controlled) {
+                onChange(multiple ? tempSelection : tempSelection === null || tempSelection === void 0 ? void 0 : tempSelection[0], true);
+                this.setState({
+                    isSelectOpened: false,
+                    isEdit: false
+                });
+                return;
+            }
+            else {
+                this.setState({
+                    isSelectOpened: false,
+                    isEdit: false,
+                    selection: tempSelection
+                });
+            }
+        }
+        else {
+            this.setState({
+                isEdit: true
+            });
+        }
+    };
+    UserSelect.prototype.handleClear = function () {
+        this.setState({ tempSelection: [] });
+    };
+    UserSelect.prototype.getResult = function () {
+        var _a, _b;
+        var _c = this.props, _d = _c.valueField, valueField = _d === void 0 ? 'value' : _d, _e = _c.labelField, labelField = _e === void 0 ? 'label' : _e, _f = _c.options, options = _f === void 0 ? [] : _f;
+        var _selection = ((_a = this.props.selection) === null || _a === void 0 ? void 0 : _a.concat()) || [];
+        if (Array.isArray((_b = options === null || options === void 0 ? void 0 : options[0]) === null || _b === void 0 ? void 0 : _b.leftOptions)) {
+            eachTree(options[0].leftOptions, function (item) {
+                var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
+                if (!!~index) {
+                    _selection.splice(index, 1, __assign(__assign({}, _selection[index]), { label: item[labelField] }));
+                }
+            });
+        }
+        eachTree(options, function (item) {
+            var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
+            if (!!~index) {
+                _selection.splice(index, 1, __assign(__assign({}, _selection[index]), { label: item[labelField] }));
+            }
+        });
+        return _selection;
+    };
+    UserSelect.prototype.renderIcon = function (option, isSelect) {
+        var _a;
+        var _b = this.props, _c = _b.labelField, labelField = _c === void 0 ? 'label' : _c, cx = _b.classnames, isRef = _b.isRef;
+        var isSearch = this.state.isSearch;
+        if (!option.icon) {
+            if (option.isRef || ((isSearch || isSelect) && isRef)) {
+                return (React__default.createElement("span", { className: cx('UserSelect-text-userPic') }, (_a = option[labelField]) === null || _a === void 0 ? void 0 : _a.slice(0, 1)));
+            }
+            else {
+                // 没有icon默认返回部门图标
+                return (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
+                    React__default.createElement(Icon, { icon: "department", className: "icon" })));
+            }
+        }
+        // 支持角色、岗位等图标配置
+        var IconHtml;
+        switch (option.icon) {
+            case 'user-default-department':
+                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
+                    React__default.createElement(Icon, { icon: "department", className: "icon" })));
+                break;
+            case 'user-default-role':
+                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'role') },
+                    React__default.createElement(Icon, { icon: "role", className: "icon" })));
+                break;
+            case 'user-default-post':
+                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'post') },
+                    React__default.createElement(Icon, { icon: "post", className: "icon" })));
+                break;
+            case '':
+                IconHtml = (React__default.createElement("span", { className: cx('UserSelect-text-userPic') }, option[labelField].slice(0, 1)));
+                break;
+            default:
+                IconHtml = (React__default.createElement("img", { src: option.icon, className: cx('UserSelect-userPic') }));
+        }
+        return IconHtml;
+    };
+    UserSelect.prototype.renderList = function (options, key, isSearch) {
+        var _this = this;
+        if (options === void 0) { options = []; }
+        var _a = this.props, cx = _a.classnames, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b; _a.labelField; var isDep = _a.isDep, isRef = _a.isRef, __ = _a.translate, controlled = _a.controlled, displayFields = _a.displayFields, isTab = _a.isTab, multiple = _a.multiple, _d = _a.deferField, deferField = _d === void 0 ? 'defer' : _d;
+        var selection = controlled
+            ? this.props.selection || []
+            : this.state.selection;
+        var checkValues = selection.map(function (item) { return item[valueField]; });
+        return options.length ? (React__default.createElement("div", { className: cx('UserSelect-memberList-box'), key: key },
+            React__default.createElement("ul", { className: cx("UserSelect-memberList"), key: key }, options.map(function (option, index) {
+                var _a, _b;
+                var hasChildren = (isRef && !option.isRef) ||
+                    (isDep && (option[deferField] || ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)));
+                var checkVisible = (isDep && isRef) ||
+                    (isRef && option.isRef) ||
+                    (isDep && !isRef) ||
+                    isSearch;
+                var userIcon = _this.renderIcon(option);
+                var displays = option.type === 'user' && displayFields
+                    ? displayFields
+                    : ['label'];
+                var avatar = displays.find(function (i) { return i === 'avatar'; });
+                var first = ((_b = option.label) === null || _b === void 0 ? void 0 : _b.substring(0, 1).toLocaleUpperCase()) || 'A';
+                var restFiedls = displays.filter(function (i) { return i !== 'avatar'; });
+                if (option.type === 'post') {
+                    restFiedls.push('desc');
+                }
+                return (React__default.createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
+                    (isTab || multiple) && checkVisible ? (React__default.createElement(Checkbox, { size: "sm", checked: checkValues.includes(option[valueField]), label: '', onChange: function () { return _this.handleSelectChange(option); } })) : null,
+                    React__default.createElement("span", { className: cx('UserSelect-memberName'), onClick: function () {
+                            return checkVisible
+                                ? _this.handleSelectChange(option)
+                                : hasChildren && _this.handleExpand(option);
+                        } },
+                        !avatar &&
+                            userIcon &&
+                            (isDep || defaultIcons.includes(option.icon)) ? (React__default.createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
+                        !option.isRef ? (React__default.createElement("span", { className: cx('UserSelect-label') }, option.label)) : null,
+                        avatar && option.isRef ? (option.avatar ? (React__default.createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default.createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
+                        option.isRef ? (React__default.createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default.createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
+                    !isSearch && hasChildren ? (React__default.createElement("span", { className: cx("UserSelect-more"), onClick: function () { return _this.handleExpand(option); } },
+                        React__default.createElement(Icon, { icon: "caret", className: "icon" }))) : null));
+            })))) : (React__default.createElement("div", { className: cx("UserSelect-noRecord") },
+            __('placeholder.noOption'),
+            "~"));
+    };
+    UserSelect.prototype.renderselectList = function (options) {
+        var _this = this;
+        if (options === void 0) { options = []; }
+        var _a = this.props, cx = _a.classnames, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, displayFields = _a.displayFields, isDep = _a.isDep, __ = _a.translate;
+        var isEdit = this.state.isEdit;
+        return options.length ? (React__default.createElement("div", { className: cx('UserSelect-selection-wrap') },
+            React__default.createElement("ul", { className: cx("UserSelect-selection", "UserSelect-checkContent"), ref: this.dragRef }, options.map(function (option, index) {
+                var _a;
+                var userIcon = _this.renderIcon(option, true);
+                var options = _this.state.options;
+                var originOption = findTree(options, function (item) { return item[valueField] === option[valueField]; });
+                var displays = option.type === 'user' && displayFields
+                    ? displayFields
+                    : ['label'];
+                var avatar = displays.find(function (i) { return i === 'avatar'; });
+                var first = ((_a = option.label) === null || _a === void 0 ? void 0 : _a.substring(0, 1).toLocaleUpperCase()) || 'A';
+                var restFiedls = displays.filter(function (i) { return i !== 'avatar'; });
+                if (option.type === 'post') {
+                    restFiedls.push('desc');
+                }
+                return (React__default.createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
+                    isEdit ? (React__default.createElement("span", { className: cx("UserSelect-del"), onClick: function () { return _this.onDelete(option, true); } },
+                        React__default.createElement(Icon, { icon: "user-remove", className: "icon" }))) : null,
+                    React__default.createElement("span", { className: cx("UserSelect-memberName") },
+                        !avatar &&
+                            userIcon &&
+                            (isDep || defaultIcons.includes(option.icon)) ? (React__default.createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
+                        !option.isRef ? (labelField === 'avatar' ? (option[labelField] ? (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" })) : (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default.createElement("span", { className: cx('UserSelect-label') }, originOption
+                            ? originOption[labelField]
+                            : option[labelField]))) : null,
+                        avatar && option.isRef ? (option.avatar ? (React__default.createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default.createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
+                        option.isRef ? (React__default.createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default.createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
+                    isEdit ? (React__default.createElement("a", { className: cx('UserSelect-dragBar') },
+                        React__default.createElement(Icon, { icon: "drag-bar", className: cx('icon') }))) : null));
+            })))) : (React__default.createElement("div", { className: cx("UserSelect-noRecord") },
+            __('placeholder.noOption'),
+            "~"));
+    };
+    UserSelect.prototype.renderContent = function () {
+        var _this = this;
+        var _a = this.props, navTitle = _a.navTitle, showNav = _a.showNav, searchable = _a.searchable, searchPlaceholder = _a.searchPlaceholder, controlled = _a.controlled, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, cx = _a.classnames, multiple = _a.multiple, __ = _a.translate, loadingConfig = _a.loadingConfig, mobileUI = _a.mobileUI;
+        var _d = this.state, breadList = _d.breadList, options = _d.options, isSearch = _d.isSearch, searchList = _d.searchList, searchLoading = _d.searchLoading;
+        var selection = controlled ? this.props.selection : this.state.selection;
+        return (React__default.createElement("div", { className: cx("UserSelect-wrap") },
+            showNav ? (React__default.createElement("div", { className: cx('UserSelect-navbar') },
+                React__default.createElement("span", { className: "left-arrow-box", onClick: this.handleBack },
+                    React__default.createElement(Icon, { icon: "left-arrow", className: "icon" })),
+                React__default.createElement("div", { className: cx('UserSelect-navbar-title') }, navTitle))) : null,
+            searchable ? (React__default.createElement("div", { className: cx('UserSelect-searchBox') },
+                React__default.createElement(InputBox, { className: cx("UserSelect-search"), value: this.state.inputValue, onChange: this.handleSearch, placeholder: searchPlaceholder, clearable: false, mobileUI: mobileUI }, this.state.isSearch ? (React__default.createElement("a", { onClick: this.handleSeachCancel },
+                    React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(Icon, { icon: "search", className: "icon" }))))) : null,
+            breadList.length ? (React__default.createElement("div", { className: cx('UserSelect-breadcrumb') }, breadList
+                .map(function (item, index) { return (React__default.createElement("span", { className: cx('UserSelect-breadcrumb-item'), key: index, onClick: function () { return _this.handleBreadChange(item, index); } }, item.label)); })
+                .reduce(function (prev, curr, index) { return [
+                prev,
+                React__default.createElement(Icon, { icon: "caret", className: cx('UserSelect-breadcrumb-separator', 'icon'), key: "separator-".concat(index) }),
+                curr
+            ]; }))) : null,
+            (selection === null || selection === void 0 ? void 0 : selection.length) ? (React__default.createElement("div", { className: cx("UserSelect-resultBox") },
+                React__default.createElement("div", { className: cx("UserSelect-resultBox-shadow") }),
+                React__default.createElement("ul", { className: cx("UserSelect-selectList") }, selection.map(function (item, index) {
+                    var originOption = findTree(options, function (op) { return op[valueField] === item[valueField]; });
+                    return (React__default.createElement("li", { key: index, className: cx('UserSelect-selectList-item') },
+                        labelField === 'avatar' ? (item[labelField] ? (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: item[labelField], alt: "" })) : (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, item[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default.createElement("span", null, originOption
+                            ? originOption[labelField]
+                            : item[labelField])),
+                        React__default.createElement("span", { className: cx('UserSelect-selectList-item-closeBox'), onClick: function () { return _this.onDelete(item); } },
+                            React__default.createElement(Icon, { icon: "close", className: "icon" }))));
+                })),
+                multiple ? (React__default.createElement("span", { className: cx('UserSelect-selectSort-box'), onClick: this.handleSort },
+                    React__default.createElement(Icon, { icon: "menu", className: cx('UserSelect-selectSort', 'icon') }))) : null)) : null,
+            isSearch ? (searchLoading ? (React__default.createElement("div", { className: cx("UserSelect-searchLoadingBox") },
+                React__default.createElement(Spinner, { loadingConfig: loadingConfig }))) : (React__default.createElement("div", { className: cx('UserSelect-searchResult') }, this.renderList(searchList, -1, true)))) : (React__default.createElement("div", { className: cx("UserSelect-contentBox") },
+                React__default.createElement("div", { className: cx("UserSelect-scroll"), style: {
+                        width: 100 * (breadList.length + 1) + 'vw',
+                        left: -breadList.length * 100 + 'vw'
+                    } },
+                    this.renderList(options),
+                    breadList.map(function (option, index) {
+                        var treeOption = findTree(options, optionValueCompare(option[valueField], valueField || 'value'));
+                        var children = treeOption.children;
+                        var hasChildren = Array.isArray(children) && children;
+                        return hasChildren ? (_this.renderList(children, option[valueField])) : (React__default.createElement("div", { className: cx("UserSelect-spinnerBox"), key: index },
+                            React__default.createElement(Spinner, { loadingConfig: loadingConfig })));
+                    })))),
+            !controlled ? (React__default.createElement("div", { className: cx('UserSelect-footer') },
+                React__default.createElement("button", { type: "button", className: cx('Button Button--md Button--primary'), onClick: this.handleSubmit }, __('UserSelect.sure')))) : null));
+    };
+    UserSelect.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? '请选择' : _b, showResultBox = _a.showResultBox, _c = _a.labelField, labelField = _c === void 0 ? 'label' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, disabled = _a.disabled, mobileUI = _a.mobileUI;
+        var _e = this.state, isOpened = _e.isOpened, isEdit = _e.isEdit, isSelectOpened = _e.isSelectOpened;
+        return (React__default.createElement("div", { className: cx('UserSelect') },
+            showResultBox ? (React__default.createElement(ResultBox, { className: cx('UserSelect-input', isOpened ? 'is-active' : ''), allowInput: false, result: this.getResult(), disabled: disabled, itemRender: function (option) {
+                    if (labelField !== 'avatar') {
+                        return (React__default.createElement("span", null, "".concat(option.scopeLabel || '').concat(option.label)));
+                    }
+                    else {
+                        if (option[labelField]) {
+                            return (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" }));
+                        }
+                        return (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()));
+                    }
+                }, onResultChange: function (value) { return _this.handleSelectChange(value, true); }, onResultClick: this.onOpen, placeholder: placeholder, mobileUI: mobileUI })) : null,
+            showResultBox ? (React__default.createElement(PopUp, { isShow: isOpened, className: cx("UserSelect-popup"), onHide: this.onClose, showClose: false }, this.renderContent())) : (this.renderContent()),
+            React__default.createElement(PopUp, { isShow: isSelectOpened, className: cx("UserSelect-selectPopup"), onHide: function () {
+                    return _this.setState({
+                        isSelectOpened: false,
+                        isEdit: false
+                    });
+                }, showClose: false },
+                React__default.createElement("div", { className: cx('UserSelect-selectBody') },
+                    React__default.createElement("div", { className: cx('UserSelect-navbar') },
+                        React__default.createElement("span", { className: "left-arrow-box", onClick: function () {
+                                return _this.setState({
+                                    isSelectOpened: false,
+                                    isEdit: false
+                                });
+                            } },
+                            React__default.createElement(Icon, { icon: "left-arrow", className: "icon" })),
+                        React__default.createElement("div", { className: cx('UserSelect-navbar-title') }, __('UserSelect.resultSort')),
+                        React__default.createElement("span", { className: cx('UserSelect-navbar-btnEdit'), onClick: this.handleEdit }, isEdit ? __('UserSelect.save') : __('UserSelect.edit'))),
+                    React__default.createElement("div", { className: cx('UserSelect-selectList-box') },
+                        React__default.createElement("div", { className: cx('UserSelect-select-head') },
+                            React__default.createElement("span", { className: cx('UserSelect-select-head-text') }, __('UserSelect.selected')),
+                            isEdit ? (React__default.createElement("span", { className: cx('UserSelect-select-head-btnClear'), onClick: this.handleClear }, __('UserSelect.clear'))) : null),
+                        this.renderselectList(this.state.tempSelection))))));
+    };
+    UserSelect.defaultProps = {
+        showResultBox: true,
+        labelField: 'label',
+        valueField: 'value',
+        deferField: 'defer'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "onClose", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleSearch", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleSeachCancel", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "dragRef", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "onOpen", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleBack", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", Promise)
+    ], UserSelect.prototype, "handleExpand", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleSelectChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleSubmit", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Boolean]),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "onDelete", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object, Number]),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleBreadChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleSort", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleEdit", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "handleClear", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], UserSelect.prototype, "getResult", null);
+    return UserSelect;
+}(React__default.Component));
+var UserSelect$1 = themeable(localeable(UserSelect));
+
+export { UserSelect, UserSelect$1 as default };