amis-ui 6.0.0 → 6.2.0

package/esm/components/Select.js

@@ -1,10 +1,10 @@
 /**
- * amis-ui v6.0.0
- * Copyright 2018-2023 fex
+ * amis-ui v6.2.0
+ * Copyright 2018-2024 fex
  */
 
 import { __extends, __assign, __spreadArray, __read, __decorate, __metadata, __rest } from 'tslib';
-import { normalizeNodePath, isObject, findTree, getOptionValueBindField, getOptionValue, Overlay, PopOver, noop, ucFirst, autobind, themeable, localeable, uncontrollable, highlight } from 'amis-core';
+import { normalizeNodePath, isObject, findTree, getOptionValueBindField, getOptionValue, labelToString, Overlay, PopOver, noop, buildTestId, ucFirst, autobind, themeable, localeable, uncontrollable, highlight } from 'amis-core';
 import React__default from 'react';
 import isInteger from 'lodash/isInteger';
 import omit from 'lodash/omit';
@@ -438,11 +438,13 @@ var Select = /** @class */ (function (_super) {
             return __spreadArray(__spreadArray([], __read(selection.slice(0, maxVisibleCount_1)), false), [
                 (_b = {}, _b[labelKey] = "+ ".concat(selection.length - maxVisibleCount_1, " ..."), _b)
             ], false).map(function (item, index) {
+                var label = labelToString(item[labelKey]);
                 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
                                 .slice(maxVisibleCount_1, selection.length)
                                 .map(function (item, index) {
                                 var itemIndex = index + maxVisibleCount_1;
+                                var label = labelToString(item[labelKey]);
                                 return (React__default.createElement("div", { key: itemIndex, className: cx('Select-value', {
                                         'is-disabled': disabled,
                                         'is-invalid': showInvalidMatch
@@ -451,7 +453,7 @@ var Select = /** @class */ (function (_super) {
                                     }) },
                                     React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
                                         ? renderValueLabel(item)
-                                        : item[labelKey]),
+                                        : label),
                                     React__default.createElement("span", { className: cx('Select-valueIcon', {
                                             'is-disabled': disabled || item.disabled
                                         }), onClick: _this.removeItem.bind(_this, itemIndex) },
@@ -463,14 +465,14 @@ var Select = /** @class */ (function (_super) {
                             }), onClick: function (e) {
                                 return e.stopPropagation();
                             } },
-                            React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : item[labelKey]))));
+                            React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : label))));
                 }
-                return (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: item[labelKey], trigger: 'hover', key: index },
+                return (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: label, 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[labelKey]),
+                        React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : label),
                         React__default.createElement("span", { className: cx('Select-valueIcon', {
                                 'is-disabled': disabled || item.disabled
                             }), onClick: _this.removeItem.bind(_this, index) },
@@ -478,18 +480,19 @@ var Select = /** @class */ (function (_super) {
             });
         }
         return selection.map(function (item, index) {
+            var label = labelToString(item[labelKey]);
             if (!multiple) {
                 return (React__default.createElement("div", { className: cx('Select-value', {
                         'is-disabled': disabled,
                         'is-invalid': showInvalidMatch ? item.__unmatched : false
-                    }), key: index }, renderValueLabel ? renderValueLabel(item) : item[labelKey]));
+                    }), key: index }, renderValueLabel ? renderValueLabel(item) : label));
             }
