diff options
Diffstat (limited to 'src/components/comments')
| -rw-r--r-- | src/components/comments/AddComment.tsx | 1 | ||||
| -rw-r--r-- | src/components/comments/MentionInputControlled.tsx | 130 |
2 files changed, 65 insertions, 66 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 28e1a40e..befaa8fe 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -7,7 +7,6 @@ import { TextInput, View, } from 'react-native'; -import {MentionInput} from 'react-native-controlled-mentions'; import {TouchableOpacity} from 'react-native-gesture-handler'; import {useDispatch, useSelector} from 'react-redux'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index 892c9564..6abcb566 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -1,4 +1,4 @@ -import React, { FC, MutableRefObject, useMemo, useRef, useState } from 'react'; +import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react'; import { NativeSyntheticEvent, Text, @@ -7,10 +7,10 @@ import { View, } from 'react-native'; -import { - MentionInputProps, - MentionPartType, - Suggestion +import { + MentionInputProps, + MentionPartType, + Suggestion, } from 'react-native-controlled-mentions/dist/types'; import { defaultMentionTextStyle, @@ -21,22 +21,20 @@ import { parseValue, } from 'react-native-controlled-mentions/dist/utils'; -const MentionInputControlled: FC<MentionInputProps> = ( - { - value, - onChange, +const MentionInputControlled: FC<MentionInputProps> = ({ + value, + onChange, - partTypes = [], + partTypes = [], - inputRef: propInputRef, + inputRef: propInputRef, - containerStyle, + containerStyle, - onSelectionChange, + onSelectionChange, - ...textInputProps - }, -) => { + ...textInputProps +}) => { const textInput = useRef<TextInput | null>(null); const [selection, setSelection] = useState({start: 0, end: 0}); @@ -45,18 +43,20 @@ const MentionInputControlled: FC<MentionInputProps> = ( const validRegex = () => { if (partTypes.length === 0) { - return /.*\@[^ ]*$/; + return /.*\@[^ ]*$/; } else { - return new RegExp(`.*\@${keywordByTrigger[partTypes[0].trigger]}.*$`); + return new RegExp(`.*\@${keywordByTrigger[partTypes[0].trigger]}.*$`); } }; - const { - plainText, - parts, - } = useMemo(() => parseValue(value, partTypes), [value, partTypes]); + const {plainText, parts} = useMemo(() => parseValue(value, partTypes), [ + value, + partTypes, + ]); - const handleSelectionChange = (event: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => { + const handleSelectionChange = ( + event: NativeSyntheticEvent<TextInputSelectionChangeEventData>, + ) => { setSelection(event.nativeEvent.selection); onSelectionChange && onSelectionChange(event); @@ -69,7 +69,9 @@ const MentionInputControlled: FC<MentionInputProps> = ( */ const onChangeInput = (changedText: string) => { setKeyboardText(changedText); - onChange(generateValueFromPartsAndChangedText(parts, plainText, changedText)); + onChange( + generateValueFromPartsAndChangedText(parts, plainText, changedText), + ); }; /** @@ -89,7 +91,9 @@ const MentionInputControlled: FC<MentionInputProps> = ( * - Get updated value * - Trigger onChange callback with new value */ - const onSuggestionPress = (mentionType: MentionPartType) => (suggestion: Suggestion) => { + const onSuggestionPress = (mentionType: MentionPartType) => ( + suggestion: Suggestion, + ) => { const newValue = generateValueWithAddedSuggestion( parts, mentionType, @@ -132,64 +136,60 @@ const MentionInputControlled: FC<MentionInputProps> = ( const renderMentionSuggestions = (mentionType: MentionPartType) => ( <React.Fragment key={mentionType.trigger}> - {mentionType.renderSuggestions && mentionType.renderSuggestions({ - keyword: keywordByTrigger[mentionType.trigger], - onSuggestionPress: onSuggestionPress(mentionType), - })} + {mentionType.renderSuggestions && + mentionType.renderSuggestions({ + keyword: keywordByTrigger[mentionType.trigger], + onSuggestionPress: onSuggestionPress(mentionType), + })} </React.Fragment> ); const validateInput = (testString: string) => { - return validRegex().test(testString); - } + return validRegex().test(testString); + }; return ( <View style={containerStyle}> - {validateInput(keyboardText) ? (partTypes - .filter(one => ( - isMentionPartType(one) - && one.renderSuggestions != null - && !one.isBottomMentionSuggestionsRender - )) as MentionPartType[]) - .map(renderMentionSuggestions) - : null - } + {validateInput(keyboardText) + ? (partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + !one.isBottomMentionSuggestionsRender, + ) as MentionPartType[]).map(renderMentionSuggestions) + : null} <TextInput multiline - {...textInputProps} - ref={handleTextInputRef} - onChangeText={onChangeInput} - onSelectionChange={handleSelectionChange} - > + onSelectionChange={handleSelectionChange}> <Text> - {parts.map(({text, partType, data}, index) => partType ? ( - <Text - key={`${index}-${data?.trigger ?? 'pattern'}`} - style={partType.textStyle ?? defaultMentionTextStyle} - > - {text} - </Text> - ) : ( - <Text key={index}>{text}</Text> - ))} + {parts.map(({text, partType, data}, index) => + partType ? ( + <Text + key={`${index}-${data?.trigger ?? 'pattern'}`} + style={partType.textStyle ?? defaultMentionTextStyle}> + {text} + </Text> + ) : ( + <Text key={index}>{text}</Text> + ), + )} </Text> </TextInput> - {validateInput(keyboardText) ? (partTypes - .filter(one => ( - isMentionPartType(one) - && one.renderSuggestions != null - && one.isBottomMentionSuggestionsRender - )) as MentionPartType[]) - .map(renderMentionSuggestions) - : null - } + {validateInput(keyboardText) + ? (partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + one.isBottomMentionSuggestionsRender, + ) as MentionPartType[]).map(renderMentionSuggestions) + : null} </View> ); }; -export { MentionInputControlled };
\ No newline at end of file +export {MentionInputControlled}; |