react-tag-autocomplete - npm Package Compare versions

Comparing version 5.11.2 to 5.12.0

CHANGELOG.md

 # Changelog
 
+## 5.12.0
+
+- Added `noSuggestionsText` option ([jraack](https://github.com/jraack))
+
 ## 5.11.2
@@ -4,0 +8,0 @@

dist-es5/ReactTags.js

@@ -211,3 +211,3 @@ 'use strict'
           React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: function (c) { this$1.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
-          React.createElement( Suggestions, Object.assign({}, this.state, { ref: function (c) { this$1.suggestions = c }, listboxId: listboxId, expandable: expandable, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
+          React.createElement( Suggestions, Object.assign({}, this.state, { ref: function (c) { this$1.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
         )
@@ -224,2 +224,3 @@ )
   placeholder: 'Add new tag',
+  noSuggestionsText: null,
   suggestions: [],
@@ -244,2 +245,3 @@ suggestionsFilter: null,
   placeholder: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -246,0 +248,0 @@ suggestionsFilter: PropTypes.func,

dist-es5/Suggestions.js

@@ -20,3 +20,3 @@ 'use strict'
 
-function filterSuggestions (query, suggestions, length, suggestionsFilter) {
+function filterSuggestions (query, suggestions, length, suggestionsFilter, noSuggestionsText) {
   if (!suggestionsFilter) {
@@ -27,3 +27,9 @@ var regex = new RegExp(("(?:^|\\s)" + (escapeForRegExp(query))), 'i')
 
-  return suggestions.filter(function (item) { return suggestionsFilter(item, query); }).slice(0, length)
+  var filtered = suggestions.filter(function (item) { return suggestionsFilter(item, query); }).slice(0, length)
+
+  if (filtered.length === 0 && noSuggestionsText) {
+    filtered.push({ id: 0, name: noSuggestionsText, disabled: true, disableMarkIt: true })
+  }
+
+  return filtered
 }
@@ -36,3 +42,3 @@
     this.state = {
-      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter)
+      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter, this.props.noSuggestionsText)
     }
@@ -47,3 +53,3 @@ }
     this.setState({
-      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter)
+      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter, newProps.noSuggestionsText)
     })
@@ -80,3 +86,4 @@ };
           id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this$1.handleMouseDown.bind(this$1, item) },
-          React.createElement( 'span', { dangerouslySetInnerHTML: markIt(item.name, this$1.props.query) })
+          item.disableMarkIt ? item.name
+            : React.createElement( 'span', { dangerouslySetInnerHTML: markIt(item.name, this$1.props.query, item.markInput) })
         )
@@ -83,0 +90,0 @@ )

dist-es6/ReactTags.js

@@ -199,3 +199,3 @@ 'use strict'
           React.createElement( Input, Object.assign({}, this.state, { inputAttributes: this.props.inputAttributes, inputEventHandlers: this.inputEventHandlers, ref: (c) => { this.input = c }, listboxId: listboxId, autofocus: this.props.autofocus, autoresize: this.props.autoresize, expandable: expandable, placeholder: this.props.placeholder })),
-          React.createElement( Suggestions, Object.assign({}, this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
+          React.createElement( Suggestions, Object.assign({}, this.state, { ref: (c) => { this.suggestions = c }, listboxId: listboxId, expandable: expandable, noSuggestionsText: this.props.noSuggestionsText, suggestions: this.props.suggestions, suggestionsFilter: this.props.suggestionsFilter, addTag: this.addTag.bind(this), maxSuggestionsLength: this.props.maxSuggestionsLength }))
         )
@@ -210,2 +210,3 @@ )
   placeholder: 'Add new tag',
+  noSuggestionsText: null,
   suggestions: [],
@@ -230,2 +231,3 @@ suggestionsFilter: null,
   placeholder: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -232,0 +234,0 @@ suggestionsFilter: PropTypes.func,

dist-es6/Suggestions.js

@@ -20,3 +20,3 @@ 'use strict'
 
-function filterSuggestions (query, suggestions, length, suggestionsFilter) {
+function filterSuggestions (query, suggestions, length, suggestionsFilter, noSuggestionsText) {
   if (!suggestionsFilter) {
@@ -27,3 +27,9 @@ const regex = new RegExp(`(?:^|\\s)${escapeForRegExp(query)}`, 'i')
 
-  return suggestions.filter((item) => suggestionsFilter(item, query)).slice(0, length)
+  const filtered = suggestions.filter((item) => suggestionsFilter(item, query)).slice(0, length)
+
+  if (filtered.length === 0 && noSuggestionsText) {
+    filtered.push({ id: 0, name: noSuggestionsText, disabled: true, disableMarkIt: true })
+  }
+
+  return filtered
 }
@@ -36,3 +42,3 @@
     this.state = {
-      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter)
+      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter, this.props.noSuggestionsText)
     }
@@ -43,3 +49,3 @@ }
     this.setState({
-      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter)
+      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter, newProps.noSuggestionsText)
     })