-            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 },
+            return valuesNoWrap ? ("".concat(label).concat(index === selection.length - 1 ? '' : ' + ')) : (React__default.createElement(TooltipWrapper, { container: popOverContainer, placement: 'top', tooltip: label, 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[labelKey]),
+                    React__default.createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel ? renderValueLabel(item) : label),
                     React__default.createElement("span", { className: cx('Select-valueIcon', {
                             'is-disabled': disabled || item.disabled
                         }), onClick: _this.removeItem.bind(_this, index) },
@@ -500,7 +503,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, 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 _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, loading = _c.loading;
         var selection = this.state.selection;
         var checkedAll = false;
         var checkedPartial = false;
@@ -529,6 +532,7 @@ var Select = /** @class */ (function (_super) {
             if (hideSelected && checked) {
                 return null;
             }
+            var label = labelToString(item[labelField]);
             return (React__default.createElement("div", __assign({}, getItemProps({
                 key: typeof item.value === 'string'
                     ? "".concat(item.label, "-").concat(item.value)
@@ -559,17 +563,17 @@ var Select = /** @class */ (function (_super) {
                     inputValue: inputValue || '',
                     searchable: searchable,
                     index: index
-                }))) : multiple ? (React__default.createElement("div", { title: item[labelField], className: cx('Select-option-checkbox') },
+                }))) : multiple ? (React__default.createElement("div", { title: label, className: cx('Select-option-checkbox') },
                     React__default.createElement(Checkbox, { checked: checked, trueValue: item.value, onChange: function () {
                             _this.handleChange(item);
                         }, disabled: item.disabled, size: "sm" },
                         item.disabled
-                            ? item[labelField]
-                            : highlight(item[labelField], inputValue, cx('Select-option-hl')),
-                        item.tip))) : (React__default.createElement("span", { className: cx('Select-option-content'), title: typeof item[labelField] === 'string' ? item[labelField] : '' },
+                            ? label
+                            : highlight(label, inputValue, cx('Select-option-hl')),
+                        item.tip))) : (React__default.createElement("span", { className: cx('Select-option-content'), title: typeof label === 'string' ? label : '' },
                     item.disabled
-                        ? item[labelField]
-                        : highlight(item[labelField], inputValue, cx('Select-option-hl')),
+                        ? label
+                        : highlight(label, inputValue, cx('Select-option-hl')),
                     item.tip)),
                 editable ? (React__default.createElement("a", { "data-tooltip": __('Select.edit'), "data-position": "left" },
                     React__default.createElement(Icon, { icon: "pencil", className: "icon", onClick: function (e) { return _this.handleEditClick(e, item); } }))) : null,
@@ -594,22 +598,23 @@ var Select = /** @class */ (function (_super) {
                 }))),
                 (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) ? (React__default.createElement("a", { onClick: this.clearSearchValue, className: cx('Select-clear') },
                     React__default.createElement(Icon, { icon: "close", className: "icon" }))) : null)) : null,
