From f0c5a226d4ae02cd92d92372708056f63d3cd976 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Thu, 29 Apr 2021 16:32:30 -0400 Subject: added ParsedText, initial work for typeahead --- package.json | 1 + 1 file changed, 1 insertion(+) (limited to 'package.json') diff --git a/package.json b/package.json index 2612e67f..b3d69c76 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.4.0", "react-native-linear-gradient": "^2.5.6", + "react-native-parsed-text": "^0.0.22", "react-native-picker-select": "^7.0.0", "react-native-push-notifications": "^3.0.10", "react-native-reanimated": "2.0.0-rc.0", -- cgit v1.2.3-70-g09d2 From a665c527cf0ab24b1a19b2ed35f38b9acb79cdeb Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 30 Apr 2021 15:16:32 -0400 Subject: removed old code, added controlled-mention --- package.json | 3 +- src/components/comments/AddComment.tsx | 83 +++++++-------------------------- src/components/common/TaggTypeahead.tsx | 37 +++++++++------ 3 files changed, 41 insertions(+), 82 deletions(-) (limited to 'package.json') diff --git a/package.json b/package.json index b3d69c76..d3c02059 100644 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "react-native-animatable": "^1.3.3", "react-native-confirmation-code-field": "^6.5.0", "react-native-contacts": "^6.0.4", + "react-native-controlled-mentions": "^2.2.5", "react-native-date-picker": "^3.2.5", "react-native-device-info": "^7.3.1", "react-native-document-picker": "^5.0.3", @@ -102,4 +103,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} +} \ No newline at end of file diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 97c87299..7576675e 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -7,15 +7,14 @@ import { TextInput, View, } from 'react-native'; +import {MentionInput} from 'react-native-controlled-mentions'; import {TouchableOpacity} from 'react-native-gesture-handler'; -import ParsedText, {ParseShape} from 'react-native-parsed-text'; import {useDispatch, useSelector} from 'react-redux'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {RootState} from '../../store/rootreducer'; -import {ProfilePreviewType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {Avatar, TaggTypeahead} from '../common'; @@ -40,14 +39,9 @@ const AddComment: React.FC = ({ }) => { const [comment, setComment] = useState(''); const [keyboardVisible, setKeyboardVisible] = useState(false); - const [isMentioning, setIsMentioning] = useState(false); - const [mentionQuery, setMentionQuery] = useState(''); - const [selectedMention, setSelectedMention] = useState(); - const [mentions, setMentions] = useState([]); const {avatar} = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const ref = useRef(null); - const [parsePatterns, setParsePatterns] = useState([]); const addComment = async () => { const trimmed = comment.trim(); @@ -78,30 +72,6 @@ const AddComment: React.FC = ({ } }; - useEffect(() => { - setParsePatterns( - mentions.map((m) => ({ - pattern: new RegExp(`@${m.username}`), - style: {color: TAGG_LIGHT_BLUE}, - })), - ); - }, [mentions]); - - useEffect(() => { - if (selectedMention) { - setComment( - comment.replace( - new RegExp(`@${mentionQuery}`), - `@${selectedMention.username} `, - ), - ); - setMentions([...mentions, selectedMention]); - setSelectedMention(undefined); - setMentionQuery(''); - setIsMentioning(false); - } - }, [selectedMention]); - useEffect(() => { const showKeyboard = () => setKeyboardVisible(true); Keyboard.addListener('keyboardWillShow', showKeyboard); @@ -125,12 +95,6 @@ const AddComment: React.FC = ({ - {isMentioning && ( - - )} = ({ ]}> - { - const newestChar = newText[newText.length - 1]; - const deletedChar = - newText.length === comment.length - 1 - ? comment[comment.length - 1] - : undefined; - if (newestChar === ' ' || deletedChar === '@') { - setIsMentioning(false); - setMentionQuery(''); - } - if (newestChar === '@') { - setIsMentioning(true); - } - if (isMentioning) { - const match = newText.match(/.*@(.*)$/); - if (match) { - setMentionQuery(match[1]); - } - } - setComment(newText); - }} - multiline={true} - ref={ref}> - - {comment} - - + value={comment} + onChange={setComment} + inputRef={ref} + partTypes={[ + { + trigger: '@', + renderSuggestions: (props) => , + allowedSpacesCount: 0, + isInsertSpaceAfterMention: true, + textStyle: {color: TAGG_LIGHT_BLUE}, + }, + ]} + /> diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6239971e..7cd99278 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,33 +1,30 @@ import React, {Fragment, useEffect, useState} from 'react'; import {ScrollView, StyleSheet} from 'react-native'; +import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {ProfilePreviewType} from '../../types'; import {SCREEN_WIDTH} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; -type TaggTypeaheadProps = { - query: string; - setSelectedMention: (user: ProfilePreviewType) => void; -}; - -const TaggTypeahead: React.FC = ({ - query, - setSelectedMention, +const TaggTypeahead: React.FC = ({ + keyword, + onSuggestionPress, }) => { const [results, setResults] = useState([]); + const [height, setHeight] = useState(0); useEffect(() => { getQuerySuggested(); - }, [query]); + }, [keyword]); const getQuerySuggested = async () => { - if (query.length < 3) { + if (!keyword || keyword.length < 3) { setResults([]); return; } const searchResults = await loadSearchResults( - `${SEARCH_ENDPOINT_MESSAGES}?query=${query}`, + `${SEARCH_ENDPOINT_MESSAGES}?query=${keyword}`, ); if (searchResults && searchResults.users) { setResults(searchResults.users); @@ -39,11 +36,19 @@ const TaggTypeahead: React.FC = ({ } return ( - + { + setHeight(event.nativeEvent.layout.height); + }}> {results.map((user) => ( { - setSelectedMention(user); + onSuggestionPress({ + id: user.id, + name: user.username, + }); setResults([]); }} user={user} @@ -57,8 +62,12 @@ const styles = StyleSheet.create({ container: { marginLeft: SCREEN_WIDTH * 0.05, width: SCREEN_WIDTH * 0.9, - maxHeight: 300, + maxHeight: 264, borderRadius: 10, + backgroundColor: 'white', + position: 'absolute', + alignSelf: 'center', + zIndex: 1, borderWidth: 1, }, }); -- cgit v1.2.3-70-g09d2 From a1cf6908a0f10283d8c4df4f0ed564b76a3ed20a Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 4 May 2021 21:09:26 -0400 Subject: removed unused package --- package.json | 1 - 1 file changed, 1 deletion(-) (limited to 'package.json') diff --git a/package.json b/package.json index d3c02059..16932be4 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,6 @@ "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.4.0", "react-native-linear-gradient": "^2.5.6", - "react-native-parsed-text": "^0.0.22", "react-native-picker-select": "^7.0.0", "react-native-push-notifications": "^3.0.10", "react-native-reanimated": "2.0.0-rc.0", -- cgit v1.2.3-70-g09d2