amis-ui 3.1.1 → 3.3.0

package/lib/components/UserSelect.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -28,10 +28,9 @@ var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var flatten__default = /*#__PURE__*/_interopDefaultLegacy(flatten);
 
-/**
- * @file 移动端人员、部门、角色、岗位选择
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var defaultIcons = [
     'user-default-department',
     'user-default-role',
@@ -350,13 +349,21 @@ var UserSelect = /** @class */ (function (_super) {
         this.setState({ tempSelection: [] });
     };
     UserSelect.prototype.getResult = function () {
-        var _a;
-        var _b = this.props, _c = _b.valueField, valueField = _c === void 0 ? 'value' : _c, _d = _b.labelField, labelField = _d === void 0 ? 'label' : _d, _e = _b.options, options = _e === void 0 ? [] : _e;
-        var _selection = ((_a = this.props.selection) === null || _a === void 0 ? void 0 : _a.slice()) || [];
+        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)) {
+            amisCore.eachTree(options[0].leftOptions, function (item) {
+                var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
+                if (!!~index) {
+                    _selection.splice(index, 1, tslib.__assign(tslib.__assign({}, _selection[index]), { label: item[labelField] }));
+                }
+            });
+        }
         amisCore.eachTree(options, function (item) {
-            var res = _selection.find(function (item2) { return item2[valueField] === item[valueField]; });
-            if (res) {
-                res.label = item[labelField];
+            var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
+            if (!!~index) {
+                _selection.splice(index, 1, tslib.__assign(tslib.__assign({}, _selection[index]), { label: item[labelField] }));
             }
         });
         return _selection;
@@ -367,34 +374,34 @@ var UserSelect = /** @class */ (function (_super) {
         var isSearch = this.state.isSearch;
         if (!option.icon) {
             if (option.isRef || ((isSearch || isSelect) && isRef)) {
-                return (React__default["default"].createElement("span", { className: cx('UserSelect-text-userPic') }, (_a = option[labelField]) === null || _a === void 0 ? void 0 : _a.slice(0, 1)));
+                return (_J$X_("span", { className: cx('UserSelect-text-userPic') }, (_a = option[labelField]) === null || _a === void 0 ? void 0 : _a.slice(0, 1)));
             }
             else {
                 // 没有icon默认返回部门图标
-                return (React__default["default"].createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
-                    React__default["default"].createElement(icons.Icon, { icon: "department", className: "icon" })));
+                return (_J$X_("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
+                    _J$X_(icons.Icon, { icon: "department", className: "icon" })));
             }
         }
         // 支持角色、岗位等图标配置
         var IconHtml;
         switch (option.icon) {
             case 'user-default-department':
-                IconHtml = (React__default["default"].createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
-                    React__default["default"].createElement(icons.Icon, { icon: "department", className: "icon" })));
+                IconHtml = (_J$X_("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
+                    _J$X_(icons.Icon, { icon: "department", className: "icon" })));
                 break;
             case 'user-default-role':
-                IconHtml = (React__default["default"].createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'role') },
-                    React__default["default"].createElement(icons.Icon, { icon: "role", className: "icon" })));
+                IconHtml = (_J$X_("span", { className: cx('icon', 'UserSelect-icon-box', 'role') },
+                    _J$X_(icons.Icon, { icon: "role", className: "icon" })));
                 break;
             case 'user-default-post':
-                IconHtml = (React__default["default"].createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'post') },
-                    React__default["default"].createElement(icons.Icon, { icon: "post", className: "icon" })));
+                IconHtml = (_J$X_("span", { className: cx('icon', 'UserSelect-icon-box', 'post') },
+                    _J$X_(icons.Icon, { icon: "post", className: "icon" })));
                 break;
             case '':
-                IconHtml = (React__default["default"].createElement("span", { className: cx('UserSelect-text-userPic') }, option[labelField].slice(0, 1)));
+                IconHtml = (_J$X_("span", { className: cx('UserSelect-text-userPic') }, option[labelField].slice(0, 1)));
                 break;
             default:
-                IconHtml = (React__default["default"].createElement("img", { src: option.icon, className: cx('UserSelect-userPic') }));
+                IconHtml = (_J$X_("img", { src: option.icon, className: cx('UserSelect-userPic') }));
         }
         return IconHtml;
     };
