react-input-completion - npm Package Compare versions

Comparing version 0.0.8 to 0.0.10

package.json

 {
   "name": "react-input-completion",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "A cross-browser autocomplete component for React",
@@ -5,0 +5,0 @@ "repository": "https://www.github.com/imcnally/react-input-completion",

react-input-completion.js

@@ -27,2 +27,8 @@ 'use strict';
 
+var styleClasses = {
+  list: 'ric-options',
+  option: 'ric-option',
+  wrapper: 'ric-wrapper'
+};
+
 var InputCompletion = (function (_Component) {
@@ -50,14 +56,25 @@ _inherits(InputCompletion, _Component);
 
-      var newState = {
-        nativeSupport: !useNative ? false : this._supportsNative()
+      var state = {
+        useNative: !useNative ? false : this._supportsNative()
       };
 
-      if (!newState.nativeSupport) {
+      if (!state.useNative) {
         var offsetWidth = (0, _react.findDOMNode)(this.refs.input).offsetWidth;
-        newState.inputWidth = offsetWidth + 'px';
+        state.inputWidth = offsetWidth + 'px';
       }
 
-      this.setState(newState);
+      this.setState(state);
     }
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      if (this.state.useNative) {
+        return;
+      }
+
+      this.setState({
+        shownOptions: this._getOptionsToShow(this.state.value, nextProps.options)
+      });
+    }
+  }, {
     key: '_supportsNative',
@@ -69,9 +86,2 @@ value: function _supportsNative() {
   }, {
-    key: '_isOptionShown',
-    value: function _isOptionShown(input, option) {
-      var optionRegex = new RegExp(input, 'gi');
-
-      return input && option.match(optionRegex);
-    }
-  }, {
     key: '_getFallbackContainerStyles',
@@ -95,3 +105,4 @@ value: function _getFallbackContainerStyles() {
           'li',
-          { 'aria-selected': isSelected, className: 'ric-fb-option', key: index, onMouseDown: onMouseDown, role: 'option' },
+          { 'aria-selected': isSelected, className: styleClasses.option,
+            key: index, onMouseDown: onMouseDown, role: 'option' },
           option
@@ -103,3 +114,3 @@ );
         'ul',
-        { 'aria-multiselectable': 'false', className: 'ric-fb-options', role: 'listbox',
+        { 'aria-multiselectable': 'false', className: styleClasses.list, role: 'listbox',
           style: this._getFallbackContainerStyles() },
@@ -112,3 +123,3 @@ options
     value: function _renderOptions() {
-      if (!this.state.nativeSupport) {
+      if (!this.state.useNative) {
         return this._renderFallbackOptions();
@@ -118,3 +129,3 @@ }
       var options = this.props.options.map(function (option, index) {
-        return _react2['default'].createElement('option', { key: index, value: option });
+        return _react2['default'].createElement('option', { className: styleClasses.option, key: index, value: option });
       });
@@ -124,3 +135,3 @@
         'datalist',
-        { id: this.props.name },
+        { className: styleClasses.list, id: this.props.name },
         options
@@ -141,3 +152,3 @@ );
 
-      if (!this.state.nativeSupport) {
+      if (!this.state.useNative) {
         props.onKeyDown = this.onKeyDown.bind(this);
@@ -149,2 +160,18 @@ }
   }, {
+    key: '_isOptionShown',
+    value: function _isOptionShown(input, option) {
+      var optionRegex = new RegExp(input, 'gi');
+
+      return input && option.match(optionRegex);
+    }
+  }, {
+    key: '_getOptionsToShow',
+    value: function _getOptionsToShow(value, options) {
+      var _this2 = this;
+
+      return options.filter(function (option) {
+        return _this2._isOptionShown(value, option);
+      });
+    }
+  }, {
     key: 'onKeyDown',
@@ -189,4 +216,2 @@ value: function onKeyDown(event) {
     value: function onChange(event) {
-      var _this2 = this;
-
       var value = event.target.value;
@@ -196,8 +221,6 @@
 
-      if (!this.state.nativeSupport) {
+      if (!this.state.useNative) {
         newState.selectedSuggestion = 0;
         newState.showSuggestions = true;
-        newState.shownOptions = this.props.options.filter(function (option) {
-          return _this2._isOptionShown(value, option);
-        });
+        newState.shownOptions = this._getOptionsToShow(value, this.props.options);
       }
@@ -216,3 +239,3 @@
         'section',
-        null,
+        { className: styleClasses.wrapper },
         this._renderChildren(),
@@ -219,0 +242,0 @@ this._renderOptions()

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11816

increased by5.42%

Lines of code

231

increased by10%

No dependency changes