react-mentions 4.4.6 → 4.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -437,119 +437,65 @@ function createDefaultStyle(defaultStyle, getModifiers) {
437
437
  };
438
438
  }
439
439
 
440
- function _createSuper(Derived) {
441
- var hasNativeReflectConstruct = _isNativeReflectConstruct();
442
- return function() {
443
- var result, Super = _getPrototypeOf(Derived);
444
- if (hasNativeReflectConstruct) {
445
- var NewTarget = _getPrototypeOf(this).constructor;
446
- result = Reflect.construct(Super, arguments, NewTarget);
447
- } else result = Super.apply(this, arguments);
448
- return _possibleConstructorReturn(this, result);
449
- };
450
- }
451
-
452
- function _isNativeReflectConstruct() {
453
- if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
454
- if (Reflect.construct.sham) return !1;
455
- if ("function" == typeof Proxy) return !0;
456
- try {
457
- return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})),
458
- !0;
459
- } catch (e) {
460
- return !1;
461
- }
462
- }
463
-
464
440
  var _generateComponentKey = function(usedKeys, id) {
465
441
  return usedKeys.hasOwnProperty(id) ? usedKeys[id]++ : usedKeys[id] = 0, id + "_" + usedKeys[id];
466
- }, Highlighter = function(_Component) {
467
- _inherits(Highlighter, _Component);
468
- var _super = _createSuper(Highlighter);
469
- function Highlighter() {
470
- var _this;
471
- return _classCallCheck(this, Highlighter), _this = _super.apply(this, arguments),
472
- _defineProperty(_assertThisInitialized(_this), "setCaretElement", function(el) {
473
- _this.caretElement = el;
474
- }), _this.state = {
475
- left: void 0,
476
- top: void 0
477
- }, _this;
478
- }
479
- return _createClass(Highlighter, [ {
480
- key: "componentDidMount",
481
- value: function() {
482
- this.notifyCaretPosition();
483
- }
484
- }, {
485
- key: "componentDidUpdate",
486
- value: function() {
487
- this.notifyCaretPosition();
488
- }
489
- }, {
490
- key: "notifyCaretPosition",
491
- value: function() {
492
- if (this.caretElement) {
493
- var _this$caretElement = this.caretElement, offsetLeft = _this$caretElement.offsetLeft, offsetTop = _this$caretElement.offsetTop;
494
- if (this.state.left !== offsetLeft || this.state.top !== offsetTop) {
495
- var newPosition = {
496
- left: offsetLeft,
497
- top: offsetTop
498
- };
499
- this.setState(newPosition), this.props.onCaretPositionChange(newPosition);
500
- }
442
+ };
443
+
444
+ function Highlighter(_ref) {
445
+ var selectionStart = _ref.selectionStart, selectionEnd = _ref.selectionEnd, _ref$value = _ref.value, value = void 0 === _ref$value ? "" : _ref$value, onCaretPositionChange = _ref.onCaretPositionChange, containerRef = _ref.containerRef, children = _ref.children, style = (_ref.singleLine,
446
+ _ref.style), _useState = React.useState({
447
+ left: void 0,
448
+ top: void 0
449
+ }), _useState2 = _slicedToArray(_useState, 2), position = _useState2[0], setPosition = _useState2[1], _useState3 = React.useState(), _useState4 = _slicedToArray(_useState3, 2), caretElement = _useState4[0], setCaretElement = _useState4[1];
450
+ React.useEffect(function() {
451
+ notifyCaretPosition();
452
+ }, [ caretElement ]);
453
+ var caretPositionInMarkup, notifyCaretPosition = function() {
454
+ if (caretElement) {
455
+ var offsetLeft = caretElement.offsetLeft, offsetTop = caretElement.offsetTop;
456
+ if (position.left !== offsetLeft || position.top !== offsetTop) {
457
+ var newPosition = {
458
+ left: offsetLeft,
459
+ top: offsetTop
460
+ };
461
+ setPosition(newPosition), onCaretPositionChange(newPosition);
501
462
  }
502
463
  }
503
- }, {
504
- key: "render",
505
- value: function() {
506
- var caretPositionInMarkup, _this2 = this, _this$props = this.props, selectionStart = _this$props.selectionStart, selectionEnd = _this$props.selectionEnd, value = _this$props.value, style = _this$props.style, children = _this$props.children, containerRef = _this$props.containerRef, config = readConfigFromChildren(children);
507
- selectionStart === selectionEnd && (caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, "START"));
508
- var resultComponents = [], componentKeys = {}, components = resultComponents, substringComponentKey = 0;
509
- return iterateMentionsMarkup(value, config, function(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
510
- var key = _generateComponentKey(componentKeys, id);
511
- components.push(_this2.getMentionComponentForMatch(id, display, mentionChildIndex, key));
512
- }, function(substr, index, indexInPlainText) {
513
- if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
514
- var splitIndex = caretPositionInMarkup - index;
515
- components.push(_this2.renderSubstring(substr.substring(0, splitIndex), substringComponentKey)),
516
- components = [ _this2.renderSubstring(substr.substring(splitIndex), substringComponentKey) ];
517
- } else components.push(_this2.renderSubstring(substr, substringComponentKey));
518
- substringComponentKey++;
519
- }), components.push(" "), components !== resultComponents && resultComponents.push(this.renderHighlighterCaret(components)),
520
- React__default.createElement("div", _extends({}, style, {
521
- ref: containerRef
522
- }), resultComponents);
523
- }
524
- }, {
525
- key: "renderSubstring",
526
- value: function(string, key) {
527
- return React__default.createElement("span", _extends({}, this.props.style("substring"), {
528
- key: key
529
- }), string);
530
- }
531
- }, {
532
- key: "getMentionComponentForMatch",
533
- value: function(id, display, mentionChildIndex, key) {
534
- var props = {
535
- id: id,
536
- display: display,
537
- key: key
538
- }, child = React.Children.toArray(this.props.children)[mentionChildIndex];
539
- return React__default.cloneElement(child, props);
540
- }
541
- }, {
542
- key: "renderHighlighterCaret",
543
- value: function(children) {
544
- return React__default.createElement("span", _extends({}, this.props.style("caret"), {
545
- ref: this.setCaretElement,
546
- key: "caret"
547
- }), children);
548
- }
549
- } ]), Highlighter;
550
- }(React.Component);
464
+ }, config = readConfigFromChildren(children);
465
+ selectionEnd === selectionStart && (caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, "START"));
466
+ var resultComponents = [], componentKeys = {}, components = resultComponents, substringComponentKey = 0, renderSubstring = function(string, key) {
467
+ return React__default.createElement("span", _extends({}, style("substring"), {
468
+ key: key
469
+ }), string);
470
+ }, getMentionComponentForMatch = function(id, display, mentionChildIndex, key) {
471
+ var props = {
472
+ id: id,
473
+ display: display,
474
+ key: key
475
+ }, child = React.Children.toArray(children)[mentionChildIndex];
476
+ return React__default.cloneElement(child, props);
477
+ };
478
+ return iterateMentionsMarkup(value, config, function(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
479
+ var key = _generateComponentKey(componentKeys, id);
480
+ components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
481
+ }, function(substr, index, indexInPlainText) {
482
+ if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
483
+ var splitIndex = caretPositionInMarkup - index;
484
+ components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey)),
485
+ components = [ renderSubstring(substr.substring(splitIndex), substringComponentKey) ];
486
+ } else components.push(renderSubstring(substr, substringComponentKey));
487
+ substringComponentKey++;
488
+ }), components.push(" "), components !== resultComponents && resultComponents.push(function(children) {
489
+ return React__default.createElement("span", _extends({}, style("caret"), {
490
+ ref: setCaretElement,
491
+ key: "caret"
492
+ }), children);
493
+ }(components)), React__default.createElement("div", _extends({}, style, {
494
+ ref: containerRef
495
+ }), resultComponents);
496
+ }
551
497
 
