draft-js-mention-plugin - npm Package Compare versions

Comparing version 2.0.0-rc9 to 2.0.0

CHANGELOG.md

@@ -10,2 +10,4 @@ # Change Log
 
+- Deprecate immutable datastructures
+- Passing through `isFocused` prop to `entryComponent`. Thanks to @thomas88
 - Added support for Latin-1 Supplement and Latin Extended-A characters. Thanks to @thomas88
@@ -29,2 +31,3 @@ - Fixed incorrect opening of suggestions. Thanks to @thomas88
 
+- Escape spaces before mention trigger properly
 - Escape mention trigger regex properly
@@ -31,0 +34,0 @@ - Fix bug that selects candidate on hitting return key even if the dropdown was closed. Thanks to @ngs [#720](https://github.com/draft-js-plugins/draft-js-plugins/pull/720)

lib/Mention/index.js

@@ -11,4 +11,2 @@ 'use strict';
 
-var _immutable = require('immutable');
-
 var _unionClassNames = require('union-class-names');
@@ -27,3 +25,3 @@
     {
-      href: mention.get('link'),
+      href: mention.link,
       className: className,
@@ -61,5 +59,5 @@ spellCheck: false
   var combinedClassName = (0, _unionClassNames2.default)(theme.mention, className);
-  var mention = (0, _immutable.fromJS)(contentState.getEntity(entityKey).getData().mention);
+  var mention = contentState.getEntity(entityKey).getData().mention;
 
-  var Component = mentionComponent || (mention.has('link') ? MentionLink : MentionText);
+  var Component = mentionComponent || (mention.link ? MentionLink : MentionText);
 
@@ -66,0 +64,0 @@ return _react2.default.createElement(

lib/MentionSuggestions/Entry/Avatar/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,3 +7,3 @@ Object.defineProperty(exports, "__esModule", {
 
-var _react = require('react');
+var _react = require("react");
 
@@ -19,7 +19,7 @@ var _react2 = _interopRequireDefault(_react);
 
-  if (mention.has('avatar')) {
-    return _react2.default.createElement('img', {
-      src: mention.get('avatar'),
+  if (mention.avatar) {
+    return _react2.default.createElement("img", {
+      src: mention.avatar,
       className: theme.mentionSuggestionsEntryAvatar,
-      role: 'presentation'
+      role: "presentation"
     });
@@ -26,0 +26,0 @@ }

lib/MentionSuggestions/Entry/index.js

@@ -66,5 +66,7 @@ 'use strict';
           theme = _props$theme === undefined ? {} : _props$theme,
-          searchValue = _props.searchValue;
+          mention = _props.mention,
+          searchValue = _props.searchValue,
+          isFocused = _props.isFocused;
 
-      var className = this.props.isFocused ? theme.mentionSuggestionsEntryFocused : theme.mentionSuggestionsEntry;
+      var className = isFocused ? theme.mentionSuggestionsEntryFocused : theme.mentionSuggestionsEntry;
       var EntryComponent = this.props.entryComponent;
@@ -78,3 +80,4 @@ return _react2.default.createElement(EntryComponent, {
         theme: theme,
-        mention: this.props.mention,
+        mention: mention,
+        isFocused: isFocused,
         searchValue: searchValue
@@ -81,0 +84,0 @@ });

lib/MentionSuggestions/index.js

@@ -8,6 +8,6 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
 var _react = require('react');
@@ -23,4 +23,2 @@
 
-var _immutable = require('immutable');
-
 var _lodash = require('lodash.escaperegexp');
@@ -46,5 +44,5 @@
 
-var _defaultEntryComponent = require('./Entry/defaultEntryComponent');
+var _DefaultEntryComponent = require('./Entry/DefaultEntryComponent');
 
-var _defaultEntryComponent2 = _interopRequireDefault(_defaultEntryComponent);
+var _DefaultEntryComponent2 = _interopRequireDefault(_DefaultEntryComponent);
 
@@ -61,14 +59,2 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var suggestionsHoc = function suggestionsHoc(Comp) {
-  return function (props) {
-    if (_immutable.List.isList(props.suggestions)) {
-      console.warn('Immutable.List for the "suggestions" prop will be deprecated in the next major version, please use an array instead'); // eslint-disable-line no-console
-    }
-
-    return _react2.default.createElement(Comp, _extends({}, props, {
-      suggestions: (0, _immutable.fromJS)(props.suggestions)
-    }));
-  };
-};
-
 var MentionSuggestions = exports.MentionSuggestions = function (_Component) {
@@ -96,4 +82,4 @@ _inherits(MentionSuggestions, _Component);
         // not fullfilled anymore.
-        var size = _this.props.suggestions.size;
-        if (size > 0 && _this.state.focusedOptionIndex >= size) {
+        var length = _this.props.suggestions.length;
+        if (length > 0 && _this.state.focusedOptionIndex >= length) {
           _this.setState({
@@ -234,3 +220,3 @@ focusedOptionIndex: size - 1
       var newIndex = _this.state.focusedOptionIndex + 1;
-      _this.onMentionFocus(newIndex >= _this.props.suggestions.size ? 0 : newIndex);
+      _this.onMentionFocus(newIndex >= _this.props.suggestions.length ? 0 : newIndex);
     }, _this.onTab = function (keyboardEvent) {
@@ -241,5 +227,5 @@ keyboardEvent.preventDefault();
       keyboardEvent.preventDefault();
-      if (_this.props.suggestions.size > 0) {
+      if (_this.props.suggestions.length > 0) {
         var newIndex = _this.state.focusedOptionIndex - 1;
-        _this.onMentionFocus(newIndex < 0 ? _this.props.suggestions.size - 1 : newIndex);
+        _this.onMentionFocus(newIndex < 0 ? _this.props.suggestions.length - 1 : newIndex);
       }
@@ -285,3 +271,3 @@ }, _this.onEscape = function (keyboardEvent) {
 
-      _this.onMentionSelect(_this.props.suggestions.get(_this.state.focusedOptionIndex));
+      _this.onMentionSelect(_this.props.suggestions[_this.state.focusedOptionIndex]);
       return 'handled';
@@ -341,5 +327,6 @@ }, _this.openDropdown = function () {
     value: function componentWillReceiveProps(nextProps) {
-      if (nextProps.suggestions.size === 0 && this.state.isActive) {
+      if (nextProps.suggestions.length === 0 && this.state.isActive) {
+        console.log('close??');
         this.closeDropdown();
-      } else if (nextProps.suggestions.size > 0 && !nextProps.suggestions.equals(this.props.suggestions) && !this.state.isActive) {
+      } else if (nextProps.suggestions.length > 0 && nextProps.suggestions !== this.props.suggestions && !this.state.isActive) {
         this.openDropdown();
@@ -384,5 +371,5 @@ }
         }
-      }), this.props.suggestions.map(function (mention, index) {
+      }), suggestions.map(function (mention, index) {
         return _react2.default.createElement(_Entry2.default, {
-          key: mention.has('id') ? mention.get('id') : mention.get('name'),
+          key: mention.id ? mention.id : mention.name,
           onMentionSelect: _this2.onMentionSelect,
@@ -396,5 +383,5 @@ onMentionFocus: _this2.onMentionFocus,
           searchValue: _this2.lastSearchValue,
-          entryComponent: entryComponent || _defaultEntryComponent2.default
+          entryComponent: entryComponent || _DefaultEntryComponent2.default
         });
-      }).toJS());
+      }));
     }
@@ -410,9 +397,4 @@ }]);
   onAddMention: _propTypes2.default.func,
-  suggestions: function suggestions(props, propName, componentName) {
-    if (!_immutable.List.isList(props[propName])) {
-      return new Error('Invalid prop `' + propName + '` supplied to `' + componentName + '`. should be an instance of immutable list.');
-    }
-    return undefined;
-  }
+  suggestions: _propTypes2.default.array
 };
-exports.default = suggestionsHoc(MentionSuggestions);
+exports.default = MentionSuggestions;

lib/mentionSuggestionsStrategy.js

@@ -20,3 +20,3 @@ 'use strict';
     var reg = new RegExp(String.raw({
-      raw: '(s|^)' + (0, _lodash2.default)(trigger) + regExp // eslint-disable-line no-useless-escape
+      raw: '(\\s|^)' + (0, _lodash2.default)(trigger) + regExp // eslint-disable-line no-useless-escape
     }), 'g');
@@ -23,0 +23,0 @@ (0, _findWithRegex2.default)(reg, contentBlock, callback);

lib/modifiers/addMention.js

@@ -37,3 +37,3 @@ 'use strict';
 
-  var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, '' + mentionPrefix + mention.get('name'), null, // no inline style needed
+  var mentionReplacedContent = _draftJs.Modifier.replaceText(editorState.getCurrentContent(), mentionTextSelection, '' + mentionPrefix + mention.name, null, // no inline style needed
   entityKey);
@@ -40,0 +40,0 @@

lib/utils/defaultSuggestionsFilter.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -7,16 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 // Get the first 5 suggestions that match
-var size = function size(list) {
-  return list.constructor.name === 'List' ? list.size : list.length;
-};
 
-var get = function get(obj, attr) {
-  return obj.get ? obj.get(attr) : obj[attr];
-};
-
 var defaultSuggestionsFilter = function defaultSuggestionsFilter(searchValue, suggestions) {
   var value = searchValue.toLowerCase();
   var filteredSuggestions = suggestions.filter(function (suggestion) {
-    return !value || get(suggestion, 'name').toLowerCase().indexOf(value) > -1;
+    return !value || suggestion.name.toLowerCase().indexOf(value) > -1;
   });
-  var length = size(filteredSuggestions) < 5 ? size(filteredSuggestions) : 5;
+  var length = filteredSuggestions.length < 5 ? filteredSuggestions.length : 5;
   return filteredSuggestions.slice(0, length);
@@ -23,0 +16,0 @@ };

lib/utils/getWordAt.js

@@ -9,2 +9,3 @@ "use strict";
   var str = String(string);
+
   // eslint-disable-next-line no-bitwise
@@ -11,0 +12,0 @@ var pos = Number(position) >>> 0;

lib/utils/positionSuggestions.js

@@ -48,4 +48,5 @@ 'use strict';
   var transition = void 0;
+
   if (state.isActive) {
-    if (props.suggestions.size > 0) {
+    if (props.suggestions.length > 0) {
       transform = 'scale(1)';
@@ -52,0 +53,0 @@ transition = 'all 0.25s cubic-bezier(.3,1.2,.2,1)';

package.json

 {
   "name": "draft-js-mention-plugin",
-  "version": "2.0.0-rc9",
+  "version": "2.0.0",
   "description": "Mention Plugin for DraftJS",
@@ -5,0 +5,0 @@ "author": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

63406

decreased by-1.28%

Lines of code

1062

decreased by-1.76%

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes