amis-ui 2.0.0 → 2.1.0

package/lib/components/SearchBox.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.0
+ * amis-ui v2.1.0
  * Copyright 2018-2022 fex
  */
 
@@ -9,32 +9,56 @@ 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 debounce = require('lodash/debounce');
 
 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 historyDefaultOptions = {
+    enable: false,
+    key: 'amis:search_history',
+    limit: 5,
+    dropdownClassName: ''
+};
 var SearchBox = /** @class */ (function (_super) {
     tslib.__extends(SearchBox, _super);
     function SearchBox() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        var _this = this;
+        var _a;
+        _this = _super.apply(this, arguments) || this;
         _this.inputRef = React__default["default"].createRef();
         _this.state = {
-            isFocused: false
+            isHistoryOpened: false,
+            isFocused: false,
+            inputValue: (_a = _this.props.value) !== null && _a !== void 0 ? _a : '',
+            historyRecords: _this.getHistoryRecords()
         };
         _this.lazyEmitSearch = debounce__default["default"](function () {
+            var _a;
             var onSearch = _this.props.onSearch;
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(_this.props.value || '');
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch((_a = _this.state.inputValue) !== null && _a !== void 0 ? _a : '');
         }, 250, {
             leading: false,
             trailing: true
         });
         return _this;
     }
+    SearchBox.prototype.componentDidUpdate = function (prevProps) {
+        var _a;
+        if (prevProps.value !== this.props.value) {
+            this.setState({ inputValue: (_a = this.props.value) !== null && _a !== void 0 ? _a : '' });
+        }
+    };
     SearchBox.prototype.componentWillUnmount = function () {
         this.lazyEmitSearch.cancel();
     };
@@ -48,16 +72,26 @@ var SearchBox = /** @class */ (function (_super) {
         var _a = this.props, onActiveChange = _a.onActiveChange, onCancel = _a.onCancel, onChange = _a.onChange;
         onActiveChange === null || onActiveChange === void 0 ? void 0 : onActiveChange(false);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
-        onChange === null || onChange === void 0 ? void 0 : onChange('');
+        this.setState({ inputValue: '' }, function () { return onChange === null || onChange === void 0 ? void 0 : onChange(''); });
     };
     SearchBox.prototype.handleChange = function (e) {
+        var _this = this;
         var _a = this.props, searchImediately = _a.searchImediately, onChange = _a.onChange;
-        onChange === null || onChange === void 0 ? void 0 : onChange(e.currentTarget.value);
-        searchImediately && this.lazyEmitSearch();
+        var inputValue = e.currentTarget.value;
+        this.setState({ inputValue: inputValue }, function () {
+            onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+            searchImediately && _this.lazyEmitSearch();
+        });
     };
     SearchBox.prototype.handleSearch = function () {
-        var _a = this.props, onSearch = _a.onSearch, value = _a.value;
-        onSearch === null || onSearch === void 0 ? void 0 : onSearch(value || '');
+        var onSearch = this.props.onSearch;
+        var inputValue = this.state.inputValue;
+        var enable = this.getHistoryOptions().enable;
+        if (enable) {
+            this.insertHistoryRecord(inputValue);
+            this.setState({ isFocused: false, isHistoryOpened: false });
+        }
+        onSearch === null || onSearch === void 0 ? void 0 : onSearch(inputValue || '');
     };
     SearchBox.prototype.handleKeyDown = function (e) {
         if (e.key === 'Enter') {
@@ -66,28 +100,148 @@ var SearchBox = /** @class */ (function (_super) {
         }
     };
     SearchBox.prototype.handleClear = function () {
+        var _this = this;
         var _a = this.props, searchImediately = _a.searchImediately, onChange = _a.onChange;
-        onChange === null || onChange === void 0 ? void 0 : onChange('');
-        searchImediately && this.lazyEmitSearch();
+        this.setState({ inputValue: '' }, function () {
+            onChange === null || onChange === void 0 ? void 0 : onChange('');
+            searchImediately && _this.lazyEmitSearch();
+        });
     };
-    SearchBox.prototype.render = function () {
+    SearchBox.prototype.handleFocus = function () {
+        var enable = this.getHistoryOptions().enable;
+        this.setState({ isFocused: true, isHistoryOpened: enable });
+    };
+    SearchBox.prototype.handleBlur = function (e) {
+        this.setState({ isFocused: false, isHistoryOpened: false });
+    };
+    SearchBox.prototype.handleHistoryRecordSelect = function (record) {
         var _this = this;
-        var _a = this.props, cx = _a.classnames, active = _a.active, name = _a.name, className = _a.className, disabled = _a.disabled, placeholder = _a.placeholder, mini = _a.mini, enhance = _a.enhance, clearable = _a.clearable, value = _a.value, __ = _a.translate;
-        var isFocused = this.state.isFocused;
-        return (React__default["default"].createElement("div", { className: cx('SearchBox', enhance && 'SearchBox--enhance', className, disabled ? 'is-disabled' : '', isFocused ? 'is-focused' : '', !mini || active ? 'is-active' : '') },
-            React__default["default"].createElement("input", { name: name, disabled: disabled, onChange: this.handleChange, value: value || '', placeholder: __(placeholder || 'placeholder.enter'), ref: this.inputRef, autoComplete: "off", onFocus: function () { return _this.setState({ isFocused: true }); }, onBlur: function () { return _this.setState({ isFocused: false }); }, onKeyDown: this.handleKeyDown }),
-            !mini && clearable && value && !disabled ? (React__default["default"].createElement("div", { className: cx('SearchBox-clearable'), onClick: this.handleClear },
+        this.setState({ inputValue: record.value, isHistoryOpened: false, isFocused: false }, function () { return _this.handleSearch(); });
+    };
+    /** 获取历史搜索配置 */
+    SearchBox.prototype.getHistoryOptions = function () {
+        var _a, _b;
+        var history = this.props.history;
+        var options = {
+            enable: !!(history === null || history === void 0 ? void 0 : history.enable),
+            key: (_a = history === null || history === void 0 ? void 0 : history.key) !== null && _a !== void 0 ? _a : historyDefaultOptions.key,
+            limit: (history === null || history === void 0 ? void 0 : history.limit) && isInteger__default["default"](history === null || history === void 0 ? void 0 : history.limit) && (history === null || history === void 0 ? void 0 : history.limit) > 0
+                ? history === null || history === void 0 ? void 0 : history.limit
+                : historyDefaultOptions.limit,
+            dropdownClassName: (_b = history === null || history === void 0 ? void 0 : history.dropdownClassName) !== null && _b !== void 0 ? _b : ''
+        };
+        return options;
+    };
+    /** 获取历史记录 */
+    SearchBox.prototype.getHistoryRecords = function () {
+        var _a = this.getHistoryOptions(), key = _a.key, limit = _a.limit;
+        try {
+            var storageValues = localStorage.getItem(key);
+            return ___default["default"].chain(storageValues ? JSON.parse(storageValues) : [])
+                .uniqBy('value')
+                .orderBy(['timestamp'], ['desc'])
+                .slice(0, limit)
+                .value();
+        }
+        catch (_b) { }
+        return [];
+    };
+    /** 清空历史记录 */
+    SearchBox.prototype.clearHistoryRecords = function () {
+        var key = this.getHistoryOptions().key;
+        localStorage.removeItem(key);
+        this.setState({ historyRecords: [] });
+        return [];
+    };
+    /** 删除一条历史记录 */
+    SearchBox.prototype.removeHistoryRecord = function (record) {
+        var key = this.getHistoryOptions().key;
+        var datasource = this.getHistoryRecords();
+        var recordIndex = datasource.findIndex(function (item) { return item.value === record.value; });
+        if (~recordIndex) {
+            datasource.splice(recordIndex, 1);
+            localStorage.setItem(key, JSON.stringify(datasource));
+            this.setState({ historyRecords: datasource });
+        }
+        return datasource;
+    };
+    /** 新增一条历史记录 */
+    SearchBox.prototype.insertHistoryRecord = function (value) {
+        var datasource = this.getHistoryRecords();
+        if (!value || datasource.find(function (item) { return item.value === value; })) {
+            return datasource;
+        }
+        try {
+            var _a = this.getHistoryOptions(), key = _a.key, limit = _a.limit;
+            var newDatasource = ___default["default"].chain(tslib.__spreadArray(tslib.__spreadArray([], datasource, true), [
+                { value: value, timestamp: moment__default["default"]().unix() }
+            ], false))
+                .orderBy(['timestamp'], ['desc'])
+                .slice(0, limit)
+                .value();
+            localStorage.setItem(key, JSON.stringify(newDatasource));
+            this.setState({ historyRecords: newDatasource });
+            return newDatasource;
+        }
+        catch (_b) { }
+        return datasource;
+    };
+    SearchBox.prototype.renderInput = function (isHistoryMode) {
+        var _a = this.props, cx = _a.classnames, active = _a.active, name = _a.name, className = _a.className, disabled = _a.disabled, placeholder = _a.placeholder, mini = _a.mini, enhance = _a.enhance, clearable = _a.clearable, __ = _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 }) },
+            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" })))));
     };
+    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) {
+                    e.preventDefault();
+                    _this.handleHistoryRecordSelect(item);
+                } }, item.value),
+            React__default["default"].createElement("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" }))));
+    };
+    SearchBox.prototype.renderHitoryMode = function () {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames, __ = _a.translate, className = _a.className;
+        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) },
+            this.renderInput(true),
+            React__default["default"].createElement("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) {
+                            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); })))));
+    };
+    SearchBox.prototype.render = function () {
+        var enable = this.getHistoryOptions().enable;
+        return enable ? this.renderHitoryMode() : this.renderInput();
+    };
     SearchBox.defaultProps = {
         mini: true,
         enhance: false,
         clearable: false,
-        searchImediately: true
+        searchImediately: true,
+        history: historyDefaultOptions
     };
     tslib.__decorate([
         amisCore.autobind,
@@ -125,6 +279,18 @@ var SearchBox = /** @class */ (function (_super) {
         tslib.__metadata("design:paramtypes", []),
         tslib.__metadata("design:returntype", void 0)
     ], SearchBox.prototype, "handleClear", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], SearchBox.prototype, "handleFocus", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], SearchBox.prototype, "handleBlur", null);
     return SearchBox;
 }(React__default["default"].Component));
 var SearchBox$1 = amisCore.themeable(amisCore.localeable(amisCore.uncontrollable(SearchBox, {