react-mentions 4.4.6 → 4.4.7
Sign up to get free protection for your applications and to get access to all the features.
- 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
package/CHANGELOG.md
CHANGED
@@ -688,10 +688,6 @@ function createDefaultStyle(defaultStyle, getModifiers) {
|
|
688
688
|
return enhance;
|
689
689
|
}
|
690
690
|
|
691
|
-
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
692
|
-
|
693
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
694
|
-
|
695
691
|
var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
|
696
692
|
if (!usedKeys.hasOwnProperty(id)) {
|
697
693
|
usedKeys[id] = 0;
|
@@ -702,158 +698,126 @@ var _generateComponentKey = function _generateComponentKey(usedKeys, id) {
|
|
702
698
|
return id + '_' + usedKeys[id];
|
703
699
|
};
|
704
700
|
|
705
|
-
|
706
|
-
|
707
|
-
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
713
|
-
|
714
|
-
|
715
|
-
|
716
|
-
|
717
|
-
|
718
|
-
|
719
|
-
|
720
|
-
|
721
|
-
|
722
|
-
|
723
|
-
|
724
|
-
|
725
|
-
|
726
|
-
|
727
|
-
|
728
|
-
|
729
|
-
|
730
|
-
|
731
|
-
|
701
|
+
function Highlighter(_ref) {
|
702
|
+
var selectionStart = _ref.selectionStart,
|
703
|
+
selectionEnd = _ref.selectionEnd,
|
704
|
+
_ref$value = _ref.value,
|
705
|
+
value = _ref$value === void 0 ? '' : _ref$value,
|
706
|
+
onCaretPositionChange = _ref.onCaretPositionChange,
|
707
|
+
containerRef = _ref.containerRef,
|
708
|
+
children = _ref.children,
|
709
|
+
singleLine = _ref.singleLine,
|
710
|
+
style = _ref.style;
|
711
|
+
|
712
|
+
var _useState = React.useState({
|
713
|
+
left: undefined,
|
714
|
+
top: undefined
|
715
|
+
}),
|
716
|
+
_useState2 = _slicedToArray(_useState, 2),
|
717
|
+
position = _useState2[0],
|
718
|
+
setPosition = _useState2[1];
|
719
|
+
|
720
|
+
var _useState3 = React.useState(),
|
721
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
722
|
+
caretElement = _useState4[0],
|
723
|
+
setCaretElement = _useState4[1];
|
724
|
+
|
725
|
+
React.useEffect(function () {
|
726
|
+
notifyCaretPosition();
|
727
|
+
}, [caretElement]);
|
728
|
+
|
729
|
+
var notifyCaretPosition = function notifyCaretPosition() {
|
730
|
+
if (!caretElement) {
|
731
|
+
return;
|
732
732
|
}
|
733
|
-
}, {
|
734
|
-
key: "componentDidUpdate",
|
735
|
-
value: function componentDidUpdate() {
|
736
|
-
this.notifyCaretPosition();
|
737
|
-
}
|
738
|
-
}, {
|
739
|
-
key: "notifyCaretPosition",
|
740
|
-
value: function notifyCaretPosition() {
|
741
|
-
if (!this.caretElement) {
|
742
|
-
return;
|
743
|
-
}
|
744
733
|
|
745
|
-
|
746
|
-
|
747
|
-
offsetTop = _this$caretElement.offsetTop;
|
734
|
+
var offsetLeft = caretElement.offsetLeft,
|
735
|
+
offsetTop = caretElement.offsetTop;
|
748
736
|
|
749
|
-
|
750
|
-
|
751
|
-
}
|
752
|
-
|
753
|
-
var newPosition = {
|
754
|
-
left: offsetLeft,
|
755
|
-
top: offsetTop
|
756
|
-
};
|
757
|
-
this.setState(newPosition);
|
758
|
-
this.props.onCaretPositionChange(newPosition);
|
737
|
+
if (position.left === offsetLeft && position.top === offsetTop) {
|
738
|
+
return;
|
759
739
|
}
|
760
|
-
}, {
|
761
|
-
key: "render",
|
762
|
-
value: function render() {
|
763
|
-
var _this2 = this;
|
764
|
-
|
765
|
-
var _this$props = this.props,
|
766
|
-
selectionStart = _this$props.selectionStart,
|
767
|
-
selectionEnd = _this$props.selectionEnd,
|
768
|
-
value = _this$props.value,
|
769
|
-
style = _this$props.style,
|
770
|
-
children = _this$props.children,
|
771
|
-
containerRef = _this$props.containerRef;
|
772
|
-
var config = readConfigFromChildren(children); // If there's a caret (i.e. no range selection), map the caret position into the marked up value
|
773
|
-
|
774
|
-
var caretPositionInMarkup;
|
775
|
-
|
776
|
-
if (selectionStart === selectionEnd) {
|
777
|
-
caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
|
778
|
-
}
|
779
740
|
|
780
|
-
|
781
|
-
|
741
|
+
var newPosition = {
|
742
|
+
left: offsetLeft,
|
743
|
+
top: offsetTop
|
744
|
+
};
|
745
|
+
setPosition(newPosition);
|
746
|
+
onCaretPositionChange(newPosition);
|
747
|
+
};
|
782
748
|
|
783
|
-
|
784
|
-
|
749
|
+
var config = readConfigFromChildren(children);
|
750
|
+
var caretPositionInMarkup;
|
785
751
|
|
786
|
-
|
787
|
-
|
788
|
-
|
789
|
-
// if yes, split substr at the caret position and insert the caret component
|
790
|
-
var splitIndex = caretPositionInMarkup - index;
|
791
|
-
components.push(_this2.renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
|
752
|
+
if (selectionEnd === selectionStart) {
|
753
|
+
caretPositionInMarkup = mapPlainTextIndex(value, config, selectionStart, 'START');
|
754
|
+
}
|
792
755
|
|
793
|
-
|
794
|
-
|
795
|
-
|
796
|
-
|
797
|
-
|
756
|
+
var resultComponents = [];
|
757
|
+
var componentKeys = {};
|
758
|
+
var components = resultComponents;
|
759
|
+
var substringComponentKey = 0;
|
760
|
+
|
761
|
+
var textIteratee = function textIteratee(substr, index, indexInPlainText) {
|
762
|
+
// check whether the caret element has to be inserted inside the current plain substring
|
763
|
+
if (isNumber(caretPositionInMarkup) && caretPositionInMarkup >= index && caretPositionInMarkup <= index + substr.length) {
|
764
|
+
// if yes, split substr at the caret position and insert the caret component
|
765
|
+
var splitIndex = caretPositionInMarkup - index;
|
766
|
+
components.push(renderSubstring(substr.substring(0, splitIndex), substringComponentKey)); // add all following substrings and mention components as children of the caret component
|
767
|
+
|
768
|
+
components = [renderSubstring(substr.substring(splitIndex), substringComponentKey)];
|
769
|
+
} else {
|
770
|
+
components.push(renderSubstring(substr, substringComponentKey));
|
771
|
+
}
|
798
772
|
|
799
|
-
|
800
|
-
|
773
|
+
substringComponentKey++;
|
774
|
+
};
|
801
775
|
|
802
|
-
|
803
|
-
|
804
|
-
var key = _generateComponentKey(componentKeys, id);
|
776
|
+
var mentionIteratee = function mentionIteratee(markup, index, indexInPlainText, id, display, mentionChildIndex, lastMentionEndIndex) {
|
777
|
+
var key = _generateComponentKey(componentKeys, id);
|
805
778
|
|
806
|
-
|
807
|
-
|
779
|
+
components.push(getMentionComponentForMatch(id, display, mentionChildIndex, key));
|
780
|
+
};
|
808
781
|
|
809
|
-
|
782
|
+
var renderSubstring = function renderSubstring(string, key) {
|
783
|
+
// set substring span to hidden, so that Emojis are not shown double in Mobile Safari
|
784
|
+
return /*#__PURE__*/React__default.createElement("span", _extends({}, style('substring'), {
|
785
|
+
key: key
|
786
|
+
}), string);
|
787
|
+
};
|
810
788
|
|
811
|
-
|
789
|
+
var getMentionComponentForMatch = function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
|
790
|
+
var props = {
|
791
|
+
id: id,
|
792
|
+
display: display,
|
793
|
+
key: key
|
794
|
+
};
|
795
|
+
var child = React.Children.toArray(children)[mentionChildIndex];
|
796
|
+
return /*#__PURE__*/React__default.cloneElement(child, props);
|
797
|
+
};
|
812
798
|
|
813
|
-
|
814
|
-
|
815
|
-
|
816
|
-
|
799
|
+
var renderHighlighterCaret = function renderHighlighterCaret(children) {
|
800
|
+
return /*#__PURE__*/React__default.createElement("span", _extends({}, style('caret'), {
|
801
|
+
ref: setCaretElement,
|
802
|
+
key: "caret"
|
803
|
+
}), children);
|
804
|
+
};
|
817
805
|
|
818
|
-
|
819
|
-
ref: containerRef
|
820
|
-
}), resultComponents);
|
821
|
-
}
|
822
|
-
}, {
|
823
|
-
key: "renderSubstring",
|
824
|
-
value: function renderSubstring(string, key) {
|
825
|
-
// set substring span to hidden, so that Emojis are not shown double in Mobile Safari
|
826
|
-
return /*#__PURE__*/React__default.createElement("span", _extends({}, this.props.style('substring'), {
|
827
|
-
key: key
|
828
|
-
}), string);
|
829
|
-
} // Returns a clone of the Mention child applicable for the specified type to be rendered inside the highlighter
|
806
|
+
iterateMentionsMarkup(value, config, mentionIteratee, textIteratee); // append a span containing a space, to ensure the last text line has the correct height
|
830
807
|
|
831
|
-
|
832
|
-
key: "getMentionComponentForMatch",
|
833
|
-
value: function getMentionComponentForMatch(id, display, mentionChildIndex, key) {
|
834
|
-
var props = {
|
835
|
-
id: id,
|
836
|
-
display: display,
|
837
|
-
key: key
|
838
|
-
};
|
839
|
-
var child = React.Children.toArray(this.props.children)[mentionChildIndex];
|
840
|
-
return /*#__PURE__*/React__default.cloneElement(child, props);
|
841
|
-
} // Renders an component to be inserted in the highlighter at the current caret position
|
808
|
+
components.push(' ');
|
842
809
|
|
843
|
-
|
844
|
-
|
845
|
-
|
846
|
-
|
847
|
-
ref: this.setCaretElement,
|
848
|
-
key: "caret"
|
849
|
-
}), children);
|
850
|
-
}
|
851
|
-
}]);
|
810
|
+
if (components !== resultComponents) {
|
811
|
+
// if a caret component is to be rendered, add all components that followed as its children
|
812
|
+
resultComponents.push(renderHighlighterCaret(components));
|
813
|
+
}
|
852
814
|
|
853
|
-
return
|
854
|
-
|
815
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({}, style, {
|
816
|
+
ref: containerRef
|
817
|
+
}), resultComponents);
|
818
|
+
}
|
855
819
|
|
856
|
-
|
820
|
+
Highlighter.propTypes = {
|
857
821
|
selectionStart: PropTypes.number,
|
858
822
|
selectionEnd: PropTypes.number,
|
859
823
|
value: PropTypes.string.isRequired,
|
@@ -862,12 +826,7 @@ _defineProperty(Highlighter, "propTypes", {
|
|
862
826
|
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
863
827
|
})]),
|
864
828
|
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
|
865
|
-
}
|
866
|
-
|
867
|
-
_defineProperty(Highlighter, "defaultProps", {
|
868
|
-
value: ''
|
869
|
-
});
|
870
|
-
|
829
|
+
};
|
871
830
|
var styled = createDefaultStyle({
|
872
831
|
position: 'relative',
|
873
832
|
boxSizing: 'border-box',
|
@@ -989,162 +948,144 @@ function LoadingIndicator(_ref) {
|
|
989
948
|
|
990
949
|
var defaultstyle = {};
|
991
950
|
|
992
|
-
function
|
993
|
-
|
994
|
-
|
951
|
+
function SuggestionsOverlay(_ref) {
|
952
|
+
var id = _ref.id,
|
953
|
+
_ref$suggestions = _ref.suggestions,
|
954
|
+
suggestions = _ref$suggestions === void 0 ? {} : _ref$suggestions,
|
955
|
+
a11ySuggestionsListLabel = _ref.a11ySuggestionsListLabel,
|
956
|
+
focusIndex = _ref.focusIndex,
|
957
|
+
position = _ref.position,
|
958
|
+
left = _ref.left,
|
959
|
+
right = _ref.right,
|
960
|
+
top = _ref.top,
|
961
|
+
scrollFocusedIntoView = _ref.scrollFocusedIntoView,
|
962
|
+
isLoading = _ref.isLoading,
|
963
|
+
isOpened = _ref.isOpened,
|
964
|
+
_ref$onSelect = _ref.onSelect,
|
965
|
+
onSelect = _ref$onSelect === void 0 ? function () {
|
966
|
+
return null;
|
967
|
+
} : _ref$onSelect,
|
968
|
+
ignoreAccents = _ref.ignoreAccents,
|
969
|
+
containerRef = _ref.containerRef,
|
970
|
+
children = _ref.children,
|
971
|
+
style = _ref.style,
|
972
|
+
customSuggestionsContainer = _ref.customSuggestionsContainer,
|
973
|
+
onMouseDown = _ref.onMouseDown,
|
974
|
+
onMouseEnter = _ref.onMouseEnter;
|
975
|
+
|
976
|
+
var _useState = React.useState(),
|
977
|
+
_useState2 = _slicedToArray(_useState, 2),
|
978
|
+
ulElement = _useState2[0],
|
979
|
+
setUlElement = _useState2[1];
|
980
|
+
|
981
|
+
React.useEffect(function () {
|
982
|
+
if (!ulElement || ulElement.offsetHeight >= ulElement.scrollHeight || !scrollFocusedIntoView) {
|
983
|
+
return;
|
984
|
+
}
|
995
985
|
|
996
|
-
var
|
997
|
-
_inherits(SuggestionsOverlay, _Component);
|
986
|
+
var scrollTop = ulElement.scrollTop;
|
998
987
|
|
999
|
-
|
988
|
+
var _ulElement$children$f = ulElement.children[focusIndex].getBoundingClientRect(),
|
989
|
+
top = _ulElement$children$f.top,
|
990
|
+
bottom = _ulElement$children$f.bottom;
|
1000
991
|
|
1001
|
-
|
1002
|
-
|
992
|
+
var _ulElement$getBoundin = ulElement.getBoundingClientRect(),
|
993
|
+
topContainer = _ulElement$getBoundin.top;
|
1003
994
|
|
1004
|
-
|
995
|
+
top = top - topContainer + scrollTop;
|
996
|
+
bottom = bottom - topContainer + scrollTop;
|
1005
997
|
|
1006
|
-
|
1007
|
-
|
998
|
+
if (top < scrollTop) {
|
999
|
+
ulElement.scrollTop = top;
|
1000
|
+
} else if (bottom > ulElement.offsetHeight) {
|
1001
|
+
ulElement.scrollTop = bottom - ulElement.offsetHeight;
|
1008
1002
|
}
|
1003
|
+
}, []);
|
1004
|
+
|
1005
|
+
var renderSuggestions = function renderSuggestions() {
|
1006
|
+
var suggestionsToRender = Object.values(suggestions).reduce(function (accResults, _ref2) {
|
1007
|
+
var results = _ref2.results,
|
1008
|
+
queryInfo = _ref2.queryInfo;
|
1009
|
+
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
|
1010
|
+
return renderSuggestion(result, queryInfo, accResults.length + index);
|
1011
|
+
})));
|
1012
|
+
}, []);
|
1013
|
+
if (customSuggestionsContainer) return customSuggestionsContainer(suggestionsToRender);else return suggestionsToRender;
|
1014
|
+
};
|
1009
1015
|
|
1010
|
-
|
1011
|
-
|
1012
|
-
|
1013
|
-
|
1014
|
-
|
1016
|
+
var renderSuggestion = function renderSuggestion(result, queryInfo, index) {
|
1017
|
+
var isFocused = index === focusIndex;
|
1018
|
+
var childIndex = queryInfo.childIndex,
|
1019
|
+
query = queryInfo.query;
|
1020
|
+
var renderSuggestion = React.Children.toArray(children)[childIndex].props.renderSuggestion;
|
1021
|
+
return /*#__PURE__*/React__default.createElement(Suggestion$1, {
|
1022
|
+
style: style('item'),
|
1023
|
+
key: "".concat(childIndex, "-").concat(getID(result)),
|
1024
|
+
id: getSuggestionHtmlId(id, index),
|
1025
|
+
query: query,
|
1026
|
+
index: index,
|
1027
|
+
ignoreAccents: ignoreAccents,
|
1028
|
+
renderSuggestion: renderSuggestion,
|
1029
|
+
suggestion: result,
|
1030
|
+
focused: isFocused,
|
1031
|
+
onClick: function onClick() {
|
1032
|
+
return select(result, queryInfo);
|
1033
|
+
},
|
1034
|
+
onMouseEnter: function onMouseEnter() {
|
1035
|
+
return handleMouseEnter(index);
|
1015
1036
|
}
|
1016
1037
|
});
|
1038
|
+
};
|
1017
1039
|
|
1018
|
-
|
1019
|
-
|
1020
|
-
|
1040
|
+
var renderLoadingIndicator = function renderLoadingIndicator() {
|
1041
|
+
if (!isLoading) {
|
1042
|
+
return;
|
1043
|
+
}
|
1021
1044
|
|
1022
|
-
|
1023
|
-
|
1045
|
+
return /*#__PURE__*/React__default.createElement(LoadingIndicator, {
|
1046
|
+
style: style('loadingIndicator')
|
1024
1047
|
});
|
1048
|
+
};
|
1025
1049
|
|
1026
|
-
|
1027
|
-
|
1028
|
-
|
1029
|
-
_createClass(SuggestionsOverlay, [{
|
1030
|
-
key: "componentDidUpdate",
|
1031
|
-
value: function componentDidUpdate() {
|
1032
|
-
if (!this.ulElement || this.ulElement.offsetHeight >= this.ulElement.scrollHeight || !this.props.scrollFocusedIntoView) {
|
1033
|
-
return;
|
1034
|
-
}
|
1035
|
-
|
1036
|
-
var scrollTop = this.ulElement.scrollTop;
|
1037
|
-
|
1038
|
-
var _this$ulElement$child = this.ulElement.children[this.props.focusIndex].getBoundingClientRect(),
|
1039
|
-
top = _this$ulElement$child.top,
|
1040
|
-
bottom = _this$ulElement$child.bottom;
|
1041
|
-
|
1042
|
-
var _this$ulElement$getBo = this.ulElement.getBoundingClientRect(),
|
1043
|
-
topContainer = _this$ulElement$getBo.top;
|
1044
|
-
|
1045
|
-
top = top - topContainer + scrollTop;
|
1046
|
-
bottom = bottom - topContainer + scrollTop;
|
1047
|
-
|
1048
|
-
if (top < scrollTop) {
|
1049
|
-
this.ulElement.scrollTop = top;
|
1050
|
-
} else if (bottom > this.ulElement.offsetHeight) {
|
1051
|
-
this.ulElement.scrollTop = bottom - this.ulElement.offsetHeight;
|
1052
|
-
}
|
1050
|
+
var handleMouseEnter = function handleMouseEnter(index, ev) {
|
1051
|
+
if (onMouseEnter) {
|
1052
|
+
onMouseEnter(index);
|
1053
1053
|
}
|
1054
|
-
}
|
1055
|
-
key: "render",
|
1056
|
-
value: function render() {
|
1057
|
-
var _this$props = this.props,
|
1058
|
-
id = _this$props.id,
|
1059
|
-
a11ySuggestionsListLabel = _this$props.a11ySuggestionsListLabel,
|
1060
|
-
isOpened = _this$props.isOpened,
|
1061
|
-
style = _this$props.style,
|
1062
|
-
onMouseDown = _this$props.onMouseDown,
|
1063
|
-
containerRef = _this$props.containerRef,
|
1064
|
-
position = _this$props.position,
|
1065
|
-
left = _this$props.left,
|
1066
|
-
right = _this$props.right,
|
1067
|
-
top = _this$props.top; // do not show suggestions until there is some data
|
1068
|
-
|
1069
|
-
if (!isOpened) {
|
1070
|
-
return null;
|
1071
|
-
}
|
1054
|
+
};
|
1072
1055
|
|
1073
|
-
|
1074
|
-
|
1075
|
-
|
1076
|
-
right: right,
|
1077
|
-
top: top
|
1078
|
-
}, style), {
|
1079
|
-
onMouseDown: onMouseDown,
|
1080
|
-
ref: containerRef
|
1081
|
-
}), /*#__PURE__*/React__default.createElement("ul", _extends({
|
1082
|
-
ref: this.setUlElement,
|
1083
|
-
id: id,
|
1084
|
-
role: "listbox",
|
1085
|
-
"aria-label": a11ySuggestionsListLabel
|
1086
|
-
}, style('list')), this.renderSuggestions()), this.renderLoadingIndicator());
|
1087
|
-
}
|
1088
|
-
}, {
|
1089
|
-
key: "renderSuggestions",
|
1090
|
-
value: function renderSuggestions() {
|
1091
|
-
var _this2 = this;
|
1056
|
+
var select = function select(suggestion, queryInfo) {
|
1057
|
+
onSelect(suggestion, queryInfo);
|
1058
|
+
};
|
1092
1059
|
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
queryInfo = _ref.queryInfo;
|
1097
|
-
return [].concat(_toConsumableArray(accResults), _toConsumableArray(results.map(function (result, index) {
|
1098
|
-
return _this2.renderSuggestion(result, queryInfo, accResults.length + index);
|
1099
|
-
})));
|
1100
|
-
}, []);
|
1101
|
-
if (customSuggestionsContainer) return customSuggestionsContainer(suggestions);else return suggestions;
|
1102
|
-
}
|
1103
|
-
}, {
|
1104
|
-
key: "renderSuggestion",
|
1105
|
-
value: function renderSuggestion(result, queryInfo, index) {
|
1106
|
-
var _this3 = this;
|
1107
|
-
|
1108
|
-
var isFocused = index === this.props.focusIndex;
|
1109
|
-
var childIndex = queryInfo.childIndex,
|
1110
|
-
query = queryInfo.query;
|
1111
|
-
var renderSuggestion = React.Children.toArray(this.props.children)[childIndex].props.renderSuggestion;
|
1112
|
-
var ignoreAccents = this.props.ignoreAccents;
|
1113
|
-
return /*#__PURE__*/React__default.createElement(Suggestion$1, {
|
1114
|
-
style: this.props.style('item'),
|
1115
|
-
key: "".concat(childIndex, "-").concat(getID(result)),
|
1116
|
-
id: getSuggestionHtmlId(this.props.id, index),
|
1117
|
-
query: query,
|
1118
|
-
index: index,
|
1119
|
-
ignoreAccents: ignoreAccents,
|
1120
|
-
renderSuggestion: renderSuggestion,
|
1121
|
-
suggestion: result,
|
1122
|
-
focused: isFocused,
|
1123
|
-
onClick: function onClick() {
|
1124
|
-
return _this3.select(result, queryInfo);
|
1125
|
-
},
|
1126
|
-
onMouseEnter: function onMouseEnter() {
|
1127
|
-
return _this3.handleMouseEnter(index);
|
1128
|
-
}
|
1129
|
-
});
|
1060
|
+
var getID = function getID(suggestion) {
|
1061
|
+
if (typeof suggestion === 'string') {
|
1062
|
+
return suggestion;
|
1130
1063
|
}
|
1131
|
-
}, {
|
1132
|
-
key: "renderLoadingIndicator",
|
1133
|
-
value: function renderLoadingIndicator() {
|
1134
|
-
if (!this.props.isLoading) {
|
1135
|
-
return;
|
1136
|
-
}
|
1137
1064
|
|
1138
|
-
|
1139
|
-
|
1140
|
-
});
|
1141
|
-
}
|
1142
|
-
}]);
|
1065
|
+
return suggestion.id;
|
1066
|
+
};
|
1143
1067
|
|
1144
|
-
|
1145
|
-
|
1068
|
+
if (!isOpened) {
|
1069
|
+
return null;
|
1070
|
+
}
|
1146
1071
|
|
1147
|
-
|
1072
|
+
return /*#__PURE__*/React__default.createElement("div", _extends({}, useStyles.inline({
|
1073
|
+
position: position || 'absolute',
|
1074
|
+
left: left,
|
1075
|
+
right: right,
|
1076
|
+
top: top
|
1077
|
+
}, style), {
|
1078
|
+
onMouseDown: onMouseDown,
|
1079
|
+
ref: containerRef
|
1080
|
+
}), /*#__PURE__*/React__default.createElement("ul", _extends({
|
1081
|
+
ref: setUlElement,
|
1082
|
+
id: id,
|
1083
|
+
role: "listbox",
|
1084
|
+
"aria-label": a11ySuggestionsListLabel
|
1085
|
+
}, style('list')), renderSuggestions()), renderLoadingIndicator());
|
1086
|
+
}
|
1087
|
+
|
1088
|
+
SuggestionsOverlay.propTypes = {
|
1148
1089
|
id: PropTypes.string.isRequired,
|
1149
1090
|
suggestions: PropTypes.object.isRequired,
|
1150
1091
|
a11ySuggestionsListLabel: PropTypes.string,
|
@@ -1158,27 +1099,11 @@ _defineProperty(SuggestionsOverlay, "propTypes", {
|
|
1158
1099
|
isOpened: PropTypes.bool.isRequired,
|
1159
1100
|
onSelect: PropTypes.func,
|
1160
1101
|
ignoreAccents: PropTypes.bool,
|
1102
|
+
customSuggestionsContainer: PropTypes.any,
|
1161
1103
|
containerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
|
1162
1104
|
current: typeof Element === 'undefined' ? PropTypes.any : PropTypes.instanceOf(Element)
|
1163
|
-
})])
|
1164
|
-
children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]).isRequired
|
1165
|
-
});
|
1166
|
-
|
1167
|
-
_defineProperty(SuggestionsOverlay, "defaultProps", {
|
1168
|
-
suggestions: {},
|
1169
|
-
onSelect: function onSelect() {
|
1170
|
-
return null;
|
1171
|
-
}
|
1172
|
-
});
|
1173
|
-
|
1174
|
-
var getID = function getID(suggestion) {
|
1175
|
-
if (typeof suggestion === 'string') {
|
1176
|
-
return suggestion;
|
1177
|
-
}
|
1178
|
-
|
1179
|
-
return suggestion.id;
|
1105
|
+
})])
|
1180
1106
|
};
|
1181
|
-
|
1182
1107
|
var styled$2 = createDefaultStyle({
|
1183
1108
|
zIndex: 1,
|
1184
1109
|
backgroundColor: 'white',
|
@@ -1196,9 +1121,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
1196
1121
|
|
1197
1122
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
1198
1123
|
|
1199
|
-
function _createSuper
|
1124
|
+
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
1200
1125
|
|
1201
|
-
function _isNativeReflectConstruct
|
1126
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
1202
1127
|
var makeTriggerRegex = function makeTriggerRegex(trigger) {
|
1203
1128
|
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
1204
1129
|
|
@@ -1270,7 +1195,7 @@ var propTypes = {
|
|
1270
1195
|
var MentionsInput = /*#__PURE__*/function (_React$Component) {
|
1271
1196
|
_inherits(MentionsInput, _React$Component);
|
1272
1197
|
|
1273
|
-
var _super = _createSuper
|
1198
|
+
var _super = _createSuper(MentionsInput);
|
1274
1199
|
|
1275
1200
|
function MentionsInput(_props) {
|
1276
1201
|
var _this;
|