aboutsummaryrefslogtreecommitdiff
path: root/src/components/camera/buttons.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/camera/buttons.tsx')
-rw-r--r--src/components/camera/buttons.tsx152
1 files changed, 0 insertions, 152 deletions
diff --git a/src/components/camera/buttons.tsx b/src/components/camera/buttons.tsx
deleted file mode 100644
index 936a663d..00000000
--- a/src/components/camera/buttons.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import {useNavigation} from '@react-navigation/native';
-import React, {Dispatch, SetStateAction} from 'react';
-import {Image, StyleSheet, Text, TouchableOpacity} from 'react-native';
-import {CameraType, FlashMode} from 'react-native-camera';
-import FlashOffIcon from '../../assets/icons/camera/flash-off.svg';
-import FlashOnIcon from '../../assets/icons/camera/flash-on.svg';
-import FlipIcon from '../../assets/icons/camera/flip.svg';
-import SaveIcon from '../../assets/icons/camera/save.svg';
-import {ScreenType} from '../../types';
-import {downloadImage, navigateToImagePicker} from '../../utils/camera';
-import {normalize, SCREEN_WIDTH} from '../../utils/layouts';
-
-interface GalleryIconProps {
- screenType: ScreenType;
- title: string;
- mostRecentPhoto: string;
-}
-
-/*
- * Displays the most recent photo in the user's gallery
- * On click, navigates to the image picker
- */
-export const GalleryIcon: React.FC<GalleryIconProps> = ({
- screenType,
- title,
- mostRecentPhoto,
-}) => {
- const navigation = useNavigation();
- return (
- <TouchableOpacity
- onPress={() => navigateToImagePicker(navigation, screenType, title)}
- style={styles.saveButton}>
- <Image
- source={{uri: mostRecentPhoto}}
- width={40}
- height={40}
- style={styles.galleryIcon}
- />
- <Text style={styles.saveButtonLabel}>Gallery</Text>
- </TouchableOpacity>
- );
-};
-
-interface FlipButtonProps {
- setCameraType: Dispatch<SetStateAction<keyof CameraType>>;
- cameraType: keyof CameraType;
-}
-
-/*
- * Toggles between back camera and front camera
- * Appears only when user has not taken a picture yet
- * Once user takes a picture, this button disappears to reveal the save button
- */
-export const FlipButton: React.FC<FlipButtonProps> = ({
- setCameraType,
- cameraType,
-}) => (
- <TouchableOpacity
- onPress={() => setCameraType(cameraType === 'front' ? 'back' : 'front')}
- style={styles.saveButton}>
- <FlipIcon width={40} height={40} />
- <Text style={styles.saveButtonLabel}>Flip</Text>
- </TouchableOpacity>
-);
-
-interface FlashButtonProps {
- flashMode: keyof FlashMode;
- setFlashMode: Dispatch<SetStateAction<keyof FlashMode>>;
-}
-
-/*
- * Toggles between flash on/off modes
- */
-export const FlashButton: React.FC<FlashButtonProps> = ({
- flashMode,
- setFlashMode,
-}) => (
- <TouchableOpacity
- onPress={() => setFlashMode(flashMode === 'on' ? 'off' : 'on')}
- style={styles.flashButtonContainer}>
- {flashMode === 'on' ? (
- <FlashOnIcon
- height={30}
- width={20}
- color={'white'}
- style={styles.flashIcon}
- />
- ) : (
- <FlashOffIcon
- height={30}
- width={20}
- color={'white'}
- style={styles.flashIcon}
- />
- )}
- <Text style={styles.saveButtonLabel}>Flash</Text>
- </TouchableOpacity>
-);
-
-interface SaveButtonProps {
- capturedImageURI: string;
-}
-
-/*
- * Appears when a picture has been taken,
- * On click, saves the captured image to "Recents" album on device gallery
- */
-export const SaveButton: React.FC<SaveButtonProps> = ({capturedImageURI}) => (
- <TouchableOpacity
- onPress={() => {
- downloadImage(capturedImageURI);
- }}
- style={[styles.saveButton]}>
- <SaveIcon width={40} height={40} />
- <Text style={styles.saveButtonLabel}>Save</Text>
- </TouchableOpacity>
-);
-
-const styles = StyleSheet.create({
- saveButton: {
- zIndex: 1,
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- width: (SCREEN_WIDTH - 100) / 2,
- },
- saveButtonLabel: {
- color: 'white',
- fontWeight: '700',
- fontSize: normalize(12),
- lineHeight: normalize(14.32),
- marginTop: 5,
- zIndex: 999,
- },
- flashButtonContainer: {
- position: 'absolute',
- backgroundColor: '#808080',
- opacity: 0.25,
- zIndex: 1,
- top: normalize(50),
- right: 0,
- marginRight: normalize(18),
- height: 86,
- width: 49,
- flexDirection: 'column',
- justifyContent: 'center',
- alignItems: 'center',
- borderRadius: 30,
- },
- galleryIcon: {borderWidth: 2, borderColor: 'white', borderRadius: 5},
- flashIcon: {zIndex: 2},
-});