react-select-input-v2 1.0.6 → 1.0.8-react16

package/es/react-select-input.css

@@ -1,92 +1,92 @@
-
-
-.ris {
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  font-size:12px;
-}
-
-.ris * {
-  box-sizing: border-box;
-}
-
-.ris.ris-is-clearable .ris-clearable {
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  font-size:1.1em;
-  margin-top:-1px;
-  transform: translate(0, -50%);
-  padding:5px;
-  color: #555;
-  cursor:pointer;
-}
-
-.ris.ris-is-creatable .ris-input {
-  padding-right:15px;
-}
-
-.ris .ris-input {
-  display: block;
-  resize: none;
-  width: 100%;
-  padding: 5px;
-  border: 5px solid #eee;
-  border-radius: 5px;
-  font-size:inherit;
-}
-
-.ris .ris-input:active, .ris .ris-input:focus {
-  outline: 0;
-  border: 5px solid #1e88e5; 
-}
-
-.ris.ris-open-up .ris-options {
-  top:0;
-  transform:translate(-50%,-100%);
-}
-
-.ris .ris-options {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin:0;
-  width: calc(100% - 10px);
-  background: #fff;
-  transform:translate(-50%, 0);
-  border: 1px solid #eee;
-  overflow: auto;
-  box-shadow: 0 2px 3px 1px #eee;
-  max-height:245px;
-  font-size:inherit;
-}
-
-.ris .ris-options .ris-option {
-  padding: 5px;
-  cursor: pointer;
-  border-bottom: 1px solid #efefef;
-}
-
-.ris .ris-options .ris-option:last-child {
-  border-bottom: 0;
-}
-
-.ris .ris-options .ris-option:hover {
-  background: #bbdefb;
-}
-
-.ris .ris-options .ris-option.current {
-  background:#bbdefb;
-}
-
-.ris .ris-options .ris-option.selected {
-  background:#1e88e5;
-  color: #fff;
-}
-
-.ris .ris-options.ris-no-options {
-  padding:5px;
-  text-align:center;
-  color:#ccc;
-}
+
+
+.ris {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  font-size:12px;
+}
+
+.ris * {
+  box-sizing: border-box;
+}
+
+.ris.ris-is-clearable .ris-clearable {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  font-size:1.1em;
+  margin-top:-1px;
+  transform: translate(0, -50%);
+  padding:5px;
+  color: #555;
+  cursor:pointer;
+}
+
+.ris.ris-is-creatable .ris-input {
+  padding-right:15px;
+}
+
+.ris .ris-input {
+  display: block;
+  resize: none;
+  width: 100%;
+  padding: 5px;
+  border: 5px solid #eee;
+  border-radius: 5px;
+  font-size:inherit;
+}
+
+.ris .ris-input:active, .ris .ris-input:focus {
+  outline: 0;
+  border: 5px solid #1e88e5; 
+}
+
+.ris.ris-open-up .ris-options {
+  top:0;
+  transform:translate(-50%,-100%);
+}
+
+.ris .ris-options {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin:0;
+  width: calc(100% - 10px);
+  background: #fff;
+  transform:translate(-50%, 0);
+  border: 1px solid #eee;
+  overflow: auto;
+  box-shadow: 0 2px 3px 1px #eee;
+  max-height:245px;
+  font-size:inherit;
+}
+
+.ris .ris-options .ris-option {
+  padding: 5px;
+  cursor: pointer;
+  border-bottom: 1px solid #efefef;
+}
+
+.ris .ris-options .ris-option:last-child {
+  border-bottom: 0;
+}
+
+.ris .ris-options .ris-option:hover {
+  background: #bbdefb;
+}
+
+.ris .ris-options .ris-option.current {
+  background:#bbdefb;
+}
+
+.ris .ris-options .ris-option.selected {
+  background:#1e88e5;
+  color: #fff;
+}
+
+.ris .ris-options.ris-no-options {
+  padding:5px;
+  text-align:center;
+  color:#ccc;
+}

package/lib/index.js

