From 5fcffd40746b2074d523f53dc82c824d147444e5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Tue, 29 Jun 2021 16:29:06 -0400 Subject: Refactor buttons --- src/components/camera/FlashButton.tsx | 42 ++++++++++ src/components/camera/FlipButton.tsx | 29 +++++++ src/components/camera/GalleryIcon.tsx | 39 +++++++++ src/components/camera/SaveButton.tsx | 26 ++++++ src/components/camera/buttons.tsx | 152 ---------------------------------- src/components/camera/index.ts | 5 +- src/components/camera/styles.tsx | 37 +++++++++ 7 files changed, 177 insertions(+), 153 deletions(-) create mode 100644 src/components/camera/FlashButton.tsx create mode 100644 src/components/camera/FlipButton.tsx create mode 100644 src/components/camera/GalleryIcon.tsx create mode 100644 src/components/camera/SaveButton.tsx delete mode 100644 src/components/camera/buttons.tsx create mode 100644 src/components/camera/styles.tsx (limited to 'src') diff --git a/src/components/camera/FlashButton.tsx b/src/components/camera/FlashButton.tsx new file mode 100644 index 00000000..06a4e44e --- /dev/null +++ b/src/components/camera/FlashButton.tsx @@ -0,0 +1,42 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {FlashMode} from 'react-native-camera'; +import FlashOffIcon from '../../assets/icons/camera/flash-off.svg'; +import FlashOnIcon from '../../assets/icons/camera/flash-on.svg'; +import {styles} from './styles'; + +interface FlashButtonProps { + flashMode: keyof FlashMode; + setFlashMode: Dispatch>; +} + +/* + * Toggles between flash on/off modes + */ +export const FlashButton: React.FC = ({ + flashMode, + setFlashMode, +}) => ( + setFlashMode(flashMode === 'on' ? 'off' : 'on')} + style={styles.flashButtonContainer}> + {flashMode === 'on' ? ( + + ) : ( + + )} + Flash + +); + +export default FlashButton; diff --git a/src/components/camera/FlipButton.tsx b/src/components/camera/FlipButton.tsx new file mode 100644 index 00000000..c6f710a9 --- /dev/null +++ b/src/components/camera/FlipButton.tsx @@ -0,0 +1,29 @@ +import React, {Dispatch, SetStateAction} from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import {CameraType} from 'react-native-camera'; +import FlipIcon from '../../assets/icons/camera/flip.svg'; +import {styles} from './styles'; + +interface FlipButtonProps { + setCameraType: Dispatch>; + 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 = ({ + setCameraType, + cameraType, +}) => ( + setCameraType(cameraType === 'front' ? 'back' : 'front')} + style={styles.saveButton}> + + Flip + +); + +export default FlipButton; diff --git a/src/components/camera/GalleryIcon.tsx b/src/components/camera/GalleryIcon.tsx new file mode 100644 index 00000000..19a63a9a --- /dev/null +++ b/src/components/camera/GalleryIcon.tsx @@ -0,0 +1,39 @@ +import {useNavigation} from '@react-navigation/native'; +import React from 'react'; +import {Image, Text, TouchableOpacity} from 'react-native'; +import {ScreenType} from '../../types'; +import {navigateToImagePicker} from '../../utils/camera'; +import {styles} from './styles'; + +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 = ({ + screenType, + title, + mostRecentPhoto, +}) => { + const navigation = useNavigation(); + return ( + navigateToImagePicker(navigation, screenType, title)} + style={styles.saveButton}> + + Gallery + + ); +}; + +export default GalleryIcon; diff --git a/src/components/camera/SaveButton.tsx b/src/components/camera/SaveButton.tsx new file mode 100644 index 00000000..840cc804 --- /dev/null +++ b/src/components/camera/SaveButton.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import {Text, TouchableOpacity} from 'react-native'; +import SaveIcon from '../../assets/icons/camera/save.svg'; +import {downloadImage} from '../../utils/camera'; +import {styles} from './styles'; + +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 = ({capturedImageURI}) => ( + { + downloadImage(capturedImageURI); + }} + style={styles.saveButton}> + + Save + +); + +export default SaveButton; 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 = ({ - screenType, - title, - mostRecentPhoto, -}) => { - const navigation = useNavigation(); - return ( - navigateToImagePicker(navigation, screenType, title)} - style={styles.saveButton}> - - Gallery - - ); -}; - -interface FlipButtonProps { - setCameraType: Dispatch>; - 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 = ({ - setCameraType, - cameraType, -}) => ( - setCameraType(cameraType === 'front' ? 'back' : 'front')} - style={styles.saveButton}> - - Flip - -); - -interface FlashButtonProps { - flashMode: keyof FlashMode; - setFlashMode: Dispatch>; -} - -/* - * Toggles between flash on/off modes - */ -export const FlashButton: React.FC = ({ - flashMode, - setFlashMode, -}) => ( - setFlashMode(flashMode === 'on' ? 'off' : 'on')} - style={styles.flashButtonContainer}> - {flashMode === 'on' ? ( - - ) : ( - - )} - Flash - -); - -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 = ({capturedImageURI}) => ( - { - downloadImage(capturedImageURI); - }} - style={[styles.saveButton]}> - - Save - -); - -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}, -}); diff --git a/src/components/camera/index.ts b/src/components/camera/index.ts index 428d0fe8..d33d1e4a 100644 --- a/src/components/camera/index.ts +++ b/src/components/camera/index.ts @@ -1 +1,4 @@ -export * from './buttons'; +export {default as GalleryIcon} from './GalleryIcon'; +export {default as FlashButton} from './FlashButton'; +export {default as FlipButton} from './FlipButton'; +export {default as SaveButton} from './SaveButton'; diff --git a/src/components/camera/styles.tsx b/src/components/camera/styles.tsx new file mode 100644 index 00000000..e810ffda --- /dev/null +++ b/src/components/camera/styles.tsx @@ -0,0 +1,37 @@ +import {StyleSheet} from 'react-native'; +import {normalize, SCREEN_WIDTH} from '../../utils/layouts'; + +export 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}, +}); -- cgit v1.2.3-70-g09d2