-            multiple && valuesNoWrap ? (React__default.createElement("div", { className: cx('Select-option') },
-                __('Select.selected'),
-                "(",
-                selectionValues.length,
-                ")")) : null,
-            multiple && checkAll && filtedOptions.length ? (React__default.createElement("div", { className: cx('Select-option') },
-                React__default.createElement(Checkbox, { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: this.toggleCheckAll, size: "sm" }, __(checkAllLabel)))) : null,
-            creatable && !disabled ? (React__default.createElement("a", { className: cx('Select-addBtn'), onClick: this.handleAddClick },
-                React__default.createElement(Icon, { icon: "plus", className: "icon" }),
-                __(createBtnLabel))) : null,
-            filtedOptions.length ? (filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
-            React__default.createElement(VirtualList, { height: filtedOptions.length > 8
-                    ? 266
-                    : filtedOptions.length * virtualItemHeight, itemCount: filtedOptions.length, itemSize: virtualItemHeight, renderItem: renderItem })) : (filtedOptions.map(function (item, index) {
-                return renderItem({ index: index });
-            }))) : (React__default.createElement("div", { className: cx('Select-noResult') }, __(noResultsText)))));
+            loading ? (React__default.createElement("div", { className: cx('Select-noResult') }, __('loading'))) : (React__default.createElement(React__default.Fragment, null,
+                multiple && valuesNoWrap ? (React__default.createElement("div", { className: cx('Select-option') },
+                    __('Select.selected'),
+                    "(",
+                    selectionValues.length,
+                    ")")) : null,
+                multiple && checkAll && filtedOptions.length ? (React__default.createElement("div", { className: cx('Select-option') },
+                    React__default.createElement(Checkbox, { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: this.toggleCheckAll, size: "sm" }, __(checkAllLabel)))) : null,
+                creatable && !disabled ? (React__default.createElement("a", { className: cx('Select-addBtn'), onClick: this.handleAddClick },
+                    React__default.createElement(Icon, { icon: "plus", className: "icon" }),
+                    __(createBtnLabel))) : null,
+                filtedOptions.length ? (filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
+                React__default.createElement(VirtualList, { height: filtedOptions.length > 8
+                        ? 266
+                        : filtedOptions.length * virtualItemHeight, itemCount: filtedOptions.length, itemSize: virtualItemHeight, renderItem: renderItem })) : (filtedOptions.map(function (item, index) {
+                    return renderItem({ index: index });
+                }))) : (React__default.createElement("div", { className: cx('Select-noResult') }, __(noResultsText)))))));
         return mobileUI ? (React__default.createElement(SelectMobile, __assign({}, this.props, { highlightedIndex: highlightedIndex, isOpen: isOpen, getItemProps: getItemProps, getInputProps: getInputProps, selectedItem: selectedItem, onChange: function (selection) {
                 _this.setState({
                     isOpen: false
@@ -626,16 +631,18 @@ var Select = /** @class */ (function (_super) {
     };
     Select.prototype.render = function () {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, multiple = _a.multiple, valuesNoWrap = _a.valuesNoWrap, searchable = _a.searchable, inline = _a.inline, block = _a.block, className = _a.className, value = _a.value, loading = _a.loading, clearable = _a.clearable, labelField = _a.labelField, disabled = _a.disabled; _a.checkAll; var borderMode = _a.borderMode, mobileUI = _a.mobileUI, hasError = _a.hasError, loadingConfig = _a.loadingConfig;
+        var _a = this.props, cx = _a.classnames, multiple = _a.multiple, valuesNoWrap = _a.valuesNoWrap, searchable = _a.searchable, inline = _a.inline, block = _a.block, className = _a.className, value = _a.value, loading = _a.loading, clearable = _a.clearable, labelField = _a.labelField, disabled = _a.disabled; _a.checkAll; var borderMode = _a.borderMode, mobileUI = _a.mobileUI, hasError = _a.hasError, testid = _a.testid, loadingConfig = _a.loadingConfig;
         var selection = this.state.selection;
         var inputValue = this.state.inputValue;
         var resetValue = this.props.resetValue;
         return (React__default.createElement(Downshift, { selectedItem: selection, highlightedIndex: this.state.highlightedIndex, isOpen: this.state.isOpen, inputValue: inputValue, onChange: 
             /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/
-            multiple ? noop : this.handleChange, onStateChange: this.handleStateChange, itemToString: function (item) { return (item ? "".concat(item[labelField]) : ''); } }, function (options) {
+            multiple ? noop : this.handleChange, onStateChange: this.handleStateChange, itemToString: function (item) {
+                return item ? "".concat(labelToString(item[labelField])) : '';
+            } }, function (options) {
             var _a;
             var isOpen = options.isOpen;
-            return (React__default.createElement("div", { tabIndex: disabled ? -1 : 0, onKeyPress: _this.handleKeyPress, onClick: _this.toggle, onFocus: _this.onFocus, onBlur: _this.onBlur, className: cx("Select", (_a = {},
+            return (React__default.createElement("div", __assign({ tabIndex: disabled ? -1 : 0, onKeyPress: _this.handleKeyPress, onClick: _this.toggle, onFocus: _this.onFocus, onBlur: _this.onBlur }, buildTestId(testid), { className: cx("Select", (_a = {},
                     _a["Select--multi"] = multiple,
                     _a["Select--inline"] = inline,
                     _a["Select--block"] = block,
@@ -646,7 +653,7 @@ var Select = /** @class */ (function (_super) {
                     _a['is-mobile'] = mobileUI,
                     _a['is-error'] = hasError,
                     _a["Select--border".concat(ucFirst(borderMode))] = borderMode,
-                    _a), className) },
+                    _a), className) }),
                 React__default.createElement("div", { className: cx("Select-valueWrap", {
                         'Select-valuesNoWrap': valuesNoWrap
                     }) }, _this.renderValue(options)),

package/esm/components/SelectMobile.d.ts

@@ -10,6 +10,7 @@ interface Props extends SelectProps {
     isOpen: boolean;
     highlightedIndex: any;
     selectedItem: any;
+    visibleItemCount?: number;
     getInputProps: (...params: any) => any;
     getItemProps: (...params: any) => any;
     onClose: () => void;

package/esm/components/SelectMobile.js

@@ -1,6 +1,6 @@
 /**
- * amis-ui v6.0.0
- * Copyright 2018-2023 fex
+ * amis-ui v6.2.0
+ * Copyright 2018-2024 fex
  */
 
 import { __extends, __read, __assign, __decorate, __metadata } from 'tslib';
@@ -172,7 +172,7 @@ var SelectMobile = /** @class */ (function (_super) {
     SelectMobile.prototype.render = function () {
         var _this = this;
         var _a;
-        var _b = this.props, popOverContainer = _b.popOverContainer, options = _b.options, valueField = _b.valueField, labelField = _b.labelField, noResultsText = _b.noResultsText, loadOptions = _b.loadOptions, multiple = _b.multiple, valuesNoWrap = _b.valuesNoWrap, cx = _b.classnames, checkAll = _b.checkAll, checkAllLabel = _b.checkAllLabel, checkAllBySearch = _b.checkAllBySearch, searchable = _b.searchable, disabled = _b.disabled, searchPromptText = _b.searchPromptText, __ = _b.translate, hideSelected = _b.hideSelected, renderMenu = _b.renderMenu, _c = _b.virtualThreshold, virtualThreshold = _c === void 0 ? 100 : _c, isOpen = _b.isOpen, onClose = _b.onClose, getInputProps = _b.getInputProps, getItemProps = _b.getItemProps, selectedItem = _b.selectedItem;
+        var _b = this.props, popOverContainer = _b.popOverContainer, options = _b.options, valueField = _b.valueField, labelField = _b.labelField, noResultsText = _b.noResultsText, loadOptions = _b.loadOptions, multiple = _b.multiple, valuesNoWrap = _b.valuesNoWrap, cx = _b.classnames, checkAll = _b.checkAll, checkAllLabel = _b.checkAllLabel, checkAllBySearch = _b.checkAllBySearch, searchable = _b.searchable, disabled = _b.disabled, searchPromptText = _b.searchPromptText, visibleItemCount = _b.visibleItemCount, __ = _b.translate, hideSelected = _b.hideSelected, renderMenu = _b.renderMenu, _c = _b.virtualThreshold, virtualThreshold = _c === void 0 ? 100 : _c, isOpen = _b.isOpen, onClose = _b.onClose, getInputProps = _b.getInputProps, getItemProps = _b.getItemProps, selectedItem = _b.selectedItem;
         var selection = this.state.selection;
         var inputValue = this.state.inputValue;
         var checkedAll = false;
@@ -281,7 +281,7 @@ var SelectMobile = /** @class */ (function (_super) {
         return (React__default.createElement(PopUp, { className: cx("Select-popup"), container: popOverContainer, isShow: isOpen, showConfirm: true, onConfirm: this.onConfirm, onHide: onClose }, multiple ? (menu) : (React__default.createElement(Picker, { className: 'Select-picker', columns: {
                 options: filtedOptions,
                 optionRender: renderMenu
-            }, onChange: function (item) { return _this.handleChange(item); }, showToolbar: false, labelField: labelField, valueField: valueField, itemHeight: 40, value: [(_a = selection[0]) === null || _a === void 0 ? void 0 : _a[valueField]] }))));
+            }, onChange: function (item) { return _this.handleChange(item); }, showToolbar: false, labelField: labelField, valueField: valueField, itemHeight: 40, visibleItemCount: visibleItemCount, value: [(_a = selection[0]) === null || _a === void 0 ? void 0 : _a[valueField]] }))));
     };
     __decorate([
         autobind,