amis 1.9.1-beta.28 → 1.9.1-beta.30

package/lib/components/SearchBox.js

@@ -3,29 +3,49 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchBox = void 0;
 var tslib_1 = require("tslib");
 var react_1 = (0, tslib_1.__importDefault)(require("react"));
+var moment_1 = (0, tslib_1.__importDefault)(require("moment"));
+var lodash_1 = (0, tslib_1.__importDefault)(require("lodash"));
+var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
+var isInteger_1 = (0, tslib_1.__importDefault)(require("lodash/isInteger"));
 var theme_1 = require("../theme");
 var icons_1 = require("./icons");
 var uncontrollable_1 = require("uncontrollable");
 var helper_1 = require("../utils/helper");
 var locale_1 = require("../locale");
-var debounce_1 = (0, tslib_1.__importDefault)(require("lodash/debounce"));
+var historyDefaultOptions = {
+    enable: false,
+    key: 'amis:search_history',
+    limit: 5,
+    dropdownClassName: ''
+};
 var SearchBox = /** @class */ (function (_super) {
     (0, tslib_1.__extends)(SearchBox, _super);
     function SearchBox() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
+        var _a;
+        var _this = _super.apply(this, arguments) || this;
         _this.inputRef = react_1.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 = (0, debounce_1.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();
     };
@@ -39,16 +59,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') {
@@ -57,29 +87,149 @@ 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_1.default.createElement("div", { className: cx('SearchBox', enhance && 'SearchBox--enhance', className, disabled ? 'is-disabled' : '', isFocused ? 'is-focused' : '', !mini || active ? 'is-active' : '') },
-            react_1.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_1.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) && (0, isInteger_1.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 lodash_1.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 = lodash_1.default.chain((0, tslib_1.__spreadArray)((0, tslib_1.__spreadArray)([], datasource, true), [
+                { value: value, timestamp: (0, moment_1.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_1.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_1.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_1.default.createElement("div", { className: cx('SearchBox-clearable'), onClick: this.handleClear },
                 react_1.default.createElement(icons_1.Icon, { icon: "input-clear", className: "icon" }))) : null,
             !mini ? (react_1.default.createElement("a", { className: cx('SearchBox-searchBtn'), onClick: this.handleSearch },
                 react_1.default.createElement(icons_1.Icon, { icon: "search", className: "icon" }))) : active ? (react_1.default.createElement("a", { className: cx('SearchBox-cancelBtn'), onClick: this.handleCancel },
                 react_1.default.createElement(icons_1.Icon, { icon: "close", className: "icon" }))) : (react_1.default.createElement("a", { className: cx('SearchBox-activeBtn'), onClick: this.handleActive },
                 react_1.default.createElement(icons_1.Icon, { icon: "search", className: "icon" })))));
     };
-    var _a, _b;
+    SearchBox.prototype.renderTag = function (item, index) {
+        var _this = this;
+        var cx = this.props.classnames;
+        return (react_1.default.createElement("span", { className: cx('Tag', 'SearchBox-history-tag'), key: index },
+            react_1.default.createElement("span", { className: cx('SearchBox-history-tag-text'), onMouseDown: function (e) {
+                    e.preventDefault();
+                    _this.handleHistoryRecordSelect(item);
+                } }, item.value),
+            react_1.default.createElement("span", { className: cx("SearchBox-history-tag-close"), onMouseDown: function (e) {
+                    e.preventDefault();
+                    _this.removeHistoryRecord(item);
+                } },
+                react_1.default.createElement(icons_1.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_1.default.createElement("div", { id: "searchbox-history", className: cx('SearchBox-history', className) },
+            this.renderInput(true),
+            react_1.default.createElement("div", { className: cx('SearchBox-history-dropdown', dropdownClassName, {
+                    'is-active': showDropdown
+                }) },
+                react_1.default.createElement("header", null,
+                    react_1.default.createElement("h4", null, __('searchHistory')),
+                    react_1.default.createElement("a", { onMouseDown: function (e) {
+                            e.preventDefault();
+                            _this.clearHistoryRecords();
+                        } }, __('clear'))),
+                react_1.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();
+    };
+    var _a, _b, _c;
     SearchBox.defaultProps = {
         mini: true,
         enhance: false,
         clearable: false,
-        searchImediately: true
+        searchImediately: true,
+        history: historyDefaultOptions
     };
     (0, tslib_1.__decorate)([
         helper_1.autobind,
@@ -117,6 +267,18 @@ var SearchBox = /** @class */ (function (_super) {
         (0, tslib_1.__metadata)("design:paramtypes", []),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], SearchBox.prototype, "handleClear", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", []),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SearchBox.prototype, "handleFocus", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof react_1.default !== "undefined" && react_1.default.FocusEvent) === "function" ? _c : Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], SearchBox.prototype, "handleBlur", null);
     return SearchBox;
 }(react_1.default.Component));
 exports.SearchBox = SearchBox;

package/lib/components/SearchBox.js.map

@@ -6,8 +6,8 @@
         "/src/components/SearchBox.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "import React from 'react';\nimport {ThemeProps, themeable} from '../theme';\nimport {Icon} from './icons';\nimport {uncontrollable} from 'uncontrollable';\nimport {autobind} from '../utils/helper';\nimport {LocaleProps, localeable} from '../locale';\nimport debounce from 'lodash/debounce';\n\nexport interface SearchBoxProps extends ThemeProps, LocaleProps {\n  name?: string;\n  disabled?: boolean;\n  mini?: boolean;\n  enhance?: boolean;\n  clearable?: boolean;\n  searchImediately?: boolean;\n  onChange?: (text: string) => void;\n  placeholder?: string;\n  defaultValue?: string;\n  value?: string;\n  active?: boolean;\n  defaultActive?: boolean;\n  onActiveChange?: (active: boolean) => void;\n  onSearch?: (value: string) => void;\n  onCancel?: () => void;\n}\n\nexport interface SearchBoxState {\n  isFocused: boolean;\n}\n\nexport class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {\n  inputRef: React.RefObject<HTMLInputElement> = React.createRef();\n  static defaultProps = {\n    mini: true,\n    enhance: false,\n    clearable: false,\n    searchImediately: true\n  };\n\n  state = {\n    isFocused: false\n  };\n\n  lazyEmitSearch = debounce(\n    () => {\n      const onSearch = this.props.onSearch;\n      onSearch?.(this.props.value || '');\n    },\n    250,\n    {\n      leading: false,\n      trailing: true\n    }\n  );\n\n  componentWillUnmount() {\n    this.lazyEmitSearch.cancel();\n  }\n\n  @autobind\n  handleActive() {\n    const {onActiveChange} = this.props;\n    onActiveChange?.(true);\n    this.inputRef.current?.focus();\n  }\n\n  @autobind\n  handleCancel() {\n    const {onActiveChange, onCancel, onChange} = this.props;\n    onActiveChange?.(false);\n    onCancel?.();\n    onChange?.('');\n  }\n\n  @autobind\n  handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const {searchImediately, onChange} = this.props;\n    onChange?.(e.currentTarget.value);\n    searchImediately && this.lazyEmitSearch();\n  }\n\n  @autobind\n  handleSearch() {\n    const {onSearch, value} = this.props;\n    onSearch?.(value || '');\n  }\n\n  @autobind\n  handleKeyDown(e: React.KeyboardEvent<any>) {\n    if (e.key === 'Enter') {\n      this.handleSearch();\n      e.preventDefault();\n    }\n  }\n\n  @autobind\n  handleClear() {\n    const {searchImediately, onChange} = this.props;\n    onChange?.('');\n    searchImediately && this.lazyEmitSearch();\n  }\n\n  render() {\n    const {\n      classnames: cx,\n      active,\n      name,\n      className,\n      disabled,\n      placeholder,\n      mini,\n      enhance,\n      clearable,\n      value,\n      translate: __\n    } = this.props;\n\n    const isFocused = this.state.isFocused;\n\n    return (\n      <div\n        className={cx(\n          'SearchBox',\n          enhance && 'SearchBox--enhance',\n          className,\n          disabled ? 'is-disabled' : '',\n          isFocused ? 'is-focused' : '',\n          !mini || active ? 'is-active' : '',\n        )}\n      >\n        <input\n          name={name}\n          disabled={disabled}\n          onChange={this.handleChange}\n          value={value || ''}\n          placeholder={__(placeholder || 'placeholder.enter')}\n          ref={this.inputRef}\n          autoComplete=\"off\"\n          onFocus={() => this.setState({ isFocused: true })}\n          onBlur={() => this.setState({ isFocused: false })}\n          onKeyDown={this.handleKeyDown}\n        />\n\n        {\n          !mini && clearable && value && !disabled ? (\n            <div className={cx('SearchBox-clearable')} onClick={this.handleClear}>\n              <Icon icon=\"input-clear\" className=\"icon\"/>\n            </div>\n          ) : null\n        }\n\n        {!mini ? (\n          <a className={cx('SearchBox-searchBtn')} onClick={this.handleSearch}>\n            <Icon icon=\"search\" className=\"icon\" />\n          </a>\n        ) : active ? (\n          <a className={cx('SearchBox-cancelBtn')} onClick={this.handleCancel}>\n            <Icon icon=\"close\" className=\"icon\" />\n          </a>\n        ) : (\n          <a className={cx('SearchBox-activeBtn')} onClick={this.handleActive}>\n            <Icon icon=\"search\" className=\"icon\" />\n          </a>\n        )}\n      </div>\n    );\n  }\n}\n\nexport default themeable(\n  localeable(\n    uncontrollable(SearchBox, {\n      active: 'onActiveChange',\n      value: 'onChange'\n    })\n  )\n);\n"
+        "import React from 'react';\nimport moment from 'moment';\nimport _ from 'lodash';\nimport debounce from 'lodash/debounce';\nimport isInteger from 'lodash/isInteger';\nimport {ThemeProps, themeable} from '../theme';\nimport {Icon} from './icons';\nimport {uncontrollable} from 'uncontrollable';\nimport {autobind} from '../utils/helper';\nimport {LocaleProps, localeable} from '../locale';\n\nexport interface HistoryRecord {\n  /** 历史记录值 */\n  value: string;\n  /** 历史记录生成的unix时间戳 */\n  timestamp?: number;\n}\n\nexport interface SearchHistoryOptions {\n  /** 是否开启历史记录 */\n  enable: boolean;\n  /** 本地存储历史记录的key */\n  key?: string;\n  /** 历史记录数量上限 */\n  limit?: number;\n  /** 历史记录下拉面板CSS类名 */\n  dropdownClassName?: string;\n}\n\nexport interface SearchBoxProps extends ThemeProps, LocaleProps {\n  name?: string;\n  disabled?: boolean;\n  mini?: boolean;\n  enhance?: boolean;\n  clearable?: boolean;\n  searchImediately?: boolean;\n  onChange?: (text: string) => void;\n  placeholder?: string;\n  defaultValue?: string;\n  value?: string;\n  active?: boolean;\n  defaultActive?: boolean;\n  onActiveChange?: (active: boolean) => void;\n  onSearch?: (value: string) => void;\n  onCancel?: () => void;\n  /** 历史记录配置 */\n  history?: SearchHistoryOptions;\n}\n\nexport interface SearchBoxState {\n  isFocused: boolean;\n  isHistoryOpened: boolean;\n  inputValue: string;\n  historyRecords: HistoryRecord[];\n}\n\nconst historyDefaultOptions: Required<SearchHistoryOptions> = {\n  enable: false,\n  key: 'amis:search_history',\n  limit: 5,\n  dropdownClassName: ''\n};\n\nexport class SearchBox extends React.Component<SearchBoxProps, SearchBoxState> {\n  inputRef: React.RefObject<HTMLInputElement> = React.createRef();\n\n  static defaultProps = {\n    mini: true,\n    enhance: false,\n    clearable: false,\n    searchImediately: true,\n    history: historyDefaultOptions\n  };\n\n  state = {\n    isHistoryOpened: false,\n    isFocused: false,\n    inputValue: this.props.value ?? '',\n    historyRecords: this.getHistoryRecords()\n  };\n\n  lazyEmitSearch = debounce(\n    () => {\n      const onSearch = this.props.onSearch;\n      onSearch?.(this.state.inputValue ?? '');\n    },\n    250,\n    {\n      leading: false,\n      trailing: true\n    }\n  );\n\n  componentDidUpdate(prevProps: SearchBoxProps) {\n    if (prevProps.value !== this.props.value) {\n      this.setState({inputValue: this.props.value ?? ''});\n    }\n  }\n\n  componentWillUnmount() {\n    this.lazyEmitSearch.cancel();\n  }\n\n  @autobind\n  handleActive() {\n    const {onActiveChange} = this.props;\n    onActiveChange?.(true);\n    this.inputRef.current?.focus();\n  }\n\n  @autobind\n  handleCancel() {\n    const {onActiveChange, onCancel, onChange} = this.props;\n\n    onActiveChange?.(false);\n    onCancel?.();\n    this.setState({inputValue: ''}, () => onChange?.(''));\n  }\n\n  @autobind\n  handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const {searchImediately, onChange} = this.props;\n    const inputValue = e.currentTarget.value;\n\n    this.setState({inputValue}, () => {\n      onChange?.(inputValue);\n      searchImediately && this.lazyEmitSearch();\n    });\n  }\n\n  @autobind\n  handleSearch() {\n    const {onSearch} = this.props;\n    const {inputValue} = this.state;\n    const {enable} = this.getHistoryOptions();\n\n    if (enable) {\n      this.insertHistoryRecord(inputValue);\n      this.setState({isFocused: false, isHistoryOpened: false});\n    }\n\n    onSearch?.(inputValue || '');\n  }\n\n  @autobind\n  handleKeyDown(e: React.KeyboardEvent<any>) {\n    if (e.key === 'Enter') {\n      this.handleSearch();\n      e.preventDefault();\n    }\n  }\n\n  @autobind\n  handleClear() {\n    const {searchImediately, onChange} = this.props;\n\n    this.setState({inputValue: ''}, () => {\n      onChange?.('');\n      searchImediately && this.lazyEmitSearch();\n    });\n  }\n\n  @autobind\n  handleFocus() {\n    const {enable} = this.getHistoryOptions();\n    this.setState({isFocused: true, isHistoryOpened: enable});\n  }\n\n  @autobind\n  handleBlur(e: React.FocusEvent<HTMLInputElement>) {\n    this.setState({isFocused: false, isHistoryOpened: false});\n  }\n\n  handleHistoryRecordSelect(record: HistoryRecord) {\n    this.setState(\n      {inputValue: record.value, isHistoryOpened: false, isFocused: false},\n      () => this.handleSearch()\n    );\n  }\n\n  /** 获取历史搜索配置 */\n  getHistoryOptions(): Required<SearchHistoryOptions> {\n    const {history} = this.props;\n    const options = {\n      enable: !!history?.enable,\n      key: history?.key ?? historyDefaultOptions.key,\n      limit:\n        history?.limit && isInteger(history?.limit) && history?.limit > 0\n          ? history?.limit\n          : historyDefaultOptions.limit,\n      dropdownClassName: history?.dropdownClassName ?? ''\n    };\n\n    return options;\n  }\n\n  /** 获取历史记录 */\n  getHistoryRecords() {\n    const {key, limit} = this.getHistoryOptions();\n\n    try {\n      const storageValues = localStorage.getItem(key);\n\n      return _.chain(storageValues ? JSON.parse(storageValues) : [])\n        .uniqBy('value')\n        .orderBy(['timestamp'], ['desc'])\n        .slice(0, limit)\n        .value();\n    } catch {}\n\n    return [];\n  }\n\n  /** 清空历史记录 */\n  clearHistoryRecords(): HistoryRecord[] {\n    const {key} = this.getHistoryOptions();\n    localStorage.removeItem(key);\n    this.setState({historyRecords: []});\n\n    return [];\n  }\n\n  /** 删除一条历史记录 */\n  removeHistoryRecord(record: HistoryRecord): HistoryRecord[] {\n    const {key} = this.getHistoryOptions();\n    const datasource = this.getHistoryRecords();\n    const recordIndex = datasource.findIndex(\n      item => item.value === record.value\n    );\n\n    if (~recordIndex) {\n      datasource.splice(recordIndex, 1);\n      localStorage.setItem(key, JSON.stringify(datasource));\n      this.setState({historyRecords: datasource});\n    }\n\n    return datasource;\n  }\n\n  /** 新增一条历史记录 */\n  insertHistoryRecord(value: string): HistoryRecord[] {\n    const datasource = this.getHistoryRecords();\n\n    if (!value || datasource.find(item => item.value === value)) {\n      return datasource;\n    }\n\n    try {\n      const {key, limit} = this.getHistoryOptions();\n      const newDatasource = _.chain([\n        ...datasource,\n        {value, timestamp: moment().unix()}\n      ])\n        .orderBy(['timestamp'], ['desc'])\n        .slice(0, limit)\n        .value();\n\n      localStorage.setItem(key, JSON.stringify(newDatasource));\n      this.setState({historyRecords: newDatasource});\n      return newDatasource;\n    } catch {}\n\n    return datasource;\n  }\n\n  renderInput(isHistoryMode?: boolean) {\n    const {\n      classnames: cx,\n      active,\n      name,\n      className,\n      disabled,\n      placeholder,\n      mini,\n      enhance,\n      clearable,\n      translate: __\n    } = this.props;\n    const {isFocused, inputValue} = this.state;\n    const {enable} = this.getHistoryOptions();\n\n    return (\n      <div\n        className={cx(\n          'SearchBox',\n          enhance && 'SearchBox--enhance',\n          !!isHistoryMode ? '' : className,\n          disabled ? 'is-disabled' : '',\n          isFocused ? 'is-focused' : '',\n          !mini || active ? 'is-active' : '',\n          {'is-history': enable}\n        )}\n      >\n        <input\n          name={name}\n          ref={this.inputRef}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          onChange={this.handleChange}\n          onKeyDown={this.handleKeyDown}\n          value={inputValue ?? ''}\n          disabled={disabled}\n          placeholder={__(placeholder || 'placeholder.enter')}\n          autoComplete=\"off\"\n        />\n\n        {!mini && clearable && inputValue && !disabled ? (\n          <div className={cx('SearchBox-clearable')} onClick={this.handleClear}>\n            <Icon icon=\"input-clear\" className=\"icon\" />\n          </div>\n        ) : null}\n\n        {!mini ? (\n          <a className={cx('SearchBox-searchBtn')} onClick={this.handleSearch}>\n            <Icon icon=\"search\" className=\"icon\" />\n          </a>\n        ) : active ? (\n          <a className={cx('SearchBox-cancelBtn')} onClick={this.handleCancel}>\n            <Icon icon=\"close\" className=\"icon\" />\n          </a>\n        ) : (\n          <a className={cx('SearchBox-activeBtn')} onClick={this.handleActive}>\n            <Icon icon=\"search\" className=\"icon\" />\n          </a>\n        )}\n      </div>\n    );\n  }\n\n  renderTag(item: HistoryRecord, index: number) {\n    const {classnames: cx} = this.props;\n\n    return (\n      <span className={cx('Tag', 'SearchBox-history-tag')} key={index}>\n        <span\n          className={cx('SearchBox-history-tag-text')}\n          onMouseDown={(e: React.MouseEvent<any>) => {\n            e.preventDefault();\n            this.handleHistoryRecordSelect(item);\n          }}\n        >\n          {item.value}\n        </span>\n        <span\n          className={cx(`SearchBox-history-tag-close`)}\n          onMouseDown={(e: React.MouseEvent<any>) => {\n            e.preventDefault();\n            this.removeHistoryRecord(item);\n          }}\n        >\n          <Icon icon=\"close\" className=\"icon\" />\n        </span>\n      </span>\n    );\n  }\n\n  renderHitoryMode() {\n    const {classnames: cx, translate: __, className} = this.props;\n    const {isHistoryOpened, inputValue, historyRecords} = this.state;\n    const {dropdownClassName} = this.getHistoryOptions();\n    const showDropdown =\n      isHistoryOpened && !inputValue && historyRecords.length > 0;\n\n    return (\n      <div\n        id=\"searchbox-history\"\n        className={cx('SearchBox-history', className)}\n      >\n        {this.renderInput(true)}\n\n        <div\n          className={cx('SearchBox-history-dropdown', dropdownClassName, {\n            'is-active': showDropdown\n          })}\n        >\n          <header>\n            <h4>{__('searchHistory')}</h4>\n            <a\n              onMouseDown={(e: React.MouseEvent<any>) => {\n                e.preventDefault();\n                this.clearHistoryRecords();\n              }}\n            >\n              {__('clear')}\n            </a>\n          </header>\n\n          <div className={cx('SearchBox-history-content')}>\n            {historyRecords.map((item, index) => this.renderTag(item, index))}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    const {enable} = this.getHistoryOptions();\n\n    return enable ? this.renderHitoryMode() : this.renderInput();\n  }\n}\n\nexport default themeable(\n  localeable(\n    uncontrollable(SearchBox, {\n      active: 'onActiveChange',\n      value: 'onChange'\n    })\n  )\n);\n"
     ]
 }

package/lib/components/Tag.d.ts

@@ -14,6 +14,7 @@ export interface TagProps extends ThemeProps {
     disabled?: boolean;
     closeIcon?: string | React.ReactNode;
     onClose?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
 }
 export interface CheckableTagProps extends TagProps {
     onClick?: (e: React.MouseEvent) => void;
@@ -25,6 +26,7 @@ export declare class Tag extends React.Component<TagProps> {
     static defaultProps: Partial<TagProps>;
     renderCloseIcon(): JSX.Element | null;
     handleClose(e: React.MouseEvent<HTMLElement>): void;
+    handleClick(e: React.MouseEvent<HTMLElement>): void;
     render(): JSX.Element;
 }
 declare class CheckableTagComp extends React.Component<CheckableTagProps> {
@@ -67,15 +69,15 @@ export declare const CheckableTag: {
     ComposedComponent: typeof CheckableTagComp;
 };
 declare const _default: {
-    new (props: Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps): {
+    new (props: Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps): {
         ref: any;
         childRef(ref: any): void;
         getWrappedInstance(): any;
         render(): JSX.Element;
         context: any;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
-        readonly props: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps> & Readonly<{
+        readonly props: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps> & Readonly<{
             children?: React.ReactNode;
         }>;
         state: Readonly<{}>;
@@ -83,17 +85,17 @@ declare const _default: {
             [key: string]: React.ReactInstance;
         };
         componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, prevState: Readonly<{}>, snapshot?: any): void;
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TagProps, keyof ThemeProps>, never> & Partial<Pick<Omit<TagProps, keyof ThemeProps>, "label" | "style" | "color" | "icon" | "disabled" | "onClose" | "onClick" | "displayMode" | "closable" | "closeIcon">> & Partial<Pick<Partial<TagProps>, "classPrefix" | "classnames" | "className" | "theme">> & import("../theme").ThemeOutterProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     displayName: string;
     contextType: React.Context<string>;

package/lib/components/Tag.js

@@ -36,9 +36,13 @@ var Tag = /** @class */ (function (_super) {
         e.stopPropagation();
         onClose === null || onClose === void 0 ? void 0 : onClose(e);
     };
+    Tag.prototype.handleClick = function (e) {
+        var onClick = this.props.onClick;
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
     Tag.prototype.render = function () {
         var _a;
-        var _b = this.props, children = _b.children, cx = _b.classnames, className = _b.className, displayMode = _b.displayMode, disabled = _b.disabled, color = _b.color, icon = _b.icon, style = _b.style, label = _b.label;
+        var _b = this.props, children = _b.children, cx = _b.classnames, className = _b.className, displayMode = _b.displayMode, disabled = _b.disabled, color = _b.color, icon = _b.icon, style = _b.style, label = _b.label, closable = _b.closable;
         var isPresetColor = color && PRESET_COLOR.indexOf(color) !== -1;
         var customColor = color && !isPresetColor ? color : undefined;
         var tagStyle = (0, tslib_1.__assign)({ backgroundColor: displayMode === 'normal' ? customColor : undefined, borderColor: displayMode === 'rounded' ? customColor : undefined, color: displayMode === 'rounded' ? customColor : undefined }, style);
@@ -47,12 +51,13 @@ var Tag = /** @class */ (function (_super) {
                 _a["Tag--".concat(displayMode, "--").concat(color)] = isPresetColor,
                 _a["Tag--".concat(displayMode, "--hasColor")] = color,
                 _a["Tag--disabled"] = disabled,
-                _a)), style: tagStyle },
-            prevIcon,
-            label || children,
+                _a)), style: tagStyle, onClick: this.handleClick },
+            react_1.default.createElement("span", { className: cx('Tag-text') },
+                prevIcon,
+                label || children),
             this.renderCloseIcon()));
     };
-    var _a;
+    var _a, _b;
     Tag.defaultProps = {
         displayMode: 'normal'
     };
@@ -62,6 +67,12 @@ var Tag = /** @class */ (function (_super) {
         (0, tslib_1.__metadata)("design:paramtypes", [typeof (_a = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _a : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], Tag.prototype, "handleClose", null);
+    (0, tslib_1.__decorate)([
+        helper_1.autobind,
+        (0, tslib_1.__metadata)("design:type", Function),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _b : Object]),
+        (0, tslib_1.__metadata)("design:returntype", void 0)
+    ], Tag.prototype, "handleClick", null);
     return Tag;
 }(react_1.default.Component));
 exports.Tag = Tag;
@@ -82,11 +93,11 @@ var CheckableTagComp = /** @class */ (function (_super) {
                 'Tag--checkable--disabled': disabled
             }), onClick: disabled ? helper_1.noop : this.handleClick, style: style }, label || children));
     };
-    var _b;
+    var _c;
     (0, tslib_1.__decorate)([
         helper_1.autobind,
         (0, tslib_1.__metadata)("design:type", Function),
-        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_b = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _b : Object]),
+        (0, tslib_1.__metadata)("design:paramtypes", [typeof (_c = typeof react_1.default !== "undefined" && react_1.default.MouseEvent) === "function" ? _c : Object]),
         (0, tslib_1.__metadata)("design:returntype", void 0)
     ], CheckableTagComp.prototype, "handleClick", null);
     return CheckableTagComp;

package/lib/components/Tag.js.map

@@ -6,8 +6,8 @@
         "/src/components/Tag.tsx"
     ],
     "names": [],
-    "mappings": "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",
+    "mappings": "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",
     "sourcesContent": [
-        "/**\n * @file Tag\n */\n\nimport React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport {Icon, getIcon} from './icons';\nimport {generateIcon} from '../utils/icon';\nimport {autobind, noop} from '../utils/helper';\n\nexport interface TagProps extends ThemeProps {\n  style: React.CSSProperties;\n  color?: string;\n  label?: string | React.ReactNode;\n  displayMode?: 'normal' | 'rounded' | 'status';\n  icon?: string | React.ReactNode;\n  closable?: boolean;\n  disabled?: boolean;\n  closeIcon?: string | React.ReactNode;\n  onClose?: (e: React.MouseEvent) => void;\n}\n\nexport interface CheckableTagProps extends TagProps {\n  onClick?: (e: React.MouseEvent) => void;\n  onChange?: (checked: boolean) => void;\n  checked?: boolean;\n}\n\nexport type TagLevel =\n  | 'inactive'\n  | 'active'\n  | 'success'\n  | 'processing'\n  | 'error'\n  | 'warning';\n\nconst PRESET_COLOR: TagLevel[] = [\n  'inactive',\n  'active',\n  'success',\n  'processing',\n  'error',\n  'warning'\n];\n\nexport class Tag extends React.Component<TagProps> {\n  static defaultProps: Partial<TagProps> = {\n    displayMode: 'normal'\n  };\n\n  renderCloseIcon() {\n    const {closeIcon, classnames: cx, closable} = this.props;\n\n    if (!closable) {\n      return null;\n    }\n\n    const icon =\n      typeof closeIcon === 'string' ? (\n        getIcon(closeIcon) ? (\n          <Icon icon={closeIcon} className=\"icon\" />\n        ) : (\n          generateIcon(cx, closeIcon, 'Icon')\n        )\n      ) : React.isValidElement(closeIcon) ? (\n        closeIcon\n      ) : (\n        <Icon icon=\"close\" className=\"icon\" />\n      );\n\n    return (\n      <span className={cx(`Tag--close`)} onClick={this.handleClose}>\n        {icon}\n      </span>\n    );\n  }\n\n  @autobind\n  handleClose(e: React.MouseEvent<HTMLElement>) {\n    const {onClose} = this.props;\n    e.stopPropagation();\n    onClose?.(e);\n  }\n\n  render() {\n    const {\n      children,\n      classnames: cx,\n      className,\n      displayMode,\n      disabled,\n      color,\n      icon,\n      style,\n      label\n    } = this.props;\n\n    const isPresetColor =\n      color && PRESET_COLOR.indexOf(color as TagLevel) !== -1;\n\n    const customColor = color && !isPresetColor ? color : undefined;\n\n    const tagStyle = {\n      backgroundColor: displayMode === 'normal' ? customColor : undefined,\n      borderColor: displayMode === 'rounded' ? customColor : undefined,\n      color: displayMode === 'rounded' ? customColor : undefined,\n      ...style\n    };\n\n    const prevIcon = displayMode === 'status' && (\n      <span className={cx('Tag--prev')}>\n        {typeof icon === 'string' ? (\n          getIcon(icon) ? (\n            <Icon icon={icon} className=\"icon\" />\n          ) : (\n            generateIcon(cx, icon, 'Icon')\n          )\n        ) : React.isValidElement(icon) ? (\n          icon\n        ) : (\n          <Icon icon=\"dot\" className=\"icon\" />\n        )}\n      </span>\n    );\n\n    return (\n      <span\n        className={cx('Tag', `Tag--${displayMode}`, className, {\n          [`Tag--${displayMode}--${color}`]: isPresetColor,\n          [`Tag--${displayMode}--hasColor`]: color,\n          [`Tag--disabled`]: disabled\n        })}\n        style={tagStyle}\n      >\n        {prevIcon}\n        {label || children}\n        {this.renderCloseIcon()}\n      </span>\n    );\n  }\n}\n\nclass CheckableTagComp extends React.Component<CheckableTagProps> {\n  @autobind\n  handleClick(e: React.MouseEvent) {\n    const {onChange, onClick, checked} = this.props;\n\n    onChange?.(!checked);\n    onClick?.(e);\n  }\n\n  render() {\n    const {\n      classnames: cx,\n      className,\n      disabled,\n      label,\n      children,\n      checked,\n      style = {}\n    } = this.props;\n\n    return (\n      <span\n        className={cx(className, 'Tag', 'Tag--checkable', {\n          'Tag--checkable--checked': checked,\n          'Tag--checkable--disabled': disabled\n        })}\n        onClick={disabled ? noop : this.handleClick}\n        style={style}\n      >\n        {label || children}\n      </span>\n    );\n  }\n}\n\nexport const CheckableTag = themeable(CheckableTagComp);\nexport default themeable(Tag);\n"
+        "/**\n * @file Tag\n */\n\nimport React from 'react';\nimport {themeable, ThemeProps} from '../theme';\nimport {Icon, getIcon} from './icons';\nimport {generateIcon} from '../utils/icon';\nimport {autobind, noop} from '../utils/helper';\n\nexport interface TagProps extends ThemeProps {\n  style: React.CSSProperties;\n  color?: string;\n  label?: string | React.ReactNode;\n  displayMode?: 'normal' | 'rounded' | 'status';\n  icon?: string | React.ReactNode;\n  closable?: boolean;\n  disabled?: boolean;\n  closeIcon?: string | React.ReactNode;\n  onClose?: (e: React.MouseEvent) => void;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\nexport interface CheckableTagProps extends TagProps {\n  onClick?: (e: React.MouseEvent) => void;\n  onChange?: (checked: boolean) => void;\n  checked?: boolean;\n}\n\nexport type TagLevel =\n  | 'inactive'\n  | 'active'\n  | 'success'\n  | 'processing'\n  | 'error'\n  | 'warning';\n\nconst PRESET_COLOR: TagLevel[] = [\n  'inactive',\n  'active',\n  'success',\n  'processing',\n  'error',\n  'warning'\n];\n\nexport class Tag extends React.Component<TagProps> {\n  static defaultProps: Partial<TagProps> = {\n    displayMode: 'normal'\n  };\n\n  renderCloseIcon() {\n    const {closeIcon, classnames: cx, closable} = this.props;\n\n    if (!closable) {\n      return null;\n    }\n\n    const icon =\n      typeof closeIcon === 'string' ? (\n        getIcon(closeIcon) ? (\n          <Icon icon={closeIcon} className=\"icon\" />\n        ) : (\n          generateIcon(cx, closeIcon, 'Icon')\n        )\n      ) : React.isValidElement(closeIcon) ? (\n        closeIcon\n      ) : (\n        <Icon icon=\"close\" className=\"icon\" />\n      );\n\n    return (\n      <span className={cx(`Tag--close`)} onClick={this.handleClose}>\n        {icon}\n      </span>\n    );\n  }\n\n  @autobind\n  handleClose(e: React.MouseEvent<HTMLElement>) {\n    const {onClose} = this.props;\n    e.stopPropagation();\n    onClose?.(e);\n  }\n\n  @autobind\n  handleClick(e: React.MouseEvent<HTMLElement>) {\n    const {onClick} = this.props;\n    onClick?.(e);\n  }\n\n  render() {\n    const {\n      children,\n      classnames: cx,\n      className,\n      displayMode,\n      disabled,\n      color,\n      icon,\n      style,\n      label,\n      closable\n    } = this.props;\n\n    const isPresetColor =\n      color && PRESET_COLOR.indexOf(color as TagLevel) !== -1;\n\n    const customColor = color && !isPresetColor ? color : undefined;\n\n    const tagStyle = {\n      backgroundColor: displayMode === 'normal' ? customColor : undefined,\n      borderColor: displayMode === 'rounded' ? customColor : undefined,\n      color: displayMode === 'rounded' ? customColor : undefined,\n      ...style\n    };\n\n    const prevIcon = displayMode === 'status' && (\n      <span className={cx('Tag--prev')}>\n        {typeof icon === 'string' ? (\n          getIcon(icon) ? (\n            <Icon icon={icon} className=\"icon\" />\n          ) : (\n            generateIcon(cx, icon, 'Icon')\n          )\n        ) : React.isValidElement(icon) ? (\n          icon\n        ) : (\n          <Icon icon=\"dot\" className=\"icon\" />\n        )}\n      </span>\n    );\n\n    return (\n      <span\n        className={cx('Tag', `Tag--${displayMode}`, className, {\n          [`Tag--${displayMode}--${color}`]: isPresetColor,\n          [`Tag--${displayMode}--hasColor`]: color,\n          [`Tag--disabled`]: disabled\n        })}\n        style={tagStyle}\n        onClick={this.handleClick}\n      >\n        <span className={cx('Tag-text')}>\n          {prevIcon}\n          {label || children}\n        </span>\n        {this.renderCloseIcon()}\n      </span>\n    );\n  }\n}\n\nclass CheckableTagComp extends React.Component<CheckableTagProps> {\n  @autobind\n  handleClick(e: React.MouseEvent) {\n    const {onChange, onClick, checked} = this.props;\n\n    onChange?.(!checked);\n    onClick?.(e);\n  }\n\n  render() {\n    const {\n      classnames: cx,\n      className,\n      disabled,\n      label,\n      children,\n      checked,\n      style = {}\n    } = this.props;\n\n    return (\n      <span\n        className={cx(className, 'Tag', 'Tag--checkable', {\n          'Tag--checkable--checked': checked,\n          'Tag--checkable--disabled': disabled\n        })}\n        onClick={disabled ? noop : this.handleClick}\n        style={style}\n      >\n        {label || children}\n      </span>\n    );\n  }\n}\n\nexport const CheckableTag = themeable(CheckableTagComp);\nexport default themeable(Tag);\n"
     ]
 }

package/lib/components/calendar/Calendar.d.ts

@@ -59,6 +59,7 @@ interface BaseDatePickerProps {
     displayTimeZone?: string;
     timeConstraints?: any;
     timeRangeHeader?: string;
+    timeRangeContext?: 'start' | 'end';
 }
 declare const _default: React.ComponentType<BaseDatePickerProps>;
 export default _default;

package/lib/components/calendar/Calendar.js

@@ -174,7 +174,7 @@ var BaseDatePicker = /** @class */ (function (_super) {
                     that.closeCalendar();
                 }
             }
-            that.props.onChange(date);
+            that.props.onChange(date, _this.props.timeRangeContext);
         };
         _this.getDateBoundary = function (currentDate) {
             var _a, _b;
@@ -444,7 +444,7 @@ var BaseDatePicker = /** @class */ (function (_super) {
     };
     BaseDatePicker.prototype.render = function () {
         var _a;
-        var _b = this.props, viewMode = _b.viewMode, timeFormat = _b.timeFormat, dateFormat = _b.dateFormat, timeRangeHeader = _b.timeRangeHeader;
+        var _b = this.props, viewMode = _b.viewMode, timeFormat = _b.timeFormat, dateFormat = _b.dateFormat, timeRangeHeader = _b.timeRangeHeader, timeRangeContext = _b.timeRangeContext;
         var Component = CalendarContainer_1.default;
         var viewProps = this.getComponentProps();
         if (viewMode === 'quarters') {
@@ -464,21 +464,21 @@ var BaseDatePicker = /** @class */ (function (_super) {
         viewProps.getColumns = this.getColumns;
         viewProps.timeCell = this.timeCell;
         viewProps.timeRangeHeader = this.props.timeRangeHeader;
-        return (react_1.default.createElement("div", { className: (0, classnames_1.default)('rdt rdtStatic rdtOpen', this.props.className, (timeFormat && !dateFormat || typeof dateFormat !== 'string')
+        return (react_1.default.createElement("div", { className: (0, classnames_1.default)('rdt rdtStatic rdtOpen', this.props.className, (timeFormat && !dateFormat) || typeof dateFormat !== 'string'
                 ? 'rdtTimeWithoutD'
-                : (timeFormat && timeFormat.toLowerCase().indexOf('s') > 0)
+                : timeFormat && timeFormat.toLowerCase().indexOf('s') > 0
                     ? 'rdtTimeWithS'
                     : timeFormat
                         ? 'rdtTime'
                         : '') },
-            react_1.default.createElement("div", { key: "dt", className: (0, classnames_1.default)('rdtPicker', (timeFormat && !dateFormat)
+            react_1.default.createElement("div", { key: "dt", className: (0, classnames_1.default)('rdtPicker', timeFormat && !dateFormat
                     ? 'rdtPickerTimeWithoutD'
-                    : (timeFormat && dateFormat)
+                    : timeFormat && dateFormat
                         ? 'rdtPickerTime'
-                        : (dateFormat && !timeFormat)
+                        : dateFormat && !timeFormat
                             ? 'rdtPickerDate'
                             : '') },
-                react_1.default.createElement(Component, { view: this.state.currentView, viewProps: viewProps, timeRangeHeader: timeRangeHeader }))));
+                react_1.default.createElement(Component, { view: this.state.currentView, viewProps: viewProps, timeRangeHeader: timeRangeHeader, timeRangeContext: timeRangeContext }))));
     };
     return BaseDatePicker;
 }(react_1.default.Component));