@@ -3,10 +3,16 @@
 exports.__esModule = true;
 exports.default = undefined;
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _reactAutosizeTextarea = require('react-autosize-textarea');
 
 var _reactAutosizeTextarea2 = _interopRequireDefault(_reactAutosizeTextarea);
@@ -57,7 +63,6 @@ var SelectInput = function (_Component) {
       if (_this.props.collapseOnSelect) state = _this.setIsOpen(state, false);
       state = _this.manipState(state, 'searchMatchOptions', _this.matchingOptions(_this.props.options, state.value));
       _this.setState(state);
-
       if (_this.isFunction(_this.props.onSelect)) _this.props.onSelect(option);
     };
 
@@ -70,14 +75,11 @@ var SelectInput = function (_Component) {
       var state = _this.manipState(_this.state, 'value', event.target.value);
       state = _this.manipState(state, 'searchMatchOptions', _this.matchingOptions(_this.props.options, event.target.value));
       state = _this.setIsOpen(state, true);
-
       if (!state.value) {
         state = _this.manipState(state, 'currentOption', -1);
         state = _this.manipState(state, 'selectedOption', null);
       }
-
       if (_this.isFunction(_this.props.onChange)) _this.props.onChange(event);
-
       _this.setState(state);
     };
 
@@ -85,7 +87,6 @@ var SelectInput = function (_Component) {
       var state = _this.setIsOpen(_this.state, true);
       state = _this.manipState(state, 'searchMatchOptions', _this.matchingOptions(_this.props.options, event.target.value));
       _this.setState(state);
-
       if (_this.isFunction(_this.props.onFocus)) _this.props.onFocus(event);
     };
 