@@ -406,8 +413,8 @@ var UserSelect = /** @class */ (function (_super) {
             ? this.props.selection || []
             : this.state.selection;
         var checkValues = selection.map(function (item) { return item[valueField]; });
-        return options.length ? (React__default["default"].createElement("div", { className: cx('UserSelect-memberList-box'), key: key },
-            React__default["default"].createElement("ul", { className: cx("UserSelect-memberList"), key: key }, options.map(function (option, index) {
+        return options.length ? (_J$X_("div", { className: cx('UserSelect-memberList-box'), key: key },
+            _J$X_("ul", { className: cx("UserSelect-memberList"), key: key }, options.map(function (option, index) {
                 var _a, _b;
                 var hasChildren = (isRef && !option.isRef) ||
                     (isDep && (option.defer || ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)));
@@ -425,22 +432,22 @@ var UserSelect = /** @class */ (function (_super) {
                 if (option.type === 'post') {
                     restFiedls.push('desc');
                 }
-                return (React__default["default"].createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
-                    (isTab || multiple) && checkVisible ? (React__default["default"].createElement(Checkbox["default"], { size: "sm", checked: checkValues.includes(option[valueField]), label: '', onChange: function () { return _this.handleSelectChange(option); } })) : null,
-                    React__default["default"].createElement("span", { className: cx('UserSelect-memberName'), onClick: function () {
+                return (_J$X_("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
+                    (isTab || multiple) && checkVisible ? (_J$X_(Checkbox["default"], { size: "sm", checked: checkValues.includes(option[valueField]), label: '', onChange: function () { return _this.handleSelectChange(option); } })) : null,
+                    _J$X_("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["default"].createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
-                        !option.isRef ? (React__default["default"].createElement("span", { className: cx('UserSelect-label') }, option.label)) : null,
-                        avatar && option.isRef ? (option.avatar ? (React__default["default"].createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default["default"].createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
-                        option.isRef ? (React__default["default"].createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default["default"].createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
-                    !isSearch && hasChildren ? (React__default["default"].createElement("span", { className: cx("UserSelect-more"), onClick: function () { return _this.handleExpand(option); } },
-                        React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon" }))) : null));
-            })))) : (React__default["default"].createElement("div", { className: cx("UserSelect-noRecord") },
+                            (isDep || defaultIcons.includes(option.icon)) ? (_J$X_("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
+                        !option.isRef ? (_J$X_("span", { className: cx('UserSelect-label') }, option.label)) : null,
+                        avatar && option.isRef ? (option.avatar ? (_J$X_("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (_J$X_("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
+                        option.isRef ? (_J$X_("div", { className: "option-fields" }, restFiedls.map(function (key) { return (_J$X_("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
+                    !isSearch && hasChildren ? (_J$X_("span", { className: cx("UserSelect-more"), onClick: function () { return _this.handleExpand(option); } },
+                        _J$X_(icons.Icon, { icon: "caret", className: "icon" }))) : null));
+            })))) : (_J$X_("div", { className: cx("UserSelect-noRecord") },
             __('placeholder.noOption'),
             "~"));
     };
@@ -449,8 +456,8 @@ var UserSelect = /** @class */ (function (_super) {
         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["default"].createElement("div", { className: cx('UserSelect-selection-wrap') },
-            React__default["default"].createElement("ul", { className: cx("UserSelect-selection", "UserSelect-checkContent"), ref: this.dragRef }, options.map(function (option, index) {
+        return options.length ? (_J$X_("div", { className: cx('UserSelect-selection-wrap') },
+            _J$X_("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;
@@ -464,21 +471,21 @@ var UserSelect = /** @class */ (function (_super) {
                 if (option.type === 'post') {
                     restFiedls.push('desc');
                 }
-                return (React__default["default"].createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
-                    isEdit ? (React__default["default"].createElement("span", { className: cx("UserSelect-del"), onClick: function () { return _this.onDelete(option, true); } },
-                        React__default["default"].createElement(icons.Icon, { icon: "user-remove", className: "icon" }))) : null,
-                    React__default["default"].createElement("span", { className: cx("UserSelect-memberName") },
+                return (_J$X_("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
+                    isEdit ? (_J$X_("span", { className: cx("UserSelect-del"), onClick: function () { return _this.onDelete(option, true); } },
+                        _J$X_(icons.Icon, { icon: "user-remove", className: "icon" }))) : null,
+                    _J$X_("span", { className: cx("UserSelect-memberName") },
                         !avatar &&
                             userIcon &&
-                            (isDep || defaultIcons.includes(option.icon)) ? (React__default["default"].createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
-                        !option.isRef ? (labelField === 'avatar' ? (option[labelField] ? (React__default["default"].createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" })) : (React__default["default"].createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default["default"].createElement("span", { className: cx('UserSelect-label') }, originOption
+                            (isDep || defaultIcons.includes(option.icon)) ? (_J$X_("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
+                        !option.isRef ? (labelField === 'avatar' ? (option[labelField] ? (_J$X_("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" })) : (_J$X_("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()))) : (_J$X_("span", { className: cx('UserSelect-label') }, originOption
                             ? originOption[labelField]
                             : option[labelField]))) : null,
-                        avatar && option.isRef ? (option.avatar ? (React__default["default"].createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default["default"].createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
-                        option.isRef ? (React__default["default"].createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default["default"].createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
-                    isEdit ? (React__default["default"].createElement("a", { className: cx('UserSelect-dragBar') },
-                        React__default["default"].createElement(icons.Icon, { icon: "drag-bar", className: cx('icon') }))) : null));
-            })))) : (React__default["default"].createElement("div", { className: cx("UserSelect-noRecord") },
+                        avatar && option.isRef ? (option.avatar ? (_J$X_("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (_J$X_("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
+                        option.isRef ? (_J$X_("div", { className: "option-fields" }, restFiedls.map(function (key) { return (_J$X_("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
+                    isEdit ? (_J$X_("a", { className: cx('UserSelect-dragBar') },
+                        _J$X_(icons.Icon, { icon: "drag-bar", className: cx('icon') }))) : null));
+            })))) : (_J$X_("div", { className: cx("UserSelect-noRecord") },
             __('placeholder.noOption'),
             "~"));
     };
@@ -487,37 +494,37 @@ var UserSelect = /** @class */ (function (_super) {
         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;
         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["default"].createElement("div", { className: cx("UserSelect-wrap") },
-            showNav ? (React__default["default"].createElement("div", { className: cx('UserSelect-navbar') },
-                React__default["default"].createElement("span", { className: "left-arrow-box", onClick: this.handleBack },
-                    React__default["default"].createElement(icons.Icon, { icon: "left-arrow", className: "icon" })),
-                React__default["default"].createElement("div", { className: cx('UserSelect-navbar-title') }, navTitle))) : null,
-            searchable ? (React__default["default"].createElement("div", { className: cx('UserSelect-searchBox') },
-                React__default["default"].createElement(InputBox["default"], { className: cx("UserSelect-search"), value: this.state.inputValue, onChange: this.handleSearch, placeholder: searchPlaceholder, clearable: false }, this.state.isSearch ? (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,
-            breadList.length ? (React__default["default"].createElement("div", { className: cx('UserSelect-breadcrumb') }, breadList
-                .map(function (item, index) { return (React__default["default"].createElement("span", { className: cx('UserSelect-breadcrumb-item'), key: index, onClick: function () { return _this.handleBreadChange(item, index); } }, item.label)); })
+        return (_J$X_("div", { className: cx("UserSelect-wrap") },
+            showNav ? (_J$X_("div", { className: cx('UserSelect-navbar') },
+                _J$X_("span", { className: "left-arrow-box", onClick: this.handleBack },
+                    _J$X_(icons.Icon, { icon: "left-arrow", className: "icon" })),
+                _J$X_("div", { className: cx('UserSelect-navbar-title') }, navTitle))) : null,
+            searchable ? (_J$X_("div", { className: cx('UserSelect-searchBox') },
+                _J$X_(InputBox["default"], { className: cx("UserSelect-search"), value: this.state.inputValue, onChange: this.handleSearch, placeholder: searchPlaceholder, clearable: false, useMobileUI: true }, this.state.isSearch ? (_J$X_("a", { onClick: this.handleSeachCancel },
+                    _J$X_(icons.Icon, { icon: "close", className: "icon" }))) : (_J$X_(icons.Icon, { icon: "search", className: "icon" }))))) : null,
+            breadList.length ? (_J$X_("div", { className: cx('UserSelect-breadcrumb') }, breadList
+                .map(function (item, index) { return (_J$X_("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["default"].createElement(icons.Icon, { icon: "caret", className: cx('UserSelect-breadcrumb-separator', 'icon'), key: "separator-".concat(index) }),
+                _J$X_(icons.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["default"].createElement("div", { className: cx("UserSelect-resultBox") },
-                React__default["default"].createElement("div", { className: cx("UserSelect-resultBox-shadow") }),
-                React__default["default"].createElement("ul", { className: cx("UserSelect-selectList") }, selection.map(function (item, index) {
+            (selection === null || selection === void 0 ? void 0 : selection.length) ? (_J$X_("div", { className: cx("UserSelect-resultBox") },
+                _J$X_("div", { className: cx("UserSelect-resultBox-shadow") }),
+                _J$X_("ul", { className: cx("UserSelect-selectList") }, selection.map(function (item, index) {
                     var originOption = amisCore.findTree(options, function (op) { return op[valueField] === item[valueField]; });
-                    return (React__default["default"].createElement("li", { key: index, className: cx('UserSelect-selectList-item') },
-                        labelField === 'avatar' ? (item[labelField] ? (React__default["default"].createElement("img", { className: cx('UserSelect-avatar-img'), src: item[labelField], alt: "" })) : (React__default["default"].createElement("span", { className: cx('UserSelect-avatar-text') }, item[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default["default"].createElement("span", null, originOption
+                    return (_J$X_("li", { key: index, className: cx('UserSelect-selectList-item') },
+                        labelField === 'avatar' ? (item[labelField] ? (_J$X_("img", { className: cx('UserSelect-avatar-img'), src: item[labelField], alt: "" })) : (_J$X_("span", { className: cx('UserSelect-avatar-text') }, item[valueField].slice(0, 1).toLocaleUpperCase()))) : (_J$X_("span", null, originOption
                             ? originOption[labelField]
                             : item[labelField])),
-                        React__default["default"].createElement("span", { className: cx('UserSelect-selectList-item-closeBox'), onClick: function () { return _this.onDelete(item); } },
-                            React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))));
+                        _J$X_("span", { className: cx('UserSelect-selectList-item-closeBox'), onClick: function () { return _this.onDelete(item); } },
+                            _J$X_(icons.Icon, { icon: "close", className: "icon" }))));
                 })),
-                multiple ? (React__default["default"].createElement("span", { className: cx('UserSelect-selectSort-box'), onClick: this.handleSort },
-                    React__default["default"].createElement(icons.Icon, { icon: "menu", className: cx('UserSelect-selectSort', 'icon') }))) : null)) : null,
-            isSearch ? (searchLoading ? (React__default["default"].createElement("div", { className: cx("UserSelect-searchLoadingBox") },
-                React__default["default"].createElement(Spinner["default"], { loadingConfig: loadingConfig }))) : (React__default["default"].createElement("div", { className: cx('UserSelect-searchResult') }, this.renderList(searchList, -1, true)))) : (React__default["default"].createElement("div", { className: cx("UserSelect-contentBox") },
-                React__default["default"].createElement("div", { className: cx("UserSelect-scroll"), style: {
+                multiple ? (_J$X_("span", { className: cx('UserSelect-selectSort-box'), onClick: this.handleSort },
+                    _J$X_(icons.Icon, { icon: "menu", className: cx('UserSelect-selectSort', 'icon') }))) : null)) : null,
+            isSearch ? (searchLoading ? (_J$X_("div", { className: cx("UserSelect-searchLoadingBox") },
+                _J$X_(Spinner["default"], { loadingConfig: loadingConfig }))) : (_J$X_("div", { className: cx('UserSelect-searchResult') }, this.renderList(searchList, -1, true)))) : (_J$X_("div", { className: cx("UserSelect-contentBox") },
+                _J$X_("div", { className: cx("UserSelect-scroll"), style: {
                         width: 100 * (breadList.length + 1) + 'vw',
                         left: -breadList.length * 100 + 'vw'
                     } },
@@ -526,50 +533,50 @@ var UserSelect = /** @class */ (function (_super) {
                         var treeOption = amisCore.findTree(options, Select.optionValueCompare(option[valueField], valueField || 'value'));
                         var children = treeOption.children;
                         var hasChildren = Array.isArray(children) && children;
-                        return hasChildren ? (_this.renderList(children, option[valueField])) : (React__default["default"].createElement("div", { className: cx("UserSelect-spinnerBox"), key: index },
-                            React__default["default"].createElement(Spinner["default"], { loadingConfig: loadingConfig })));
+                        return hasChildren ? (_this.renderList(children, option[valueField])) : (_J$X_("div", { className: cx("UserSelect-spinnerBox"), key: index },
+                            _J$X_(Spinner["default"], { loadingConfig: loadingConfig })));
                     })))),
-            !controlled ? (React__default["default"].createElement("div", { className: cx('UserSelect-footer') },
-                React__default["default"].createElement("button", { type: "button", className: cx('Button Button--md Button--primary'), onClick: this.handleSubmit }, __('UserSelect.sure')))) : null));
+            !controlled ? (_J$X_("div", { className: cx('UserSelect-footer') },
+                _J$X_("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;
         var _e = this.state, isOpened = _e.isOpened, isEdit = _e.isEdit, isSelectOpened = _e.isSelectOpened;
-        return (React__default["default"].createElement("div", { className: cx('UserSelect') },
-            showResultBox ? (React__default["default"].createElement(ResultBox["default"], { className: cx('UserSelect-input', isOpened ? 'is-active' : ''), allowInput: false, result: this.getResult(), itemRender: function (option) {
+        return (_J$X_("div", { className: cx('UserSelect') },
+            showResultBox ? (_J$X_(ResultBox["default"], { className: cx('UserSelect-input', isOpened ? 'is-active' : ''), allowInput: false, result: this.getResult(), itemRender: function (option) {
                     if (labelField !== 'avatar') {
-                        return (React__default["default"].createElement("span", null, "".concat(option.scopeLabel || '').concat(option.label)));
+                        return (_J$X_("span", null, "".concat(option.scopeLabel || '').concat(option.label)));
                     }
                     else {
                         if (option[labelField]) {
-                            return (React__default["default"].createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" }));
+                            return (_J$X_("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" }));
                         }
-                        return (React__default["default"].createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()));
+                        return (_J$X_("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, useMobileUI: true })) : null,
-            showResultBox ? (React__default["default"].createElement(PopUp["default"], { isShow: isOpened, className: cx("UserSelect-popup"), onHide: this.onClose, showClose: false }, this.renderContent())) : (this.renderContent()),
-            React__default["default"].createElement(PopUp["default"], { isShow: isSelectOpened, className: cx("UserSelect-selectPopup"), onHide: function () {
+            showResultBox ? (_J$X_(PopUp["default"], { isShow: isOpened, className: cx("UserSelect-popup"), onHide: this.onClose, showClose: false }, this.renderContent())) : (this.renderContent()),
+            _J$X_(PopUp["default"], { isShow: isSelectOpened, className: cx("UserSelect-selectPopup"), onHide: function () {
                     return _this.setState({
                         isSelectOpened: false,
                         isEdit: false
                     });
                 }, showClose: false },
-                React__default["default"].createElement("div", { className: cx('UserSelect-selectBody') },
-                    React__default["default"].createElement("div", { className: cx('UserSelect-navbar') },
-                        React__default["default"].createElement("span", { className: "left-arrow-box", onClick: function () {
+                _J$X_("div", { className: cx('UserSelect-selectBody') },
+                    _J$X_("div", { className: cx('UserSelect-navbar') },
+                        _J$X_("span", { className: "left-arrow-box", onClick: function () {
                                 return _this.setState({
                                     isSelectOpened: false,
                                     isEdit: false
                                 });
                             } },
-                            React__default["default"].createElement(icons.Icon, { icon: "left-arrow", className: "icon" })),
-                        React__default["default"].createElement("div", { className: cx('UserSelect-navbar-title') }, __('UserSelect.resultSort')),
-                        React__default["default"].createElement("span", { className: cx('UserSelect-navbar-btnEdit'), onClick: this.handleEdit }, isEdit ? __('UserSelect.save') : __('UserSelect.edit'))),
-                    React__default["default"].createElement("div", { className: cx('UserSelect-selectList-box') },
-                        React__default["default"].createElement("div", { className: cx('UserSelect-select-head') },
-                            React__default["default"].createElement("span", { className: cx('UserSelect-select-head-text') }, __('UserSelect.selected')),
-                            isEdit ? (React__default["default"].createElement("span", { className: cx('UserSelect-select-head-btnClear'), onClick: this.handleClear }, __('UserSelect.clear'))) : null),
+                            _J$X_(icons.Icon, { icon: "left-arrow", className: "icon" })),
+                        _J$X_("div", { className: cx('UserSelect-navbar-title') }, __('UserSelect.resultSort')),
+                        _J$X_("span", { className: cx('UserSelect-navbar-btnEdit'), onClick: this.handleEdit }, isEdit ? __('UserSelect.save') : __('UserSelect.edit'))),
+                    _J$X_("div", { className: cx('UserSelect-selectList-box') },
+                        _J$X_("div", { className: cx('UserSelect-select-head') },
+                            _J$X_("span", { className: cx('UserSelect-select-head-text') }, __('UserSelect.selected')),
+                            isEdit ? (_J$X_("span", { className: cx('UserSelect-select-head-btnClear'), onClick: this.handleClear }, __('UserSelect.clear'))) : null),
                         this.renderselectList(this.state.tempSelection))))));
     };
     UserSelect.defaultProps = {