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/MentionInputControlled.tsx | 93 +++++++++++++++++----- 1 file changed, 73 insertions(+), 20 deletions(-) (limited to 'src/components/comments/MentionInputControlled.tsx') diff --git a/src/components/comments/MentionInputControlled.tsx b/src/components/comments/MentionInputControlled.tsx index 2fd2b41d..c52f3286 100644 --- a/src/components/comments/MentionInputControlled.tsx +++ b/src/components/comments/MentionInputControlled.tsx @@ -1,11 +1,15 @@ import React, {FC, MutableRefObject, useMemo, useRef, useState} from 'react'; import { NativeSyntheticEvent, + StyleSheet, Text, TextInput, TextInputSelectionChangeEventData, + TouchableOpacity, View, } from 'react-native'; +import {useDispatch, useSelector} from 'react-redux'; +import {TAGG_LIGHT_BLUE} from '../../constants'; import { MentionInputProps, MentionPartType, @@ -19,6 +23,10 @@ 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'; const MentionInputControlled: FC = ({ value, @@ -32,6 +40,8 @@ const MentionInputControlled: FC = ({ onSelectionChange, + addComment, + ...textInputProps }) => { const textInput = useRef(null); @@ -40,6 +50,8 @@ const MentionInputControlled: FC = ({ const [keyboardText, setKeyboardText] = useState(''); + const {avatar} = useSelector((state: RootState) => state.user); + const validRegex = () => { if (partTypes.length === 0) { return /.*@[^ ]*$/; @@ -160,26 +172,35 @@ 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) ? ( @@ -195,4 +216,36 @@ const MentionInputControlled: FC = ({ ); }; +const styles = StyleSheet.create({ + avatar: { + height: 35, + width: 35, + borderRadius: 30, + marginRight: 10, + marginLeft: '3%', + marginVertical: '2%', + // alignSelf: 'flex-end', + }, + containerStyle: { + flexDirection: 'row', + alignSelf: 'center', + alignItems: 'center', + justifyContent: 'center', + // borderWidth: 1, + 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}; -- 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/MentionInputControlled.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/MentionInputControlled.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 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/MentionInputControlled.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/MentionInputControlled.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 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/MentionInputControlled.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