react-tag-autocomplete - npm Package Compare versions

Comparing version 5.2.0 to 5.3.0

CHANGELOG.md

@@ -6,2 +6,3 @@ # Changelog
 - Add `allowBackspace` option to disable the ability to delete the selected tags when backspace is pressed while focussed on the text input
+- Refactors `updateInputWidth` method to update when any props change ([@joekrill](https://github.com/joekrill))
 
@@ -8,0 +9,0 @@ ## 5.1.0

dist-es5/ReactTags.js

 'use strict'
 
 var React = require('react')
+var PropTypes = require('prop-types')
 var Tag = require('./Tag')
@@ -191,18 +192,18 @@ var Input = require('./Input')
 ReactTags.propTypes = {
-  tags: React.PropTypes.array,
-  placeholder: React.PropTypes.string,
-  suggestions: React.PropTypes.array,
-  autofocus: React.PropTypes.bool,
-  autoresize: React.PropTypes.bool,
-  handleDelete: React.PropTypes.func.isRequired,
-  handleAddition: React.PropTypes.func.isRequired,
-  handleInputChange: React.PropTypes.func,
-  minQueryLength: React.PropTypes.number,
-  maxSuggestionsLength: React.PropTypes.number,
-  classNames: React.PropTypes.object,
-  allowNew: React.PropTypes.bool,
-  allowBackspace: React.PropTypes.bool,
-  tagComponent: React.PropTypes.oneOfType([
-    React.PropTypes.func,
-    React.PropTypes.element
+  tags: PropTypes.array,
+  placeholder: PropTypes.string,
+  suggestions: PropTypes.array,
+  autofocus: PropTypes.bool,
+  autoresize: PropTypes.bool,
+  handleDelete: PropTypes.func.isRequired,
+  handleAddition: PropTypes.func.isRequired,
+  handleInputChange: PropTypes.func,
+  minQueryLength: PropTypes.number,
+  maxSuggestionsLength: PropTypes.number,
+  classNames: PropTypes.object,
+  allowNew: PropTypes.bool,
+  allowBackspace: PropTypes.bool,
+  tagComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element
   ])
@@ -209,0 +210,0 @@ }

dist-es6/ReactTags.js

 'use strict'
 
 const React = require('react')
+const PropTypes = require('prop-types')
 const Tag = require('./Tag')
@@ -181,18 +182,18 @@ const Input = require('./Input')
 ReactTags.propTypes = {
-  tags: React.PropTypes.array,
-  placeholder: React.PropTypes.string,
-  suggestions: React.PropTypes.array,
-  autofocus: React.PropTypes.bool,
-  autoresize: React.PropTypes.bool,
-  handleDelete: React.PropTypes.func.isRequired,
-  handleAddition: React.PropTypes.func.isRequired,
-  handleInputChange: React.PropTypes.func,
-  minQueryLength: React.PropTypes.number,
-  maxSuggestionsLength: React.PropTypes.number,
-  classNames: React.PropTypes.object,
-  allowNew: React.PropTypes.bool,
-  allowBackspace: React.PropTypes.bool,
-  tagComponent: React.PropTypes.oneOfType([
-    React.PropTypes.func,
-    React.PropTypes.element
+  tags: PropTypes.array,
+  placeholder: PropTypes.string,
+  suggestions: PropTypes.array,
+  autofocus: PropTypes.bool,
+  autoresize: PropTypes.bool,
+  handleDelete: PropTypes.func.isRequired,
+  handleAddition: PropTypes.func.isRequired,
+  handleInputChange: PropTypes.func,
+  minQueryLength: PropTypes.number,
+  maxSuggestionsLength: PropTypes.number,
+  classNames: PropTypes.object,
+  allowNew: PropTypes.bool,
+  allowBackspace: PropTypes.bool,
+  tagComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element
   ])
@@ -199,0 +200,0 @@ }

example/main.js

@@ -8,9 +8,14 @@ 'use strict'
 
-const App = React.createClass({
-  getInitialState () {
-    return {
-      tags: [ { id: 184, name: 'Thailand' }, { id: 86, name: 'India' } ],
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      tags: [
+        { id: 184, name: 'Thailand' },
+        { id: 86, name: 'India' }
+      ],
       suggestions
     }
-  },
+  }
 
@@ -21,27 +26,24 @@ handleDelete (i) {
     this.setState({ tags })
-  },
+  }
 
   handleAddition (tag) {
-    const tags = this.state.tags.concat(tag)
+    const tags = [].concat(this.state.tags, tag)
     this.setState({ tags })
-  },
+  }
 
   render () {
-    const { tags, suggestions } = this.state
-
     return (
       <div>
         <Tags
-          tags={tags}
-          suggestions={suggestions}
-          handleDelete={this.handleDelete}
-          handleAddition={this.handleAddition} />
+          tags={this.state.tags}
+          suggestions={this.state.suggestions}
+          handleDelete={this.handleDelete.bind(this)}
+          handleAddition={this.handleAddition.bind(this)} />
         <hr />
-        <pre><code>{JSON.stringify(tags, null, 2)}</code></pre>
+        <pre><code>{JSON.stringify(this.state.tags, null, 2)}</code></pre>
       </div>
     )
   }
+}
 
