diff options
author | Ivan Chen <ivan@tagg.id> | 2021-06-29 16:29:06 -0400 |
---|---|---|
committer | Ivan Chen <ivan@tagg.id> | 2021-06-29 16:29:06 -0400 |
commit | 5fcffd40746b2074d523f53dc82c824d147444e5 (patch) | |
tree | 5bbb93a56454778996a543a567cc0d8d9d60d11e /src/components/camera/buttons.tsx | |
parent | f273a7aa1c2e27692c2a03ae1e2fc9b81360558d (diff) |
Refactor buttons
Diffstat (limited to 'src/components/camera/buttons.tsx')
-rw-r--r-- | src/components/camera/buttons.tsx | 152 |
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}, -}); |