react-tag-autocomplete - npm Package Compare versions

Comparing version 3.5.0 to 3.5.1

dist/ReactTags.js

 'use strict';
 
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }
+
 var React = require('react');
 var Tag = require('./Tag');
+var Input = require('./Input');
 var Suggestions = require('./Suggestions');
@@ -36,4 +39,4 @@
             busy: false,
+            tags: [],
             placeholder: 'Add new tag',
-            tags: [],
             suggestions: [],
@@ -50,3 +53,3 @@ delimiters: [Keys.ENTER, Keys.TAB],
             query: '',
-            suggestions: this.props.suggestions,
+            suggestions: [].concat(_toConsumableArray(this.props.suggestions)),
             selectedIndex: -1
@@ -60,6 +63,2 @@ };
         }
-
-        if (this.props.autoresize) {
-            this.updateInputWidth();
-        }
     },
@@ -74,14 +73,8 @@
 
-    componentWillReceiveProps: function componentWillReceiveProps(props) {
+    componentWillReceiveProps: function componentWillReceiveProps(newProps) {
         this.setState({
-            suggestions: this.filteredSuggestions(this.state.query, props.suggestions)
+            suggestions: this.filteredSuggestions(this.state.query, newProps.suggestions)
         });
     },
 
-    componentDidUpdate: function componentDidUpdate(prevProps, prevState) {
-        if (this.props.autoresize && prevState.query !== this.state.query) {
-            this.updateInputWidth();
-        }
-    },
-
     handleDelete: function handleDelete(i) {
@@ -169,8 +162,2 @@ this.props.handleDelete(i);
 
-    updateInputWidth: function updateInputWidth() {
-        this.setState({
-            inputWidth: Math.max(this.refs.sizer.scrollWidth)
-        });
-    },
-
     addTag: function addTag(tag) {
@@ -205,6 +192,12 @@ if (tag.disabled) {
         var listboxId = 'ReactTags-listbox';
-        var query = this.state.query;
-        var placeholder = this.props.placeholder;
-        var selectedIndex = this.state.selectedIndex;
-        var style = this.props.autoresize ? { width: this.state.inputWidth } : null;
+        var selectedId = listboxId + '-' + selectedIndex;
+        var _state2 = this.state;
+        var query = _state2.query;
+        var selectedIndex = _state2.selectedIndex;
+        var suggestions = _state2.suggestions;
+        var _props = this.props;
+        var placeholder = _props.placeholder;
+        var busy = _props.busy;
+        var minQueryLength = _props.minQueryLength;
+        var autoresize = _props.autoresize;
 
@@ -222,18 +215,17 @@ return React.createElement(
                 { className: 'ReactTags__tagInput' },
-                React.createElement('input', {
+                React.createElement(Input, {
                     ref: 'input',
-                    role: 'combobox',
-                    style: style,
                     value: query,
                     placeholder: placeholder,
+                    autoresize: autoresize,
+                    role: 'combobox',
+                    'aria-autocomplete': 'list',
                     'aria-label': placeholder,
                     'aria-owns': listboxId,
-                    'aria-autocomplete': 'list',
-                    'aria-activedescendant': selectedIndex > -1 ? listboxId + '-' + selectedIndex : null,
+                    'aria-activedescendant': selectedIndex > -1 ? selectedId : null,
                     'aria-expanded': selectedIndex > -1,
-                    'aria-busy': this.props.busy,
+                    'aria-busy': busy,
                     onChange: this.handleChange,
                     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,
+                busy ? React.createElement('div', { className: 'ReactTags__busy' }) : null,
                 React.createElement(Suggestions, {
@@ -243,5 +235,5 @@ listboxId: listboxId,
                     selectedIndex: selectedIndex,
-                    suggestions: this.state.suggestions,
+                    suggestions: suggestions,
                     handleClick: this.handleSuggestionClick,
-                    minQueryLength: this.props.minQueryLength })
+                    minQueryLength: minQueryLength })
             )
@@ -248,0 +240,0 @@ );

example/main.js

 // Set up test data
-const countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas"
-      ,"Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands"
+const countries = ["Afghanistan","Albania","Algeria","Andorra","Angola","Anguilla","Antigua & Barbuda","Argentina","Armenia","Aruba","Australia","Austria","Azerbaijan","Bahamas"
+      ,"Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bermuda","Bhutan","Bolivia","Bosnia & Herzegovina","Botswana","Brazil","British Virgin Islands"
       ,"Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Cape Verde","Cayman Islands","Chad","Chile","China","Colombia","Congo","Cook Islands","Costa Rica"
@@ -12,6 +12,6 @@ ,"Cote D Ivoire","Croatia","Cruise Ship","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","Ecuador","Egypt","El Salvador","Equatorial Guinea"
       ,"New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palestine","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"
-      ,"Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles"
-      ,"Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan"
-      ,"Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia"
-      ,"Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)"
+      ,"Puerto Rico","Qatar","Reunion","Romania","Russia","Rwanda","Saint Pierre & Miquelon","Samoa","San Marino","Satellite","Saudi Arabia","Senegal","Serbia","Seychelles"
+      ,"Sierra Leone","Singapore","Slovakia","Slovenia","South Africa","South Korea","Spain","Sri Lanka","St Kitts & Nevis","St Lucia","St Vincent","St. Lucia","Sudan"
+      ,"Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Timor L'Este","Togo","Tonga","Trinidad & Tobago","Tunisia"
+      ,"Turkey","Turkmenistan","Turks & Caicos","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States of America","Uruguay","Uzbekistan","Venezuela","Vietnam","Virgin Islands (US)"
       ,"Yemen","Zambia","Zimbabwe"];
@@ -18,0 +18,0 @@

lib/ReactTags.js

 const React = require('react');
 const Tag = require('./Tag');
+const Input = require('./Input');
 const Suggestions = require('./Suggestions');
@@ -33,4 +34,4 @@
             busy: false,
+            tags: [],
             placeholder: 'Add new tag',
-            tags: [],
             suggestions: [],
@@ -47,3 +48,3 @@ delimiters: [Keys.ENTER, Keys.TAB],
             query: '',
-            suggestions: this.props.suggestions,
+            suggestions: [...this.props.suggestions],
             selectedIndex: -1
@@ -57,6 +58,2 @@ };
         }
-
-        if (this.props.autoresize) {
-            this.updateInputWidth();
-        }
     },
@@ -69,14 +66,8 @@
 
-    componentWillReceiveProps(props) {
+    componentWillReceiveProps(newProps) {
         this.setState({
-            suggestions: this.filteredSuggestions(this.state.query, props.suggestions)
+            suggestions: this.filteredSuggestions(this.state.query, newProps.suggestions)
         });
     },
 
-    componentDidUpdate(prevProps, prevState) {
-        if (this.props.autoresize && prevState.query !== this.state.query) {
-            this.updateInputWidth();
-        }
-    },
-
     handleDelete(i) {
@@ -161,8 +152,2 @@ this.props.handleDelete(i);
 
-    updateInputWidth() {
-        this.setState({
-            inputWidth: Math.max(this.refs.sizer.scrollWidth)
-        });
-    },
-
     addTag(tag) {
@@ -197,6 +182,5 @@ if (tag.disabled) {
         const listboxId = 'ReactTags-listbox';
-        const query = this.state.query;
-        const placeholder = this.props.placeholder;
-        const selectedIndex = this.state.selectedIndex;
-        const style = this.props.autoresize ? { width: this.state.inputWidth } : null;
+        const selectedId = `${listboxId}-${selectedIndex}`;
+        const { query, selectedIndex, suggestions } = this.state;
+        const { placeholder, busy, minQueryLength, autoresize } = this.props;
 
@@ -209,18 +193,17 @@ return (
                 <div className='ReactTags__tagInput'>
-                    <input
+                    <Input
                         ref='input'
-                        role='combobox'
-                        style={style}
                         value={query}
                         placeholder={placeholder}
+                        autoresize={autoresize}
+                        role='combobox'
+                        aria-autocomplete='list'
                         aria-label={placeholder}
                         aria-owns={listboxId}
-                        aria-autocomplete='list'
-                        aria-activedescendant={selectedIndex > -1 ? `${listboxId}-${selectedIndex}` : null}
+                        aria-activedescendant={selectedIndex > -1 ? selectedId : null}
                         aria-expanded={selectedIndex > -1}
-                        aria-busy={this.props.busy}
+                        aria-busy={busy}
                         onChange={this.handleChange}
                         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}
+                    {busy ? <div className='ReactTags__busy' /> : null}
                     <Suggestions
@@ -230,5 +213,5 @@ listboxId={listboxId}
                         selectedIndex={selectedIndex}
-                        suggestions={this.state.suggestions}
+                        suggestions={suggestions}
                         handleClick={this.handleSuggestionClick}
-                        minQueryLength={this.props.minQueryLength} />
+                        minQueryLength={minQueryLength} />
                 </div>
@@ -235,0 +218,0 @@ </div>

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "3.5.0",
+  "version": "3.5.1",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -5,0 +5,0 @@ "main": "dist/ReactTags.js",

No alert changes

Improved metrics

Total package byte prevSize

1914720

increased by0.29%

Number of package files

19

increased by11.76%

Lines of code

1536

increased by3.64%

No dependency changes