552
- _defineProperty(Highlighter, "propTypes", {
498
+ Highlighter.propTypes = {
553
499
  selectionStart: PropTypes.number,
554
500
  selectionEnd: PropTypes.number,
555
501
  value: PropTypes.string.isRequired,
@@ -558,9 +504,7 @@ _defineProperty(Highlighter, "propTypes", {
558
504
  current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
559
505
  }) ]),
560
506
  children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
561
- }), _defineProperty(Highlighter, "defaultProps", {
562
- value: ""
563
- });
507
+ };
564
508
 
565
509
  var styled = createDefaultStyle({
566
510
  position: "relative",
@@ -638,116 +582,68 @@ function LoadingIndicator(_ref) {
638
582
 
639
583
  var defaultstyle = {};
640
584
 
641
- function _createSuper$1(Derived) {
642
- var hasNativeReflectConstruct = _isNativeReflectConstruct$1();
643
- return function() {
644
- var result, Super = _getPrototypeOf(Derived);
645
- if (hasNativeReflectConstruct) {
646
- var NewTarget = _getPrototypeOf(this).constructor;
647
- result = Reflect.construct(Super, arguments, NewTarget);
648
- } else result = Super.apply(this, arguments);
649
- return _possibleConstructorReturn(this, result);
585
+ function SuggestionsOverlay(_ref) {
586
+ var id = _ref.id, _ref$suggestions = _ref.suggestions, suggestions = void 0 === _ref$suggestions ? {} : _ref$suggestions, a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel, focusIndex = _ref.focusIndex, position = _ref.position, left = _ref.left, right = _ref.right, top = _ref.top, scrollFocusedIntoView = _ref.scrollFocusedIntoView, isLoading = _ref.isLoading, isOpened = _ref.isOpened, _ref$onSelect = _ref.onSelect, onSelect = void 0 === _ref$onSelect ? function() {
587
+ return null;
588
+ } : _ref$onSelect, ignoreAccents = _ref.ignoreAccents, containerRef = _ref.containerRef, children = _ref.children, style = _ref.style, customSuggestionsContainer = _ref.customSuggestionsContainer, onMouseDown = _ref.onMouseDown, onMouseEnter = _ref.onMouseEnter, _useState = React.useState(), _useState2 = _slicedToArray(_useState, 2), ulElement = _useState2[0], setUlElement = _useState2[1];
589
+ React.useEffect(function() {
590
+ if (ulElement && !(ulElement.offsetHeight >= ulElement.scrollHeight) && scrollFocusedIntoView) {
591
+ var scrollTop = ulElement.scrollTop, _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(), top = _ulElement$children$f.top, bottom = _ulElement$children$f.bottom, topContainer = ulElement.getBoundingClientRect().top;
592
+ bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? ulElement.scrollTop = top : bottom > ulElement.offsetHeight && (ulElement.scrollTop = bottom - ulElement.offsetHeight);
593
+ }
594
+ }, []);
595
+ var suggestionsToRender, renderSuggestion = function(result, queryInfo, index) {
596
+ var isFocused = index === focusIndex, childIndex = queryInfo.childIndex, query = queryInfo.query, renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
597
+ return React__default.createElement(Suggestion$1, {
598
+ style: style("item"),
599
+ key: "".concat(childIndex, "-").concat(getID(result)),
600
+ id: getSuggestionHtmlId(id, index),
601
+ query: query,
602
+ index: index,
603
+ ignoreAccents: ignoreAccents,
604
+ renderSuggestion: renderSuggestion,
605
+ suggestion: result,
606
+ focused: isFocused,
607
+ onClick: function() {
608
+ return select(result, queryInfo);
609
+ },
610
+ onMouseEnter: function() {
611
+ return handleMouseEnter(index);
612
+ }
613
+ });
614
+ }, handleMouseEnter = function(index, ev) {
615
+ onMouseEnter && onMouseEnter(index);
616
+ }, select = function(suggestion, queryInfo) {
617
+ onSelect(suggestion, queryInfo);
618
+ }, getID = function(suggestion) {
619
+ return "string" == typeof suggestion ? suggestion : suggestion.id;
650
620
  };
621
+ return isOpened ? React__default.createElement("div", _extends({}, useStyles.inline({
622
+ position: position || "absolute",
623
+ left: left,
624
+ right: right,
625
+ top: top
626
+ }, style), {
627
+ onMouseDown: onMouseDown,
628
+ ref: containerRef
629
+ }), React__default.createElement("ul", _extends({
630
+ ref: setUlElement,
631
+ id: id,
632
+ role: "listbox",
633
+ "aria-label": a11ySuggestionsListLabel
634
+ }, style("list")), (suggestionsToRender = Object.values(suggestions).reduce(function(accResults, _ref2) {
635
+ var results = _ref2.results, queryInfo = _ref2.queryInfo;
636
+ return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
637
+ return renderSuggestion(result, queryInfo, accResults.length + index);
638
+ })));
639
+ }, []), customSuggestionsContainer ? customSuggestionsContainer(suggestionsToRender) : suggestionsToRender)), function() {
640
+ if (isLoading) return React__default.createElement(LoadingIndicator, {
641
+ style: style("loadingIndicator")
642
+ });
643
+ }()) : null;
651
644
  }
652
645
 
653
- function _isNativeReflectConstruct$1() {
654
- if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
655
- if (Reflect.construct.sham) return !1;
656
- if ("function" == typeof Proxy) return !0;
657
- try {
658
- return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})),
659
- !0;
660
- } catch (e) {
661
- return !1;
662
- }
663
- }
664
-
665
- var SuggestionsOverlay = function(_Component) {
666
- _inherits(SuggestionsOverlay, _Component);
667
- var _super = _createSuper$1(SuggestionsOverlay);
668
- function SuggestionsOverlay() {
669
- var _this;
670
- _classCallCheck(this, SuggestionsOverlay);
671
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
672
- return _this = _super.call.apply(_super, [ this ].concat(args)), _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
673
- _this.props.onMouseEnter && _this.props.onMouseEnter(index);
674
- }), _defineProperty(_assertThisInitialized(_this), "select", function(suggestion, queryInfo) {
675
- _this.props.onSelect(suggestion, queryInfo);
676
- }), _defineProperty(_assertThisInitialized(_this), "setUlElement", function(el) {
677
- _this.ulElement = el;
678
- }), _this;
679
- }
680
- return _createClass(SuggestionsOverlay, [ {
681
- key: "componentDidUpdate",
682
- value: function() {
683
- if (this.ulElement && !(this.ulElement.offsetHeight >= this.ulElement.scrollHeight) && this.props.scrollFocusedIntoView) {
684
- var scrollTop = this.ulElement.scrollTop, _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(), top = _this$ulElement$child.top, bottom = _this$ulElement$child.bottom, topContainer = this.ulElement.getBoundingClientRect().top;
685
- bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? this.ulElement.scrollTop = top : bottom > this.ulElement.offsetHeight && (this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight);
686
- }
687
- }
688
- }, {
689
- key: "render",
690
- value: function() {
691
- var _this$props = this.props, id = _this$props.id, a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel, isOpened = _this$props.isOpened, style = _this$props.style, onMouseDown = _this$props.onMouseDown, containerRef = _this$props.containerRef, position = _this$props.position, left = _this$props.left, right = _this$props.right, top = _this$props.top;
692
- return isOpened ? React__default.createElement("div", _extends({}, useStyles.inline({
693
- position: position || "absolute",
694
- left: left,
695
- right: right,
696
- top: top
697
- }, style), {
698
- onMouseDown: onMouseDown,
699
- ref: containerRef
700
- }), React__default.createElement("ul", _extends({
701
- ref: this.setUlElement,
702
- id: id,
703
- role: "listbox",
704
- "aria-label": a11ySuggestionsListLabel
705
- }, style("list")), this.renderSuggestions()), this.renderLoadingIndicator()) : null;
706
- }
707
- }, {
708
- key: "renderSuggestions",
709
- value: function() {
710
- var _this2 = this, customSuggestionsContainer = this.props.customSuggestionsContainer, suggestions = Object.values(this.props.suggestions).reduce(function(accResults, _ref) {
711
- var results = _ref.results, queryInfo = _ref.queryInfo;
712
- return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
713
- return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
714
- })));
715
- }, []);
716
- return customSuggestionsContainer ? customSuggestionsContainer(suggestions) : suggestions;
717
- }
718
- }, {
719
- key: "renderSuggestion",
720
- value: function(result, queryInfo, index) {
721
- var _this3 = this, isFocused = index === this.props.focusIndex, childIndex = queryInfo.childIndex, query = queryInfo.query, renderSuggestion = React.Children.toArray(this.props.children)[childIndex].props.renderSuggestion, ignoreAccents = this.props.ignoreAccents;
722
- return React__default.createElement(Suggestion$1, {
723
- style: this.props.style("item"),
724
- key: "".concat(childIndex, "-").concat(getID(result)),
725
- id: getSuggestionHtmlId(this.props.id, index),
726
- query: query,
727
- index: index,
728
- ignoreAccents: ignoreAccents,
729
- renderSuggestion: renderSuggestion,
730
- suggestion: result,
731
- focused: isFocused,
732
- onClick: function() {
733
- return _this3.select(result, queryInfo);
734
- },
735
- onMouseEnter: function() {
736
- return _this3.handleMouseEnter(index);
737
- }
738
- });
739
- }
740
- }, {
741
- key: "renderLoadingIndicator",
742
- value: function() {
743
- if (this.props.isLoading) return React__default.createElement(LoadingIndicator, {
744
- style: this.props.style("loadingIndicator")
745
- });
746
- }
747
- } ]), SuggestionsOverlay;
748
- }(React.Component);
749
-
750
- _defineProperty(SuggestionsOverlay, "propTypes", {
646
+ SuggestionsOverlay.propTypes = {
751
647
  id: PropTypes.string.isRequired,
752
648
  suggestions: PropTypes.object.isRequired,
753
649
  a11ySuggestionsListLabel: PropTypes.string,
@@ -761,20 +657,13 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
761
657
  isOpened: PropTypes.bool.isRequired,
762
658
  onSelect: PropTypes.func,
763
659
  ignoreAccents: PropTypes.bool,
660
+ customSuggestionsContainer: PropTypes.any,
764
661
  containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({
765
662
  current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
766
- }) ]),
767
- children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
768
- }), _defineProperty(SuggestionsOverlay, "defaultProps", {
769
- suggestions: {},
770
- onSelect: function() {
771
- return null;
772
- }
773
- });
663
+ }) ])
664
+ };
774
665
 