@@ -74,3 +80,4 @@ }
           id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this.handleMouseDown.bind(this, item) },
-          React.createElement( 'span', { dangerouslySetInnerHTML: markIt(item.name, this.props.query) })
+          item.disableMarkIt ? item.name
+            : React.createElement( 'span', { dangerouslySetInnerHTML: markIt(item.name, this.props.query, item.markInput) })
         )
@@ -77,0 +84,0 @@ )

lib/ReactTags.js

@@ -214,2 +214,3 @@ 'use strict'
             expandable={expandable}
+            noSuggestionsText={this.props.noSuggestionsText}
             suggestions={this.props.suggestions}
@@ -228,2 +229,3 @@ suggestionsFilter={this.props.suggestionsFilter}
   placeholder: 'Add new tag',
+  noSuggestionsText: null,
   suggestions: [],
@@ -248,2 +250,3 @@ suggestionsFilter: null,
   placeholder: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -250,0 +253,0 @@ suggestionsFilter: PropTypes.func,

lib/Suggestions.js

@@ -20,3 +20,3 @@ 'use strict'
 
-function filterSuggestions (query, suggestions, length, suggestionsFilter) {
+function filterSuggestions (query, suggestions, length, suggestionsFilter, noSuggestionsText) {
   if (!suggestionsFilter) {
@@ -27,3 +27,9 @@ const regex = new RegExp(`(?:^|\\s)${escapeForRegExp(query)}`, 'i')
 
-  return suggestions.filter((item) => suggestionsFilter(item, query)).slice(0, length)
+  const filtered = suggestions.filter((item) => suggestionsFilter(item, query)).slice(0, length)
+
+  if (filtered.length === 0 && noSuggestionsText) {
+    filtered.push({ id: 0, name: noSuggestionsText, disabled: true, disableMarkIt: true })
+  }
+
+  return filtered
 }
@@ -36,3 +42,3 @@
     this.state = {
-      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter)
+      options: filterSuggestions(this.props.query, this.props.suggestions, this.props.maxSuggestionsLength, this.props.suggestionsFilter, this.props.noSuggestionsText)
     }
@@ -43,3 +49,3 @@ }
     this.setState({
-      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter)
+      options: filterSuggestions(newProps.query, newProps.suggestions, newProps.maxSuggestionsLength, newProps.suggestionsFilter, newProps.noSuggestionsText)
     })
@@ -79,3 +85,4 @@ }
           onMouseDown={this.handleMouseDown.bind(this, item)}>
-          <span dangerouslySetInnerHTML={markIt(item.name, this.props.query)} />
+          {item.disableMarkIt ? item.name
+            : <span dangerouslySetInnerHTML={markIt(item.name, this.props.query, item.markInput)} />}
         </li>
@@ -82,0 +89,0 @@ )

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "5.11.2",
+  "version": "5.12.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

@@ -5,3 +5,3 @@ # React Tag Autocomplete
 
-React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the [React Tags project](http://prakhar.me/react-tags/example) by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input.
+React Tag Autocomplete is a simple tagging component ready to drop in your React projects. Originally based on the [React Tags project](http://prakhar.me/react-tags/example) by Prakhar Srivastav this version removes the drag-and-drop re-ordering functionality, adds appropriate roles and ARIA states and introduces a resizing text input. [View demo](http://i-like-robots.github.io/react-tags/).
 
@@ -84,2 +84,3 @@ **Version 6 of this component is in beta! Please [take a look here](https://github.com/i-like-robots/react-tags/tree/6.0)** ✨
 - [`placeholder`](#placeholder-optional)
+- [`noSuggestionsText`](#noSuggestionsText-optional)
 - [`autofocus`](#autofocus-optional)
@@ -139,2 +140,6 @@ - [`autoresize`](#autoresize-optional)
 
+#### noSuggestionsText (optional)
+
+Message shown if there are no matching suggestions. Defaults to `null`.
+
 #### autofocus (optional)
@@ -141,0 +146,0 @@

No alert changes

Improved metrics

Total package byte prevSize

55548

increased by2.98%

Lines of code

1132

increased by1.98%

Number of lines in readme file

311

increased by1.63%

No dependency changes