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.
- package/CHANGELOG.md +7 -0
- package/dist/react-mentions.cjs.dev.js +225 -300
- package/dist/react-mentions.cjs.prod.js +122 -233
- package/dist/react-mentions.esm.js +226 -301
- package/package.json +1 -1
@@ -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
|
-
}
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
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
|
-
|
505
|
-
|
506
|
-
|
507
|
-
|
508
|
-
|
509
|
-
|
510
|
-
|
511
|
-
|
512
|
-
|
513
|
-
|
514
|
-
|
515
|
-
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
|
528
|
-
|
529
|
-
|
530
|
-
|
531
|
-
|
532
|
-
|
533
|
-
|
534
|
-
|
535
|
-
|
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
|
-
|
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
|
-
}
|
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
|
642
|
-
var
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
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
|
-
|
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
|
-
|
768
|
-
}), _defineProperty(SuggestionsOverlay, "defaultProps", {
|
769
|
-
suggestions: {},
|
770
|
-
onSelect: function() {
|
771
|
-
return null;
|
772
|
-
}
|
773
|
-
});
|
663
|
+
}) ])
|
664
|
+
};
|
774
665
|
|
775
|
-
var
|
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
|
813
|
-
var hasNativeReflectConstruct = _isNativeReflectConstruct
|
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
|
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
|
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),
|