775
- var getID = function(suggestion) {
776
- return "string" == typeof suggestion ? suggestion : suggestion.id;
777
- }, styled$2 = createDefaultStyle({
666
+ var styled$2 = createDefaultStyle({
778
667
  zIndex: 1,
779
668
  backgroundColor: "white",
780
669
  marginTop: 14,
@@ -809,8 +698,8 @@ function _objectSpread(target) {
809
698
  return target;
810
699
  }
811
700
 
812
- function _createSuper$2(Derived) {
813
- var hasNativeReflectConstruct = _isNativeReflectConstruct$2();
701
+ function _createSuper(Derived) {
702
+ var hasNativeReflectConstruct = _isNativeReflectConstruct();
814
703
  return function() {
815
704
  var result, Super = _getPrototypeOf(Derived);
816
705
  if (hasNativeReflectConstruct) {
@@ -821,7 +710,7 @@ function _createSuper$2(Derived) {
821
710
  };
822
711
  }
823
712
 
824
- function _isNativeReflectConstruct$2() {
713
+ function _isNativeReflectConstruct() {
825
714
  if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
826
715
  if (Reflect.construct.sham) return !1;
827
716
  if ("function" == typeof Proxy) return !0;
@@ -872,7 +761,7 @@ var makeTriggerRegex = function(trigger) {
872
761
  children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
873
762
  }, MentionsInput = function(_React$Component) {
874
763
  _inherits(MentionsInput, _React$Component);
875
- var _super = _createSuper$2(MentionsInput);
764
+ var _super = _createSuper(MentionsInput);
876
765
  function MentionsInput(_props) {
877
766
  var _this;
878
767
  return _classCallCheck(this, MentionsInput), _this = _super.call(this, _props),