react-tag-autocomplete - npm Package Compare versions

Comparing version 5.0.0-rc.2 to 5.0.0

CHANGELOG.md

@@ -9,2 +9,3 @@ # Changelog
 - Added functionality to hide suggestions list when input is blurred
+- Added class name to component root when input is focused
 - Refactored components to ES6 class syntax and stateless functions
@@ -11,0 +12,0 @@ - Refactored components to use Standard code style

dist-es5/ReactTags.js

@@ -18,2 +18,3 @@ 'use strict'
   root: 'react-tags',
+  rootFocused: 'is-focused',
   selected: 'react-tags__selected',
@@ -25,4 +26,4 @@ selectedTag: 'react-tags__selected-tag',
   suggestions: 'react-tags__suggestions',
-  isActive: 'is-active',
-  isDisabled: 'is-disabled'
+  suggestionActive: 'is-active',
+  suggestionDisabled: 'is-disabled'
 }
@@ -155,5 +156,8 @@
     var expandable = this.state.focused && this.state.query.length >= this.props.minQueryLength
+    var classNames = [this.state.classNames.root]
 
+    this.state.focused && classNames.push(this.state.classNames.rootFocused)
+
     return (
-      React.createElement( 'div', { className: this.state.classNames.root, onClick: this.handleClick.bind(this) },
+      React.createElement( 'div', { className: classNames.join(' '), onClick: this.handleClick.bind(this) },
         React.createElement( 'div', { className: this.state.classNames.selected, 'aria-live': 'polite', 'aria-relevant': 'additions removals' },
@@ -160,0 +164,0 @@ tags

dist-es5/Suggestions.js

@@ -50,7 +50,7 @@ 'use strict'
       if (this$1.props.selectedIndex === i) {
-        classNames.push(this$1.props.classNames.isActive)
+        classNames.push(this$1.props.classNames.suggestionActive)
       }
 
       if (item.disabled) {
-        classNames.push(this$1.props.classNames.isDisabled)
+        classNames.push(this$1.props.classNames.suggestionDisabled)
       }
@@ -57,0 +57,0 @@

dist-es6/ReactTags.js

@@ -18,2 +18,3 @@ 'use strict'
   root: 'react-tags',
+  rootFocused: 'is-focused',
   selected: 'react-tags__selected',
@@ -25,4 +26,4 @@ selectedTag: 'react-tags__selected-tag',
   suggestions: 'react-tags__suggestions',
-  isActive: 'is-active',
-  isDisabled: 'is-disabled'
+  suggestionActive: 'is-active',
+  suggestionDisabled: 'is-disabled'
 }
@@ -147,5 +148,8 @@
     const expandable = this.state.focused && this.state.query.length >= this.props.minQueryLength
+    const classNames = [this.state.classNames.root]
 
+    this.state.focused && classNames.push(this.state.classNames.rootFocused)
+
     return (
-      React.createElement( 'div', { className: this.state.classNames.root, onClick: this.handleClick.bind(this) },
+      React.createElement( 'div', { className: classNames.join(' '), onClick: this.handleClick.bind(this) },
         React.createElement( 'div', { className: this.state.classNames.selected, 'aria-live': 'polite', 'aria-relevant': 'additions removals' },
@@ -152,0 +156,0 @@ tags

dist-es6/Suggestions.js

@@ -44,7 +44,7 @@ 'use strict'
       if (this.props.selectedIndex === i) {
-        classNames.push(this.props.classNames.isActive)
+        classNames.push(this.props.classNames.suggestionActive)
       }
 
       if (item.disabled) {
-        classNames.push(this.props.classNames.isDisabled)
+        classNames.push(this.props.classNames.suggestionDisabled)
       }
@@ -51,0 +51,0 @@

lib/ReactTags.js

@@ -18,2 +18,3 @@ 'use strict'
   root: 'react-tags',
+  rootFocused: 'is-focused',
   selected: 'react-tags__selected',
@@ -25,4 +26,4 @@ selectedTag: 'react-tags__selected-tag',
   suggestions: 'react-tags__suggestions',
-  isActive: 'is-active',
-  isDisabled: 'is-disabled'
+  suggestionActive: 'is-active',
+  suggestionDisabled: 'is-disabled'
 }
@@ -150,5 +151,8 @@
     const expandable = this.state.focused && this.state.query.length >= this.props.minQueryLength
+    const classNames = [this.state.classNames.root]
 
+    this.state.focused && classNames.push(this.state.classNames.rootFocused)
+
     return (
-      <div className={this.state.classNames.root} onClick={this.handleClick.bind(this)}>
+      <div className={classNames.join(' ')} onClick={this.handleClick.bind(this)}>
         <div className={this.state.classNames.selected} aria-live='polite' aria-relevant='additions removals'>
@@ -155,0 +159,0 @@ {tags}

lib/Suggestions.js

@@ -44,7 +44,7 @@ 'use strict'
       if (this.props.selectedIndex === i) {
-        classNames.push(this.props.classNames.isActive)
+        classNames.push(this.props.classNames.suggestionActive)
       }
 
       if (item.disabled) {
-        classNames.push(this.props.classNames.isDisabled)
+        classNames.push(this.props.classNames.suggestionDisabled)
       }
@@ -51,0 +51,0 @@

package.json

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

README.md

@@ -137,2 +137,3 @@ # React Tag Autocomplete
   root: 'react-tags',
+  rootFocused: 'is-focused',
   selected: 'react-tags__selected',
@@ -144,4 +145,4 @@ selectedTag: 'react-tags__selected-tag',
   suggestions: 'react-tags__suggestions',
-  isActive: 'is-active',
-  isDisabled: 'is-disabled'
+  suggestionActive: 'is-active',
+  suggestionDisabled: 'is-disabled'
 }
@@ -181,5 +182,3 @@ ```
 function (input) {
-  if (this.state.busy) {
-    return
-  } else {
+  if (!this.state.busy) {
     this.setState({ busy: true })
@@ -211,1 +210,31 @@
 ```
+
+### Upgrading from 4.x to 5.0
+
+1. The `delimiters` has been removed, any references to this will now be ignored.
+2. The `classNames` option has been updated:
+
+  ```udiff
+  {
+  -  root: 'ReactTags',
+  -  tagInput: 'ReactTags__tagInput',
+  -  selected: 'ReactTags__selected',
+  -  tag: 'ReactTags__tag',
+  -  tagName: 'ReactTags__tagName',
+  -  suggestions: 'ReactTags__suggestions',
+  -  isActive: 'is-active',
+  -  isDisabled: 'is-disabled'
+  +  root: 'react-tags',
+  +  rootFocused: 'is-focused',
+  +  selected: 'react-tags__selected',
+  +  selectedTag: 'react-tags__selected-tag',
+  +  selectedTagName: 'react-tags__selected-tag-name',
+  +  search: 'react-tags__search',
+  +  searchInput: 'react-tags__search-input',
+  +  suggestions: 'react-tags__suggestions',
+  +  suggestionActive: 'is-active',
+  +  suggestionDisabled: 'is-disabled'
+  }
+  ```
+
+For smaller changes refer to [the changelog](CHANGELOG.md).

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72061

increased by3.03%

Lines of code

1079

increased by3.45%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

237

increased by13.94%

No dependency changes