react-tag-autocomplete - npm Package Compare versions

Comparing version 3.3.1 to 3.4.0

dist/ReactTags.js

@@ -6,3 +6,2 @@ 'use strict';
 var Suggestions = require('./Suggestions');
-var AutosizeInput = require('react-input-autosize');
 
@@ -28,2 +27,3 @@ var Keys = {
         autofocus: React.PropTypes.bool,
+        autoresize: React.PropTypes.bool,
         handleDelete: React.PropTypes.func.isRequired,
@@ -43,2 +43,3 @@ handleAddition: React.PropTypes.func.isRequired,
             autofocus: true,
+            autoresize: true,
             minQueryLength: 2
@@ -58,4 +59,8 @@ };
         if (this.props.autofocus) {
-            this.refs.input.getInput().focus();
+            this.refs.input.focus();
         }
+
+        if (this.props.autoresize) {
+            this.updateInputWidth();
+        }
     },
@@ -75,2 +80,8 @@
 
+    componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
+        if (this.props.autoresize && prevState.query !== this.state.query) {
+            this.updateInputWidth();
+        }
+    },
+
     handleDelete: function handleDelete(i) {
@@ -158,2 +169,8 @@ this.props.handleDelete(i);
 
+    updateInputWidth: function updateInputWidth() {
+        this.setState({
+            inputWidth: Math.max(this.refs.sizer.scrollWidth)
+        });
+    },
+
     addTag: function addTag(tag) {
@@ -173,3 +190,3 @@ if (tag.disabled) {
         // focus back on the input box
-        this.refs.input.getInput().focus();
+        this.refs.input.focus();
     },
@@ -192,2 +209,3 @@
         var selectedIndex = this.state.selectedIndex;
+        var style = this.props.autoresize ? { width: this.state.inputWidth } : null;
 
@@ -205,6 +223,6 @@ return React.createElement(
                 { className: 'ReactTags__tagInput' },
-                React.createElement(AutosizeInput, {
+                React.createElement('input', {
                     ref: 'input',
                     role: 'combobox',
-                    style: { maxWidth: '100%' },
+                    style: style,
                     value: query,
@@ -220,2 +238,3 @@ placeholder: placeholder,
                     onKeyDown: this.handleKeyDown }),
+                this.props.autoresize ? React.createElement('input', { ref: 'sizer', readOnly: true, value: query || placeholder, 'aria-hidden': 'true' }) : null,
                 this.props.busy ? React.createElement('div', { className: 'ReactTags__busy' }) : null,
@@ -222,0 +241,0 @@ React.createElement(Suggestions, {

lib/ReactTags.js

 const React = require('react');
 const Tag = require('./Tag');
 const Suggestions = require('./Suggestions');
-const AutosizeInput = require('react-input-autosize');
 
@@ -24,2 +23,3 @@ const Keys = {
         autofocus: React.PropTypes.bool,
+        autoresize: React.PropTypes.bool,
         handleDelete: React.PropTypes.func.isRequired,
@@ -39,2 +39,3 @@ handleAddition: React.PropTypes.func.isRequired,
             autofocus: true,
+            autoresize: true,
             minQueryLength: 2
@@ -54,4 +55,8 @@ };
         if (this.props.autofocus) {
-            this.refs.input.getInput().focus();
+            this.refs.input.focus();
         }
+
+        if (this.props.autoresize) {
+            this.updateInputWidth();
+        }
     },
@@ -71,2 +76,8 @@
 
+    componentDidUpdate(prevProps, prevState) {
+        if (this.props.autoresize && prevState.query !== this.state.query) {
+            this.updateInputWidth();
+        }
+    },
+
     handleDelete(i) {
@@ -151,2 +162,8 @@ this.props.handleDelete(i);
 
+    updateInputWidth() {
+        this.setState({
+            inputWidth: Math.max(this.refs.sizer.scrollWidth)
+        });
+    },
+
     addTag(tag) {
@@ -166,3 +183,3 @@ if (tag.disabled) {
         // focus back on the input box
-        this.refs.input.getInput().focus();
+        this.refs.input.focus();
     },
@@ -185,2 +202,3 @@
         const selectedIndex = this.state.selectedIndex;
+        const style = this.props.autoresize ? { width: this.state.inputWidth } : null;
 
@@ -193,6 +211,6 @@ return (
                 <div className='ReactTags__tagInput'>
-                    <AutosizeInput
+                    <input
                         ref='input'
                         role='combobox'
-                        style={{ maxWidth: '100%' }}
+                        style={style}
                         value={query}
@@ -208,2 +226,3 @@ placeholder={placeholder}
                         onKeyDown={this.handleKeyDown} />
+                    {this.props.autoresize ? <input ref='sizer' readOnly value={query || placeholder} aria-hidden='true' /> : null}
                     {this.props.busy ? <div className='ReactTags__busy' /> : null}
@@ -210,0 +229,0 @@ <Suggestions

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -36,6 +36,3 @@ "main": "dist/ReactTags.js",
     "webpack-dev-server": "^1.8.2"
-  },
-  "dependencies": {
-    "react-input-autosize": "^0.6.10"
   }
 }

README.md

@@ -73,2 +73,3 @@ ### React Tag Autocomplete
 - [`autofocus`](#autofocusOption)
+- [`autoresize`](#autoresizeOption)
 - [`minQueryLength`](#minQueryLengthOption)
@@ -125,2 +126,7 @@ - [`handleAddition`](#handleAdditionOption)
 
+<a name="autoresizeOption"></a>
+#### autoresize (optional)
+
+Boolean parameter to control whether the text-input should be automatically resized to fit its value. Default: `true`.
+
 <a name="minQueryLengthOption"></a>
@@ -127,0 +133,0 @@ #### minQueryLength (optional)

No alert changes

Improved metrics

Dependency count

2

decreased by-33.33%

Lines of code

1482

increased by2.28%

Number of lines in readme file

208

increased by2.97%

Worsened metrics

Total package byte prevSize

1909006

decreased by-0.64%

Dependency changes

• - Removedreact-input-autosize@^0.6.10

• - Removedreact-input-autosize@0.6.13(transitive)