@@ -96,65 +97,47 @@ var SelectInput = function (_Component) {
       state = _this.manipState(state, 'currentOption', -1);
       state = _this.manipState(state, 'selectedOption', null);
       _this.setState(state);
-
       if (_this.isFunction(_this.props.onClear)) _this.props.onClear();
     };
 
     _this.handleBlur = function (event) {
       if (_this.props.collapseOnBlur) {
-        var state = _this.setIsOpen(_this.state, false);
-        _this.setState(state);
+        _this.setState(_this.setIsOpen(_this.state, false));
       }
-
       if (_this.isFunction(_this.props.onBlur)) _this.props.onBlur(event);
     };
 
     _this.handleKeyUp = function (event) {
-      if (event.key === 'Enter' && _this.state.currentOption > -1) {
-        _this.handleSelect(_this.pickOption());
-      } else if (event.key === 'Enter' && _this.state.currentOption === -1) {
-        _this.handleSelect(_this.pickOption());
-      }
-
-      if (event.key === 'Escape' && _this.props.collapseOnEscape) {
-        _this.setState(_this.setIsOpen(_this.state, false));
-      }
-
+      if (event.key === 'Enter' && _this.state.currentOption > -1) _this.handleSelect(_this.pickOption());
+      if (event.key === 'Escape' && _this.props.collapseOnEscape) _this.setState(_this.setIsOpen(_this.state, false));
       if (_this.isFunction(_this.props.onKeyUp)) _this.props.onKeyUp(event);
     };
 
     _this.handleKeyDown = function (event) {
       if (event.key === 'Enter' && _this.props.disableEnter) event.preventDefault();
-
-      if (event.key === 'Escape' && _this.props.collapseOnEscape) {
-        var state = _this.setIsOpen(_this.state, false);
-        _this.setState(state);
-      }
-
-      _this.handleOptionNavigation(event);
-
+      if (event.key === 'Escape' && _this.props.collapseOnEscape) _this.setState(_this.setIsOpen(_this.state, false));
       if (_this.isFunction(_this.props.onKeyDown)) _this.props.onKeyDown(event);
+      _this.handleOptionNavigation(event);
     };
 
     _this.handleOptionNavigation = function (event) {
       var state = {};
       var currentOption = _this.state.currentOption;
 
-      if (event.key === 'ArrowUp' || event.key === 'ArrowDown' && _this.disableEnter) event.preventDefault();
+      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') event.preventDefault();
 
       if (event.key === 'ArrowUp' && currentOption === -1 && _this.props.openUp) currentOption = _this.state.searchMatchOptions.length;
 
       if (_this.props.openUp) {
-        if (event.key === 'ArrowDown') {
-          if (currentOption > -1) currentOption++;else currentOption = -1;
-        } else if (event.key === 'ArrowUp') currentOption--;
+        if (event.key === 'ArrowDown') currentOption = currentOption > -1 ? currentOption + 1 : -1;else if (event.key === 'ArrowUp') currentOption--;
       } else {
         if (event.key === 'ArrowDown') currentOption++;else if (event.key === 'ArrowUp') currentOption--;
       }
 
-      if (currentOption < -1) currentOption = -1;else if (currentOption > _this.state.searchMatchOptions.length - 1 && !_this.props.openUp) currentOption = _this.state.searchMatchOptions.length - 1;else if (currentOption > _this.state.searchMatchOptions.length - 1 && _this.props.openUp) currentOption = -1;
+      if (currentOption < -1) currentOption = -1;else if (currentOption > _this.state.searchMatchOptions.length - 1) currentOption = _this.state.searchMatchOptions.length - 1;
 
       state = _this.manipState(_this.state, 'currentOption', currentOption);
+
       var optionRef = currentOption > -1 ? _this['option-' + _this.state.searchMatchOptions[currentOption][_this.props.valueKey]] : null;
       if (optionRef) optionRef.scrollIntoViewIfNeeded(false);
 
@@ -166,12 +149,12 @@ var SelectInput = function (_Component) {
       var searchValue = value.replace(/\s/g, '');
       var searchOptions = [];
 
-      if (options && options.length > 0 && value) searchOptions = options.filter(function (option, index) {
-        var regexp = new RegExp(searchValue, 'gi');
-        var value = option[_this.props.valueKey] || '';
+      if (options && options.length > 0 && value) searchOptions = options.filter(function (option) {
+        var val = option[_this.props.valueKey] || '';
         var label = option[_this.props.labelKey] || '';
-        return regexp.test(label.replace(/\s/g, '')) || regexp.test(value.replace(/\s/g, ''));
-      });else searchOptions = options.slice(0, options.length);
+        var regexp = new RegExp(searchValue, 'gi');
+        return regexp.test(label.replace(/\s/g, '')) || regexp.test(val.replace(/\s/g, ''));
+      });else searchOptions = options.slice();
 
       if (_this.props.openUp) searchOptions.reverse();
 
@@ -186,15 +169,13 @@ var SelectInput = function (_Component) {
     };
 
     _this.setIsOpen = function (state, show) {
-      return Object.assign({}, state, {
-        isOpen: show || false
-      });
+      return _extends({}, state, { isOpen: show || false });
     };
 
     _this.manipState = function (state, key, value) {
-      var _Object$assign;
+      var _extends2;
 
-      return Object.assign({}, state, (_Object$assign = {}, _Object$assign[key] = value, _Object$assign));
+      return _extends({}, state, (_extends2 = {}, _extends2[key] = value, _extends2));
     };
 
     _this.isFunction = function (obj) {
@@ -202,7 +183,7 @@ var SelectInput = function (_Component) {
     };
 
     _this.handleOutsideClick = function (event) {
-      if (!_this.ris.contains(event.target) && _this.props.collapseOnBlur) _this.setState(_this.setIsOpen(_this.state, false));
+      if (_this.ris && !_this.ris.contains(event.target) && _this.props.collapseOnBlur) _this.setState({ isOpen: false });
     };
 
     _this.state = {
@@ -221,9 +202,10 @@ var SelectInput = function (_Component) {
 
   SelectInput.prototype.componentDidUpdate = function componentDidUpdate() {
     if (this.props.openUp && this.state.currentOption === -1 && this.state.isOpen && !this.state.selectedOption) {
-      this.options.scrollTop = this.options.scrollHeight;
+      if (this.options) this.options.scrollTop = this.options.scrollHeight;
     } else if (this.props.openUp && this.state.selectedOption && this.state.isOpen) {
-      this['option-' + this.state.selectedOption].scrollIntoViewIfNeeded(true);
+      var ref = this['option-' + this.state.selectedOption];
+      if (ref && ref.scrollIntoViewIfNeeded) ref.scrollIntoViewIfNeeded(true);
     }
   };
 
@@ -231,21 +213,11 @@ var SelectInput = function (_Component) {
     document.removeEventListener('click', this.handleOutsideClick);
   };
 
-  /*
-    Various renderers
-  */
+  // ======= 渲染选项 =======
 
-  /*
-    Handle different events
-  */
 
-  /*
-    Searching function
-  */
+  // ======= 事件处理 =======
 
-  /*
-    Various helpers
-  */
 
   SelectInput.prototype.render = function render() {
     var _this2 = this;
@@ -274,22 +246,18 @@ var SelectInput = function (_Component) {
           return _this2.input = ref;
         }
       }),
-      this.props.clearable ? _react2.default.createElement(
+      this.props.clearable && _react2.default.createElement(
         'div',
         { className: 'ris-clearable', onClick: this.handleClear },
         'x'
-      ) : null,
-      this.state.isOpen ? this.state.searchMatchOptions.length > 0 ? _react2.default.createElement(
+      ),
+      this.state.isOpen && this.state.searchMatchOptions.length > 0 && _react2.default.createElement(
         'div',
         { className: 'ris-options', ref: function ref(_ref3) {
             return _this2.options = _ref3;
           } },
         this.renderOptions(this.state.searchMatchOptions)
-      ) : this.props.noOptions ? _react2.default.createElement(
-        'div',
-        { className: 'ris-options ris-no-options' },
-        this.props.noOptions
-      ) : null : null
+      )
     );
   };
 
@@ -300,29 +268,42 @@ exports.default = SelectInput;
 
 
 SelectInput.defaultProps = {
-  uniqueKey: 'react-select-input', //String
-  style: null, //Object
-  ref: null, //Function
-  value: '', //String
-  valueKey: 'value', //String
-  labelKey: 'label', //String
-  placeholder: 'Enter text', //String
-  className: '', //String
-  openUp: false, //Boolean
-  disableEnter: true, //Boolean
-  collapseOnBlur: true, //Boolean
-  collapseOnEscape: true, //Boolean
-  collapseOnSelect: true, //Boolean
-  autoFocus: true, //Boolean
-  clearable: true, //Boolean
-  options: [], //Array
-  onChange: undefined, //Function
-  onSelect: undefined, //Function
-  onFocus: undefined, //Function
-  onBlur: undefined, //Function
-  onKeyUp: undefined, //Function
-  onKeyDown: undefined, //Function
-  onClear: undefined, //Function
-  noOptions: undefined //JSX
+  uniqueKey: 'react-select-input',
+  value: '',
+  valueKey: 'value',
+  labelKey: 'label',
+  placeholder: 'Enter text',
+  openUp: false,
+  disableEnter: true,
+  collapseOnBlur: true,
+  collapseOnEscape: true,
+  collapseOnSelect: true,
+  autoFocus: true,
+  clearable: true,
+  options: []
 };
+
+SelectInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  uniqueKey: _propTypes2.default.string,
+  value: _propTypes2.default.string,
+  valueKey: _propTypes2.default.string,
+  labelKey: _propTypes2.default.string,
+  placeholder: _propTypes2.default.string,
+  openUp: _propTypes2.default.bool,
+  disableEnter: _propTypes2.default.bool,
+  collapseOnBlur: _propTypes2.default.bool,
+  collapseOnEscape: _propTypes2.default.bool,
+  collapseOnSelect: _propTypes2.default.bool,
+  autoFocus: _propTypes2.default.bool,
+  clearable: _propTypes2.default.bool,
+  options: _propTypes2.default.array,
+  onChange: _propTypes2.default.func,
+  onSelect: _propTypes2.default.func,
+  onFocus: _propTypes2.default.func,
+  onBlur: _propTypes2.default.func,
+  onKeyUp: _propTypes2.default.func,
+  onKeyDown: _propTypes2.default.func,
+  onClear: _propTypes2.default.func,
+  noOptions: _propTypes2.default.node
+} : {};
 module.exports = exports['default'];

package/lib/react-select-input.css

@@ -1,92 +1,92 @@
-
-
-.ris {
-  display: block;
-  position: relative;
-  box-sizing: border-box;
-  font-size:12px;
-}
-
-.ris * {
-  box-sizing: border-box;
-}
-
-.ris.ris-is-clearable .ris-clearable {
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  font-size:1.1em;
-  margin-top:-1px;
-  transform: translate(0, -50%);
-  padding:5px;
-  color: #555;
-  cursor:pointer;
-}
-
-.ris.ris-is-creatable .ris-input {
-  padding-right:15px;
-}
-
-.ris .ris-input {
-  display: block;
-  resize: none;
-  width: 100%;
-  padding: 5px;
-  border: 5px solid #eee;
-  border-radius: 5px;
-  font-size:inherit;
-}
-
-.ris .ris-input:active, .ris .ris-input:focus {
-  outline: 0;
-  border: 5px solid #1e88e5; 
-}
-
-.ris.ris-open-up .ris-options {
-  top:0;
-  transform:translate(-50%,-100%);
-}
-
-.ris .ris-options {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin:0;
-  width: calc(100% - 10px);
-  background: #fff;
-  transform:translate(-50%, 0);
-  border: 1px solid #eee;
-  overflow: auto;
-  box-shadow: 0 2px 3px 1px #eee;
-  max-height:245px;
-  font-size:inherit;
-}
-
-.ris .ris-options .ris-option {
-  padding: 5px;
-  cursor: pointer;
-  border-bottom: 1px solid #efefef;
-}
-
-.ris .ris-options .ris-option:last-child {
-  border-bottom: 0;
-}
-
-.ris .ris-options .ris-option:hover {
-  background: #bbdefb;
-}
-
-.ris .ris-options .ris-option.current {
-  background:#bbdefb;
-}
-
-.ris .ris-options .ris-option.selected {
-  background:#1e88e5;
-  color: #fff;
-}
-
-.ris .ris-options.ris-no-options {
-  padding:5px;
-  text-align:center;
-  color:#ccc;
-}
+
+
+.ris {
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  font-size:12px;
+}
+
+.ris * {
+  box-sizing: border-box;
+}
+
+.ris.ris-is-clearable .ris-clearable {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  font-size:1.1em;
+  margin-top:-1px;
+  transform: translate(0, -50%);
+  padding:5px;
+  color: #555;
+  cursor:pointer;
+}
+
+.ris.ris-is-creatable .ris-input {
+  padding-right:15px;
+}
+
+.ris .ris-input {
+  display: block;
+  resize: none;
+  width: 100%;
+  padding: 5px;
+  border: 5px solid #eee;
+  border-radius: 5px;
+  font-size:inherit;
+}
+
+.ris .ris-input:active, .ris .ris-input:focus {
+  outline: 0;
+  border: 5px solid #1e88e5; 
+}
+
+.ris.ris-open-up .ris-options {
+  top:0;
+  transform:translate(-50%,-100%);
+}
+
+.ris .ris-options {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin:0;
+  width: calc(100% - 10px);
+  background: #fff;
+  transform:translate(-50%, 0);
+  border: 1px solid #eee;
+  overflow: auto;
+  box-shadow: 0 2px 3px 1px #eee;
+  max-height:245px;
+  font-size:inherit;
+}
+
+.ris .ris-options .ris-option {
+  padding: 5px;
+  cursor: pointer;
+  border-bottom: 1px solid #efefef;
+}
+
+.ris .ris-options .ris-option:last-child {
+  border-bottom: 0;
+}
+
+.ris .ris-options .ris-option:hover {
+  background: #bbdefb;
+}
+
+.ris .ris-options .ris-option.current {
+  background:#bbdefb;
+}
+
+.ris .ris-options .ris-option.selected {
+  background:#1e88e5;
+  color: #fff;
+}
+
+.ris .ris-options.ris-no-options {
+  padding:5px;
+  text-align:center;
+  color:#ccc;
+}