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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018 Samrith Shankar
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018 Samrith Shankar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,82 +1,82 @@
-# react-select-input
-
-[![Travis](https://img.shields.io/travis/samrith-s/react-select-input/master.svg)][build]
-[![npm package](https://img.shields.io/npm/v/react-select-input.svg)][npm]
-[![GitHub license](https://img.shields.io/github/license/samrith-s/react-select-input.svg)][license]
-
-A simple combination of traditional HTML5 input and select.
-
-## v2 underway!
-
-I've left this project inactive for way too long (`v1.0.0` was launched a year after initial release!). Going through the code, there are a lot of stuff that could be improved. For all the users, the entire project will undergo a complete rewrite. Many of these changes will be breaking, leading up to the release of v2.
-
-**Head over to the [Version 2 thread](https://github.com/samrith-s/react-select-input/issues/2) to know more and discuss!**
-
-### Props Overview
-
-```javascript
-InputSelect.defaultProps = {
-  uniqueKey: 'react-select-input', //String
-  style: null, //Object
-  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 - NO EFFECT
-  options: [], //Array
-  onSelect: undefined, //Function (option)
-  onClear: undefined, // Function
-  onChange: undefined, //Function (event)
-  onFocus: undefined, //Function (event)
-  onBlur: undefined, //Function (event)
-  onKeyUp: undefined, //Function (event)
-  onKeyDown: undefined, //Function (event)
-  noOptions: undefined //JSX
-};
-```
-
-### Options
-
-| Prop             |  Type   | Default                                                                                       |
-| ---------------- | :-----: | --------------------------------------------------------------------------------------------- |
-| uniqueKey        | String  | `"react-select-input"` Unique key for the component.                                          |
-| style            | Object  | `null` Any custom inline styles that need to be passed.                                       |
-| value            | String  | `""` The value to either populate or control the component.                                   |
-| valueKey         | String  | `"value"` The key from your options which you want to use as the value key. Should be unique. |
-| labelKey         | String  | `"label"` The key from your options for pretty display of options.                            |
-| placeholder      | String  | `"Enter text"` Placeholder for input.                                                         |
-| className        | String  | `""` Custom classes apart from the default classes to the wrapper.                            |
-| openUp           | Boolean | `false` Whether the select should work as a dropup or dropdown.                               |
-| disableEnter     | Boolean | `true` If the default return key behaviour should be preserved.                               |
-| collapseOnBlur   | Boolean | `true` Clicking outside the ref should collapse the select.                                   |
-| collapseOnEscape | Boolean | `true` While focused, hitting Escape collapse the select.                                     |
-| collapseOnSelect | Boolean | `true` Upon selection collapses the select.                                                   |
-| autoFocus        | Boolean | `true` On mount, focus the input field.                                                       |
-| clearable        | Boolean | `true` Show an icon to clear the entire select.                                               |
-| options          |  Array  | `[ ]` Array of options to use while rendering the list.                                       |
-| noOptions        |   JSX   | `undefined` JSX to render when no option matches search.                                      |
-
-### Methods
-
-| Prop      | Parameters | Description                                                                                   |
-| --------- | :--------: | --------------------------------------------------------------------------------------------- |
-| onChange  |   event    | Synthetic event of the input upon change.                                                     |
-| onSelect  |   option   | The selected option.<br />Gets triggered during both clicking and arrow navigation selection. |
-| onFocus   |   event    | Synthetic event of the input upon focus.                                                      |
-| onBlur    |   event    | Synthetic event of the input upon blur. Native function passed.                               |
-| onKeyUp   |   event    | Synthetic event of the input upon keyUp.                                                      |
-| onKeyDown |   event    | Synthetic event of the input upon keyDown.                                                    |
-| onClear   |    none    | A callback after clear if `clearable`.                                                        |
-
-Copyright &copy; 2018.
-
-[build]: https://travis-ci.org/samrith-s/react-select-input
-[npm]: https://www.npmjs.org/package/react-select-input
-[license]: https://github.com/samrith-s/react-select-input/blob/master/LICENSE
+# react-select-input
+
+[![Travis](https://img.shields.io/travis/samrith-s/react-select-input/master.svg)][build]
+[![npm package](https://img.shields.io/npm/v/react-select-input.svg)][npm]
+[![GitHub license](https://img.shields.io/github/license/samrith-s/react-select-input.svg)][license]
+
+A simple combination of traditional HTML5 input and select.
+
+## v2 underway!
+
+I've left this project inactive for way too long (`v1.0.0` was launched a year after initial release!). Going through the code, there are a lot of stuff that could be improved. For all the users, the entire project will undergo a complete rewrite. Many of these changes will be breaking, leading up to the release of v2.
+
+**Head over to the [Version 2 thread](https://github.com/samrith-s/react-select-input/issues/2) to know more and discuss!**
+
+### Props Overview
+
+```javascript
+InputSelect.defaultProps = {
+  uniqueKey: 'react-select-input', //String
+  style: null, //Object
+  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 - NO EFFECT
+  options: [], //Array
+  onSelect: undefined, //Function (option)
+  onClear: undefined, // Function
+  onChange: undefined, //Function (event)
+  onFocus: undefined, //Function (event)
+  onBlur: undefined, //Function (event)
+  onKeyUp: undefined, //Function (event)
+  onKeyDown: undefined, //Function (event)
+  noOptions: undefined //JSX
+};
+```
+
+### Options
+
+| Prop             |  Type   | Default                                                                                       |
+| ---------------- | :-----: | --------------------------------------------------------------------------------------------- |
+| uniqueKey        | String  | `"react-select-input"` Unique key for the component.                                          |
+| style            | Object  | `null` Any custom inline styles that need to be passed.                                       |
+| value            | String  | `""` The value to either populate or control the component.                                   |
+| valueKey         | String  | `"value"` The key from your options which you want to use as the value key. Should be unique. |
+| labelKey         | String  | `"label"` The key from your options for pretty display of options.                            |
+| placeholder      | String  | `"Enter text"` Placeholder for input.                                                         |
+| className        | String  | `""` Custom classes apart from the default classes to the wrapper.                            |
+| openUp           | Boolean | `false` Whether the select should work as a dropup or dropdown.                               |
+| disableEnter     | Boolean | `true` If the default return key behaviour should be preserved.                               |
+| collapseOnBlur   | Boolean | `true` Clicking outside the ref should collapse the select.                                   |
+| collapseOnEscape | Boolean | `true` While focused, hitting Escape collapse the select.                                     |
+| collapseOnSelect | Boolean | `true` Upon selection collapses the select.                                                   |
+| autoFocus        | Boolean | `true` On mount, focus the input field.                                                       |
+| clearable        | Boolean | `true` Show an icon to clear the entire select.                                               |
+| options          |  Array  | `[ ]` Array of options to use while rendering the list.                                       |
+| noOptions        |   JSX   | `undefined` JSX to render when no option matches search.                                      |
+
+### Methods
+
+| Prop      | Parameters | Description                                                                                   |
+| --------- | :--------: | --------------------------------------------------------------------------------------------- |
+| onChange  |   event    | Synthetic event of the input upon change.                                                     |
+| onSelect  |   option   | The selected option.<br />Gets triggered during both clicking and arrow navigation selection. |
+| onFocus   |   event    | Synthetic event of the input upon focus.                                                      |
+| onBlur    |   event    | Synthetic event of the input upon blur. Native function passed.                               |
+| onKeyUp   |   event    | Synthetic event of the input upon keyUp.                                                      |
+| onKeyDown |   event    | Synthetic event of the input upon keyDown.                                                    |
+| onClear   |    none    | A callback after clear if `clearable`.                                                        |
+
+Copyright &copy; 2018.
+
+[build]: https://travis-ci.org/samrith-s/react-select-input
+[npm]: https://www.npmjs.org/package/react-select-input
+[license]: https://github.com/samrith-s/react-select-input/blob/master/LICENSE

package/es/index.js

@@ -1,3 +1,5 @@
+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; };
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -5,7 +7,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
 import React, { Component } from 'react';
-
+import PropTypes from 'prop-types';
 import Textarea from 'react-autosize-textarea';
 
 function escapeRegExp(string) {
@@ -46,7 +48,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);
     };
 
@@ -59,14 +60,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);
     };
 
@@ -74,7 +72,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);
     };
 
@@ -85,65 +82,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);
 
@@ -155,12 +134,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();
 
@@ -175,15 +154,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) {
@@ -191,7 +168,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 = {
@@ -210,9 +187,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);
     }
   };
 
@@ -220,21 +198,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;
@@ -263,22 +231,18 @@ var SelectInput = function (_Component) {
           return _this2.input = ref;
         }
       }),
-      this.props.clearable ? React.createElement(
+      this.props.clearable && React.createElement(
         'div',
         { className: 'ris-clearable', onClick: this.handleClear },
         'x'
-      ) : null,
-      this.state.isOpen ? this.state.searchMatchOptions.length > 0 ? React.createElement(
+      ),
+      this.state.isOpen && this.state.searchMatchOptions.length > 0 && React.createElement(
         'div',
         { className: 'ris-options', ref: function ref(_ref3) {
             return _this2.options = _ref3;
           } },
         this.renderOptions(this.state.searchMatchOptions)
-      ) : this.props.noOptions ? React.createElement(
-        'div',
-        { className: 'ris-options ris-no-options' },
-        this.props.noOptions
-      ) : null : null
+      )
     );
   };
 
@@ -289,28 +253,41 @@ export { SelectInput as default };
 
 
 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: PropTypes.string,
+  value: PropTypes.string,
+  valueKey: PropTypes.string,
+  labelKey: PropTypes.string,
+  placeholder: PropTypes.string,
+  openUp: PropTypes.bool,
+  disableEnter: PropTypes.bool,
+  collapseOnBlur: PropTypes.bool,
+  collapseOnEscape: PropTypes.bool,
+  collapseOnSelect: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  clearable: PropTypes.bool,
+  options: PropTypes.array,
+  onChange: PropTypes.func,
+  onSelect: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onKeyUp: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onClear: PropTypes.func,
+  noOptions: PropTypes.node
+} : {};