diff options
Diffstat (limited to 'src/components/taggs/TaggDraggable.tsx')
-rw-r--r-- | src/components/taggs/TaggDraggable.tsx | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/src/components/taggs/TaggDraggable.tsx b/src/components/taggs/TaggDraggable.tsx new file mode 100644 index 00000000..e4448642 --- /dev/null +++ b/src/components/taggs/TaggDraggable.tsx @@ -0,0 +1,129 @@ +import {useNavigation} from '@react-navigation/native'; +import React, {useEffect, useRef} from 'react'; +import { + Image, + StyleSheet, + Text, + TouchableOpacity, + TouchableWithoutFeedback, + View, +} from 'react-native'; +import {useDispatch, useSelector} from 'react-redux'; +import Avatar from '../../components/common/Avatar'; +import {RootState} from '../../store/rootReducer'; +import {ProfilePreviewType, ScreenType, UserType} from '../../types'; +import {normalize} from '../../utils'; +import {navigateToProfile} from '../../utils/users'; + +interface TaggDraggableProps { + taggedUser: ProfilePreviewType; + editingView: boolean; + deleteFromList: () => void; + setStart: Function; +} + +const TaggDraggable: React.FC<TaggDraggableProps> = ( + props: TaggDraggableProps, +) => { + const navigation = useNavigation(); + const dispatch = useDispatch(); + const state = useSelector((rs: RootState) => rs); + const {taggedUser, editingView, deleteFromList, setStart} = props; + let uriX = require('../../assets/images/draggableX.png'); + let uriTip = require('../../assets/images/Tagg-Triangle.png'); + + const draggableRef = useRef(null); + + useEffect(() => { + draggableRef.current.measure((width: number, height: number) => { + setStart([width, height]); + }); + }, []); + + const user: UserType = { + userId: taggedUser.id, + username: taggedUser.username, + }; + + return ( + <TouchableWithoutFeedback> + <View style={styles.container}> + <Image style={styles.imageTip} source={uriTip} /> + <TouchableOpacity + onPressIn={() => + navigateToProfile( + state, + dispatch, + navigation, + ScreenType.Profile, + user, + ) + } + disabled={editingView} + style={styles.content} + ref={draggableRef}> + <Avatar style={styles.avatar} uri={taggedUser.thumbnail_url} /> + <Text style={editingView ? styles.buttonTitle : styles.buttonTitleX}> + @{taggedUser.username} + </Text> + {editingView && ( + <TouchableOpacity + disabled={false} + onPressIn={deleteFromList} + style={styles.imageX}> + <Image style={styles.imageX} source={uriX} /> + </TouchableOpacity> + )} + </TouchableOpacity> + </View> + </TouchableWithoutFeedback> + ); +}; + +const styles = StyleSheet.create({ + imageTip: { + height: normalize(12), + aspectRatio: 12 / 8, + }, + container: { + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + buttonTitle: { + color: 'white', + fontSize: normalize(11), + fontWeight: '700', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '1%', + }, + buttonTitleX: { + color: 'white', + fontSize: normalize(11), + fontWeight: '700', + lineHeight: normalize(13.13), + letterSpacing: normalize(0.6), + paddingHorizontal: '1%', + }, + avatar: { + height: normalize(20), + width: normalize(20), + borderRadius: normalize(20) / 2, + }, + imageX: { + width: normalize(15), + height: normalize(15), + }, + content: { + justifyContent: 'space-evenly', + alignItems: 'center', + flexDirection: 'row', + borderRadius: 20, + paddingVertical: normalize(5), + paddingHorizontal: normalize(8), + backgroundColor: 'rgba(0, 0, 0, 0.8)', + }, +}); + +export default TaggDraggable; |