amis-ui 3.1.1 → 3.3.0

package/lib/components/Select.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -24,8 +24,8 @@ var Checkbox = require('./Checkbox.js');
 var Input = require('./Input.js');
 var Spinner = require('./Spinner.js');
 var WithRemoteConfig = require('./WithRemoteConfig.js');
-var PopUp = require('./PopUp.js');
 var PopOverContainer = require('./PopOverContainer.js');
+var SelectMobile = require('./SelectMobile.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,13 +36,12 @@ var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 var isPlainObject__default = /*#__PURE__*/_interopDefaultLegacy(isPlainObject);
 
-/**
- * @file Select
- * @description
- * @author fex
- * @date 2017-11-07
- */
-var defaultFilterOption = function (options, inputValue, option) { return matchSorter.matchSorter(options, inputValue, option); };
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
+var defaultFilterOption = function (options, inputValue, option) {
+    return matchSorter.matchSorter(options, inputValue, tslib.__assign({ threshold: matchSorter.matchSorter.rankings.CONTAINS }, option));
+};
 function value2array(value, props, enableNodePath) {
     if (enableNodePath === void 0) { enableNodePath = false; }
     if (enableNodePath) {
@@ -416,10 +415,10 @@ var Select = /** @class */ (function (_super) {
     Select.prototype.renderValue = function (_a) {
         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, __ = _b.translate;
+        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 selection = this.state.selection;
         if (!selection.length) {
-            return (React__default["default"].createElement("div", { key: "placeholder", className: cx('Select-placeholder') }, __(placeholder)));
+            return (_J$X_("div", { key: "placeholder", className: cx('Select-placeholder') }, __(placeholder)));
         }
         if (multiple &&
             maxTagCount != null &&
@@ -432,69 +431,69 @@ var Select = /** @class */ (function (_super) {
                 { label: "+ ".concat(selection.length - maxVisibleCount_1, " ...") }
             ], false).map(function (item, index) {
                 if (index === maxVisibleCount_1) {
-                    return (React__default["default"].createElement(TooltipWrapper["default"], { key: selection.length, tooltip: tslib.__assign(tslib.__assign({}, tooltipProps_1), { children: function () { return (React__default["default"].createElement("div", { className: cx('Select-overflow-wrapper') }, selection
+                    return (_J$X_(TooltipWrapper["default"], { key: selection.length, container: popOverContainer, tooltip: tslib.__assign(tslib.__assign({}, tooltipProps_1), { children: function () { return (_J$X_("div", { className: cx('Select-overflow-wrapper') }, selection
                                 .slice(maxVisibleCount_1, selection.length)
                                 .map(function (item, index) {
                                 var itemIndex = index + maxVisibleCount_1;
-                                return (React__default["default"].createElement("div", { key: itemIndex, className: cx('Select-value', {
+                                return (_J$X_("div", { key: itemIndex, className: cx('Select-value', {
                                         'is-disabled': disabled,
                                         'is-invalid': showInvalidMatch
                                             ? item.__unmatched
                                             : false
                                     }) },
-                                    React__default["default"].createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
+                                    _J$X_("span", { className: cx('Select-valueLabel') }, renderValueLabel
                                         ? renderValueLabel(item)
                                         : item[labelField || 'label']),
-                                    React__default["default"].createElement("span", { className: cx('Select-valueIcon', {
+                                    _J$X_("span", { className: cx('Select-valueIcon', {
                                             'is-disabled': disabled || item.disabled
                                         }), onClick: _this.removeItem.bind(_this, itemIndex) },
-                                        React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))));
+                                        _J$X_(icons.Icon, { icon: "close", className: "icon" }))));
                             }))); } }) },
-                        React__default["default"].createElement("div", { className: cx('Select-value', {
+                        _J$X_("div", { className: cx('Select-value', {
                                 'is-disabled': disabled,
                                 'is-invalid': showInvalidMatch ? item.__unmatched : false
                             }), onClick: function (e) {
                                 return e.stopPropagation();
                             } },
-                            React__default["default"].createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
+                            _J$X_("span", { className: cx('Select-valueLabel') }, renderValueLabel
                                 ? renderValueLabel(item)
                                 : item[labelField || 'label']))));
                 }
-                return (React__default["default"].createElement(TooltipWrapper["default"], { placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
-                    React__default["default"].createElement("div", { className: cx('Select-value', {
+                return (_J$X_(TooltipWrapper["default"], { container: popOverContainer, placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
+                    _J$X_("div", { className: cx('Select-value', {
                             'is-disabled': disabled,
                             'is-invalid': showInvalidMatch ? item.__unmatched : false
                         }) },
-                        React__default["default"].createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
+                        _J$X_("span", { className: cx('Select-valueLabel') }, renderValueLabel
                             ? renderValueLabel(item)
                             : item[labelField || 'label']),
-                        React__default["default"].createElement("span", { className: cx('Select-valueIcon', {
+                        _J$X_("span", { className: cx('Select-valueIcon', {
                                 'is-disabled': disabled || item.disabled
                             }), onClick: _this.removeItem.bind(_this, index) },
-                            React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" })))));
+                            _J$X_(icons.Icon, { icon: "close", className: "icon" })))));
             });
         }
         return selection.map(function (item, index) {
             if (!multiple) {
-                return (React__default["default"].createElement("div", { className: cx('Select-value', {
+                return (_J$X_("div", { className: cx('Select-value', {
                         'is-disabled': disabled,
                         'is-invalid': showInvalidMatch ? item.__unmatched : false
                     }), key: index }, renderValueLabel
                     ? renderValueLabel(item)
                     : item[labelField || 'label']));
             }
-            return valuesNoWrap ? ("".concat(item[labelField || 'label']).concat(index === selection.length - 1 ? '' : ' + ')) : (React__default["default"].createElement(TooltipWrapper["default"], { placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
-                React__default["default"].createElement("div", { className: cx('Select-value', {
+            return valuesNoWrap ? ("".concat(item[labelField || 'label']).concat(index === selection.length - 1 ? '' : ' + ')) : (_J$X_(TooltipWrapper["default"], { container: popOverContainer, placement: 'top', tooltip: item[labelField || 'label'], trigger: 'hover', key: index },
+                _J$X_("div", { className: cx('Select-value', {
                         'is-disabled': disabled,
                         'is-invalid': showInvalidMatch ? item.__unmatched : false
                     }) },
-                    React__default["default"].createElement("span", { className: cx('Select-valueLabel') }, renderValueLabel
+                    _J$X_("span", { className: cx('Select-valueLabel') }, renderValueLabel
                         ? renderValueLabel(item)
                         : item[labelField || 'label']),
-                    React__default["default"].createElement("span", { className: cx('Select-valueIcon', {
+                    _J$X_("span", { className: cx('Select-valueIcon', {
                             'is-disabled': disabled || item.disabled
                         }), onClick: _this.removeItem.bind(_this, index) },
-                        React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" })))));
+                        _J$X_(icons.Icon, { icon: "close", className: "icon" })))));
         });
     };
     Select.prototype.renderOuter = function (_a) {
@@ -530,7 +529,7 @@ var Select = /** @class */ (function (_super) {
             if (hideSelected && checked) {
                 return null;
             }
-            return (React__default["default"].createElement("div", tslib.__assign({}, getItemProps({
+            return (_J$X_("div", tslib.__assign({}, getItemProps({
                 key: typeof item.value === 'string'
                     ? "".concat(item.label, "-").concat(item.value)
                     : index,
@@ -542,7 +541,7 @@ var Select = /** @class */ (function (_super) {
                     'is-highlight': highlightedIndex === index,
                     'is-active': checked
                 }) }),
-                renderMenu ? (multiple ? (React__default["default"].createElement(Checkbox["default"], { checked: checked, trueValue: item.value, onChange: function () {
+                renderMenu ? (multiple ? (_J$X_(Checkbox["default"], { checked: checked, trueValue: item.value, onChange: function () {
                         _this.handleChange(item);
                     }, disabled: item.disabled }, renderMenu(item, {
                     multiple: multiple,
@@ -560,33 +559,33 @@ var Select = /** @class */ (function (_super) {
                     inputValue: inputValue || '',
                     searchable: searchable,
                     index: index
-                }))) : multiple ? (React__default["default"].createElement("div", { title: item[labelField], className: cx('Select-option-checkbox') },
-                    React__default["default"].createElement(Checkbox["default"], { checked: checked, trueValue: item.value, onChange: function () {
+                }))) : multiple ? (_J$X_("div", { title: item[labelField], className: cx('Select-option-checkbox') },
+                    _J$X_(Checkbox["default"], { checked: checked, trueValue: item.value, onChange: function () {
                             _this.handleChange(item);
                         }, disabled: item.disabled, size: "sm" },
                         item.disabled
                             ? item[labelField]
                             : amisCore.highlight(item[labelField], inputValue, cx('Select-option-hl')),
-                        item.tip))) : (React__default["default"].createElement("span", { className: cx('Select-option-content'), title: typeof item[labelField] === 'string' ? item[labelField] : '' },
+                        item.tip))) : (_J$X_("span", { className: cx('Select-option-content'), title: typeof item[labelField] === 'string' ? item[labelField] : '' },
                     item.disabled
                         ? item[labelField]
                         : amisCore.highlight(item[labelField], inputValue, cx('Select-option-hl')),
                     item.tip)),
-                editable ? (React__default["default"].createElement("a", { "data-tooltip": __('Select.edit'), "data-position": "left" },
-                    React__default["default"].createElement(icons.Icon, { icon: "pencil", className: "icon", onClick: function (e) { return _this.handleEditClick(e, item); } }))) : null,
-                removable ? (React__default["default"].createElement("a", { "data-tooltip": __('Select.clear'), "data-position": "left" },
-                    React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon", onClick: function (e) { return _this.handleDeleteClick(e, item); } }))) : null));
+                editable ? (_J$X_("a", { "data-tooltip": __('Select.edit'), "data-position": "left" },
+                    _J$X_(icons.Icon, { icon: "pencil", className: "icon", onClick: function (e) { return _this.handleEditClick(e, item); } }))) : null,
+                removable ? (_J$X_("a", { "data-tooltip": __('Select.clear'), "data-position": "left" },
+                    _J$X_(icons.Icon, { icon: "close", className: "icon", onClick: function (e) { return _this.handleDeleteClick(e, item); } }))) : null));
         };
         var mobileUI = amisCore.isMobile() && useMobileUI;
-        var menu = (React__default["default"].createElement("div", { ref: this.menu, className: cx('Select-menu', {
+        var menu = (_J$X_("div", { ref: this.menu, className: cx('Select-menu', {
                 'Select--longlist': enableVirtualRender,
                 'is-mobile': mobileUI
             }) },
-            searchable ? (React__default["default"].createElement("div", { className: cx("Select-input", {
+            searchable ? (_J$X_("div", { className: cx("Select-input", {
                     'is-focused': this.state.isFocused
                 }) },
-                React__default["default"].createElement(icons.Icon, { icon: "search", className: "icon" }),
-                React__default["default"].createElement(Input["default"], tslib.__assign({}, getInputProps({
+                _J$X_(icons.Icon, { icon: "search", className: "icon" }),
+                _J$X_(Input["default"], tslib.__assign({}, getInputProps({
                     onFocus: this.onFocus,
                     onBlur: this.onBlur,
                     disabled: disabled,
@@ -594,27 +593,32 @@ var Select = /** @class */ (function (_super) {
                     onChange: this.handleInputChange,
                     ref: this.inputRef
                 }))),
-                (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) ? (React__default["default"].createElement("a", { onClick: this.clearSearchValue, className: cx('Select-clear') },
-                    React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))) : null)) : null,
-            multiple && valuesNoWrap ? (React__default["default"].createElement("div", { className: cx('Select-option') },
+                (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) ? (_J$X_("a", { onClick: this.clearSearchValue, className: cx('Select-clear') },
+                    _J$X_(icons.Icon, { icon: "close", className: "icon" }))) : null)) : null,
+            multiple && valuesNoWrap ? (_J$X_("div", { className: cx('Select-option') },
                 "\u5DF2\u9009\u62E9(",
                 selectionValues.length,
                 ")")) : null,
-            multiple && checkAll && filtedOptions.length ? (React__default["default"].createElement("div", { className: cx('Select-option') },
-                React__default["default"].createElement(Checkbox["default"], { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: this.toggleCheckAll, size: "sm" }, __(checkAllLabel)))) : null,
-            creatable && !disabled ? (React__default["default"].createElement("a", { className: cx('Select-addBtn'), onClick: this.handleAddClick },
-                React__default["default"].createElement(icons.Icon, { icon: "plus", className: "icon" }),
+            multiple && checkAll && filtedOptions.length ? (_J$X_("div", { className: cx('Select-option') },
+                _J$X_(Checkbox["default"], { checked: checkedPartial, partial: checkedPartial && !checkedAll, onChange: this.toggleCheckAll, size: "sm" }, __(checkAllLabel)))) : null,
+            creatable && !disabled ? (_J$X_("a", { className: cx('Select-addBtn'), onClick: this.handleAddClick },
+                _J$X_(icons.Icon, { icon: "plus", className: "icon" }),
                 __(createBtnLabel))) : null,
             filtedOptions.length ? (filtedOptions.length > virtualThreshold ? ( // 较多数据时才启用 virtuallist，避免滚动条问题
-            React__default["default"].createElement(index["default"], { height: filtedOptions.length > 8
+            _J$X_(index["default"], { 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["default"].createElement("div", { className: cx('Select-noResult') }, __(noResultsText)))));
-        return mobileUI ? (React__default["default"].createElement(PopUp["default"], { className: cx("Select-popup"), container: popOverContainer, isShow: this.state.isOpen, onHide: this.close }, menu)) : (React__default["default"].createElement(amisCore.Overlay, { container: popOverContainer || this.getTarget, containerSelector: popOverContainerSelector, target: this.getTarget, placement: overlayPlacement === 'auto'
+            }))) : (_J$X_("div", { className: cx('Select-noResult') }, __(noResultsText)))));
+        return mobileUI ? (_J$X_(SelectMobile["default"], tslib.__assign({}, this.props, { highlightedIndex: highlightedIndex, isOpen: isOpen, getItemProps: getItemProps, getInputProps: getInputProps, selectedItem: selectedItem, onChange: function (selection) {
+                _this.setState({
+                    isOpen: false
+                });
+                _this.props.onChange(selection);
+            }, onClose: this.close }))) : (_J$X_(amisCore.Overlay, { container: popOverContainer || this.getTarget, containerSelector: popOverContainerSelector, target: this.getTarget, placement: overlayPlacement === 'auto'
                 ? PopOverContainer.PopOverContainer.alignToPlacement(overlay)
                 : overlayPlacement, show: true },
-            React__default["default"].createElement(amisCore.PopOver, { overlay: true, className: cx('Select-popover'), style: {
+            _J$X_(amisCore.PopOver, { overlay: true, className: cx('Select-popover'), style: {
                     width: (overlay &&
                         PopOverContainer.PopOverContainer.calcOverlayWidth(overlay, (_b = this.target) === null || _b === void 0 ? void 0 : _b.offsetWidth)) ||
                         (this.target ? this.target.offsetWidth : 'auto')
@@ -627,12 +631,12 @@ var Select = /** @class */ (function (_super) {
         var inputValue = this.state.inputValue;
         var resetValue = this.props.resetValue;
         var mobileUI = useMobileUI && amisCore.isMobile();
-        return (React__default["default"].createElement(Downshift__default["default"], { selectedItem: selection, highlightedIndex: this.state.highlightedIndex, isOpen: this.state.isOpen, inputValue: inputValue, onChange: 
+        return (_J$X_(Downshift__default["default"], { selectedItem: selection, highlightedIndex: this.state.highlightedIndex, isOpen: this.state.isOpen, inputValue: inputValue, onChange: 
             /*展示 Checkbox 的时候，会出发多次 onChange 原因待查*/
             multiple ? amisCore.noop : this.handleChange, onStateChange: this.handleStateChange, itemToString: function (item) { return (item ? "".concat(item[labelField]) : ''); } }, function (options) {
             var _a;
             var isOpen = options.isOpen;
-            return (React__default["default"].createElement("div", { tabIndex: disabled ? -1 : 0, onKeyPress: _this.handleKeyPress, onClick: _this.toggle, onFocus: _this.onFocus, onBlur: _this.onBlur, className: cx("Select", (_a = {},
+            return (_J$X_("div", { tabIndex: disabled ? -1 : 0, onKeyPress: _this.handleKeyPress, onClick: _this.toggle, onFocus: _this.onFocus, onBlur: _this.onBlur, className: cx("Select", (_a = {},
                     _a["Select--multi"] = multiple,
                     _a["Select--inline"] = inline,
                     _a["Select--block"] = block,
@@ -644,18 +648,18 @@ var Select = /** @class */ (function (_super) {
                     _a['is-error'] = hasError,
                     _a["Select--border".concat(amisCore.ucFirst(borderMode))] = borderMode,
                     _a), className) },
-                React__default["default"].createElement("div", { className: cx("Select-valueWrap", {
+                _J$X_("div", { className: cx("Select-valueWrap", {
                         'Select-valuesNoWrap': valuesNoWrap
                     }) }, _this.renderValue(options)),
                 clearable &&
                     !disabled &&
                     (Array.isArray(value)
                         ? value.length
-                        : value != null && value !== resetValue) ? (React__default["default"].createElement("a", { onClick: _this.clearValue, className: cx('Select-clear') },
-                    React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
-                loading ? (React__default["default"].createElement(Spinner["default"], { show: true, icon: "reload", size: "sm", spinnerClassName: cx('Select-spinner'), loadingConfig: loadingConfig })) : null,
-                React__default["default"].createElement("span", { className: cx('Select-arrow') },
-                    React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon" })),
+                        : value != null && value !== resetValue) ? (_J$X_("a", { onClick: _this.clearValue, className: cx('Select-clear') },
+                    _J$X_(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
+                loading ? (_J$X_(Spinner["default"], { show: true, icon: "reload", size: "sm", spinnerClassName: cx('Select-spinner'), loadingConfig: loadingConfig })) : null,
+                _J$X_("span", { className: cx('Select-arrow') },
+                    _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" })),
                 isOpen ? _this.renderOuter(options) : null));
         }));
     };
@@ -823,7 +827,7 @@ var SelectWithRemoteOptions = WithRemoteConfig.withRemoteConfig({
     }
     class_1.prototype.render = function () {
         var _a = this.props, loading = _a.loading, config = _a.config; _a.deferLoad; _a.updateConfig; var rest = tslib.__rest(_a, ["loading", "config", "deferLoad", "updateConfig"]);
-        return (React__default["default"].createElement(EnhancedSelect, tslib.__assign({}, rest, { options: config || rest.options || [], loading: loading })));
+        return (_J$X_(EnhancedSelect, tslib.__assign({}, rest, { options: config || rest.options || [], loading: loading })));
     };
     return class_1;
 }(React__default["default"].Component)));

package/lib/components/SelectMobile.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Option, SelectProps } from './Select';
+interface SelectState {
+    isFocused: boolean;
+    inputValue: string;
+    itemHeight: number;
+    selection: Array<Option>;
+}
+interface Props extends SelectProps {
+    isOpen: boolean;
+    highlightedIndex: any;
+    selectedItem: any;
+    getInputProps: (...params: any) => any;
+    getItemProps: (...params: any) => any;
+    onClose: () => void;
+}
+export default class SelectMobile extends React.Component<Props, SelectState> {
+    input: HTMLInputElement;
+    target: HTMLElement;
+    constructor(props: Props);
+    handleChange([item]: any): void;
+    handleInputChange(evt: React.ChangeEvent<HTMLInputElement>): void;
+    getTarget(): HTMLElement;
+    inputRef(ref: HTMLInputElement): void;
+    toggleCheckAll(): void;
+    handleAddClick(): void;
+    handleEditClick(e: Event, item: any): void;
+    handleDeleteClick(e: Event, item: any): void;
+    onFocus(e: any): void;
+    onBlur(e: any): void;
+    focus(): void;
+    blur(): void;
+    clearSearchValue(): void;
+    onConfirm(): void;
+    render(): React.JSX.Element;
+}
+export {};