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
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;
|