react-mentions 4.4.4 → 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 +19 -0
- package/README.md +7 -19
- package/dist/react-mentions.cjs.dev.js +275 -372
- package/dist/react-mentions.cjs.prod.js +143 -296
- package/dist/react-mentions.esm.js +276 -373
- 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",
|
|
@@ -585,70 +529,28 @@ var styled = createDefaultStyle({
|
|
|
585
529
|
};
|
|
586
530
|
}), Highlighter$1 = styled(Highlighter);
|
|
587
531
|
|
|
588
|
-
function
|
|
589
|
-
var
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
return
|
|
532
|
+
function Suggestion(_ref) {
|
|
533
|
+
var display, highlightedDisplay, id = _ref.id, focused = _ref.focused, ignoreAccents = _ref.ignoreAccents, index = _ref.index, onClick = _ref.onClick, onMouseEnter = _ref.onMouseEnter, query = _ref.query, renderSuggestion = _ref.renderSuggestion, suggestion = _ref.suggestion, style = _ref.style, rest = (_ref.className,
|
|
534
|
+
_ref.classNames, {
|
|
535
|
+
onClick: onClick,
|
|
536
|
+
onMouseEnter: onMouseEnter
|
|
537
|
+
}), getDisplay = function() {
|
|
538
|
+
if ("string" == typeof suggestion) return suggestion;
|
|
539
|
+
var id = suggestion.id, display = suggestion.display;
|
|
540
|
+
return void 0 !== id && display ? display : id;
|
|
541
|
+
}, renderHighlightedDisplay = function(display) {
|
|
542
|
+
var i = getSubstringIndex(display, query, ignoreAccents);
|
|
543
|
+
return -1 === i ? React__default.createElement("span", style("display"), display) : React__default.createElement("span", style("display"), display.substring(0, i), React__default.createElement("b", style("highlight"), display.substring(i, i + query.length)), display.substring(i + query.length));
|
|
597
544
|
};
|
|
545
|
+
return React__default.createElement("li", _extends({
|
|
546
|
+
id: id,
|
|
547
|
+
role: "option",
|
|
548
|
+
"aria-selected": focused
|
|
549
|
+
}, rest, style), (display = getDisplay(), highlightedDisplay = renderHighlightedDisplay(display),
|
|
550
|
+
renderSuggestion ? renderSuggestion(suggestion, query, highlightedDisplay, index, focused) : highlightedDisplay));
|
|
598
551
|
}
|
|
599
552
|
|
|
600
|
-
|
|
601
|
-
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
|
|
602
|
-
if (Reflect.construct.sham) return !1;
|
|
603
|
-
if ("function" == typeof Proxy) return !0;
|
|
604
|
-
try {
|
|
605
|
-
return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})),
|
|
606
|
-
!0;
|
|
607
|
-
} catch (e) {
|
|
608
|
-
return !1;
|
|
609
|
-
}
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
var Suggestion = function(_Component) {
|
|
613
|
-
_inherits(Suggestion, _Component);
|
|
614
|
-
var _super = _createSuper$1(Suggestion);
|
|
615
|
-
function Suggestion() {
|
|
616
|
-
return _classCallCheck(this, Suggestion), _super.apply(this, arguments);
|
|
617
|
-
}
|
|
618
|
-
return _createClass(Suggestion, [ {
|
|
619
|
-
key: "render",
|
|
620
|
-
value: function() {
|
|
621
|
-
var rest = omit(this.props, [ "style", "classNames", "className" ], keys(Suggestion.propTypes));
|
|
622
|
-
return React__default.createElement("li", _extends({
|
|
623
|
-
id: this.props.id,
|
|
624
|
-
role: "option",
|
|
625
|
-
"aria-selected": this.props.focused
|
|
626
|
-
}, rest, this.props.style), this.renderContent());
|
|
627
|
-
}
|
|
628
|
-
}, {
|
|
629
|
-
key: "renderContent",
|
|
630
|
-
value: function() {
|
|
631
|
-
var _this$props = this.props, query = _this$props.query, renderSuggestion = _this$props.renderSuggestion, suggestion = _this$props.suggestion, index = _this$props.index, focused = _this$props.focused, display = this.getDisplay(), highlightedDisplay = this.renderHighlightedDisplay(display, query);
|
|
632
|
-
return renderSuggestion ? renderSuggestion(suggestion, query, highlightedDisplay, index, focused) : highlightedDisplay;
|
|
633
|
-
}
|
|
634
|
-
}, {
|
|
635
|
-
key: "getDisplay",
|
|
636
|
-
value: function() {
|
|
637
|
-
var suggestion = this.props.suggestion;
|
|
638
|
-
if ("string" == typeof suggestion) return suggestion;
|
|
639
|
-
var id = suggestion.id, display = suggestion.display;
|
|
640
|
-
return void 0 !== id && display ? display : id;
|
|
641
|
-
}
|
|
642
|
-
}, {
|
|
643
|
-
key: "renderHighlightedDisplay",
|
|
644
|
-
value: function(display) {
|
|
645
|
-
var _this$props2 = this.props, ignoreAccents = _this$props2.ignoreAccents, query = _this$props2.query, style = _this$props2.style, i = getSubstringIndex(display, query, ignoreAccents);
|
|
646
|
-
return -1 === i ? React__default.createElement("span", style("display"), display) : React__default.createElement("span", style("display"), display.substring(0, i), React__default.createElement("b", style("highlight"), display.substring(i, i + query.length)), display.substring(i + query.length));
|
|
647
|
-
}
|
|
648
|
-
} ]), Suggestion;
|
|
649
|
-
}(React.Component);
|
|
650
|
-
|
|
651
|
-
_defineProperty(Suggestion, "propTypes", {
|
|
553
|
+
Suggestion.propTypes = {
|
|
652
554
|
id: PropTypes.string.isRequired,
|
|
653
555
|
query: PropTypes.string.isRequired,
|
|
654
556
|
index: PropTypes.number.isRequired,
|
|
@@ -659,7 +561,7 @@ _defineProperty(Suggestion, "propTypes", {
|
|
|
659
561
|
}) ]).isRequired,
|
|
660
562
|
renderSuggestion: PropTypes.func,
|
|
661
563
|
focused: PropTypes.bool
|
|
662
|
-
}
|
|
564
|
+
};
|
|
663
565
|
|
|
664
566
|
var styled$1 = createDefaultStyle({
|
|
665
567
|
cursor: "pointer"
|
|
@@ -680,116 +582,68 @@ function LoadingIndicator(_ref) {
|
|
|
680
582
|
|
|
681
583
|
var defaultstyle = {};
|
|
682
584
|
|
|
683
|
-
function
|
|
684
|
-
var
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
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;
|
|
692
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;
|
|
693
644
|
}
|
|
694
645
|
|
|
695
|
-
|
|
696
|
-
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
|
|
697
|
-
if (Reflect.construct.sham) return !1;
|
|
698
|
-
if ("function" == typeof Proxy) return !0;
|
|
699
|
-
try {
|
|
700
|
-
return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {})),
|
|
701
|
-
!0;
|
|
702
|
-
} catch (e) {
|
|
703
|
-
return !1;
|
|
704
|
-
}
|
|
705
|
-
}
|
|
706
|
-
|
|
707
|
-
var SuggestionsOverlay = function(_Component) {
|
|
708
|
-
_inherits(SuggestionsOverlay, _Component);
|
|
709
|
-
var _super = _createSuper$2(SuggestionsOverlay);
|
|
710
|
-
function SuggestionsOverlay() {
|
|
711
|
-
var _this;
|
|
712
|
-
_classCallCheck(this, SuggestionsOverlay);
|
|
713
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
|
|
714
|
-
return _this = _super.call.apply(_super, [ this ].concat(args)), _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function(index, ev) {
|
|
715
|
-
_this.props.onMouseEnter && _this.props.onMouseEnter(index);
|
|
716
|
-
}), _defineProperty(_assertThisInitialized(_this), "select", function(suggestion, queryInfo) {
|
|
717
|
-
_this.props.onSelect(suggestion, queryInfo);
|
|
718
|
-
}), _defineProperty(_assertThisInitialized(_this), "setUlElement", function(el) {
|
|
719
|
-
_this.ulElement = el;
|
|
720
|
-
}), _this;
|
|
721
|
-
}
|
|
722
|
-
return _createClass(SuggestionsOverlay, [ {
|
|
723
|
-
key: "componentDidUpdate",
|
|
724
|
-
value: function() {
|
|
725
|
-
if (this.ulElement && !(this.ulElement.offsetHeight >= this.ulElement.scrollHeight) && this.props.scrollFocusedIntoView) {
|
|
726
|
-
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;
|
|
727
|
-
bottom = bottom - topContainer + scrollTop, (top = top - topContainer + scrollTop) < scrollTop ? this.ulElement.scrollTop = top : bottom > this.ulElement.offsetHeight && (this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight);
|
|
728
|
-
}
|
|
729
|
-
}
|
|
730
|
-
}, {
|
|
731
|
-
key: "render",
|
|
732
|
-
value: function() {
|
|
733
|
-
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;
|
|
734
|
-
return isOpened ? React__default.createElement("div", _extends({}, useStyles.inline({
|
|
735
|
-
position: position || "absolute",
|
|
736
|
-
left: left,
|
|
737
|
-
right: right,
|
|
738
|
-
top: top
|
|
739
|
-
}, style), {
|
|
740
|
-
onMouseDown: onMouseDown,
|
|
741
|
-
ref: containerRef
|
|
742
|
-
}), React__default.createElement("ul", _extends({
|
|
743
|
-
ref: this.setUlElement,
|
|
744
|
-
id: id,
|
|
745
|
-
role: "listbox",
|
|
746
|
-
"aria-label": a11ySuggestionsListLabel
|
|
747
|
-
}, style("list")), this.renderSuggestions()), this.renderLoadingIndicator()) : null;
|
|
748
|
-
}
|
|
749
|
-
}, {
|
|
750
|
-
key: "renderSuggestions",
|
|
751
|
-
value: function() {
|
|
752
|
-
var _this2 = this, customSuggestionsContainer = this.props.customSuggestionsContainer, suggestions = Object.values(this.props.suggestions).reduce(function(accResults, _ref) {
|
|
753
|
-
var results = _ref.results, queryInfo = _ref.queryInfo;
|
|
754
|
-
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function(result, index) {
|
|
755
|
-
return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
|
|
756
|
-
})));
|
|
757
|
-
}, []);
|
|
758
|
-
return customSuggestionsContainer ? customSuggestionsContainer(suggestions) : suggestions;
|
|
759
|
-
}
|
|
760
|
-
}, {
|
|
761
|
-
key: "renderSuggestion",
|
|
762
|
-
value: function(result, queryInfo, index) {
|
|
763
|
-
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;
|
|
764
|
-
return React__default.createElement(Suggestion$1, {
|
|
765
|
-
style: this.props.style("item"),
|
|
766
|
-
key: "".concat(childIndex, "-").concat(getID(result)),
|
|
767
|
-
id: getSuggestionHtmlId(this.props.id, index),
|
|
768
|
-
query: query,
|
|
769
|
-
index: index,
|
|
770
|
-
ignoreAccents: ignoreAccents,
|
|
771
|
-
renderSuggestion: renderSuggestion,
|
|
772
|
-
suggestion: result,
|
|
773
|
-
focused: isFocused,
|
|
774
|
-
onClick: function() {
|
|
775
|
-
return _this3.select(result, queryInfo);
|
|
776
|
-
},
|
|
777
|
-
onMouseEnter: function() {
|
|
778
|
-
return _this3.handleMouseEnter(index);
|
|
779
|
-
}
|
|
780
|
-
});
|
|
781
|
-
}
|
|
782
|
-
}, {
|
|
783
|
-
key: "renderLoadingIndicator",
|
|
784
|
-
value: function() {
|
|
785
|
-
if (this.props.isLoading) return React__default.createElement(LoadingIndicator, {
|
|
786
|
-
style: this.props.style("loadingIndicator")
|
|
787
|
-
});
|
|
788
|
-
}
|
|
789
|
-
} ]), SuggestionsOverlay;
|
|
790
|
-
}(React.Component);
|
|
791
|
-
|
|
792
|
-
_defineProperty(SuggestionsOverlay, "propTypes", {
|
|
646
|
+
SuggestionsOverlay.propTypes = {
|
|
793
647
|
id: PropTypes.string.isRequired,
|
|
794
648
|
suggestions: PropTypes.object.isRequired,
|
|
795
649
|
a11ySuggestionsListLabel: PropTypes.string,
|
|
@@ -803,20 +657,13 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
|
|
|
803
657
|
isOpened: PropTypes.bool.isRequired,
|
|
804
658
|
onSelect: PropTypes.func,
|
|
805
659
|
ignoreAccents: PropTypes.bool,
|
|
660
|
+
customSuggestionsContainer: PropTypes.any,
|
|
806
661
|
containerRef: PropTypes.oneOfType([ PropTypes.func, PropTypes.shape({
|
|
807
662
|
current: "undefined" == typeof Element ? PropTypes.any : PropTypes.instanceOf(Element)
|
|
808
|
-
}) ])
|
|
809
|
-
|
|
810
|
-
}), _defineProperty(SuggestionsOverlay, "defaultProps", {
|
|
811
|
-
suggestions: {},
|
|
812
|
-
onSelect: function() {
|
|
813
|
-
return null;
|
|
814
|
-
}
|
|
815
|
-
});
|
|
663
|
+
}) ])
|
|
664
|
+
};
|
|
816
665
|
|
|
817
|
-
var
|
|
818
|
-
return "string" == typeof suggestion ? suggestion : suggestion.id;
|
|
819
|
-
}, styled$2 = createDefaultStyle({
|
|
666
|
+
var styled$2 = createDefaultStyle({
|
|
820
667
|
zIndex: 1,
|
|
821
668
|
backgroundColor: "white",
|
|
822
669
|
marginTop: 14,
|
|
@@ -851,8 +698,8 @@ function _objectSpread(target) {
|
|
|
851
698
|
return target;
|
|
852
699
|
}
|
|
853
700
|
|
|
854
|
-
function _createSuper
|
|
855
|
-
var hasNativeReflectConstruct = _isNativeReflectConstruct
|
|
701
|
+
function _createSuper(Derived) {
|
|
702
|
+
var hasNativeReflectConstruct = _isNativeReflectConstruct();
|
|
856
703
|
return function() {
|
|
857
704
|
var result, Super = _getPrototypeOf(Derived);
|
|
858
705
|
if (hasNativeReflectConstruct) {
|
|
@@ -863,7 +710,7 @@ function _createSuper$3(Derived) {
|
|
|
863
710
|
};
|
|
864
711
|
}
|
|
865
712
|
|
|
866
|
-
function _isNativeReflectConstruct
|
|
713
|
+
function _isNativeReflectConstruct() {
|
|
867
714
|
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
|
|
868
715
|
if (Reflect.construct.sham) return !1;
|
|
869
716
|
if ("function" == typeof Proxy) return !0;
|
|
@@ -914,7 +761,7 @@ var makeTriggerRegex = function(trigger) {
|
|
|
914
761
|
children: PropTypes.oneOfType([ PropTypes.element, PropTypes.arrayOf(PropTypes.element) ]).isRequired
|
|
915
762
|
}, MentionsInput = function(_React$Component) {
|
|
916
763
|
_inherits(MentionsInput, _React$Component);
|
|
917
|
-
var _super = _createSuper
|
|
764
|
+
var _super = _createSuper(MentionsInput);
|
|
918
765
|
function MentionsInput(_props) {
|
|
919
766
|
var _this;
|
|
920
767
|
return _classCallCheck(this, MentionsInput), _this = _super.call(this, _props),
|
|
@@ -1107,7 +954,7 @@ var makeTriggerRegex = function(trigger) {
|
|
|
1107
954
|
} else {
|
|
1108
955
|
var _left = caretPosition.left - highlighter.scrollLeft, _top = caretPosition.top - highlighter.scrollTop;
|
|
1109
956
|
_left + suggestions.offsetWidth > _this.containerElement.offsetWidth ? position.right = 0 : position.left = _left,
|
|
1110
|
-
allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop ? position.top = _top - suggestions.offsetHeight - caretHeight : position.top = _top;
|
|
957
|
+
allowSuggestionsAboveCursor && viewportRelative.top - highlighter.scrollTop + suggestions.offsetHeight > viewportHeight && suggestions.offsetHeight < caretOffsetParentRect.top - caretHeight - highlighter.scrollTop || forceSuggestionsAboveCursor ? position.top = _top - suggestions.offsetHeight - caretHeight : position.top = _top;
|
|
1111
958
|
}
|
|
1112
959
|
position.left === _this.state.suggestionsPosition.left && position.top === _this.state.suggestionsPosition.top && position.position === _this.state.suggestionsPosition.position || _this.setState({
|
|
1113
960
|
suggestionsPosition: position
|