diff options
| -rw-r--r-- | src/components/comments/AddComment.tsx | 19 | ||||
| -rw-r--r-- | src/components/comments/MentionInputControlled.tsx | 93 | ||||
| -rw-r--r-- | src/components/common/TaggTypeahead.tsx | 10 |
3 files changed, 90 insertions, 32 deletions
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<AddCommentProps> = ({momentId, placeholderText}) => { keyboardVisible ? styles.whiteBackround : {}, ]}> <View style={styles.textContainer}> - <Avatar style={styles.avatar} uri={avatar} /> <MentionInputControlled containerStyle={styles.text} placeholder={placeholderText} @@ -123,12 +123,8 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => { }} inputRef={ref} partTypes={mentionPartTypes('blue')} + addComment={addComment} /> - <View style={styles.submitButton}> - <TouchableOpacity style={styles.submitButton} onPress={addComment}> - <UpArrowIcon width={35} height={35} color={'white'} /> - </TouchableOpacity> - </View> </View> </View> </KeyboardAvoidingView> @@ -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, 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<MentionInputProps> = ({ value, @@ -32,6 +40,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({ onSelectionChange, + addComment, + ...textInputProps }) => { const textInput = useRef<TextInput | null>(null); @@ -40,6 +50,8 @@ const MentionInputControlled: FC<MentionInputProps> = ({ const [keyboardText, setKeyboardText] = useState<string>(''); + const {avatar} = useSelector((state: RootState) => state.user); + const validRegex = () => { if (partTypes.length === 0) { return /.*@[^ ]*$/; @@ -160,26 +172,35 @@ const MentionInputControlled: FC<MentionInputProps> = ({ ).map(renderMentionSuggestions) : null} - <TextInput - multiline - {...textInputProps} - ref={handleTextInputRef} - onChangeText={onChangeInput} - 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> - ), - )} - </Text> - </TextInput> + <View style={styles.containerStyle}> + <Avatar style={styles.avatar} uri={avatar} /> + <TextInput + multiline + {...textInputProps} + ref={handleTextInputRef} + onChangeText={onChangeInput} + onSelectionChange={handleSelectionChange} + style={styles.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> + <View style={styles.submitButton}> + <TouchableOpacity style={styles.submitButton} onPress={addComment}> + <UpArrowIcon width={35} height={35} color={'white'} /> + </TouchableOpacity> + </View> + </View> {validateInput(keyboardText) ? ( @@ -195,4 +216,36 @@ const MentionInputControlled: FC<MentionInputProps> = ({ ); }; +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}; diff --git a/src/components/common/TaggTypeahead.tsx b/src/components/common/TaggTypeahead.tsx index 747e0bb5..7379b5e0 100644 --- a/src/components/common/TaggTypeahead.tsx +++ b/src/components/common/TaggTypeahead.tsx @@ -67,15 +67,17 @@ const TaggTypeahead: React.FC<MentionSuggestionsProps> = ({ const styles = StyleSheet.create({ container: { - marginLeft: SCREEN_WIDTH * 0.05, - width: SCREEN_WIDTH * 0.9, + // marginLeft: SCREEN_WIDTH * 0.05, + // marginLeft: 20, + // margin: 50, + width: SCREEN_WIDTH, maxHeight: 264, - borderRadius: 10, + // borderRadius: 10, backgroundColor: 'white', position: 'absolute', alignSelf: 'center', zIndex: 1, - borderWidth: 1, + // borderWidth: 1, }, }); |