@hi-ui/hiui 2.15.9 → 2.15.11

package/es/select/SelectDropdown.js

@@ -1,132 +1,70 @@
 "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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _classnames = _interopRequireDefault(require("classnames"));
 
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _checkbox = _interopRequireDefault(require("../checkbox"));
 
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _loading = _interopRequireDefault(require("../loading"));
 
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _context = _interopRequireDefault(require("../context"));
 
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _react = _interopRequireWildcard(require("react"));
+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 _classnames = _interopRequireDefault(require("classnames"));
+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 _checkbox = _interopRequireDefault(require("../checkbox"));
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-var _loading = _interopRequireDefault(require("../loading"));
+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); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-var _icon = _interopRequireDefault(require("../icon"));
+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); }
 
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+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; } }
 
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
 var SelectDropdown = /*#__PURE__*/function (_Component) {
-  (0, _inherits2["default"])(SelectDropdown, _Component);
+  _inherits(SelectDropdown, _Component);
 
   var _super = _createSuper(SelectDropdown);
 
-  function SelectDropdown(props) {
-    var _this;
-
-    (0, _classCallCheck2["default"])(this, SelectDropdown);
-    _this = _super.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);
-        });
-      }
+  function SelectDropdown() {
+    _classCallCheck(this, SelectDropdown);
 
-      _this.setState({
-        filterItems: filterItems,
-        searchbarValue: keyword
-      });
-    });
-    _this.state = {
-      filterItems: _this.props.dropdownItems,
-      searchbarValue: '',
-      cachedropdownItems: _this.props.dropdownItems
-    };
-    return _this;
+    return _super.apply(this, arguments);
   }
 
-  (0, _createClass2["default"])(SelectDropdown, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.focus();
-    }
-  }, {
+  _createClass(SelectDropdown, [{
     key: "onClickOption",
     value: function onClickOption(e, item, index) {
-      e.stopPropagation();
-      e.preventDefault();
+      e && e.stopPropagation();
 
       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 ? /*#__PURE__*/_react["default"].createElement("p", {
-        key: uniqueKey
-      }, parts.map(function (part, i) {
-        return part === searchbarValue ? /*#__PURE__*/_react["default"].createElement("span", {
-          key: i,
-          className: 'hi-select__dropdown--item__name-hightlight'
-        }, part) : part;
-      })) : text;
-    }
   }, {
     key: "onMouseEnter",
     value: function onMouseEnter(item, index) {
@@ -140,34 +78,6 @@ 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) {
@@ -179,21 +89,14 @@ var SelectDropdown = /*#__PURE__*/function (_Component) {
         return this.props.dropdownRender(item, isSelected);
       }
 
-      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 /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, mode === 'multiple' && /*#__PURE__*/_react["default"].createElement(_checkbox["default"], {
-        className: "hi-select__dropdown--item__checkbox",
+      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"], {
         checked: isSelected,
         disabled: item.disabled
-      }, /*#__PURE__*/_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' && /*#__PURE__*/_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 && /*#__PURE__*/_react["default"].createElement("div", {
+      })), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "hi-select__dropdown--item__name"
+      }, item.name), mode === 'single' && isSelected && /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-select__dropdown--item__check-icon"
       }, /*#__PURE__*/_react["default"].createElement("i", {
         className: "hi-icon icon-check"
@@ -202,87 +105,56 @@ var SelectDropdown = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      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 _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 matched = 0;
       var style = optionWidth && {
         width: optionWidth
       };
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-select__dropdown",
+        onClick: this.props.onClick,
         style: style
-      }, searchable && /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__dropdown__searchbar"
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        className: "hi-select__dropdown__searchbar--content"
-      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: "search"
-      }), /*#__PURE__*/_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 ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-        name: "close-circle",
-        style: {
-          cursor: 'pointer'
-        },
-        onClick: this.cleanSearchbarValue.bind(this)
-      }) : null)), loading && /*#__PURE__*/_react["default"].createElement("div", {
+      }, loading && /*#__PURE__*/_react["default"].createElement("div", {
         className: "hi-select__dropdown--loading"
       }, /*#__PURE__*/_react["default"].createElement(_loading["default"], {
         size: "small"
       })), !loading && /*#__PURE__*/_react["default"].createElement("ul", {
         className: "hi-select__dropdown--items"
-      }, filterItems.map(function (item, index) {
+      }, dropdownItems.map(function (item, index) {
         if (matchFilter(item)) {
-          matched++;
+          matched++; // const isSelected = selectedItems[item.id]
 
-          var isSelected = _this2.itemSelected(item);
+          var isSelected = _this.itemSelected(item);
 
           var isDisabled = item.disabled;
           return /*#__PURE__*/_react["default"].createElement("li", {
-            className: (0, _classnames["default"])('hi-select__dropdown--item', "theme__".concat(theme), {
+            className: (0, _classnames["default"])('hi-select__dropdown--item', {
               'is-active': isSelected,
               'is-disabled': isDisabled,
               'hi-select__dropdown--item-default': !item.children && !dropdownRender
             }),
             onClick: function onClick(e) {
-              return _this2.onClickOption(e, item, index);
+              return _this.onClickOption(e, item, index);
             },
             key: item.id,
             "data-focused": focusedIndex === index,
             onMouseEnter: function onMouseEnter() {
-              return _this2.onMouseEnter(item, index);
+              return _this.onMouseEnter(item, index);
             }
-          }, _this2.renderOption(mode, isSelected, item));
+          }, _this.renderOption(mode, isSelected, item));
         }
       }), matched === 0 && /*#__PURE__*/_react["default"].createElement("li", {
         className: "hi-select__dropdown--item hi-select__dropdown-item--empty is-disabled",
@@ -290,35 +162,15 @@ var SelectDropdown = /*#__PURE__*/function (_Component) {
           return e.stopPropagation();
         }
       }, noFoundTip)), mode === 'multiple' && showCheckAll && /*#__PURE__*/_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
-      };
+        className: "hi-select__dropdown-check-all",
+        onClick: checkAll
+      }, localeDatas.select.checkAll));
     }
   }]);
+
   return SelectDropdown;
 }(_react.Component);
 
-var _default = SelectDropdown;
+var _default = (0, _context["default"])(SelectDropdown);
+
 exports["default"] = _default;