react-select-input-v2 1.0.6

package/LICENSE

@@ -0,0 +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.

package/README.md

@@ -0,0 +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

package/es/index.js

@@ -0,0 +1,316 @@
+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; }
+
+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 Textarea from 'react-autosize-textarea';
+
+function escapeRegExp(string) {
+  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
+  var reHasRegExpChar = RegExp(reRegExpChar.source);
+  return string && reHasRegExpChar.test(string) ? string.replace(reRegExpChar, '\\$&') : string || '';
+}
+
+var SelectInput = function (_Component) {
+  _inherits(SelectInput, _Component);
+
+  function SelectInput() {
+    _classCallCheck(this, SelectInput);
+
+    var _this = _possibleConstructorReturn(this, _Component.call(this));
+
+    _this.renderOptions = function (options) {
+      return options && options.length > 0 ? options.map(function (option, index) {
+        return React.createElement(
+          'div',
+          {
+            className: 'ris-option' + (_this.state.selectedOption === option[_this.props.valueKey] ? ' selected' : '') + (_this.state.currentOption === index ? ' current' : ''),
+            key: _this.props.uniqueKey + '-option-' + index,
+            onClick: _this.handleClick.bind(_this, index),
+            ref: function ref(_ref) {
+              return _this['option-' + option[_this.props.valueKey]] = _ref;
+            }
+          },
+          option[_this.props.labelKey]
+        );
+      }) : null;
+    };
+
+    _this.handleSelect = function (option, index) {
+      var state = _this.manipState(_this.state, 'value', option[_this.props.labelKey]);
+      state = _this.manipState(state, 'selectedOption', option[_this.props.valueKey]);
+      state = _this.manipState(state, 'currentOption', -1);
+      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);
+    };
+
+    _this.handleClick = function (index, event) {
+      var option = _this.pickOption(index);
+      _this.handleSelect(option, index);
+    };
+
+    _this.handleChange = function (event) {
+      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);
+    };
+
+    _this.handleFocus = function (event) {
+      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);
+    };
+
+    _this.handleClear = function () {
+      var value = '';
+      var state = _this.manipState(_this.state, 'value', value);
+      state = _this.manipState(state, 'searchMatchOptions', _this.matchingOptions(_this.props.options, state.value));
+      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);
+      }
+
+      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 (_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 (_this.isFunction(_this.props.onKeyDown)) _this.props.onKeyDown(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' && 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--;
+      } 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;
+
+      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);
+
+      _this.setState(state);
+    };
+
+    _this.matchingOptions = function (options, value) {
+      value = escapeRegExp(value);
+      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] || '';
+        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);
+
+      if (_this.props.openUp) searchOptions.reverse();
+
+      return searchOptions;
+    };
+
+    _this.pickOption = function (index) {
+      var _ref2;
+
+      index = index !== null && index !== undefined ? index : _this.state.currentOption;
+      if (index > -1) return _this.state.searchMatchOptions[index];else return _ref2 = {}, _ref2[_this.props.labelKey] = _this.input.value.trim(), _ref2[_this.props.valueKey] = _this.input.value.trim(), _ref2;
+    };
+
+    _this.setIsOpen = function (state, show) {
+      return Object.assign({}, state, {
+        isOpen: show || false
+      });
+    };
+
+    _this.manipState = function (state, key, value) {
+      var _Object$assign;
+
+      return Object.assign({}, state, (_Object$assign = {}, _Object$assign[key] = value, _Object$assign));
+    };
+
+    _this.isFunction = function (obj) {
+      return typeof obj === 'function';
+    };
+
+    _this.handleOutsideClick = function (event) {
+      if (!_this.ris.contains(event.target) && _this.props.collapseOnBlur) _this.setState(_this.setIsOpen(_this.state, false));
+    };
+
+    _this.state = {
+      isOpen: false,
+      value: null,
+      currentOption: -1,
+      selectedOption: null,
+      searchMatchOptions: []
+    };
+    return _this;
+  }
+
+  SelectInput.prototype.componentDidMount = function componentDidMount() {
+    document.addEventListener('click', this.handleOutsideClick);
+  };
+
+  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;
+    } else if (this.props.openUp && this.state.selectedOption && this.state.isOpen) {
+      this['option-' + this.state.selectedOption].scrollIntoViewIfNeeded(true);
+    }
+  };
+
+  SelectInput.prototype.componentWillUnmount = function componentWillUnmount() {
+    document.removeEventListener('click', this.handleOutsideClick);
+  };
+
+  /*
+    Various renderers
+  */
+
+  /*
+    Handle different events
+  */
+
+  /*
+    Searching function
+  */
+
+  /*
+    Various helpers
+  */
+
+  SelectInput.prototype.render = function render() {
+    var _this2 = this;
+
+    return React.createElement(
+      'div',
+      {
+        className: 'ris' + (this.props.openUp ? ' ris-open-up' : '') + (this.props.clearable ? ' ris-is-clearable' : '') + (this.props.className ? ' ' + this.props.className : ''),
+        key: 'ris-' + this.props.uniqueKey,
+        ref: function ref(_ref4) {
+          return _this2.ris = _ref4;
+        },
+        style: this.props.style
+      },
+      React.createElement(Textarea, {
+        className: 'ris-input',
+        value: this.state.value !== null ? this.state.value : this.props.value,
+        placeholder: this.props.placeholder,
+        onChange: this.handleChange,
+        onFocus: this.handleFocus,
+        onBlur: this.props.onBlur,
+        onKeyUp: this.handleKeyUp,
+        onKeyDown: this.handleKeyDown,
+        autoFocus: this.props.autoFocus,
+        innerRef: function innerRef(ref) {
+          return _this2.input = ref;
+        }
+      }),
+      this.props.clearable ? React.createElement(
+        'div',
+        { className: 'ris-clearable', onClick: this.handleClear },
+        'x'
+      ) : null,
+      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
+    );
+  };
+
+  return SelectInput;
+}(Component);
+
+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
+};

package/es/react-select-input.css

@@ -0,0 +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;
+}