-})
-
 ReactDom.render(<App />, document.getElementById('app'))

lib/ReactTags.js

 'use strict'
 
 const React = require('react')
+const PropTypes = require('prop-types')
 const Tag = require('./Tag')
@@ -200,18 +201,18 @@ const Input = require('./Input')
 ReactTags.propTypes = {
-  tags: React.PropTypes.array,
-  placeholder: React.PropTypes.string,
-  suggestions: React.PropTypes.array,
-  autofocus: React.PropTypes.bool,
-  autoresize: React.PropTypes.bool,
-  handleDelete: React.PropTypes.func.isRequired,
-  handleAddition: React.PropTypes.func.isRequired,
-  handleInputChange: React.PropTypes.func,
-  minQueryLength: React.PropTypes.number,
-  maxSuggestionsLength: React.PropTypes.number,
-  classNames: React.PropTypes.object,
-  allowNew: React.PropTypes.bool,
-  allowBackspace: React.PropTypes.bool,
-  tagComponent: React.PropTypes.oneOfType([
-    React.PropTypes.func,
-    React.PropTypes.element
+  tags: PropTypes.array,
+  placeholder: PropTypes.string,
+  suggestions: PropTypes.array,
+  autofocus: PropTypes.bool,
+  autoresize: PropTypes.bool,
+  handleDelete: PropTypes.func.isRequired,
+  handleAddition: PropTypes.func.isRequired,
+  handleInputChange: PropTypes.func,
+  minQueryLength: PropTypes.number,
+  maxSuggestionsLength: PropTypes.number,
+  classNames: PropTypes.object,
+  allowNew: PropTypes.bool,
+  allowBackspace: PropTypes.bool,
+  tagComponent: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.element
   ])
@@ -218,0 +219,0 @@ }

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "5.2.0",
+  "version": "5.3.0",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -42,4 +42,5 @@ "main": "dist-es5/ReactTags.js",
   "peerDependencies": {
-    "react": "^0.14.0 || ^15.0.0",
-    "react-dom": "^0.14.0 || ^15.0.0"
+    "prop-types": "^15.0.0",
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0"
   },
@@ -54,5 +55,5 @@ "devDependencies": {
     "keycode": "^2.1.2",
-    "react": "^15.2.1",
-    "react-addons-test-utils": "^15.2.1",
-    "react-dom": "^15.2.1",
+    "prop-types": "^15.5.0",
+    "react": "^15.5.0",
+    "react-dom": "^15.5.0",
     "sinon": "^1.17.5",
@@ -59,0 +60,0 @@ "standard": "^7.1.2",

README.md

@@ -22,7 +22,10 @@ # React Tag Autocomplete
 ```js
-var ReactTags = require('react-tag-autocomplete');
+const React = require('react')
+const ReactTags = require('react-tag-autocomplete')
 
-var App = React.createClass({
-  getInitialState: function () {
-    return {
+class App extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
       tags: [
@@ -39,13 +42,16 @@ { id: 1, name: "Apples" },
     }
-  },
-  handleDelete: function (i) {
-    var tags = this.state.tags.slice(0)
+  }
+
+  handleDelete (i) {
+    const tags = this.state.tags.slice(0)
     tags.splice(i, 1)
-    this.setState({ tags: tags })
-  },
-  handleAddition: function (tag) {
-    var tags = this.state.tags.concat(tag)
-    this.setState({ tags: tags })
-  },
-  render: function () {
+    this.setState({ tags })
+  }
+
+  handleAddition (tag) {
+    const tags = [].concat(this.state.tags, tag)
+    this.setState({ tags })
+  }
+
+  render () {
     return (
@@ -55,7 +61,7 @@ <ReactTags
         suggestions={this.state.suggestions}
-        handleDelete={this.handleDelete}
-        handleAddition={this.handleAddition} />
+        handleDelete={this.handleDelete.bind(this)}
+        handleAddition={this.handleAddition.bind(this)} />
     )
   }
-})
+}
 
@@ -87,3 +93,3 @@ React.render(<App />, document.getElementById('app'))
 ```js
-var tags =  [
+const tags =  [
   { id: 1, name: "Apples" },
@@ -100,3 +106,3 @@ { id: 2, name: "Pears" }
 ```js
-var suggestions = [
+const suggestions = [
   { id: 3, name: "Bananas" },
@@ -188,3 +194,3 @@ { id: 4, name: "Mangos" },
 
-    return fetch(`query=${input}`).then(function (result) {
+    return fetch(`query=${input}`).then((result) => {
       this.setState({ busy: false })
@@ -191,0 +197,0 @@ })

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1867931

increased by19.16%

Number of package files

26

increased by18.18%

Number of lines in readme file

253

increased by2.43%

Number of low supply chain risk alerts

1

decreased by-98.55%

Worsened metrics

Dependency count

3

increased by50%

Lines of code

1743

decreased by-90.73%

No dependency changes