From 13c91e76664adfb24594a7cb1e11511f73a8f8c7 Mon Sep 17 00:00:00 2001 From: Kobidl <30292505+Kobidl@users.noreply.github.com> Date: Wed, 20 May 2020 09:12:18 +0300 Subject: [PATCH 1/8] Fixed RTL --- src/Editor/index.js | 104 ++++++++++++++++++++++++-------------------- 1 file changed, 56 insertions(+), 48 deletions(-) diff --git a/src/Editor/index.js b/src/Editor/index.js index ef31dea..79ec08f 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.js @@ -26,7 +26,8 @@ export class Editor extends React.Component { onHideMentions: PropTypes.func, editorStyles: PropTypes.object, placeholder: PropTypes.string, - renderMentionList: PropTypes.func + renderMentionList: PropTypes.func, + placeMentionListOnBottom: PropTypes.bool, }; constructor(props) { @@ -68,22 +69,31 @@ export class Editor extends React.Component { } static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.clearInput !== prevState.clearInput) { - return { clearInput: nextProps.clearInput }; + return { clearInput: nextProps.clearInput, placeholder: nextProps.placeholder }; } if (nextProps.showMentions && !prevState.showMentions) { const newInputText = `${prevState.inputText}${prevState.trigger}`; return { inputText: newInputText, - showMentions: nextProps.showMentions + showMentions: nextProps.showMentions, + placeholder: nextProps.placeholder }; } if (!nextProps.showMentions) { return { - showMentions: nextProps.showMentions + showMentions: nextProps.showMentions, + placeholder: nextProps.placeholder }; } + + if (nextProps.placeholder !== prevState.placeholder) { + return { + placeholder: nextProps.placeholder + }; + } + return null; } @@ -128,7 +138,10 @@ export class Editor extends React.Component { this.setState({ isTrackingStarted: false }); - this.props.onHideMentions(); + if (this.props.onHideMentions) { + this.props.onHideMentions(); + } + } updateSuggestions(lastKeyword) { @@ -305,11 +318,16 @@ export class Editor extends React.Component { this.setState({ selection: newSelc }); }; - formatMentionNode = (txt, key) => ( - - {txt} - - ); + formatMentionNode = (txt, key) => { + const { props } = this; + const { editorStyles = {} } = props; + + return( + + {txt} + + ) + }; formatText(inputText) { /** @@ -512,20 +530,27 @@ export class Editor extends React.Component { editorStyles }; + const mentionListComponent = ( + props.renderMentionList ? ( + props.renderMentionList(mentionListProps) + ) : ( + + ) + ) + + const selection = (Platform.OS === 'ios' || this.state.inputText.length >= this.state.selection.start) ? + this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; + return ( - {props.renderMentionList ? ( - props.renderMentionList(mentionListProps) - ) : ( - - )} + { !props.placeMentionListOnBottom && mentionListComponent } { this.scroll = scroll; @@ -535,50 +560,33 @@ export class Editor extends React.Component { }} style={[styles.editorContainer, editorStyles.editorContainer]} > - - - {state.formattedText !== "" ? ( - - {state.formattedText} - - ) : ( - - {state.placeholder} - - )} - + props.onRef && props.onRef(input)} style={[styles.input, editorStyles.input]} multiline autoFocus numberOfLines={100} name={"message"} - value={state.inputText} + value={null} onBlur={props.toggleEditor} onChangeText={this.onChange} - selection={this.state.selection} + selection={selection} selectionColor={"#000"} onSelectionChange={this.handleSelectionChange} placeholder={state.placeholder} + placeholderTextColor = { props.placeholderTextColor} onContentSizeChange={this.onContentSizeChange} scrollEnabled={false} - /> + inputAccessoryViewID={props.inputAccessoryViewID} + > + { state.formattedText } + + { props.placeMentionListOnBottom && mentionListComponent } ); } From c1198996db071daf1f0f599dd749ecd0b770004e Mon Sep 17 00:00:00 2001 From: Kobidl <30292505+Kobidl@users.noreply.github.com> Date: Wed, 20 May 2020 09:13:24 +0300 Subject: [PATCH 2/8] RTL fix --- src/Editor/EditorStyles.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Editor/EditorStyles.js b/src/Editor/EditorStyles.js index e1367d7..cd2edc7 100644 --- a/src/Editor/EditorStyles.js +++ b/src/Editor/EditorStyles.js @@ -2,7 +2,7 @@ import { StyleSheet } from "react-native"; export default StyleSheet.create({ container: { - backgroundColor: "#fff", + borderColor: "green", borderWidth: 1, width: 300 @@ -21,9 +21,9 @@ export default StyleSheet.create({ minHeight: 40, position: "absolute", top: 0, - color: "transparent", alignSelf: "stretch", - width: "100%" + width: "100%", + height: '100%' // added for android }, formmatedTextWrapper: { minHeight: 40, @@ -40,7 +40,6 @@ export default StyleSheet.create({ mention: { fontSize: 16, fontWeight: "400", - backgroundColor: "rgba(36, 77, 201, 0.05)", color: "#244dc9" }, placeholderText: { From d170bab84689c40f47eb91190cf679da9f348e7a Mon Sep 17 00:00:00 2001 From: Kobi Dalal Date: Wed, 20 May 2020 10:14:42 +0300 Subject: [PATCH 3/8] Changed to TypeScript --- src/Editor/{index.js => index.tsx} | 153 ++++++++++++++------ src/MentionList/{index.js => index.tsx} | 22 ++- src/MentionListItem/{index.js => index.tsx} | 13 +- 3 files changed, 129 insertions(+), 59 deletions(-) rename src/Editor/{index.js => index.tsx} (84%) rename src/MentionList/{index.js => index.tsx} (80%) rename src/MentionListItem/{index.js => index.tsx} (82%) diff --git a/src/Editor/index.js b/src/Editor/index.tsx similarity index 84% rename from src/Editor/index.js rename to src/Editor/index.tsx index 79ec08f..505c869 100644 --- a/src/Editor/index.js +++ b/src/Editor/index.tsx @@ -1,5 +1,4 @@ import React from "react"; -import PropTypes from "prop-types"; import { View, @@ -7,32 +6,95 @@ import { Text, Animated, Platform, - ScrollView + ScrollView, + ViewStyle, + TextStyle, + TextInputProps } from "react-native"; import EU from "./EditorUtils"; import styles from "./EditorStyles"; import MentionList from "../MentionList"; -export class Editor extends React.Component { - static propTypes = { - list: PropTypes.array, - initialValue: PropTypes.string, - clearInput: PropTypes.bool, - onChange: PropTypes.func, - showEditor: PropTypes.bool, - toggleEditor: PropTypes.func, - showMentions: PropTypes.bool, - onHideMentions: PropTypes.func, - editorStyles: PropTypes.object, - placeholder: PropTypes.string, - renderMentionList: PropTypes.func, - placeMentionListOnBottom: PropTypes.bool, +type listItem = { + id: number, + username: string, + name: string, +} + +type editorStylesProps = { + mainContainer: ViewStyle, + editorContainer: ViewStyle, + inputMaskTextWrapper: TextStyle, + inputMaskText: TextStyle, + input: TextStyle, + mentionsListWrapper: ViewStyle, + mentionListItemWrapper: ViewStyle, + mentionListItemTextWrapper: ViewStyle, + mentionListItemTitle: TextStyle, + mentionListItemUsername: TextStyle + mentionNode: ViewStyle +} + +interface Props { + list: Array, + initialValue: string, + clearInput?: boolean, + onChange: Function, + showEditor?: Function, + toggleEditor?(e: any): {}, + showMentions?: boolean, + onHideMentions?: Function, + editorStyles?: editorStylesProps, + placeholder?: string, + renderMentionList?: Function, + placeMentionListOnBottom?: boolean, + textInputProps: TextInputProps + // textInputMinHeight: number +} + +interface State { + inputText: string, + clearInput: boolean, + formattedText: any, + keyword: string, + // textInputHeight: string, + isTrackingStarted: boolean, + suggestionRowHeight: any, + triggerLocation: 'new-word-only' | 'anywhere' + trigger: string, + selection: { start: number, end: number }, + menIndex: number, + showMentions: boolean, + editorHeight: number, + scrollContentInset: { top: number, bottom: number, left: number, right: number }, + placeholder: string +} + +export class Editor extends React.Component { + static defaultProps = { + list: [], + initialValue: "", + clearInput: false, + onChange: () => { }, + showEditor: false, + toggleEditor: () => { }, + showMentions: true, + onHideMentions: () => { }, + editorStyles: {}, + placeholder: "", + renderMentionList: null, + placeMentionListOnBottom: false, }; + mentionsMap = new Map(); + isTrackingStarted = false; + previousChar = " "; + menIndex = 0; + scroll = null; + constructor(props) { super(props); - this.mentionsMap = new Map(); let msg = ""; let formattedMsg = ""; if (props.initialValue && props.initialValue !== "") { @@ -40,7 +102,7 @@ export class Editor extends React.Component { this.mentionsMap = map; msg = newValue; formattedMsg = this.formatText(newValue); - setTimeout(()=>{ + setTimeout(() => { this.sendMessageToFooter(newValue); }); } @@ -49,7 +111,7 @@ export class Editor extends React.Component { inputText: msg, formattedText: formattedMsg, keyword: "", - textInputHeight: "", + // textInputHeight: "", isTrackingStarted: false, suggestionRowHeight: new Animated.Value(0), triggerLocation: "anywhere", //'new-words-only', //anywhere @@ -64,9 +126,8 @@ export class Editor extends React.Component { scrollContentInset: { top: 0, bottom: 0, left: 0, right: 0 }, placeholder: props.placeholder || "Type something..." }; - this.isTrackingStarted = false; - this.previousChar = " "; } + static getDerivedStateFromProps(nextProps, prevState) { if (nextProps.clearInput !== prevState.clearInput) { return { clearInput: nextProps.clearInput, placeholder: nextProps.placeholder }; @@ -141,7 +202,7 @@ export class Editor extends React.Component { if (this.props.onHideMentions) { this.props.onHideMentions(); } - + } updateSuggestions(lastKeyword) { @@ -153,7 +214,7 @@ export class Editor extends React.Component { resetTextbox() { this.previousChar = " "; this.stopTracking(); - this.setState({ textInputHeight: this.props.textInputMinHeight }); + //this.setState({ textInputHeight: this.props.textInputMinHeight }); } identifyKeyword(inputText) { @@ -320,9 +381,9 @@ export class Editor extends React.Component { formatMentionNode = (txt, key) => { const { props } = this; - const { editorStyles = {} } = props; + const { editorStyles } = props; - return( + return ( {txt} @@ -385,7 +446,7 @@ export class Editor extends React.Component { }); } - onChange = (inputText, fromAtBtn) => { + onChange = (inputText, fromAtBtn = false) => { let text = inputText; const prevText = this.state.inputText; let selection = { ...this.state.selection }; @@ -518,7 +579,7 @@ export class Editor extends React.Component { render() { const { props, state } = this; - const { editorStyles = {} } = props; + const { editorStyles } = props; if (!props.showEditor) return null; @@ -534,23 +595,23 @@ export class Editor extends React.Component { props.renderMentionList ? ( props.renderMentionList(mentionListProps) ) : ( - - ) + + ) ) const selection = (Platform.OS === 'ios' || this.state.inputText.length >= this.state.selection.start) ? this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; - + return ( - + - { !props.placeMentionListOnBottom && mentionListComponent } + {!props.placeMentionListOnBottom && mentionListComponent} { this.scroll = scroll; @@ -558,17 +619,15 @@ export class Editor extends React.Component { onContentSizeChange={() => { this.scroll.scrollToEnd({ animated: true }); }} - style={[styles.editorContainer, editorStyles.editorContainer]} + style={[editorStyles.editorContainer]} > - + props.onRef && props.onRef(input)} + {...props.textInputProps} style={[styles.input, editorStyles.input]} multiline autoFocus numberOfLines={100} - name={"message"} value={null} onBlur={props.toggleEditor} onChangeText={this.onChange} @@ -576,20 +635,18 @@ export class Editor extends React.Component { selectionColor={"#000"} onSelectionChange={this.handleSelectionChange} placeholder={state.placeholder} - placeholderTextColor = { props.placeholderTextColor} onContentSizeChange={this.onContentSizeChange} scrollEnabled={false} - inputAccessoryViewID={props.inputAccessoryViewID} > - { state.formattedText } + {state.formattedText} - { props.placeMentionListOnBottom && mentionListComponent } + {props.placeMentionListOnBottom && mentionListComponent} ); } } -export default Editor; +export default Editor; \ No newline at end of file diff --git a/src/MentionList/index.js b/src/MentionList/index.tsx similarity index 80% rename from src/MentionList/index.js rename to src/MentionList/index.tsx index 5938925..b6805e1 100644 --- a/src/MentionList/index.js +++ b/src/MentionList/index.tsx @@ -4,9 +4,18 @@ import { ActivityIndicator, FlatList, Animated, View } from "react-native"; import MentionListItem from "../MentionListItem"; // Styles -import styles from "./MentionListStyles"; +import styles from "../MentionList/MentionListStyles"; -export class MentionList extends React.PureComponent { +interface Props { + list: any, + editorStyles: any, + isTrackingStarted: boolean, + suggestions: any, + keyword: string, + onSuggestionTap: Function +} + +export class MentionList extends React.PureComponent { static propTypes = { list: PropTypes.array, editorStyles: PropTypes.object, @@ -16,10 +25,7 @@ export class MentionList extends React.PureComponent { onSuggestionTap: PropTypes.func }; - constructor() { - super(); - this.previousChar = " "; - } + previousChar = " "; renderSuggestionsRow = ({ item }) => { return ( @@ -59,9 +65,9 @@ export class MentionList extends React.PureComponent { } - enableEmptySections={true} + //enableEmptySections={true} data={suggestions} - keyExtractor={(item, index) => `${item.id}-${index}`} + keyExtractor={(item: any, index: number) => `${item.id}-${index}`} renderItem={rowData => { return this.renderSuggestionsRow(rowData); }} diff --git a/src/MentionListItem/index.js b/src/MentionListItem/index.tsx similarity index 82% rename from src/MentionListItem/index.js rename to src/MentionListItem/index.tsx index bf0ba28..92dd3af 100644 --- a/src/MentionListItem/index.js +++ b/src/MentionListItem/index.tsx @@ -7,14 +7,21 @@ import styles from "./MentionListItemStyles"; import Avatar from "../Avatar"; -export class MentionListItem extends React.PureComponent { +interface Props { + item: any, + onSuggestionTap: Function, + editorStyles: any, + index: number +} + +export class MentionListItem extends React.PureComponent { static propTypes = { item: PropTypes.object, onSuggestionTap: PropTypes.func, editorStyles: PropTypes.object }; - onSuggestionTap = (user, hidePanel) => { + onSuggestionTap = (user) => { this.props.onSuggestionTap(user); }; @@ -38,7 +45,7 @@ export class MentionListItem extends React.PureComponent { {user.name} @{user.username} From 1fd2413d49796ad1d51112c6246f9ec7283b240d Mon Sep 17 00:00:00 2001 From: Kobi Dalal Date: Wed, 20 May 2020 10:17:22 +0300 Subject: [PATCH 4/8] fixed type --- src/Editor/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index 505c869..1959230 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -41,7 +41,7 @@ interface Props { initialValue: string, clearInput?: boolean, onChange: Function, - showEditor?: Function, + showEditor?: boolean, toggleEditor?(e: any): {}, showMentions?: boolean, onHideMentions?: Function, From 438afbdbd5c2409b2b884029cdb3d9045eef0489 Mon Sep 17 00:00:00 2001 From: Kobi Dalal Date: Thu, 21 May 2020 11:18:28 +0300 Subject: [PATCH 5/8] Added keyword support for outside search Fixed require props --- src/Editor/index.tsx | 39 +++++++++++++++++----------- src/MentionList/MentionListStyles.js | 2 +- src/MentionList/index.tsx | 5 ++-- src/MentionListItem/index.tsx | 3 +-- 4 files changed, 29 insertions(+), 20 deletions(-) diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index 1959230..bf4f494 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -9,7 +9,8 @@ import { ScrollView, ViewStyle, TextStyle, - TextInputProps + TextInputProps, + ScrollViewProps } from "react-native"; import EU from "./EditorUtils"; @@ -23,17 +24,17 @@ type listItem = { } type editorStylesProps = { - mainContainer: ViewStyle, - editorContainer: ViewStyle, - inputMaskTextWrapper: TextStyle, - inputMaskText: TextStyle, - input: TextStyle, - mentionsListWrapper: ViewStyle, - mentionListItemWrapper: ViewStyle, - mentionListItemTextWrapper: ViewStyle, - mentionListItemTitle: TextStyle, - mentionListItemUsername: TextStyle - mentionNode: ViewStyle + mainContainer?: ViewStyle, + editorContainer?: ViewStyle, + inputMaskTextWrapper?: TextStyle, + inputMaskText?: TextStyle, + input?: TextStyle, + mentionsListWrapper?: ViewStyle, + mentionListItemWrapper?: ViewStyle, + mentionListItemTextWrapper?: ViewStyle, + mentionListItemTitle?: TextStyle, + mentionListItemUsername?: TextStyle + mentionNode?: ViewStyle, } interface Props { @@ -49,7 +50,10 @@ interface Props { placeholder?: string, renderMentionList?: Function, placeMentionListOnBottom?: boolean, - textInputProps: TextInputProps + textInputProps: TextInputProps, + updateSuggestions: Function, + mentionsListProps: ScrollViewProps + // textInputMinHeight: number } @@ -85,6 +89,7 @@ export class Editor extends React.Component { placeholder: "", renderMentionList: null, placeMentionListOnBottom: false, + mentionsListProps: {} }; mentionsMap = new Map(); @@ -186,11 +191,12 @@ export class Editor extends React.Component { startTracking(menIndex) { this.isTrackingStarted = true; this.menIndex = menIndex; + this.updateSuggestions(""); this.setState({ - keyword: "", menIndex, isTrackingStarted: true }); + } stopTracking() { @@ -209,6 +215,8 @@ export class Editor extends React.Component { this.setState({ keyword: lastKeyword }); + if (this.props.updateSuggestions) + this.props.updateSuggestions(lastKeyword); } resetTextbox() { @@ -601,13 +609,14 @@ export class Editor extends React.Component { isTrackingStarted={state.isTrackingStarted} onSuggestionTap={this.onSuggestionTap} editorStyles={editorStyles} + mentionsListProps={props.mentionsListProps} /> ) ) const selection = (Platform.OS === 'ios' || this.state.inputText.length >= this.state.selection.start) ? this.state.selection : { start: this.state.inputText.length, end: this.state.inputText.length }; - + return ( diff --git a/src/MentionList/MentionListStyles.js b/src/MentionList/MentionListStyles.js index 9578ef3..e06f8a1 100644 --- a/src/MentionList/MentionListStyles.js +++ b/src/MentionList/MentionListStyles.js @@ -8,6 +8,6 @@ export default StyleSheet.create({ suggestionsPanelStyle: {}, loaderContainer: {}, mentionsListContainer: { - height: 100 + maxHeight: 100 } }); diff --git a/src/MentionList/index.tsx b/src/MentionList/index.tsx index b6805e1..626ac68 100644 --- a/src/MentionList/index.tsx +++ b/src/MentionList/index.tsx @@ -1,6 +1,6 @@ import React from "react"; import PropTypes from "prop-types"; -import { ActivityIndicator, FlatList, Animated, View } from "react-native"; +import { ActivityIndicator, FlatList, Animated, View, ScrollViewProps } from "react-native"; import MentionListItem from "../MentionListItem"; // Styles @@ -13,6 +13,7 @@ interface Props { suggestions: any, keyword: string, onSuggestionTap: Function + mentionsListProps: ScrollViewProps } export class MentionList extends React.PureComponent { @@ -57,9 +58,9 @@ export class MentionList extends React.PureComponent { ]} > diff --git a/src/MentionListItem/index.tsx b/src/MentionListItem/index.tsx index 92dd3af..a5c07c0 100644 --- a/src/MentionListItem/index.tsx +++ b/src/MentionListItem/index.tsx @@ -11,7 +11,6 @@ interface Props { item: any, onSuggestionTap: Function, editorStyles: any, - index: number } export class MentionListItem extends React.PureComponent { @@ -26,7 +25,7 @@ export class MentionListItem extends React.PureComponent { }; render() { - const { item: user, index, editorStyles } = this.props; + const { item: user, editorStyles } = this.props; return ( Date: Thu, 21 May 2020 17:01:45 +0300 Subject: [PATCH 6/8] auto focus text input after selection --- src/Editor/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index bf4f494..b2449cb 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -97,6 +97,7 @@ export class Editor extends React.Component { previousChar = " "; menIndex = 0; scroll = null; + textInputRef = null; constructor(props) { super(props); @@ -215,6 +216,7 @@ export class Editor extends React.Component { this.setState({ keyword: lastKeyword }); + if (this.props.updateSuggestions) this.props.updateSuggestions(lastKeyword); } @@ -361,6 +363,8 @@ export class Editor extends React.Component { }); this.stopTracking(); this.sendMessageToFooter(text); + if (this.textInputRef) + this.textInputRef.focus(); }; handleSelectionChange = ({ nativeEvent: { selection } }) => { @@ -595,7 +599,7 @@ export class Editor extends React.Component { list: props.list, keyword: state.keyword, isTrackingStarted: state.isTrackingStarted, - onSuggestionTap: this.onSuggestionTap.bind(this), + onSuggestionTap: this.onSuggestionTap, editorStyles }; @@ -633,6 +637,7 @@ export class Editor extends React.Component { this.textInputRef = r} style={[styles.input, editorStyles.input]} multiline autoFocus From 5cc6f96e50a8792a2bd908349a478c3cd1a40685 Mon Sep 17 00:00:00 2001 From: Kobi Dalal Date: Thu, 21 May 2020 17:48:15 +0300 Subject: [PATCH 7/8] on initialValue changed --- src/Editor/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index b2449cb..831796f 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -164,7 +164,7 @@ export class Editor extends React.Component { return null; } - componentDidUpdate(prevProps, prevState) { + componentDidUpdate(prevProps: Props) { // only update chart if the data has changed if (this.state.inputText !== "" && this.state.clearInput) { this.setState({ @@ -178,6 +178,17 @@ export class Editor extends React.Component { //don't need to close on false; user show select it. this.onChange(this.state.inputText, true); } + + if (this.props.initialValue !== prevProps.initialValue) { + const { map, newValue } = EU.getMentionsWithInputText(this.props.initialValue); + this.mentionsMap = map; + let msg = newValue; + let formattedMsg = this.formatText(newValue); + setTimeout(() => { + this.sendMessageToFooter(newValue); + }); + this.setState({ inputText: msg, formattedText: formattedMsg }); + } } updateMentionsMap(selection, count, shouldAdd) { From 4f64c7a54ce0722a2a893b109e0627df71241e0b Mon Sep 17 00:00:00 2001 From: Kobi Dalal Date: Sun, 24 May 2020 15:00:55 +0300 Subject: [PATCH 8/8] moved trigger location to props --- src/Editor/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/Editor/index.tsx b/src/Editor/index.tsx index 831796f..cb6f29b 100644 --- a/src/Editor/index.tsx +++ b/src/Editor/index.tsx @@ -53,7 +53,8 @@ interface Props { textInputProps: TextInputProps, updateSuggestions: Function, mentionsListProps: ScrollViewProps - + editorHeight: number, + triggerLocation: 'new-word-only' | 'anywhere' // textInputMinHeight: number } @@ -89,7 +90,8 @@ export class Editor extends React.Component { placeholder: "", renderMentionList: null, placeMentionListOnBottom: false, - mentionsListProps: {} + mentionsListProps: {}, + triggerLocation: "anywhere" }; mentionsMap = new Map(); @@ -120,7 +122,7 @@ export class Editor extends React.Component { // textInputHeight: "", isTrackingStarted: false, suggestionRowHeight: new Animated.Value(0), - triggerLocation: "anywhere", //'new-words-only', //anywhere + triggerLocation: props.triggerLocation, trigger: "@", selection: { start: 0, @@ -227,7 +229,7 @@ export class Editor extends React.Component { this.setState({ keyword: lastKeyword }); - + if (this.props.updateSuggestions) this.props.updateSuggestions(lastKeyword); }