react-tag-autocomplete - npm Package Compare versions

Comparing version 6.0.0-beta.3 to 6.0.0-beta.4

CHANGELOG.md

@@ -17,2 +17,3 @@ # Changelog
 - Refactored `delimiters` option to be an array of `KeyboardEvent.key` values
+- Refactored `onInput` callback to provide basic support for `delimiters` entered on soft keyboards
 - Removed `clearInputOnDelete` option
@@ -23,2 +24,10 @@ - Removed `autofocus` option
 
+## 5.12.1
+
+- Fixed an issue where the `componentDidUpdate()` callback of the input component can be called too many times
+
+## 5.12.0
+
+- Added `noSuggestionsText` option ([jraack](https://github.com/jraack))
+
 ## 5.11.2
@@ -25,0 +34,0 @@

dist/ReactTags.cjs.js

@@ -28,3 +28,4 @@ 'use strict';
   'fontStyle',
-  'letterSpacing'
+  'letterSpacing',
+  'textTransform'
 ];
@@ -48,4 +49,6 @@
 
-  componentDidUpdate () {
-    this.updateInputWidth();
+  componentDidUpdate ({ query, placeholder }) {
+    if (query !== this.props.query || placeholder !== this.props.placeholder) {
+      this.updateInputWidth();
+    }
   }
@@ -142,3 +145,4 @@
           id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this.onMouseDown.bind(this, item) },
-          React.createElement( SuggestionComponent, { item: item, query: this.props.query })
+          item.disableMarkIt ? item.name
+            : React.createElement( SuggestionComponent, { item: item, query: this.props.query })
         )
@@ -226,4 +230,9 @@ )
 function getOptions (query) {
-  const filtered = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query));
-  return filtered.slice(0, this.props.maxSuggestionsLength)
+  const options = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query));
+
+  if (options.length === 0 && this.props.noSuggestionsText) {
+    options.push({ id: 0, name: this.props.noSuggestionsText, disabled: true, disableMarkIt: true });
+  }
+
+  return options.slice(0, this.props.maxSuggestionsLength)
 }
@@ -388,2 +397,3 @@
   removeButtonText: 'Click to remove tag',
+  noSuggestionsText: null,
   suggestions: [],
@@ -409,2 +419,3 @@ suggestionsFilter: defaultSuggestionsFilter,
   removeButtonText: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -411,0 +422,0 @@ suggestionsFilter: PropTypes.func,

dist/ReactTags.esm.js

@@ -24,3 +24,4 @@ import React from 'react';
   'fontStyle',
-  'letterSpacing'
+  'letterSpacing',
+  'textTransform'
 ];
@@ -44,4 +45,6 @@
 
-  componentDidUpdate () {
-    this.updateInputWidth();
+  componentDidUpdate ({ query, placeholder }) {
+    if (query !== this.props.query || placeholder !== this.props.placeholder) {
+      this.updateInputWidth();
+    }
   }
@@ -138,3 +141,4 @@
           id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this.onMouseDown.bind(this, item) },
-          React.createElement( SuggestionComponent, { item: item, query: this.props.query })
+          item.disableMarkIt ? item.name
+            : React.createElement( SuggestionComponent, { item: item, query: this.props.query })
         )
@@ -222,4 +226,9 @@ )
 function getOptions (query) {
-  const filtered = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query));
-  return filtered.slice(0, this.props.maxSuggestionsLength)
+  const options = this.props.suggestions.filter((item) => this.props.suggestionsFilter(item, query));
+
+  if (options.length === 0 && this.props.noSuggestionsText) {
+    options.push({ id: 0, name: this.props.noSuggestionsText, disabled: true, disableMarkIt: true });
+  }
+
+  return options.slice(0, this.props.maxSuggestionsLength)
 }
@@ -384,2 +393,3 @@
   removeButtonText: 'Click to remove tag',
+  noSuggestionsText: null,
   suggestions: [],
