react-input-completion - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "react-input-completion",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A cross-browser autocomplete component for React",
@@ -15,5 +15,6 @@ "repository": "https://www.github.com/imcnally/react-input-completion",
   "scripts": {
-    "prepublish": "babel src/input-completion.jsx --out-file react-input-completion.js && cp src/react-input-completion.css ./",
-    "start": "webpack-dev-server --content-base src/ --port 3000 --hot --inline",
-    "test": "karma start test/karma.conf.js"
+    "prepublish": "babel src/input-completion.jsx --out-file react-input-completion.js && cp src/input-completion.css ./react-input-completion.css",
+    "start": "webpack-dev-server --content-base demo/ --port 3000 --hot --inline",
+    "test": "karma start test/karma.conf.js",
+    "lint": "eslint test src && jscs test src"
   },
@@ -27,4 +28,9 @@ "author": "Ian McNally <[e-mail]>",
     "babel": "^5.8.21",
+    "babel-jscs": "^2.0.4",
     "babel-loader": "^5.3.2",
+    "css-loader": "^0.16.0",
+    "eslint": "^1.2.1",
+    "eslint-plugin-react": "^3.2.3",
     "jasmine-core": "^2.3.4",
+    "jscs": "^2.1.0",
     "karma": "^0.13.3",
@@ -38,2 +44,3 @@ "karma-babel-preprocessor": "^5.2.1",
     "phantomjs": "^1.9.17",
+    "style-loader": "^0.12.3",
     "webpack": "^1.11.0",
@@ -40,0 +47,0 @@ "webpack-dev-server": "^1.10.1"

react-input-completion.js

@@ -11,4 +11,2 @@ 'use strict';
 
-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'); } }
@@ -20,4 +18,2 @@
 
-var _react2 = _interopRequireDefault(_react);
-
 var keys = {
@@ -49,8 +45,11 @@ down: 'ArrowDown',
     value: function componentDidMount() {
+      var useNative = this.props.useNative;
+
       var newState = {
-        nativeSupport: this._supportsNative()
+        nativeSupport: !useNative ? false : this._supportsNative()
       };
 
       if (!newState.nativeSupport) {
-        newState.inputWidth = (0, _react.findDOMNode)(this.refs.input).offsetWidth + 'px';
+        var offsetWidth = (0, _react.findDOMNode)(this.refs.input).offsetWidth;
+        newState.inputWidth = offsetWidth + 'px';
       }
@@ -90,3 +89,3 @@
 
-        return _react2['default'].createElement(
+        return React.createElement(
           'li',
@@ -98,5 +97,6 @@ { 'aria-selected': isSelected, className: 'ric-fb-option', key: index, onMouseDown: onMouseDown, role: 'option' },
 
-      return _react2['default'].createElement(
+      return React.createElement(
         'ul',
-        { 'aria-multiselectable': 'false', className: 'ric-fb-options', role: 'listbox', style: this._getFallbackContainerStyles() },
+        { 'aria-multiselectable': 'false', className: 'ric-fb-options', role: 'listbox',
+          style: this._getFallbackContainerStyles() },
         options
@@ -113,6 +113,6 @@ );
       var options = this.props.options.map(function (option, index) {
-        return _react2['default'].createElement('option', { key: index, value: option });
+        return React.createElement('option', { key: index, value: option });
       });
 
-      return _react2['default'].createElement(
+      return React.createElement(
         'datalist',
@@ -204,3 +204,3 @@ { id: this.props.name },
     value: function render() {
-      return _react2['default'].createElement(
+      return React.createElement(
         'section',
@@ -219,2 +219,6 @@ null,
 
+InputCompletion.defaultProps = {
+  useNative: true
+};
+
 InputCompletion.propTypes = {
@@ -224,4 +228,5 @@ children: _react.PropTypes.element.isRequired,
   onValueChange: _react.PropTypes.func,
-  options: _react.PropTypes.arrayOf(_react.PropTypes.string.isRequired).isRequired
+  options: _react.PropTypes.arrayOf(_react.PropTypes.string.isRequired).isRequired,
+  useNative: _react.PropTypes.bool
 };
 module.exports = exports['default'];

README.md

 # react-input-completion
 A cross-browser autocomplete component for React.
 
-`<InputCompletion>` defaults to the native `<datalist>` and polyfills any unsupported browsers, with no external dependencies.
+`<InputCompletion>` defaults to the native HTML5 `<datalist>` (unless you prefer it didn't) and polyfills any unsupported browsers, with no external dependencies.
 
@@ -33,2 +33,4 @@ ## Usage
 
+  `useNative` - Boolean (optional) to use native HTML5 `<datalist>` if possible. Default: `true`.
+
 ### Styles
@@ -35,0 +37,0 @@ Default styles (for fallback to match native

webpack.config.js

@@ -6,3 +6,3 @@ // Webpack is used for only local development
   OUTPUT : './dist',
-  SOURCE : './src'
+  SOURCE : './demo'
 };
@@ -21,3 +21,8 @@
         exclude: /node_modules/,
-        loader: 'babel-loader'
+        loader: 'babel'
+      },
+      {
+        test: /\.css$/,
+        exclude: /node_modules/,
+        loader: 'style!css'
       }
@@ -24,0 +29,0 @@ ]

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

17586

increased by58.98%

Number of package files

8

increased by33.33%

Lines of code

234

increased by4.46%

Number of lines in readme file

56

increased by3.7%

Worsened metrics

Dev dependency count

19

increased by46.15%

No dependency changes