react-select-input-v2 1.0.6

package/lib/index.js

@@ -0,0 +1,328 @@
+'use strict';
+
+exports.__esModule = true;
+exports.default = undefined;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactAutosizeTextarea = require('react-autosize-textarea');
+
+var _reactAutosizeTextarea2 = _interopRequireDefault(_reactAutosizeTextarea);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+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 _react2.default.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 _react2.default.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
+      },
+      _react2.default.createElement(_reactAutosizeTextarea2.default, {
+        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 ? _react2.default.createElement(
+        'div',
+        { className: 'ris-clearable', onClick: this.handleClear },
+        'x'
+      ) : null,
+      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
+    );
+  };
+
+  return SelectInput;
+}(_react.Component);
+
+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
+};
+module.exports = exports['default'];

package/lib/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;
+}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "react-select-input-v2",
+  "version": "1.0.6",
+  "description": "react-select-input React component",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "files": [
+    "css",
+    "es",
+    "lib",
+    "umd"
+  ],
+  "scripts": {
+    "build": "nwb build-react-component --copy-files",
+    "clean": "nwb clean-module && nwb clean-demo",
+    "start": "nwb serve-react-demo",
+    "test": "nwb test-react",
+    "test:coverage": "nwb test-react --coverage",
+    "test:watch": "nwb test-react --server",
+    "deploy": "gh-pages -d demo/dist"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.2",
+    "react-autosize-textarea": "^0.4.8"
+  },
+  "peerDependencies": {
+    "react": "15.x"
+  },
+  "devDependencies": {
+    "eslint": "^5.4.0",
+    "eslint-config-prettier": "^3.0.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-prettier": "^2.6.2",
+    "eslint-plugin-react": "^7.11.1",
+    "gh-pages": "^1.0.0",
+    "nwb": "0.18.x",
+    "prettier": "^1.14.2",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "babel-eslint": "^8.2.6"
+  },
+  "author": "Samrith Shankar",
+  "homepage": "https://samrith-s.github.io/react-select-input",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/samrith-s/react-select-input.git"
+  },
+  "keywords": [
+    "react-component",
+    "input",
+    "select",
+    "input select combo",
+    "select dropdown",
+    "custom select",
+    "searchable",
+    "searchable select",
+    "free input",
+    "free select"
+  ],
+  "sideEffects": false,
+  "bugs": {
+    "url": "https://github.com/samrith-s/react-select-input/issues"
+  },
+  "directories": {
+    "lib": "lib",
+    "test": "tests"
+  }
+}