amis-ui 3.1.1 → 3.3.0

package/lib/components/SearchBox.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -9,21 +9,24 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var _ = require('lodash');
 var isInteger = require('lodash/isInteger');
 var debounce = require('lodash/debounce');
 var moment = require('moment');
 var amisCore = require('amis-core');
 var icons = require('./icons.js');
+var chain = require('lodash/chain');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
 var isInteger__default = /*#__PURE__*/_interopDefaultLegacy(isInteger);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
+var chain__default = /*#__PURE__*/_interopDefaultLegacy(chain);
 
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var historyDefaultOptions = {
     enable: false,
     key: 'amis:search_history',
@@ -143,7 +146,7 @@ var SearchBox = /** @class */ (function (_super) {
         var _a = this.getHistoryOptions(), key = _a.key, limit = _a.limit;
         try {
             var storageValues = localStorage.getItem(key);
-            return ___default["default"].chain(storageValues ? JSON.parse(storageValues) : [])
+            return chain__default["default"](storageValues ? JSON.parse(storageValues) : [])
                 .uniqBy('value')
                 .orderBy(['timestamp'], ['desc'])
                 .slice(0, limit)
@@ -179,7 +182,7 @@ var SearchBox = /** @class */ (function (_super) {
         }
         try {
             var _a = this.getHistoryOptions(), key = _a.key, limit = _a.limit;
-            var newDatasource = ___default["default"].chain(tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(datasource), false), [
+            var newDatasource = chain__default["default"](tslib.__spreadArray(tslib.__spreadArray([], tslib.__read(datasource), false), [
                 { value: value, timestamp: moment__default["default"]().unix() }
             ], false))
                 .orderBy(['timestamp'], ['desc'])
@@ -193,31 +196,32 @@ var SearchBox = /** @class */ (function (_super) {
         return datasource;
     };
     SearchBox.prototype.renderInput = function (isHistoryMode) {
-        var _a = this.props, cx = _a.classnames, active = _a.active, name = _a.name, className = _a.className, style = _a.style, disabled = _a.disabled, placeholder = _a.placeholder, mini = _a.mini, enhance = _a.enhance, clearable = _a.clearable, __ = _a.translate;
+        var _a = this.props, cx = _a.classnames, active = _a.active, name = _a.name, className = _a.className, style = _a.style, disabled = _a.disabled, placeholder = _a.placeholder, mini = _a.mini, enhance = _a.enhance, clearable = _a.clearable, useMobileUI = _a.useMobileUI, __ = _a.translate;
         var _b = this.state, isFocused = _b.isFocused, inputValue = _b.inputValue;
         var enable = this.getHistoryOptions().enable;
-        return (React__default["default"].createElement("div", { className: cx('SearchBox', enhance && 'SearchBox--enhance', !!isHistoryMode ? '' : className, disabled ? 'is-disabled' : '', isFocused ? 'is-focused' : '', !mini || active ? 'is-active' : '', { 'is-history': enable }), style: style },
-            React__default["default"].createElement("input", { name: name, ref: this.inputRef, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown, value: inputValue !== null && inputValue !== void 0 ? inputValue : '', disabled: disabled, placeholder: __(placeholder || 'placeholder.enter'), autoComplete: "off" }),
-            !mini && clearable && inputValue && !disabled ? (React__default["default"].createElement("div", { className: cx('SearchBox-clearable'), onClick: this.handleClear },
-                React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
-            !mini ? (React__default["default"].createElement("a", { className: cx('SearchBox-searchBtn'), onClick: this.handleSearch },
-                React__default["default"].createElement(icons.Icon, { icon: "search", className: "icon" }))) : active ? (React__default["default"].createElement("a", { className: cx('SearchBox-cancelBtn'), onClick: this.handleCancel },
-                React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))) : (React__default["default"].createElement("a", { className: cx('SearchBox-activeBtn'), onClick: this.handleActive },
-                React__default["default"].createElement(icons.Icon, { icon: "search", className: "icon" })))));
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        return (_J$X_("div", { className: cx('SearchBox', enhance && 'SearchBox--enhance', !!isHistoryMode ? '' : className, disabled ? 'is-disabled' : '', isFocused ? 'is-focused' : '', !mini || active ? 'is-active' : '', { 'is-history': enable }, { 'is-mobile': mobileUI }), style: style },
+            _J$X_("input", { name: name, ref: this.inputRef, onFocus: this.handleFocus, onBlur: this.handleBlur, onChange: this.handleChange, onKeyDown: this.handleKeyDown, value: inputValue !== null && inputValue !== void 0 ? inputValue : '', disabled: disabled, placeholder: __(placeholder || 'placeholder.enter'), autoComplete: "off" }),
+            !mini && clearable && inputValue && !disabled ? (_J$X_("div", { className: cx('SearchBox-clearable'), onClick: this.handleClear },
+                _J$X_(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
+            !mini ? (_J$X_("a", { className: cx('SearchBox-searchBtn'), onClick: this.handleSearch },
+                _J$X_(icons.Icon, { icon: "search", className: "icon" }))) : active ? (_J$X_("a", { className: cx('SearchBox-cancelBtn'), onClick: this.handleCancel },
+                _J$X_(icons.Icon, { icon: "close", className: "icon" }))) : (_J$X_("a", { className: cx('SearchBox-activeBtn'), onClick: this.handleActive },
+                _J$X_(icons.Icon, { icon: "search", className: "icon" })))));
     };
     SearchBox.prototype.renderTag = function (item, index) {
         var _this = this;
         var cx = this.props.classnames;
-        return (React__default["default"].createElement("span", { className: cx('Tag', 'SearchBox-history-tag'), key: index },
-            React__default["default"].createElement("span", { className: cx('SearchBox-history-tag-text'), onMouseDown: function (e) {
+        return (_J$X_("span", { className: cx('Tag', 'SearchBox-history-tag'), key: index },
+            _J$X_("span", { className: cx('SearchBox-history-tag-text'), onMouseDown: function (e) {
                     e.preventDefault();
                     _this.handleHistoryRecordSelect(item);
                 } }, item.value),
-            React__default["default"].createElement("span", { className: cx("SearchBox-history-tag-close"), onMouseDown: function (e) {
+            _J$X_("span", { className: cx("SearchBox-history-tag-close"), onMouseDown: function (e) {
                     e.preventDefault();
                     _this.removeHistoryRecord(item);
                 } },
-                React__default["default"].createElement(icons.Icon, { icon: "close", className: "icon" }))));
+                _J$X_(icons.Icon, { icon: "close", className: "icon" }))));
     };
     SearchBox.prototype.renderHitoryMode = function () {
         var _this = this;
@@ -225,18 +229,18 @@ var SearchBox = /** @class */ (function (_super) {
         var _b = this.state, isHistoryOpened = _b.isHistoryOpened, inputValue = _b.inputValue, historyRecords = _b.historyRecords;
         var dropdownClassName = this.getHistoryOptions().dropdownClassName;
         var showDropdown = isHistoryOpened && !inputValue && historyRecords.length > 0;
-        return (React__default["default"].createElement("div", { id: "searchbox-history", className: cx('SearchBox-history', className), style: style },
+        return (_J$X_("div", { id: "searchbox-history", className: cx('SearchBox-history', className), style: style },
             this.renderInput(true),
-            React__default["default"].createElement("div", { className: cx('SearchBox-history-dropdown', dropdownClassName, {
+            _J$X_("div", { className: cx('SearchBox-history-dropdown', dropdownClassName, {
                     'is-active': showDropdown
                 }) },
-                React__default["default"].createElement("header", null,
-                    React__default["default"].createElement("h4", null, __('searchHistory')),
-                    React__default["default"].createElement("a", { onMouseDown: function (e) {
+                _J$X_("header", null,
+                    _J$X_("h4", null, __('searchHistory')),
+                    _J$X_("a", { onMouseDown: function (e) {
                             e.preventDefault();
                             _this.clearHistoryRecords();
                         } }, __('clear'))),
-                React__default["default"].createElement("div", { className: cx('SearchBox-history-content') }, historyRecords.map(function (item, index) { return _this.renderTag(item, index); })))));
+                _J$X_("div", { className: cx('SearchBox-history-content') }, historyRecords.map(function (item, index) { return _this.renderTag(item, index); })))));
     };
     SearchBox.prototype.render = function () {
         var enable = this.getHistoryOptions().enable;