amis-ui 3.5.2 → 3.6.0

package/esm/components/Select.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */
 
@@ -208,11 +208,14 @@ var Select = /** @class */ (function (_super) {
     };
     Select.prototype.open = function () {
         var _this = this;
-        this.props.disabled ||
-            this.setState({
-                isOpen: true,
-                highlightedIndex: -1
-            }, function () { return setTimeout(_this.focus, 500); });
+        var _a = this.props, disabled = _a.disabled, loading = _a.loading;
+        if (disabled || loading) {
+            return;
+        }
+        this.setState({
+            isOpen: true,
+            highlightedIndex: -1
+        }, function () { return setTimeout(_this.focus, 500); });
     };
     Select.prototype.close = function () {
         this.setState({
@@ -228,26 +231,26 @@ var Select = /** @class */ (function (_super) {
     };
     Select.prototype.toggle = function (e) {
         var _this = this;
-        if (e &&
+        var _a = this.props, disabled = _a.disabled, loading = _a.loading;
+        if ((e &&
             this.menu.current &&
-            this.menu.current.contains(e.target)) {
+            this.menu.current.contains(e.target)) ||
+            disabled ||
+            loading) {
             return;
         }
-        this.props.disabled ||
-            this.setState({
-                isOpen: !this.state.isOpen,
-                highlightedIndex: -1
-            }, this.state.isOpen ? undefined : function () { return setTimeout(_this.focus, 500); });
+        this.setState({
+            isOpen: !this.state.isOpen,
+            highlightedIndex: -1
+        }, this.state.isOpen ? undefined : function () { return setTimeout(_this.focus, 500); });
     };
     Select.prototype.onFocus = function (e) {
-        var simpleValue = this.props.simpleValue;
-        var selection = this.state.selection;
+        var _a = this.props, simpleValue = _a.simpleValue, disabled = _a.disabled, loading = _a.loading;
+        var _b = this.state, selection = _b.selection, isOpen = _b.isOpen;
         var value = simpleValue ? selection.map(function (item) { return item.value; }) : selection;
-        this.props.disabled ||
-            this.state.isOpen ||
-            this.setState({
-                isFocused: true
-            }, this.focus);
+        if (!disabled && !loading && !isOpen) {
+            this.setState({ isFocused: true }, this.focus);
+        }
         this.props.onFocus &&
             this.props.onFocus(__assign(__assign({}, e), { value: value }));
     };
@@ -325,9 +328,16 @@ var Select = /** @class */ (function (_super) {
             this.handleChange(selectItem);
         }
     };
+    /**
+     * DownShift中ESC按键动作会触发change事件，此时selectItem为null，需要单独处理，参考：
+     * {@link https://github.com/downshift-js/downshift/issues/719 GitHub Issue #719}
+     */
     Select.prototype.handleChange = function (selectItem) {
         var _a = this.props, onChange = _a.onChange, multiple = _a.multiple, simpleValue = _a.simpleValue, valueField = _a.valueField;
         var selection = this.state.selection;
+        if (selectItem == null) {
+            return;
+        }
         if (multiple) {
             var selectionValues = selection.map(function (item) { return item[valueField]; });
             selection = selection.concat();
@@ -409,10 +419,12 @@ var Select = /** @class */ (function (_super) {
         onDelete && onDelete(item);
     };
     Select.prototype.renderValue = function (_a) {
+        var _b;
         var _this = this;
         _a.inputValue; _a.isOpen;
-        var _b = this.props, cx = _b.classnames, multiple = _b.multiple, valuesNoWrap = _b.valuesNoWrap, placeholder = _b.placeholder, labelField = _b.labelField, disabled = _b.disabled, maxTagCount = _b.maxTagCount, overflowTagPopover = _b.overflowTagPopover, showInvalidMatch = _b.showInvalidMatch, renderValueLabel = _b.renderValueLabel, popOverContainer = _b.popOverContainer, __ = _b.translate;
+        var _c = this.props, cx = _c.classnames, multiple = _c.multiple, valuesNoWrap = _c.valuesNoWrap, placeholder = _c.placeholder, labelField = _c.labelField, disabled = _c.disabled, maxTagCount = _c.maxTagCount, overflowTagPopover = _c.overflowTagPopover, showInvalidMatch = _c.showInvalidMatch, renderValueLabel = _c.renderValueLabel, popOverContainer = _c.popOverContainer, __ = _c.translate;
         var selection = this.state.selection;
+        var labelKey = labelField || 'label';
         if (!selection.length) {
             return (React__default.createElement("div", { key: "placeholder", className: cx('Select-placeholder') }, __(placeholder)));
         }
@@ -424,7 +436,7 @@ var Select = /** @class */ (function (_super) {
             var maxVisibleCount_1 = Math.floor(maxTagCount);
             var tooltipProps_1 = __assign({ placement: 'top', trigger: 'hover', showArrow: false, offset: [0, -10], tooltipClassName: cx('Select-overflow', overflowTagPopover === null || overflowTagPopover === void 0 ? void 0 : overflowTagPopover.tooltipClassName) }, omit(overflowTagPopover, ['children', 'content', 'tooltipClassName']));
             return __spreadArray(__spreadArray([], __read(selection.slice(0, maxVisibleCount_1)), false), [
-                { label: "+ ".concat(selection.length - maxVisibleCount_1, " ...") }
+                (_b = {}, _b[labelKey] = "+ ".concat(selection.length - maxVisibleCount_1, " ..."), _b)
             ], false).map(function (item, index) {
                 if (index === maxVisibleCount_1) {
                     return (React__default.createElement(TooltipWrapper, { key: selection.length, container: popOverContainer, tooltip: __assign(__assign({}, tooltipProps_1), { children: function () { return (React__default.createElement("div", { className: cx('Select-overflow-wrapper') }, selection
@@ -439,7 +451,7 @@ var Select = /** @class */ (function (_super) {
                                     }) },
                                     React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
                                         ? renderValueLabel(item)
-                                        : item[labelField || 'label']),
+                                        : item[labelKey]),
                                     React__default.createElement("span", { className: cx('Select-valueIcon', {
                                             'is-disabled': disabled || item.disabled
                                         }), onClick: _this.removeItem.bind(_this, itemIndex) },
@@ -451,18 +463,14 @@ var Select = /** @class */ (function (_super) {
                             }), onClick: function (e) {
                                 return e.stopPropagation();
                             } },
-                            React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
-                                ? renderValueLabel(item)
-                                : item[labelField || 'label']))));
+                            React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : item[labelKey]))));
                 }
-                return (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
+                return (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: item[labelKey], trigger: 'hover', key: index },
                     React__default.createElement("div", { className: cx('Select-value', {
                             'is-disabled': disabled,
                             'is-invalid': showInvalidMatch ? item.__unmatched : false
                         }) },
-                        React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
-                            ? renderValueLabel(item)
-                            : item[labelField || 'label']),
+                        React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : item[labelKey]),
                         React__default.createElement("span", { className: cx('Select-valueIcon', {
                                 'is-disabled': disabled || item.disabled
                             }), onClick: _this.removeItem.bind(_this, index) },
@@ -474,18 +482,14 @@ var Select = /** @class */ (function (_super) {
                 return (React__default.createElement("div", { className: cx('Select-value', {
                         'is-disabled': disabled,
                         'is-invalid': showInvalidMatch ? item.__unmatched : false
-                    }), key: index }, renderValueLabel
-                    ? renderValueLabel(item)
-                    : item[labelField || 'label']));
+                    }), key: index }, renderValueLabel ? renderValueLabel(item) : item[labelKey]));
             }
-            return valuesNoWrap ? ("".concat(item[labelField || 'label']).concat(index === selection.length - 1 ? '' : ' + ')) : (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
+            return valuesNoWrap ? ("".concat(item[labelKey]).concat(index === selection.length - 1 ? '' : ' + ')) : (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: item[labelKey], trigger: 'hover', key: index },
                 React__default.createElement("div", { className: cx('Select-value', {
                         'is-disabled': disabled,
                         'is-invalid': showInvalidMatch ? item.__unmatched : false
                     }) },
-                    React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
-                        ? renderValueLabel(item)
-                        : item[labelField || 'label']),
+                    React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : item[labelKey]),
                     React__default.createElement("span", { className: cx('Select-valueIcon', {
                             'is-disabled': disabled || item.disabled
                         }), onClick: _this.removeItem.bind(_this, index) },
@@ -496,7 +500,7 @@ var Select = /** @class */ (function (_super) {
         var _this = this;
         var _b;
         var selectedItem = _a.selectedItem, getItemProps = _a.getItemProps, highlightedIndex = _a.highlightedIndex, inputValue = _a.inputValue, isOpen = _a.isOpen; _a.getToggleButtonProps; var getInputProps = _a.getInputProps;
-        var _c = this.props, popOverContainer = _c.popOverContainer, options = _c.options; _c.value; var valueField = _c.valueField, labelField = _c.labelField, noResultsText = _c.noResultsText, loadOptions = _c.loadOptions, creatable = _c.creatable, multiple = _c.multiple, valuesNoWrap = _c.valuesNoWrap, cx = _c.classnames; _c.popoverClassName; var popOverContainerSelector = _c.popOverContainerSelector, checkAll = _c.checkAll, checkAllLabel = _c.checkAllLabel, checkAllBySearch = _c.checkAllBySearch, searchable = _c.searchable, createBtnLabel = _c.createBtnLabel, disabled = _c.disabled, searchPromptText = _c.searchPromptText, editable = _c.editable, removable = _c.removable, overlayPlacement = _c.overlayPlacement, __ = _c.translate, hideSelected = _c.hideSelected, renderMenu = _c.renderMenu; _c.mobileClassName; var _d = _c.virtualThreshold, virtualThreshold = _d === void 0 ? 100 : _d, mobileUI = _c.mobileUI, _e = _c.filterOption, filterOption = _e === void 0 ? defaultFilterOption : _e, overlay = _c.overlay;
+        var _c = this.props, popOverContainer = _c.popOverContainer, options = _c.options, valueField = _c.valueField, labelField = _c.labelField, noResultsText = _c.noResultsText, loadOptions = _c.loadOptions, creatable = _c.creatable, multiple = _c.multiple, valuesNoWrap = _c.valuesNoWrap, cx = _c.classnames, popoverClassName = _c.popoverClassName, popOverContainerSelector = _c.popOverContainerSelector, checkAll = _c.checkAll, checkAllLabel = _c.checkAllLabel, checkAllBySearch = _c.checkAllBySearch, searchable = _c.searchable, createBtnLabel = _c.createBtnLabel, disabled = _c.disabled, searchPromptText = _c.searchPromptText, editable = _c.editable, removable = _c.removable, overlayPlacement = _c.overlayPlacement, __ = _c.translate, hideSelected = _c.hideSelected, renderMenu = _c.renderMenu; _c.mobileClassName; var _d = _c.virtualThreshold, virtualThreshold = _d === void 0 ? 100 : _d, mobileUI = _c.mobileUI, _e = _c.filterOption, filterOption = _e === void 0 ? defaultFilterOption : _e, overlay = _c.overlay;
         var selection = this.state.selection;
         var checkedAll = false;
         var checkedPartial = false;
@@ -614,7 +618,7 @@ var Select = /** @class */ (function (_super) {
             }, onClose: this.close }))) : (React__default.createElement(Overlay, { container: popOverContainer || this.getTarget, containerSelector: popOverContainerSelector, target: this.getTarget, placement: overlayPlacement === 'auto'
                 ? PopOverContainer.alignToPlacement(overlay)
                 : overlayPlacement, show: true },
-            React__default.createElement(PopOver, { overlay: true, className: cx('Select-popover'), style: {
+            React__default.createElement(PopOver, { overlay: true, className: cx('Select-popover', popoverClassName), style: {
                     width: (overlay &&
                         PopOverContainer.calcOverlayWidth(overlay, (_b = this.target) === null || _b === void 0 ? void 0 : _b.offsetWidth)) ||
                         (this.target ? this.target.offsetWidth : 'auto')
@@ -638,7 +642,7 @@ var Select = /** @class */ (function (_super) {
                     _a["Select--searchable"] = searchable,
                     _a['is-opened'] = isOpen,
                     _a['is-focused'] = _this.state.isFocused,
-                    _a['is-disabled'] = disabled,
+                    _a['is-disabled'] = disabled || loading,
                     _a['is-mobile'] = mobileUI,
                     _a['is-error'] = hasError,
                     _a["Select--border".concat(ucFirst(borderMode))] = borderMode,

package/esm/components/SelectMobile.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.5.2
+ * amis-ui v3.6.0
  * Copyright 2018-2023 fex
  */