@hi-ui/hiui 2.15.11 → 2.15.12

package/es/select/SelectDropdown.js

@@ -1,70 +1,128 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _checkbox = _interopRequireDefault(require("../checkbox"));
-
-var _loading = _interopRequireDefault(require("../loading"));
-
-var _context = _interopRequireDefault(require("../context"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
 
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+var _react = _interopRequireWildcard(require("react"));
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var SelectDropdown = /*#__PURE__*/function (_Component) {
-  _inherits(SelectDropdown, _Component);
+var _checkbox = _interopRequireDefault(require("../checkbox"));
 
-  var _super = _createSuper(SelectDropdown);
+var _loading = _interopRequireDefault(require("../loading"));
 
-  function SelectDropdown() {
-    _classCallCheck(this, SelectDropdown);
+var _icon = _interopRequireDefault(require("../icon"));
+
+var SelectDropdown =
+/*#__PURE__*/
+function (_Component) {
+  (0, _inherits2["default"])(SelectDropdown, _Component);
+
+  function SelectDropdown(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, SelectDropdown);
+    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SelectDropdown).call(this, props));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "focus", function () {
+      _this.props.searchable && setTimeout(function () {
+        return _this.searchbar && _this.searchbar.focus();
+      }, 0);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "filterOptions", function (keyword) {
+      var _this$props = _this.props,
+          dropdownItems = _this$props.dropdownItems,
+          filterOption = _this$props.filterOption;
+      var filterItems = [];
+
+      if (typeof filterOption === 'function' || keyword === '') {
+        filterItems = dropdownItems;
+      } else {
+        dropdownItems.map(function (item) {
+          String(item.title).includes(keyword) && filterItems.push(item);
+        });
+      }
 
-    return _super.apply(this, arguments);
+      _this.setState({
+        filterItems: filterItems,
+        searchbarValue: keyword
+      });
+    });
+    _this.state = {
+      filterItems: _this.props.dropdownItems,
+      searchbarValue: '',
+      cachedropdownItems: _this.props.dropdownItems
+    };
+    return _this;
   }
 
-  _createClass(SelectDropdown, [{
+  (0, _createClass2["default"])(SelectDropdown, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.focus();
+    }
+  }, {
     key: "onClickOption",
     value: function onClickOption(e, item, index) {
-      e && e.stopPropagation();
+      e.stopPropagation();
+      e.preventDefault();
 
       if (item.disabled) {
         return;
       }
 
+      this.props.mode === 'single' && this.props.isOnSearch && this.setState({
+        cachedropdownItems: this.props.dropdownItems
+      });
       this.props.onClickOption(item, index);
     }
+  }, {
+    key: "searchEvent",
+    value: function searchEvent(e) {
+      var filterText = e.target.value;
+      this.filterOptions(filterText);
+      this.props.onSearch(filterText);
+      this.setState({
+        searchbarValue: filterText
+      });
+    }
+  }, {
+    key: "hightlightKeyword",
+    value: function hightlightKeyword(text, uniqueKey) {
+      var searchbarValue = this.state.searchbarValue;
+      var _keyword = this.state.searchbarValue;
+      _keyword = searchbarValue.includes('[') ? _keyword.replace(/\[/gi, '\\[') : _keyword;
+      _keyword = searchbarValue.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword;
+      _keyword = searchbarValue.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword;
+      var parts = text.toString().split(new RegExp("(".concat(_keyword, ")"), 'gi'));
+      return this.state.searchbarValue.length > 0 ? _react["default"].createElement("p", {
+        key: uniqueKey
+      }, parts.map(function (part, i) {
+        return part === searchbarValue ? _react["default"].createElement("span", {
+          key: i,
+          className: 'hi-select__dropdown--item__name-hightlight'
+        }, part) : part;
+      })) : text;
+    }
   }, {
     key: "onMouseEnter",
     value: function onMouseEnter(item, index) {
@@ -78,6 +136,34 @@ var SelectDropdown = /*#__PURE__*/function (_Component) {
         return item.id;
       }).indexOf(item.id) > -1;
     }
+  }, {
+    key: "cleanSearchbarValue",
+    value: function cleanSearchbarValue(e) {
+      e.stopPropagation();
+      var filterText = '';
+      this.filterOptions(filterText);
+      this.props.onSearch(filterText);
+      this.setState({
+        searchbarValue: filterText
+      });
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(evt) {
+      if (evt.keyCode === 13) {
+        this.props.onEnterSelect();
+      }
+
+      if (evt.keyCode === 38) {
+        evt.preventDefault();
+        this.props.moveFocusedIndex('up');
+      }
+
+      if (evt.keyCode === 40) {
+        evt.preventDefault();
+        this.props.moveFocusedIndex('down');
+      }
+    }
   }, {
     key: "renderOption",
     value: function renderOption(mode, isSelected, item) {
@@ -89,88 +175,146 @@ var SelectDropdown = /*#__PURE__*/function (_Component) {
         return this.props.dropdownRender(item, isSelected);
       }
 
-      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, mode === 'multiple' && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__dropdown--item__checkbox"
-      }, /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
+      var paddingNum = mode === 'multiple' ? 48 : 24;
+      var style = {
+        width: this.props.optionWidth ? this.props.optionWidth - paddingNum : this.props.selectInputWidth ? this.props.selectInputWidth - paddingNum : null
+      };
+      return _react["default"].createElement(_react["default"].Fragment, null, mode === 'multiple' && _react["default"].createElement(_checkbox["default"], {
+        className: "hi-select__dropdown--item__checkbox",
         checked: isSelected,
         disabled: item.disabled
-      })), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__dropdown--item__name"
-      }, item.name), mode === 'single' && isSelected && /*#__PURE__*/_react["default"].createElement("div", {
+      }, _react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__name",
+        style: style
+      }, this.props.isOnSearch ? item.title : this.hightlightKeyword(item.title || '', item.id))), mode === 'single' && _react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__name",
+        style: style
+      }, this.props.isOnSearch ? item.title : this.hightlightKeyword(item.title || '', item.id)), mode === 'single' && isSelected && _react["default"].createElement("div", {
         className: "hi-select__dropdown--item__check-icon"
-      }, /*#__PURE__*/_react["default"].createElement("i", {
+      }, _react["default"].createElement("i", {
         className: "hi-icon icon-check"
       })));
     }
   }, {
     key: "render",
     value: function render() {
-      var _this = this;
-
-      var _this$props = this.props,
-          mode = _this$props.mode,
-          dropdownItems = _this$props.dropdownItems,
-          focusedIndex = _this$props.focusedIndex,
-          matchFilter = _this$props.matchFilter,
-          noFoundTip = _this$props.noFoundTip,
-          loading = _this$props.loading,
-          optionWidth = _this$props.optionWidth,
-          showCheckAll = _this$props.showCheckAll,
-          checkAll = _this$props.checkAll,
-          dropdownRender = _this$props.dropdownRender,
-          localeDatas = _this$props.localeDatas;
+      var _this2 = this;
+
+      var _this$props2 = this.props,
+          mode = _this$props2.mode,
+          focusedIndex = _this$props2.focusedIndex,
+          matchFilter = _this$props2.matchFilter,
+          noFoundTip = _this$props2.noFoundTip,
+          loading = _this$props2.loading,
+          optionWidth = _this$props2.optionWidth,
+          showCheckAll = _this$props2.showCheckAll,
+          dropdownRender = _this$props2.dropdownRender,
+          theme = _this$props2.theme,
+          searchable = _this$props2.searchable,
+          onFocus = _this$props2.onFocus,
+          onBlur = _this$props2.onBlur,
+          searchPlaceholder = _this$props2.searchPlaceholder,
+          localeMap = _this$props2.localeMap;
+      var _this$state = this.state,
+          filterItems = _this$state.filterItems,
+          searchbarValue = _this$state.searchbarValue;
       var matched = 0;
       var style = optionWidth && {
         width: optionWidth
       };
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      return _react["default"].createElement("div", {
         className: "hi-select__dropdown",
-        onClick: this.props.onClick,
         style: style
-      }, loading && /*#__PURE__*/_react["default"].createElement("div", {
+      }, searchable && _react["default"].createElement("div", {
+        className: "hi-select__dropdown__searchbar"
+      }, _react["default"].createElement("div", {
+        className: "hi-select__dropdown__searchbar--content"
+      }, _react["default"].createElement(_icon["default"], {
+        name: "search"
+      }), _react["default"].createElement("input", {
+        className: "hi-select__dropdown__searchbar--input",
+        placeholder: searchPlaceholder,
+        clearable: "true",
+        ref: function ref(input) {
+          _this2.searchbar = input;
+        },
+        value: searchbarValue,
+        onFocus: onFocus.bind(this),
+        onBlur: onBlur.bind(this),
+        clearabletrigger: "always",
+        onKeyDown: this.handleKeyDown.bind(this),
+        onInput: this.searchEvent.bind(this),
+        onChange: this.searchEvent.bind(this)
+      }), searchbarValue.length > 0 ? _react["default"].createElement(_icon["default"], {
+        name: "close-circle",
+        style: {
+          cursor: 'pointer'
+        },
+        onClick: this.cleanSearchbarValue.bind(this)
+      }) : null)), loading && _react["default"].createElement("div", {
         className: "hi-select__dropdown--loading"
-      }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+      }, _react["default"].createElement(_loading["default"], {
         size: "small"
-      })), !loading && /*#__PURE__*/_react["default"].createElement("ul", {
+      })), !loading && _react["default"].createElement("ul", {
         className: "hi-select__dropdown--items"
-      }, dropdownItems.map(function (item, index) {
+      }, filterItems.map(function (item, index) {
         if (matchFilter(item)) {
-          matched++; // const isSelected = selectedItems[item.id]
+          matched++;
 
-          var isSelected = _this.itemSelected(item);
+          var isSelected = _this2.itemSelected(item);
 
           var isDisabled = item.disabled;
-          return /*#__PURE__*/_react["default"].createElement("li", {
-            className: (0, _classnames["default"])('hi-select__dropdown--item', {
+          return _react["default"].createElement("li", {
+            className: (0, _classnames["default"])('hi-select__dropdown--item', "theme__".concat(theme), {
               'is-active': isSelected,
               'is-disabled': isDisabled,
               'hi-select__dropdown--item-default': !item.children && !dropdownRender
             }),
             onClick: function onClick(e) {
-              return _this.onClickOption(e, item, index);
+              return _this2.onClickOption(e, item, index);
             },
             key: item.id,
             "data-focused": focusedIndex === index,
             onMouseEnter: function onMouseEnter() {
-              return _this.onMouseEnter(item, index);
+              return _this2.onMouseEnter(item, index);
             }
-          }, _this.renderOption(mode, isSelected, item));
+          }, _this2.renderOption(mode, isSelected, item));
         }
-      }), matched === 0 && /*#__PURE__*/_react["default"].createElement("li", {
+      }), matched === 0 && _react["default"].createElement("li", {
         className: "hi-select__dropdown--item hi-select__dropdown-item--empty is-disabled",
         onClick: function onClick(e) {
           return e.stopPropagation();
         }
-      }, noFoundTip)), mode === 'multiple' && showCheckAll && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__dropdown-check-all",
-        onClick: checkAll
-      }, localeDatas.select.checkAll));
+      }, noFoundTip)), mode === 'multiple' && showCheckAll && _react["default"].createElement("div", {
+        className: "hi-select__dropdown-check-all theme__".concat(theme),
+        onClick: this.props.checkAll.bind(this, filterItems)
+      }, localeMap['checkAll']));
+    }
+  }], [{
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var selectedItems = nextProps.selectedItems,
+          mode = nextProps.mode,
+          isOnSearch = nextProps.isOnSearch,
+          dropdownItems = nextProps.dropdownItems,
+          show = nextProps.show,
+          setStateAutolaod = nextProps.setStateAutolaod;
+      var searchbarValue = prevState.searchbarValue,
+          cachedropdownItems = prevState.cachedropdownItems;
+
+      var _filterItems = selectedItems.length > 0 && searchbarValue.length === 0 && mode === 'single' && isOnSearch ? cachedropdownItems : dropdownItems;
+
+      var _searchbarValue = show ? searchbarValue : '';
+
+      _filterItems.length && !show && setStateAutolaod();
+      return {
+        filterItems: _filterItems,
+        searchbarValue: _searchbarValue
+      };
     }
   }]);
-
   return SelectDropdown;
 }(_react.Component);
 
-var _default = (0, _context["default"])(SelectDropdown);
-
+var _default = SelectDropdown;
 exports["default"] = _default;