Add bottom sheet for Subjects.

components/timetable/HomeScreen.js

@@ -8,6 +8,7 @@ import {
 	Dialog,
 	FAB,
 	Portal,
+	Modal,
 } from "react-native-paper";
 
 import {
@@ -16,6 +17,8 @@ import {
 } from "react-native";
 import { format } from "date-fns";
 
+import BottomSheet from "reanimated-bottom-sheet";
+
 function sortTimes(t1, t2) {
 	if (t1.getHours() > t2.getHours())
 		return 1;
@@ -30,6 +33,32 @@ function sortTimes(t1, t2) {
 
 function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetable }) {
 	const [ dialog, setDialog ] = useState({ show: false, id: null });
+	const [ currentBottomSheet, setCurrentBottomSheet ] = useState(null);
+
+	this.bs = React.createRef();
+	const openBottomSheet = () => {this.bs.current.snapTo(0);this.bs.current.snapTo(0);};
+	const closeBottomSheet = () => {this.bs.current.snapTo(2);this.bs.current.snapTo(2);};
+
+	function CardContents() {
+		if (!currentBottomSheet) {
+			return <></>;
+		}
+		const subject = subjects.find(i => i.id === currentBottomSheet.sub_id);
+		return (
+			<Card>
+				<Card.Title title={subject.name} />
+				<Card.Content style={style.bottomNavigation}>
+					<Button mode="contained">Change Subject</Button>
+					<Button mode="contained">Change Start Time</Button>
+					<Button mode="contained">Change End Time</Button>
+					<Button mode="contained" onPress={() => {
+						closeBottomSheet();
+						setDialog({ show: true, id: currentBottomSheet.name });
+					}}>Remove</Button>
+				</Card.Content>
+			</Card>
+		);
+	}
 	return (<Portal.Host><ScrollView>
 		{timetable.map((day, dayIdx) => (
 			<Card
@@ -71,7 +100,10 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 							return (
 								<DataTable.Row
 									key={idx}
-									onPress={() => setDialog({ show: true, id: cls.id })}
+									onPress={() => {
+										setCurrentBottomSheet(cls);
+										openBottomSheet();
+									}}
 								>
 									<DataTable.Cell
 										style={{ flexGrow: 2 }}
@@ -118,7 +150,8 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 				</Dialog.Actions>
 			</Dialog>
 			<FAB
-				loarge
+				visible={currentBottomSheet == null}
+				large
 				icon="plus"
 				onPress={() => navigation.navigate("New Entry")}
 				style={{
@@ -128,6 +161,21 @@ function HomeScreen({ days, navigation, removeTimetableEntry, subjects, timetabl
 					bottom: 0,
 				}}
 			/>
+			<Modal
+				visible={currentBottomSheet != null}
+				onDismiss={closeBottomSheet}
+				dismissable={false}
+			>
+			</Modal>
+			<BottomSheet
+				ref={this.bs}
+				snapPoints={[300, 150, 0]}
+				initialSnap={1}
+				renderContent={CardContents}
+				enabledInnerScrolling={false}
+				onCloseStart={() => setCurrentBottomSheet(null)}
+				onCloseEnd={() => {}}
+			/>
 		</Portal>
 	</ScrollView></Portal.Host>);
 }
@@ -154,6 +202,11 @@ const style = StyleSheet.create({
 		flexDirection: "row",
 		justifyContent: "space-between"
 	},
+	bottomNavigation: {
+		height: 250,
+		flexDirection: "column",
+		justifyContent: "space-evenly",
+	},
 });
 
 export default HomeScreen;

package.json

@@ -30,6 +30,7 @@
     "react-native-uuid": "^1.4.9",
     "react-native-vector-icons": "^6.6.0",
     "react-redux": "^7.2.0",
+    "reanimated-bottom-sheet": "^1.0.0-alpha.19",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-persist": "^6.0.0"

yarn.lock

@@ -5420,6 +5420,11 @@ realpath-native@^1.1.0:
   dependencies:
     util.promisify "^1.0.0"
 
+reanimated-bottom-sheet@^1.0.0-alpha.19:
+  version "1.0.0-alpha.19"
+  resolved "https://registry.npmjs.org/reanimated-bottom-sheet/-/reanimated-bottom-sheet-1.0.0-alpha.19.tgz#94ea79e7b2896b8f489547415d15d15c99ac44ba"
+  integrity sha512-Q0sGUHYdr5h2n/AY7pKQty35zcUAxxYM1nCl+luSQAyqiY6a5Kf8IBQRsOVvs60sDzqXxtbwxHgM5mkwaiQC4Q==
+
 redux-devtools-extension@^2.13.8:
   version "2.13.8"
   resolved "https://registry.npmjs.org/redux-devtools-extension/-/redux-devtools-extension-2.13.8.tgz#37b982688626e5e4993ff87220c9bbb7cd2d96e1"