@@ -405,2 +415,3 @@ suggestionsFilter: defaultSuggestionsFilter,
   removeButtonText: PropTypes.string,
+  noSuggestionsText: PropTypes.string,
   suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -407,0 +418,0 @@ suggestionsFilter: PropTypes.func,

dist/ReactTags.umd.js

@@ -5,3 +5,3 @@ (function (global, factory) {
   (global = global || self, global.ReactTags = factory(global.React, global.PropTypes));
-}(this, function (React, PropTypes) { 'use strict';
+}(this, (function (React, PropTypes) { 'use strict';
 
@@ -31,3 +31,4 @@ React = React && React.hasOwnProperty('default') ? React['default'] : React;
     'fontStyle',
-    'letterSpacing'
+    'letterSpacing',
+    'textTransform'
   ];
@@ -55,4 +56,9 @@
 
-    Input.prototype.componentDidUpdate = function componentDidUpdate () {
-      this.updateInputWidth();
+    Input.prototype.componentDidUpdate = function componentDidUpdate (ref) {
+      var query = ref.query;
+      var placeholder = ref.placeholder;
+
+      if (query !== this.props.query || placeholder !== this.props.placeholder) {
+        this.updateInputWidth();
+      }
     };
@@ -176,3 +182,4 @@
             id: key, key: key, role: 'option', className: classNames.join(' '), 'aria-disabled': item.disabled === true, onMouseDown: this$1.onMouseDown.bind(this$1, item) },
-            React.createElement( SuggestionComponent, { item: item, query: this$1.props.query })
+            item.disableMarkIt ? item.name
+              : React.createElement( SuggestionComponent, { item: item, query: this$1.props.query })
           )
@@ -266,4 +273,9 @@ )
 
-    var filtered = this.props.suggestions.filter(function (item) { return this$1.props.suggestionsFilter(item, query); });
-    return filtered.slice(0, this.props.maxSuggestionsLength)
+    var options = this.props.suggestions.filter(function (item) { return this$1.props.suggestionsFilter(item, query); });
+
+    if (options.length === 0 && this.props.noSuggestionsText) {
+      options.push({ id: 0, name: this.props.noSuggestionsText, disabled: true, disableMarkIt: true });
+    }
+
+    return options.slice(0, this.props.maxSuggestionsLength)
   }
@@ -436,2 +448,3 @@
     removeButtonText: 'Click to remove tag',
+    noSuggestionsText: null,
     suggestions: [],
@@ -457,2 +470,3 @@ suggestionsFilter: defaultSuggestionsFilter,
     removeButtonText: PropTypes.string,
+    noSuggestionsText: PropTypes.string,
     suggestions: PropTypes.arrayOf(PropTypes.object),
@@ -487,2 +501,2 @@ suggestionsFilter: PropTypes.func,
 
-}));
+})));

package.json

 {
   "name": "react-tag-autocomplete",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "description": "React Tag Autocomplete is a simple tagging component ready to drop in your React projects.",
@@ -5,0 +5,0 @@ "main": "dist/ReactTags.cjs.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/).
 
@@ -87,2 +87,3 @@ **Please note, this version is in beta, you can check out the [latest stable version here](https://github.com/i-like-robots/react-tags)** 📢
 - [`removeButtonText`](#removeButtontext-optional)
+- [`noSuggestionsText`](#noSuggestionsText-optional)
 - [`autoresize`](#autoresize-optional)
@@ -147,2 +148,6 @@ - [`delimiters`](#delimiters-optional)
 
+#### noSuggestionsText (optional)
+
+Message shown if there are no matching suggestions. Defaults to `null`.
+
 #### autoresize (optional)
@@ -149,0 +154,0 @@

No alert changes

Improved metrics

Total package byte prevSize

58968

increased by3.19%

Lines of code

1143

increased by2.6%

Number of lines in readme file

303

increased by1.68%

No dependency changes