[#11] Style: Update swipeable bottom drawer

dsc-sookmyung · Feb 27, 2022 · cc2e6e0 · cc2e6e0
1 parent c6dde21
commit cc2e6e0
Show file tree

Hide file tree

Showing 4 changed files with 246 additions and 171 deletions.
diff --git a/react-native/components/BottomDrawer.tsx b/react-native/components/BottomDrawer.tsx
@@ -0,0 +1,161 @@
+import React, { useState } from 'react';
+import { StyleSheet, Dimensions, View, Text, TouchableOpacity, TouchableHighlight, ScrollView } from 'react-native';
+import { Entypo, FontAwesome, MaterialIcons } from '@expo/vector-icons';
+import { theme } from '../core/theme';
+
+
+interface BottomDrawerProps {
+	results?: {"content": string; "highlight": boolean}[],
+	fullText?: {"translated": string; "korean": string},
+	showFullText?: boolean,
+	showTranslated?: boolean,
+	isFullDrawer?: boolean,
+	handleFullText?: () => void,
+	saveResults?: () => void,
+	handleTranslatedText?: () => void,
+	closeResults?: () => void,
+	retakePicture?: () => void,
+}
+
+const NO_WIDTH_SPACE = '';
+const highlight = (text: string) =>
+  text.split(' ').map((word, i) => (
+    <Text key={i}>
+      <Text style={styles.highlighted}>{word} </Text>
+      {NO_WIDTH_SPACE}
+    </Text>
+  ));
+
+function BottomDrawer(props: BottomDrawerProps) {
+
+	return (
+		<View style={styles.bottomDrawer}>
+			<View style={{ flex: 1 }}>
+				<View style={styles.horizontalLine} />
+				<View style={[styles.spaceBetween, { paddingBottom: 24 }]}>
+					<Text style={styles.title}>{props.showFullText ? "Full Text" : "Results"}</Text>
+					{!props.showFullText ? (
+						<View style={styles.alignRow}>
+							<TouchableOpacity style={styles.rightSpace} onPress={props.handleFullText}>
+								<Entypo name="text" size={32} color="#000"/>
+							</TouchableOpacity>
+							<TouchableOpacity onPress={props.saveResults}>
+								<FontAwesome name="save" size={32} color='#000' />
+							</TouchableOpacity>
+						</View>
+					) : (
+						<TouchableOpacity style={styles.rightSpace} onPress={props.handleTranslatedText}>
+							<MaterialIcons name="translate" size={32} color="#000"/>
+						</TouchableOpacity>
+					)}
+				</View>
+
+				<ScrollView style={{ flex: 1 }}>
+					{!props.showFullText ? (
+						props.results?.map((result, index) => 
+							<Text key={result.content} style={styles.content}>
+								{index+1}.&nbsp; 
+								{result.highlight ? (
+									highlight(result.content)
+								) : (
+									result.content
+								)}
+							</Text>
+						)
+					) : (
+						props.showTranslated ? (
+							<Text style={styles.content}>{props.fullText?.translated}</Text>
+						) : (
+							<Text style={styles.content}>{props.fullText?.korean}</Text>
+						)
+					)}
+				</ScrollView>
+			</View>
+			<View style={[styles.spaceBetween, props.isFullDrawer && styles.full ]}>
+				{!props.showFullText ? (
+					<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.closeResults}>
+						<Text style={styles.whiteText}>Close</Text>
+					</TouchableHighlight>
+				) : (
+						<TouchableHighlight style={[styles.regularButton, styles.grayBackground]} onPress={props.handleFullText}>
+							<Text style={styles.whiteText}>Back</Text>
+						</TouchableHighlight>
+				)}
+				<View style={styles.gap} />
+				<TouchableHighlight style={[styles.regularButton, styles.primaryBackground]} onPress={props.retakePicture}>
+					<Text style={styles.whiteText}>Try again</Text>
+				</TouchableHighlight>
+			</View>
+		</View>
+	)
+}
+
+export default BottomDrawer
+
+const styles = StyleSheet.create({
+	bottomDrawer: {
+		flex: 1,
+		flexDirection: 'column',
+		alignContent: 'space-between',
+		backgroundColor: theme.colors.background,
+		borderTopLeftRadius: 48,
+		borderTopRightRadius: 48,
+		padding: 32
+	},
+	horizontalLine: {
+		flex: 1,
+		marginHorizontal: Dimensions.get('window').width*0.33,
+		marginBottom: 32,
+		height: 4,
+		maxHeight: 4,
+		justifyContent: 'center',
+		backgroundColor: theme.colors.gray
+	},
+	title: {
+		fontFamily: 'Lora_700Bold',
+		fontSize: 24,
+		fontWeight: '700',
+		color: theme.colors.primary,
+	},
+	content: {
+		fontSize: 16,
+		paddingBottom: 8
+	},
+	regularButton: {
+		paddingVertical: 16,
+		flex: 0.9,
+		marginTop: 16,
+		alignItems: 'center',
+		borderRadius: 16
+	},
+	gap: {
+		flex: 0.1
+	},
+	primaryBackground: {
+		backgroundColor: theme.colors.primary
+	},
+	grayBackground: {
+		backgroundColor: theme.colors.gray
+	},
+	spaceBetween: {
+		flexDirection: 'row',
+		justifyContent: 'space-between',
+		alignItems: 'center'
+	},
+	alignRow: {
+		flexDirection: 'row'
+	},
+	highlighted: {
+		backgroundColor: theme.colors.skyblue
+	},
+	rightSpace: {
+		paddingRight: 8
+	},
+	whiteText: {
+		color: '#fff',
+		fontSize: 16
+	},
+	full: {
+		paddingBottom: 96
+	},
+})
diff --git a/react-native/package.json b/react-native/package.json
@@ -24,13 +24,13 @@
     "react-native-paper": "^4.11.2",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
+    "react-native-swipe-up-down": "^1.1.6",
     "react-native-vector-icons": "^9.1.0",
     "react-native-web": "0.17.1",
     "react-navigation": "^4.4.4",
     "react-navigation-stack": "^2.10.4",
     "react-redux": "^7.2.6",
-    "redux": "^4.1.2",
-    "rn-swipeable-panel": "^1.2.7"
+    "redux": "^4.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",