All files / atlas/src/components RoutingPanel.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// import { FontAwesome } from "@expo/vector-icons";
// import React, { LegacyRef, useRef } from "react"
// import { useState } from "react";
// import { MutableRefObject } from "react";
// import { Animated, View, Text, TouchableOpacity, FlatList, ListRenderItem } from "react-native";
// import SlidingUpPanel from "rn-sliding-up-panel"
// import { Landmark, LMComment } from "../types";
 
// export type LandmarkDetailsProps = {
//     selectedLandmark?: Landmark
//     panelRef: MutableRefObject<SlidingUpPanel> 
// }
 
// export type CommentProps = {
//     comment: LMComment
// }
 
// const Comment: React.FC<CommentProps> = ({comment}) => (
//     <View>
//         <Text>{comment.text}</Text>
//     </View>
// )
 
// export const RoutingPanel: React.FC<LandmarkDetailsProps> = ({selectedLandmark, panelRef}) => {
//     const [landmark, setLandmark] = useState<Landmark>();
    
//     let panelPosition = new Animated.Value(0);
 
//     const renderComment:ListRenderItem<LMComment> = ({item}) => (
//         <Comment comment={item} />
//     )
 
//     return (
//         <SlidingUpPanel 
//             animatedValue={panelPosition}
//             ref={panelRef as LegacyRef<SlidingUpPanel>} 
//             showBackdrop={false} 
//             allowDragging={true} 
//             draggableRange={{top: 500, bottom: 0}}
//             snappingPoints={[0, 150, 500]}>
//             <View style={{height: '100%', paddingTop: 10, paddingHorizontal: 20, backgroundColor: '#df3f3f'}}>
//                 <View style={{ marginBottom: 20, borderWidth: 2, borderRadius: 20, width: 50, height: 1, alignSelf: 'center', borderColor: 'white'}} >
//                 </View>
//                 <View style={{ flexDirection: 'row', marginBottom: 20, justifyContent: "space-between"}}>
//                     <Text style={{color: 'white' }}>{selectedLandmark?.title?.toUpperCase()}</Text>
//                     <FontAwesome name="close" color="white" size={20} onPress={() => panelRef.current.hide()}/>
//                 </View>
//                 <Text style={{color: 'white', marginBottom: 50}}>{selectedLandmark?.description}</Text>
//                 <Text style={{color: 'white', marginBottom: 50}}>Comments</Text>
//                 <View>
 
//                 </View>
//                 <TouchableOpacity>
//                 <FlatList<LMComment> 
//                     data={[
//                         {id: '1', text: 'Hello', poster: 'chase'}, {id: '3', text: 'Hello', poster: 'chase'}, {id: '2', text: 'Hello', poster: 'chase'},
//                         {id: '4', text: 'Hello', poster: 'chase'}, {id: '5', text: 'Hello', poster: 'chase'}, {id: '6', text: 'Hello', poster: 'chase'},
//                         {id: '9', text: 'Hello', poster: 'chase'}, {id: '8', text: 'Hello', poster: 'chase'}, {id: '7', text: 'Hello', poster: 'chase'},
//                         {id: '12', text: 'Hello', poster: 'chase'}, {id: '10', text: 'Hello', poster: 'chase'}, {id: '11', text: 'Hello', poster: 'chase'},
//                     ]} 
//                     renderItem={renderComment}
//                     style={{backgroundColor: 'white', height: 200}}/>
//                 </TouchableOpacity>
//             </View>
//         </SlidingUpPanel>)
// }