From a249f2d027c9cd5d7f20602cf79ec2265f60a54c Mon Sep 17 00:00:00 2001 From: Brian Kim Date: Fri, 11 Jun 2021 01:59:02 +0900 Subject: Add check for contacts permission --- src/screens/suggestedPeople/SuggestedPeopleScreen.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx index c65d2012..39d98bcc 100644 --- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx +++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx @@ -3,6 +3,7 @@ import {useFocusEffect, useNavigation} from '@react-navigation/native'; import React, {useCallback, useEffect, useRef, useState} from 'react'; import {FlatList, RefreshControl, StatusBar, ViewToken} from 'react-native'; import {useDispatch, useSelector, useStore} from 'react-redux'; +import {checkPermission} from 'react-native-contacts'; import {Background, TabsGradient, TaggLoadingIndicator} from '../../components'; import {SP_PAGE_SIZE} from '../../constants'; import {getSuggestedPeople} from '../../services/SuggestedPeopleService'; @@ -59,11 +60,17 @@ const SuggestedPeopleScreen: React.FC = () => { const stausBarRef = useRef(hideStatusBar); useEffect(() => { - AsyncStorage.getItem('respondedToAccessContacts').then((value) => { - if (value === null) { + const handlePageChange = async () => { + const checkAsync = await AsyncStorage.getItem( + 'respondedToAccessContacts', + ); + const permission = await checkPermission(); + if (checkAsync === null && permission !== 'authorized') { navigation.navigate('RequestContactsAccess'); } - }); + }; + + handlePageChange(); }, []); // loads data and append it to users based on current page -- cgit v1.2.3-70-g09d2 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 +++-- src/components/comments/MentionInputControlled.tsx | 93 +++++++++++++++++----- src/components/common/TaggTypeahead.tsx | 10 ++- 3 files changed, 90 insertions(+), 32 deletions(-) (limited to 'src') 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, 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}; 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 = ({ 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, }, }); -- 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') 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') 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') 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') 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') 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 f3134bbe9b8bc84a906ca1dac46959b360dd243f Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 16 Jun 2021 01:58:59 -0700 Subject: image cropper dump --- ios/Podfile | 1 + ios/Podfile.lock | 37 +++++++++---- package.json | 4 +- src/components/comments/ImageCropper.tsx | 94 ++++++++++++++++++++++++++++++++ src/components/comments/index.ts | 1 + src/components/moments/Moment.tsx | 10 +--- src/routes/main/MainStackNavigator.tsx | 10 +++- src/routes/main/MainStackScreen.tsx | 8 +++ src/screens/profile/CaptionScreen.tsx | 2 +- yarn.lock | 10 ++++ 10 files changed, 155 insertions(+), 22 deletions(-) create mode 100644 src/components/comments/ImageCropper.tsx (limited to 'src') diff --git a/ios/Podfile b/ios/Podfile index 4eca4100..58c388c2 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -5,6 +5,7 @@ platform :ios, '10.0' target 'Frontend' do config = use_native_modules! + pod 'react-native-image-crop-tools', :path => '../node_modules/react-native-image-crop-tools' use_react_native!(:path => config["reactNativePath"]) target 'FrontendTests' do diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 7d6ce3a8..eec8a988 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -134,24 +134,24 @@ PODS: - GoogleUtilities/Environment (~> 7.2) - nanopb (~> 2.30907.0) - PromisesObjC (~> 1.2) - - GoogleUtilities/AppDelegateSwizzler (7.4.0): + - GoogleUtilities/AppDelegateSwizzler (7.4.1): - GoogleUtilities/Environment - GoogleUtilities/Logger - GoogleUtilities/Network - - GoogleUtilities/Environment (7.4.0): + - GoogleUtilities/Environment (7.4.1): - PromisesObjC (~> 1.2) - - GoogleUtilities/Logger (7.4.0): + - GoogleUtilities/Logger (7.4.1): - GoogleUtilities/Environment - - GoogleUtilities/MethodSwizzler (7.4.0): + - GoogleUtilities/MethodSwizzler (7.4.1): - GoogleUtilities/Logger - - GoogleUtilities/Network (7.4.0): + - GoogleUtilities/Network (7.4.1): - GoogleUtilities/Logger - "GoogleUtilities/NSData+zlib" - GoogleUtilities/Reachability - - "GoogleUtilities/NSData+zlib (7.4.0)" - - GoogleUtilities/Reachability (7.4.0): + - "GoogleUtilities/NSData+zlib (7.4.1)" + - GoogleUtilities/Reachability (7.4.1): - GoogleUtilities/Logger - - GoogleUtilities/UserDefaults (7.4.0): + - GoogleUtilities/UserDefaults (7.4.1): - GoogleUtilities/Logger - libevent (2.1.12) - nanopb (2.30907.0): @@ -337,6 +337,11 @@ PODS: - React-Core - react-native-document-picker (5.1.0): - React-Core + - react-native-image-crop-tools (1.3.6): + - React + - TOCropViewController (= 2.5.3) + - react-native-image-picker (4.0.3): + - React-Core - react-native-image-resizer (1.4.4): - React-Core - react-native-netinfo (6.0.0): @@ -478,7 +483,7 @@ PODS: - React - RNVectorIcons (7.1.0): - React - - TOCropViewController (2.6.0) + - TOCropViewController (2.5.3) - Yoga (1.14.0) - YogaKit (1.18.1): - Yoga (~> 1.14) @@ -527,6 +532,8 @@ DEPENDENCIES: - react-native-contacts (from `../node_modules/react-native-contacts`) - react-native-date-picker (from `../node_modules/react-native-date-picker`) - react-native-document-picker (from `../node_modules/react-native-document-picker`) + - react-native-image-crop-tools (from `../node_modules/react-native-image-crop-tools`) + - react-native-image-picker (from `../node_modules/react-native-image-picker`) - react-native-image-resizer (from `../node_modules/react-native-image-resizer`) - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) @@ -631,6 +638,10 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native-date-picker" react-native-document-picker: :path: "../node_modules/react-native-document-picker" + react-native-image-crop-tools: + :path: "../node_modules/react-native-image-crop-tools" + react-native-image-picker: + :path: "../node_modules/react-native-image-picker" react-native-image-resizer: :path: "../node_modules/react-native-image-resizer" react-native-netinfo: @@ -721,7 +732,7 @@ SPEC CHECKSUMS: glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3 GoogleAppMeasurement: c542a2feaac9ab98fd074e8f1a02c3585bbfbd47 GoogleDataTransport: 8b0e733ea77c9218778e5a9e34ba9508b8328939 - GoogleUtilities: 284cddc7fffc14ae1907efb6f78ab95c1fccaedc + GoogleUtilities: f8a43108b38a68eebe8b3540e1f4f2d28843ce20 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 nanopb: 59221d7f958fb711001e6a449489542d92ae113e OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b @@ -741,6 +752,8 @@ SPEC CHECKSUMS: react-native-contacts: 931baebf460125c5a7bbce1c4521a96c69795123 react-native-date-picker: 2dfef0fcb6c36d078bc62f5de3ca79eff7f42486 react-native-document-picker: f2f73db94328c84e22144e369fb4a3ede47bc1f5 + react-native-image-crop-tools: 5d254e217773e75bfc09b2c372a8b6a027f0628b + react-native-image-picker: 474cf2c33c2b6671da53d293a16c97995f0aec15 react-native-image-resizer: 13ac4af788f88af36d0353a1324401ebabd04fe4 react-native-netinfo: e849fc21ca2f4128a5726c801a82fc6f4a6db50d react-native-safe-area-context: f0906bf8bc9835ac9a9d3f97e8bde2a997d8da79 @@ -772,10 +785,10 @@ SPEC CHECKSUMS: RNShare: 4df87d1791f50a2c7b1d89432fb9bbb7c02a9c9a RNSVG: 551acb6562324b1d52a4e0758f7ca0ec234e278f RNVectorIcons: bc69e6a278b14842063605de32bec61f0b251a59 - TOCropViewController: 3105367e808b7d3d886a74ff59bf4804e7d3ab38 + TOCropViewController: 20a14b6a7a098308bf369e7c8d700dc983a974e6 Yoga: 7d13633d129fd179e01b8953d38d47be90db185a YogaKit: f782866e155069a2cca2517aafea43200b01fd5a -PODFILE CHECKSUM: e24412577971b52c81c348785bf01cb915155d6d +PODFILE CHECKSUM: 33ee4093aebb548655b60536fb24108b5ca0d547 COCOAPODS: 1.10.1 diff --git a/package.json b/package.json index ea8c946a..5b07e8b3 100644 --- a/package.json +++ b/package.json @@ -45,6 +45,8 @@ "react-native-haptic-feedback": "^1.11.0", "react-native-hyperlink": "^0.0.19", "react-native-image-crop-picker": "^0.36.0", + "react-native-image-crop-tools": "^1.3.6", + "react-native-image-picker": "^4.0.3", "react-native-image-resizer": "^1.4.4", "react-native-inappbrowser-reborn": "^3.5.0", "react-native-linear-gradient": "^2.5.6", @@ -105,4 +107,4 @@ "./node_modules/react-native-gesture-handler/jestSetup.js" ] } -} \ No newline at end of file +} diff --git a/src/components/comments/ImageCropper.tsx b/src/components/comments/ImageCropper.tsx new file mode 100644 index 00000000..7d4eabff --- /dev/null +++ b/src/components/comments/ImageCropper.tsx @@ -0,0 +1,94 @@ +import {RouteProp} from '@react-navigation/core'; +import {useFocusEffect} from '@react-navigation/native'; +import {StackNavigationProp} from '@react-navigation/stack'; +import React, {useCallback, useRef, useState} from 'react'; +import {Button, StatusBar, View} from 'react-native'; +import {CropView} from 'react-native-image-crop-tools'; +import {MainStackParams} from '../../routes'; +import {HeaderHeight} from '../../utils'; + +type ImageCropperRouteProps = RouteProp; + +type ImageCropperNavigationProps = StackNavigationProp< + MainStackParams, + 'ImageCropper' +>; + +interface ImageCropperProps { + route: ImageCropperRouteProps; + navigation: ImageCropperNavigationProps; +} + +const ImageCropper: React.FC = ({route, navigation}) => { + const {image, title, screenType} = route.params; + const cropViewRef = useRef(); + const aspectRatios = [ + {width: 9, height: 16}, + {width: 4, height: 5}, + {width: 1, height: 1}, + ]; + const [aspectRatioIndex, setAspectRatioIndex] = useState(0); + //Function to get the parent TabBar navigator and setting the option for this screen. + useFocusEffect( + useCallback(() => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: false, + }); + return () => { + navigation.dangerouslyGetParent()?.setOptions({ + tabBarVisible: true, + }); + }; + }, [navigation]), + ); + return ( + <> + + +