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