From 98b11aebbc99ade873b7c8681ac38d6e0e72332c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Sat, 12 Jun 2021 02:01:57 +0900 Subject: Alter location of suggested --- src/components/comments/AddComment.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index b229d010..c48ce627 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -20,6 +20,7 @@ import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import {Avatar} from '../common'; import {MentionInputControlled} from './MentionInputControlled'; +import {normalize} from 'react-native-elements'; export interface AddCommentProps { momentId: string; @@ -110,7 +111,6 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { keyboardVisible ? styles.whiteBackround : {}, ]}> - = ({momentId, placeholderText}) => { }} inputRef={ref} partTypes={mentionPartTypes('blue')} + addComment={addComment} /> - - - - - @@ -139,22 +135,29 @@ const styles = StyleSheet.create({ container: { backgroundColor: '#f7f7f7', alignItems: 'center', + justifyContent: 'center', width: SCREEN_WIDTH, }, textContainer: { width: '95%', - flexDirection: 'row', + // flexDirection: 'row', backgroundColor: '#e8e8e8', alignItems: 'center', + // alignSelf: 'center', justifyContent: 'space-between', + // justifyContent: 'center', margin: '3%', borderRadius: 25, + // borderWidth: 1, + // flex: 1, + height: normalize(45), }, text: { flex: 1, padding: '1%', - marginHorizontal: '1%', + // marginHorizontal: '1%', maxHeight: 100, + // borderWidth: 1, }, avatar: { height: 35, -- cgit v1.2.3-70-g09d2 From 52ff7abbc60fc1eef1f8d67372de855ab09069a9 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Sat, 12 Jun 2021 03:37:38 +0900 Subject: Add grey background --- src/components/comments/AddComment.tsx | 2 + src/components/comments/MentionInputControlled.tsx | 10 ++++ src/components/common/TaggTypeahead.tsx | 59 ++++++++++++++-------- 3 files changed, 49 insertions(+), 22 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c48ce627..c17fdd93 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -137,6 +137,8 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, + // paddingTop: 10, + // marginTop: 10, }, textContainer: { width: '95%', diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index c52f3286..a3229bb0 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -27,6 +27,7 @@ import {Avatar} from '../common'; import {normalize} from 'react-native-elements'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; const MentionInputControlled: FC = ({ value, @@ -246,6 +247,15 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, text: {flex: 1}, + overlay: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: 'blue', + position: 'absolute', + left: 0, + bottom: 0, + zIndex: -1, + }, }); export {MentionInputControlled}; diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 7379b5e0..a7789881 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,12 +1,12 @@ import React, {Fragment, useEffect, useState} from 'react'; -import {ScrollView, StyleSheet} from 'react-native'; +import {ScrollView, StyleSheet, View} from 'react-native'; import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; -import {SCREEN_WIDTH, shuffle} from '../../utils'; +import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; const TaggTypeahead: React.FC = ({ @@ -42,26 +42,29 @@ const TaggTypeahead: React.FC = ({ } return ( - { - setHeight(event.nativeEvent.layout.height); - }} - keyboardShouldPersistTaps={'always'}> - {results.map((user) => ( - { - setResults([]); - onSuggestionPress({ - id: user.id, - name: user.username, - }); - }} - user={user} - /> - ))} - + + + { + setHeight(event.nativeEvent.layout.height); + }} + keyboardShouldPersistTaps={'always'}> + {results.map((user) => ( + { + setResults([]); + onSuggestionPress({ + id: user.id, + name: user.username, + }); + }} + user={user} + /> + ))} + + ); }; @@ -75,10 +78,22 @@ const styles = StyleSheet.create({ // borderRadius: 10, backgroundColor: 'white', position: 'absolute', + // bottom: 0, alignSelf: 'center', zIndex: 1, // borderWidth: 1, }, + overlay: { + width: SCREEN_WIDTH, + height: SCREEN_HEIGHT, + backgroundColor: 'gray', + opacity: 0.4, + position: 'absolute', + alignSelf: 'center', + // left: 0, + bottom: 0, + zIndex: -1, + }, }); export default TaggTypeahead; -- cgit v1.2.3-70-g09d2 From 5d8357b7e370a51a5f13b316582bcbcd595566d9 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 01:17:40 +0900 Subject: Correct positioning --- src/components/comments/AddComment.tsx | 2 -- src/components/comments/MentionInputControlled.tsx | 42 ++++++++++++++-------- src/components/common/TaggTypeahead.tsx | 10 ++---- 3 files changed, 30 insertions(+), 24 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c17fdd93..c48ce627 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -137,8 +137,6 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, - // paddingTop: 10, - // marginTop: 10, }, textContainer: { width: '95%', diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index a3229bb0..c37d2182 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -1,17 +1,27 @@ -import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react'; +import React, { + FC, + MutableRefObject, + Ref, + useMemo, + useRef, + useState, +} from 'react'; import { NativeSyntheticEvent, StyleSheet, + StyleProp, Text, TextInput, + TextInputProps, TextInputSelectionChangeEventData, TouchableOpacity, View, + ViewStyle, } from 'react-native'; import {useDispatch, useSelector} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; import { - MentionInputProps, + PatternPartType, MentionPartType, Suggestion, } from 'react-native-controlled-mentions/dist/types'; @@ -29,7 +39,22 @@ import {normalize} from 'react-native-elements'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; -const MentionInputControlled: FC = ({ +type PartType = MentionPartType | PatternPartType; + +type MentionInputControlledProps = Omit & { + value: string; + onChange: (value: string) => any; + + partTypes?: PartType[]; + + inputRef?: Ref; + + containerStyle?: StyleProp; + + addComment?: () => any; +}; + +const MentionInputControlled: FC = ({ value, onChange, @@ -225,14 +250,12 @@ const styles = StyleSheet.create({ marginRight: 10, marginLeft: '3%', marginVertical: '2%', - // alignSelf: 'flex-end', }, containerStyle: { flexDirection: 'row', alignSelf: 'center', alignItems: 'center', justifyContent: 'center', - // borderWidth: 1, height: normalize(40), }, submitButton: { @@ -247,15 +270,6 @@ const styles = StyleSheet.create({ alignSelf: 'flex-end', }, text: {flex: 1}, - overlay: { - width: SCREEN_WIDTH, - height: SCREEN_HEIGHT, - backgroundColor: 'blue', - position: 'absolute', - left: 0, - bottom: 0, - zIndex: -1, - }, }); export {MentionInputControlled}; diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index a7789881..6686b4d9 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -70,18 +70,13 @@ const TaggTypeahead: React.FC = ({ const styles = StyleSheet.create({ container: { - // marginLeft: SCREEN_WIDTH * 0.05, - // marginLeft: 20, - // margin: 50, width: SCREEN_WIDTH, maxHeight: 264, - // borderRadius: 10, backgroundColor: 'white', position: 'absolute', - // bottom: 0, alignSelf: 'center', zIndex: 1, - // borderWidth: 1, + margin: -10, }, overlay: { width: SCREEN_WIDTH, @@ -90,8 +85,7 @@ const styles = StyleSheet.create({ opacity: 0.4, position: 'absolute', alignSelf: 'center', - // left: 0, - bottom: 0, + bottom: 10, zIndex: -1, }, }); -- cgit v1.2.3-70-g09d2 From bc2c093e9342ed8deb98652d1c278417dd6435f3 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 03:53:00 +0900 Subject: Fixed styles for comments vs captions --- src/components/comments/AddComment.tsx | 2 +- src/components/common/TaggTypeahead.tsx | 23 ++++++++++++++++++----- src/screens/profile/CaptionScreen.tsx | 2 +- src/utils/comments.tsx | 11 +++++++---- 4 files changed, 27 insertions(+), 11 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index c48ce627..db85d525 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -122,7 +122,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { ); }} inputRef={ref} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'comment')} addComment={addComment} /> diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6686b4d9..6b3df559 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -1,21 +1,35 @@ import React, {Fragment, useEffect, useState} from 'react'; import {ScrollView, StyleSheet, View} from 'react-native'; -import {MentionSuggestionsProps} from 'react-native-controlled-mentions'; +import {Suggestion} from 'react-native-controlled-mentions'; import {useSelector} from 'react-redux'; import {SEARCH_ENDPOINT_MESSAGES} from '../../constants'; import {loadSearchResults} from '../../services'; import {RootState} from '../../store/rootReducer'; import {ProfilePreviewType} from '../../types'; -import {SCREEN_WIDTH, SCREEN_HEIGHT, shuffle} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, shuffle} from '../../utils'; import TaggUserRowCell from './TaggUserRowCell'; -const TaggTypeahead: React.FC = ({ +type TaggTypeaheadProps = { + keyword: string | undefined; + component: string | undefined; + onSuggestionPress: (suggestion: Suggestion) => void; +}; + +const TaggTypeahead: React.FC = ({ keyword, + component, onSuggestionPress, }) => { const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); const [height, setHeight] = useState(0); + const [margin, setMargin] = useState(0); + + useEffect(() => { + if (component === 'comment') { + setMargin(-10); + } + }, [component]); useEffect(() => { if (keyword === '') { @@ -45,7 +59,7 @@ const TaggTypeahead: React.FC = ({ { setHeight(event.nativeEvent.layout.height); @@ -76,7 +90,6 @@ const styles = StyleSheet.create({ position: 'absolute', alignSelf: 'center', zIndex: 1, - margin: -10, }, overlay: { width: SCREEN_WIDTH, diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 8bffd82b..05095d16 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -167,7 +167,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { placeholderTextColor="gray" value={caption} onChange={setCaption} - partTypes={mentionPartTypes('blue')} + partTypes={mentionPartTypes('blue', 'caption')} /> diff --git a/src/utils/comments.tsx b/src/utils/comments.tsx index 5c17cefe..80786b74 100644 --- a/src/utils/comments.tsx +++ b/src/utils/comments.tsx @@ -79,13 +79,16 @@ export const renderTextWithMentions: React.FC = ({ ); }; -export const mentionPartTypes: (style: 'blue' | 'white') => PartType[] = ( - style, -) => { +export const mentionPartTypes: ( + style: 'blue' | 'white', + component: 'caption' | 'comment', +) => PartType[] = (style, component) => { return [ { trigger: '@', - renderSuggestions: (props) => , + renderSuggestions: (props) => ( + + ), allowedSpacesCount: 0, isInsertSpaceAfterMention: true, textStyle: -- cgit v1.2.3-70-g09d2 From 6ee452c257d388913a1effd817c37bef638bc179 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Tue, 15 Jun 2021 12:21:53 +0900 Subject: Fix bug in caption screen of suggestions not disappearing --- src/components/comments/AddComment.tsx | 5 +- src/components/comments/CommentTextField.tsx | 162 +++++++++++++++++++++ src/components/comments/MentionInputControlled.tsx | 106 ++++++-------- src/components/comments/index.ts | 1 + src/screens/profile/CaptionScreen.tsx | 4 +- 5 files changed, 210 insertions(+), 68 deletions(-) create mode 100644 src/components/comments/CommentTextField.tsx (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index db85d525..3c0e9a0a 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -18,8 +18,8 @@ import {RootState} from '../../store/rootreducer'; import {CommentThreadType, CommentType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; -import {Avatar} from '../common'; -import {MentionInputControlled} from './MentionInputControlled'; +import {CommentTextField} from './CommentTextField'; +import MentionInputControlled from './MentionInputControlled'; import {normalize} from 'react-native-elements'; export interface AddCommentProps { @@ -124,6 +124,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { inputRef={ref} partTypes={mentionPartTypes('blue', 'comment')} addComment={addComment} + NewText={CommentTextField} /> diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx new file mode 100644 index 00000000..61b489bb --- /dev/null +++ b/src/components/comments/CommentTextField.tsx @@ -0,0 +1,162 @@ +import React, { + FC, + MutableRefObject, + Ref, + useMemo, + useRef, + useState, + ReactFragment, +} from 'react'; +import { + NativeSyntheticEvent, + StyleSheet, + StyleProp, + Text, + TextInput, + TextInputProps, + TextInputSelectionChangeEventData, + TouchableOpacity, + View, + ViewStyle, +} from 'react-native'; +import {useDispatch, useSelector} from 'react-redux'; +import {TAGG_LIGHT_BLUE} from '../../constants'; +import { + Part, + PartType, + PatternPartType, + MentionPartType, + Suggestion, +} from 'react-native-controlled-mentions/dist/types'; +import { + defaultMentionTextStyle, + generateValueFromPartsAndChangedText, + generateValueWithAddedSuggestion, + getMentionPartSuggestionKeywords, + isMentionPartType, + parseValue, +} from 'react-native-controlled-mentions/dist/utils'; +import {Avatar} from '../common'; +import {normalize} from 'react-native-elements'; + +import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; + +type CommentTextFieldProps = { + containerStyle: StyleProp; + validateInput: any; + keyboardText: string; + partTypes: PartType[]; + renderMentionSuggestions: (mentionType: MentionPartType) => ReactFragment; + handleTextInputRef: (ref: TextInput) => null; + onChangeInput: (changedText: string) => null; + handleSelectionChange: ( + event: NativeSyntheticEvent, + ) => null; + parts: Part[]; + addComment: () => any; +}; + +const CommentTextField: FC = ({ + containerStyle, + validateInput, + keyboardText, + partTypes, + renderMentionSuggestions, + handleTextInputRef, + onChangeInput, + handleSelectionChange, + parts, + addComment, + ...textInputProps +}) => { + const {avatar} = useSelector((state: RootState) => state.user); + + return ( + + {validateInput(keyboardText) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + !one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) + : null} + + + + + + {parts.map(({text, partType, data}, index) => + partType ? ( + + {text} + + ) : ( + {text} + ), + )} + + + + + + + + + + {validateInput(keyboardText) + ? ( + partTypes.filter( + (one) => + isMentionPartType(one) && + one.renderSuggestions != null && + one.isBottomMentionSuggestionsRender, + ) as MentionPartType[] + ).map(renderMentionSuggestions) + : null} + + ); +}; + +const styles = StyleSheet.create({ + avatar: { + height: 35, + width: 35, + borderRadius: 30, + marginRight: 10, + marginLeft: '3%', + marginVertical: '2%', + }, + containerStyle: { + flexDirection: 'row', + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'center', + height: normalize(40), + }, + submitButton: { + height: 35, + width: 35, + backgroundColor: TAGG_LIGHT_BLUE, + borderRadius: 999, + justifyContent: 'center', + alignItems: 'center', + marginRight: '3%', + marginVertical: '2%', + alignSelf: 'flex-end', + }, + text: {flex: 1}, +}); + +export {CommentTextField}; diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index c37d2182..50762ac0 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -5,6 +5,7 @@ import React, { useMemo, useRef, useState, + ReactFragment, } from 'react'; import { NativeSyntheticEvent, @@ -51,7 +52,9 @@ type MentionInputControlledProps = Omit & { containerStyle?: StyleProp; - addComment?: () => any; + addComment?: () => any | null; + + NewText?: FC; }; const MentionInputControlled: FC = ({ @@ -68,6 +71,8 @@ const MentionInputControlled: FC = ({ addComment, + NewText, + ...textInputProps }) => { const textInput = useRef(null); @@ -76,8 +81,6 @@ const MentionInputControlled: FC = ({ const [keyboardText, setKeyboardText] = useState(''); - const {avatar} = useSelector((state: RootState) => state.user); - const validRegex = () => { if (partTypes.length === 0) { return /.*@[^ ]*$/; @@ -185,7 +188,21 @@ const MentionInputControlled: FC = ({ return validRegex().test(testString); }; - return ( + return NewText ? ( + + ) : ( {validateInput(keyboardText) ? ( @@ -198,35 +215,26 @@ const MentionInputControlled: FC = ({ ).map(renderMentionSuggestions) : null} - - - - - {parts.map(({text, partType, data}, index) => - partType ? ( - - {text} - - ) : ( - {text} - ), - )} - - - - - - - - + + + {parts.map(({text, partType, data}, index) => + partType ? ( + + {text} + + ) : ( + {text} + ), + )} + + {validateInput(keyboardText) ? ( @@ -242,34 +250,4 @@ const MentionInputControlled: FC = ({ ); }; -const styles = StyleSheet.create({ - avatar: { - height: 35, - width: 35, - borderRadius: 30, - marginRight: 10, - marginLeft: '3%', - marginVertical: '2%', - }, - containerStyle: { - flexDirection: 'row', - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'center', - height: normalize(40), - }, - submitButton: { - height: 35, - width: 35, - backgroundColor: TAGG_LIGHT_BLUE, - borderRadius: 999, - justifyContent: 'center', - alignItems: 'center', - marginRight: '3%', - marginVertical: '2%', - alignSelf: 'flex-end', - }, - text: {flex: 1}, -}); - -export {MentionInputControlled}; +export default MentionInputControlled; diff --git a/src/components/comments/index.ts b/src/components/comments/index.ts index 6293f799..653f594c 100644 --- a/src/components/comments/index.ts +++ b/src/components/comments/index.ts @@ -1,3 +1,4 @@ export {default as CommentsCount} from '../comments/CommentsCount'; export {default as CommentTile} from './CommentTile'; export {default as AddComment} from './AddComment'; +export {default as MentionInputControlled} from './MentionInputControlled'; diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx index 05095d16..755c668b 100644 --- a/src/screens/profile/CaptionScreen.tsx +++ b/src/screens/profile/CaptionScreen.tsx @@ -13,7 +13,7 @@ import { TouchableWithoutFeedback, View, } from 'react-native'; -import {MentionInput} from 'react-native-controlled-mentions'; +import {MentionInputControlled} from '../../components'; import {Button, normalize} from 'react-native-elements'; import {useDispatch, useSelector} from 'react-redux'; import FrontArrow from '../../assets/icons/front-arrow.svg'; @@ -161,7 +161,7 @@ const CaptionScreen: React.FC = ({route, navigation}) => { source={{uri: image.path}} resizeMode={'cover'} /> - Date: Tue, 15 Jun 2021 12:26:02 +0900 Subject: Fix yarn --- src/components/comments/AddComment.tsx | 6 +----- src/components/comments/CommentTextField.tsx | 21 +++------------------ src/components/comments/MentionInputControlled.tsx | 10 ---------- 3 files changed, 4 insertions(+), 33 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 3c0e9a0a..01325475 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -7,14 +7,11 @@ import { TextInput, View, } from 'react-native'; -import {TouchableOpacity} from 'react-native-gesture-handler'; -import {useDispatch, useSelector} from 'react-redux'; -import UpArrowIcon from '../../assets/icons/up_arrow.svg'; +import {useDispatch} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; import {CommentContext} from '../../screens/profile/MomentCommentsScreen'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; -import {RootState} from '../../store/rootreducer'; import {CommentThreadType, CommentType} from '../../types'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; @@ -33,7 +30,6 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { const [inReplyToMention, setInReplyToMention] = useState(''); const [comment, setComment] = useState(''); const [keyboardVisible, setKeyboardVisible] = useState(false); - const {avatar} = useSelector((state: RootState) => state.user); const dispatch = useDispatch(); const ref = useRef(null); const isReplyingToComment = diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index 61b489bb..3e97449c 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -1,46 +1,31 @@ -import React, { - FC, - MutableRefObject, - Ref, - useMemo, - useRef, - useState, - ReactFragment, -} from 'react'; +import React, {FC, ReactFragment} from 'react'; import { NativeSyntheticEvent, StyleSheet, StyleProp, Text, TextInput, - TextInputProps, TextInputSelectionChangeEventData, TouchableOpacity, View, ViewStyle, } from 'react-native'; -import {useDispatch, useSelector} from 'react-redux'; +import {useSelector} from 'react-redux'; import {TAGG_LIGHT_BLUE} from '../../constants'; +import {RootState} from '../../store/rootReducer'; import { Part, PartType, - PatternPartType, MentionPartType, - Suggestion, } from 'react-native-controlled-mentions/dist/types'; import { defaultMentionTextStyle, - generateValueFromPartsAndChangedText, - generateValueWithAddedSuggestion, - getMentionPartSuggestionKeywords, isMentionPartType, - parseValue, } from 'react-native-controlled-mentions/dist/utils'; import {Avatar} from '../common'; import {normalize} from 'react-native-elements'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; -import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; type CommentTextFieldProps = { containerStyle: StyleProp; diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index 50762ac0..de52d1c1 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -5,22 +5,17 @@ import React, { useMemo, useRef, useState, - ReactFragment, } from 'react'; import { NativeSyntheticEvent, - StyleSheet, StyleProp, Text, TextInput, TextInputProps, TextInputSelectionChangeEventData, - TouchableOpacity, View, ViewStyle, } from 'react-native'; -import {useDispatch, useSelector} from 'react-redux'; -import {TAGG_LIGHT_BLUE} from '../../constants'; import { PatternPartType, MentionPartType, @@ -34,11 +29,6 @@ import { isMentionPartType, parseValue, } from 'react-native-controlled-mentions/dist/utils'; -import {Avatar} from '../common'; -import {normalize} from 'react-native-elements'; - -import UpArrowIcon from '../../assets/icons/up_arrow.svg'; -import {SCREEN_WIDTH, SCREEN_HEIGHT} from '../../utils'; type PartType = MentionPartType | PatternPartType; -- cgit v1.2.3-70-g09d2 From 41a9ecf350ccc1567e7cbf9c0a3413565d2397f7 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 16 Jun 2021 23:11:49 +0900 Subject: Fix issue with background messing up appearance of AddComment elsewhere --- src/components/comments/AddComment.tsx | 2 +- src/components/moments/MomentCommentPreview.tsx | 2 +- src/screens/profile/MomentCommentsScreen.tsx | 5 ++--- 3 files changed, 4 insertions(+), 5 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 01325475..4a1822a3 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -130,7 +130,7 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { const styles = StyleSheet.create({ container: { - backgroundColor: '#f7f7f7', + // backgroundColor: '#f7f7f7', alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index f6b9d75b..d4729888 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -9,7 +9,7 @@ import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments'; interface MomentCommentPreviewProps { momentId: string; - commentsCount: number | null; + commentsCount: number; commentPreview: MomentCommentPreviewType | null; screenType: ScreenType; } diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx index 7dfe8ae9..402e5f44 100644 --- a/src/screens/profile/MomentCommentsScreen.tsx +++ b/src/screens/profile/MomentCommentsScreen.tsx @@ -48,9 +48,8 @@ const MomentCommentsScreen: React.FC = ({route}) => { React.useState(true); //Keeps track of the current comments object in focus so that the application knows which comment to post a reply to - const [commentTapped, setCommentTapped] = useState< - CommentType | CommentThreadType | undefined - >(); + const [commentTapped, setCommentTapped] = + useState(); useEffect(() => { navigation.setOptions({ -- cgit v1.2.3-70-g09d2 From 902ad06d502024e1e42187887e07a7ac59d662e8 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 16 Jun 2021 23:14:13 +0900 Subject: Remove some comments --- src/components/comments/AddComment.tsx | 8 -------- 1 file changed, 8 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index 4a1822a3..eda04752 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -130,31 +130,23 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { const styles = StyleSheet.create({ container: { - // backgroundColor: '#f7f7f7', alignItems: 'center', justifyContent: 'center', width: SCREEN_WIDTH, }, textContainer: { width: '95%', - // flexDirection: 'row', backgroundColor: '#e8e8e8', alignItems: 'center', - // alignSelf: 'center', justifyContent: 'space-between', - // justifyContent: 'center', margin: '3%', borderRadius: 25, - // borderWidth: 1, - // flex: 1, height: normalize(45), }, text: { flex: 1, padding: '1%', - // marginHorizontal: '1%', maxHeight: 100, - // borderWidth: 1, }, avatar: { height: 35, -- cgit v1.2.3-70-g09d2 From 8560936e0dc21ee2d06677c766a0bbcbc93b6de0 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 16 Jun 2021 23:53:03 +0900 Subject: Further merges with master --- src/components/comments/AddComment.tsx | 84 ++++++++++++++-------- src/components/comments/CommentTextField.tsx | 28 ++++++-- src/components/comments/MentionInputControlled.tsx | 15 ++++ 3 files changed, 94 insertions(+), 33 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index eda04752..a510c355 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -22,9 +22,20 @@ import {normalize} from 'react-native-elements'; export interface AddCommentProps { momentId: string; placeholderText: string; + callback?: (message: string) => void; + onFocus?: () => void; + isKeyboardAvoiding?: boolean; + theme?: 'dark' | 'white'; } -const AddComment: React.FC = ({momentId, placeholderText}) => { +const AddComment: React.FC = ({ + momentId, + placeholderText, + callback = (_) => null, + onFocus = () => null, + isKeyboardAvoiding = true, + theme = 'white', +}) => { const {setShouldUpdateAllComments, commentTapped} = useContext(CommentContext); const [inReplyToMention, setInReplyToMention] = useState(''); @@ -47,13 +58,15 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { if (trimmed === '') { return; } + const message = inReplyToMention + trimmed; const postedComment = await postComment( - inReplyToMention + trimmed, + message, objectId, isReplyingToComment || isReplyingToReply, ); if (postedComment) { + callback(message); setComment(''); setInReplyToMention(''); @@ -97,41 +110,56 @@ const AddComment: React.FC = ({momentId, placeholderText}) => { } }, [isReplyingToComment, isReplyingToReply, commentTapped]); - return ( + const mainContent = () => ( + + + { + // skipping the `inReplyToMention` text + setComment( + newText.substring(inReplyToMention.length, newText.length), + ); + }} + inputRef={ref} + partTypes={mentionPartTypes('blue', 'comment')} + addComment={addComment} + NewText={CommentTextField} + theme={theme} + keyboardVisible={keyboardVisible} + comment={comment} + /> + + + ); + + return isKeyboardAvoiding ? ( - - - { - // skipping the `inReplyToMention` text - setComment( - newText.substring(inReplyToMention.length, newText.length), - ); - }} - inputRef={ref} - partTypes={mentionPartTypes('blue', 'comment')} - addComment={addComment} - NewText={CommentTextField} - /> - - + {mainContent()} + ) : ( + mainContent() ); }; const styles = StyleSheet.create({ - container: { + containerDark: { + alignItems: 'center', + width: SCREEN_WIDTH, + }, + containerWhite: { + backgroundColor: '#f7f7f7', alignItems: 'center', - justifyContent: 'center', width: SCREEN_WIDTH, }, textContainer: { diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index 3e97449c..a3a14ec8 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -40,6 +40,9 @@ type CommentTextFieldProps = { ) => null; parts: Part[]; addComment: () => any; + theme?: 'dark' | 'white'; + keyboardVisible?: boolean; + comment?: string; }; const CommentTextField: FC = ({ @@ -53,6 +56,9 @@ const CommentTextField: FC = ({ handleSelectionChange, parts, addComment, + theme = 'white', + keyboardVisible = true, + comment = '', ...textInputProps }) => { const {avatar} = useSelector((state: RootState) => state.user); @@ -93,11 +99,20 @@ const CommentTextField: FC = ({ )} - - - - - + {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && ( + + + + + + )} {validateInput(keyboardText) @@ -130,6 +145,9 @@ const styles = StyleSheet.create({ justifyContent: 'center', height: normalize(40), }, + greyButton: { + backgroundColor: 'grey', + }, submitButton: { height: 35, width: 35, diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index de52d1c1..0965e318 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -45,6 +45,12 @@ type MentionInputControlledProps = Omit & { addComment?: () => any | null; NewText?: FC; + + theme?: 'dark' | 'white'; + + keyboardVisible?: boolean; + + comment?: string; }; const MentionInputControlled: FC = ({ @@ -63,6 +69,12 @@ const MentionInputControlled: FC = ({ NewText, + theme = 'white', + + keyboardVisible = true, + + comment = '', + ...textInputProps }) => { const textInput = useRef(null); @@ -191,6 +203,9 @@ const MentionInputControlled: FC = ({ handleSelectionChange={handleSelectionChange} parts={parts} addComment={addComment} + theme={theme} + keyboardVisible={keyboardVisible} + comment={comment} /> ) : ( -- cgit v1.2.3-70-g09d2 From 867484bac72a64231e57f96fdc4ce813930f75f6 Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Wed, 16 Jun 2021 23:57:21 +0900 Subject: Rework some sizes, more closely match master --- src/components/comments/AddComment.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index a510c355..fd7d819a 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -169,11 +169,11 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', margin: '3%', borderRadius: 25, - height: normalize(45), + height: normalize(40), }, text: { flex: 1, - padding: '1%', + // padding: '1%', maxHeight: 100, }, avatar: { -- cgit v1.2.3-70-g09d2 From 6fcd7b41cd763e95733187c6c4d48ddb6e9bd01a Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Thu, 17 Jun 2021 16:21:57 +0900 Subject: Made edits --- src/components/comments/AddComment.tsx | 6 ++---- src/components/comments/CommentTextField.tsx | 23 +++++++++++------------ src/components/common/TaggTypeahead.tsx | 8 +------- src/components/moments/MomentCommentPreview.tsx | 2 +- 4 files changed, 15 insertions(+), 24 deletions(-) (limited to 'src/components/comments/AddComment.tsx') diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx index fd7d819a..8a4ec082 100644 --- a/src/components/comments/AddComment.tsx +++ b/src/components/comments/AddComment.tsx @@ -13,11 +13,10 @@ import {CommentContext} from '../../screens/profile/MomentCommentsScreen'; import {postComment} from '../../services'; import {updateReplyPosted} from '../../store/actions'; import {CommentThreadType, CommentType} from '../../types'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; +import {SCREEN_HEIGHT, SCREEN_WIDTH, normalize} from '../../utils'; import {mentionPartTypes} from '../../utils/comments'; import {CommentTextField} from './CommentTextField'; import MentionInputControlled from './MentionInputControlled'; -import {normalize} from 'react-native-elements'; export interface AddCommentProps { momentId: string; @@ -169,11 +168,10 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', margin: '3%', borderRadius: 25, - height: normalize(40), + height: normalize(45), }, text: { flex: 1, - // padding: '1%', maxHeight: 100, }, avatar: { diff --git a/src/components/comments/CommentTextField.tsx b/src/components/comments/CommentTextField.tsx index a3a14ec8..6e92329c 100644 --- a/src/components/comments/CommentTextField.tsx +++ b/src/components/comments/CommentTextField.tsx @@ -23,7 +23,7 @@ import { isMentionPartType, } from 'react-native-controlled-mentions/dist/utils'; import {Avatar} from '../common'; -import {normalize} from 'react-native-elements'; +import {normalize} from '../../utils'; import UpArrowIcon from '../../assets/icons/up_arrow.svg'; @@ -115,16 +115,15 @@ const CommentTextField: FC = ({ )} - {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)} ); }; @@ -143,7 +142,7 @@ const styles = StyleSheet.create({ alignSelf: 'center', alignItems: 'center', justifyContent: 'center', - height: normalize(40), + height: normalize(45), }, greyButton: { backgroundColor: 'grey', diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 6b3df559..7967fdbc 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -23,13 +23,7 @@ const TaggTypeahead: React.FC = ({ const {friends} = useSelector((state: RootState) => state.friends); const [results, setResults] = useState([]); const [height, setHeight] = useState(0); - const [margin, setMargin] = useState(0); - - useEffect(() => { - if (component === 'comment') { - setMargin(-10); - } - }, [component]); + const margin = component === 'comment' ? -10 : 0; useEffect(() => { if (keyword === '') { diff --git a/src/components/moments/MomentCommentPreview.tsx b/src/components/moments/MomentCommentPreview.tsx index d4729888..232568f1 100644 --- a/src/components/moments/MomentCommentPreview.tsx +++ b/src/components/moments/MomentCommentPreview.tsx @@ -52,7 +52,7 @@ const MomentCommentPreview: React.FC = ({ {renderTextWithMentions({ value: commentPreview.comment, styles: styles.normalFont, - partTypes: mentionPartTypes('white'), + partTypes: mentionPartTypes('white', 'comment'), onPress: (user: UserType) => navigateToProfile( state, -- cgit v1.2.3-70-g09d2