Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 67 68 69 70 71 72 73 74 75 76 77 78 79 80 | /* Copyright (C) Click & Push Accessibility, Inc - All Rights Reserved * Unauthorized copying of this file, via any medium is strictly prohibited * Proprietary and confidential * Written and maintained by the Click & Push Development team * <dev@clicknpush.ca>, January 2022 */ import { FontAwesome } from "@expo/vector-icons"; import * as ImagePicker from 'expo-image-picker'; import { ImageInfo } from "expo-image-picker/build/ImagePicker.types"; import React, { memo, useEffect, useState } from "react"; import { ActivityIndicator, Dimensions, Image, Platform, SafeAreaView, Text, TextInput, TouchableOpacity, View } from 'react-native'; import { FlatList, ScrollView } from "react-native-gesture-handler"; import Modal from 'react-native-modal'; import { checkMultiple, PERMISSIONS, RESULTS } from "react-native-permissions"; import Picker from 'react-native-picker-select'; import { Landmark, LMPhoto, useLandmarks } from "../../../hooks/useLandmarks"; import { colors, getMediaPermissions, lmTypes } from "../../../utils/GlobalUtils"; import Badge from "../../Badge"; import { IconButton, SecondaryButton } from "../../Buttons"; import { PhotoPicker } from "../../PhotoPicker"; /** * Props for the {@link AddLandmarkPanel} component. */ export interface NearbyLandmarksPanelProps { toggleAlertedLmPanel: (state: boolean) => void nearbyLmPanelVisible: boolean nearbyLandmarks?: Landmark[]; focusLandmark: (landmark: Landmark) => void } /** * Component that renders a form for adding a new {@link Landmark}. Contained within a [react-native-modal]{@link https://github.com/react-native-modal/react-native-modal}. * @component * @category Map */ const NearbyLandmarksPanel: React.FC<NearbyLandmarksPanelProps> = ({nearbyLandmarks: alertedLandmarks, toggleAlertedLmPanel: toggleNearbyLmPanel, nearbyLmPanelVisible: alertedLmPanelVisible, focusLandmark}) => { const [selectedLm, setSelectedlm] = useState<Landmark>() const switchToLandmarkDetails = () => { Iif (selectedLm) { focusLandmark(selectedLm) setSelectedlm(undefined) } } const selectLm = (lm: Landmark) => { setSelectedlm(lm) toggleNearbyLmPanel(false) } return ( <Modal useNativeDriver={true} useNativeDriverForBackdrop={true} onModalHide={() => switchToLandmarkDetails()} onBackdropPress={() => toggleNearbyLmPanel(false)} style={{justifyContent: "flex-end", height: '100%', margin: 0}} isVisible={alertedLmPanelVisible} > <SafeAreaView style={{backgroundColor: colors.red, height: Dimensions.get('window').height * .6}}> <ScrollView> {alertedLandmarks.map((lm, i) => { return ( <TouchableOpacity onPress={() => selectLm(lm)} key={i} style={{flexDirection: 'row', alignItems: 'center', paddingVertical: 10, marginHorizontal: 15, justifyContent: 'space-between', borderBottomWidth: 1, borderColor: 'lightgray'}}> <Image source={lmTypes[lm.landmark_type].image}/> <Text style={{fontSize: 20, color: 'white'}}>{lmTypes[lm.landmark_type].label.toUpperCase()}</Text> <View style={{flexDirection: 'row', alignItems: 'center'}}> <Text style={{marginRight: 5, color: 'white', fontSize: 20}}>{lm.rating}</Text> <FontAwesome name="thumbs-up" size={20} color='white' /> </View> </TouchableOpacity> ) })} </ScrollView> </SafeAreaView> </Modal> ) } export default memo(NearbyLandmarksPanel); |