This commit is contained in:
Loewy 2024-02-19 14:59:45 -08:00
parent 7bddeca783
commit 7b4af08296
4 changed files with 158 additions and 1 deletions

View File

@ -0,0 +1,96 @@
import React, { useState } from "react";
import { Button, Image, StyleSheet, Text, View } from "react-native";
import SlideModal from "./slide-modal";
export default function SessionDetails() {
// Modal State
const [visible, setVisible] = useState<boolean>(false);
// Stats State
// TODO: needs to come from session context
const [timePlayed, setTimePlayed] = useState("5:03:10");
const [medianRun, setMedianRun] = useState("7.3");
const [makeRate, setMakeRate] = useState("34%");
const [shotPacing, setShotPacing] = useState("0:00:26");
const [gameType, setGameType] = useState("Free Play");
const [notes, setNotes] = useState(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit...",
);
return (
<>
<SlideModal modalVisible={visible} setModalVisible={setVisible}>
<View style={styles.container}>
<Text style={styles.header}>Afternoon Session</Text>
<Image
source={{ uri: "https://picsum.photos/200" }}
style={styles.image}
/>
<View style={styles.statsContainer}>
<View style={styles.statItem}>
<Text style={styles.statLabel}>TIME PLAYED</Text>
<Text style={styles.statValue}>{timePlayed}</Text>
</View>
<View style={styles.statItem}>
<Text style={styles.statLabel}>MEDIAN RUN</Text>
<Text style={styles.statValue}>{medianRun}</Text>
</View>
<View style={styles.statItem}>
<Text style={styles.statLabel}>MAKE RATE</Text>
<Text style={styles.statValue}>{makeRate}</Text>
</View>
<View style={styles.statItem}>
<Text style={styles.statLabel}>SHOT PACING</Text>
<Text style={styles.statValue}>{shotPacing}</Text>
</View>
</View>
<Text style={styles.gameType}>{gameType}</Text>
<Text style={styles.notes}>{notes}</Text>
</View>
</SlideModal>
<Button title="show modal" onPress={() => setVisible(true)} />
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: "white",
},
header: {
fontSize: 24,
fontWeight: "bold",
marginBottom: 20,
},
image: {
width: "100%",
height: 200,
marginBottom: 20,
},
statsContainer: {
flexDirection: "row",
justifyContent: "space-around",
marginBottom: 20,
},
statItem: {
alignItems: "center",
},
statLabel: {
fontSize: 16,
color: "grey",
},
statValue: {
fontSize: 18,
fontWeight: "bold",
},
gameType: {
fontSize: 18,
marginBottom: 10,
},
notes: {
fontSize: 16,
color: "grey",
},
});

View File

@ -0,0 +1,25 @@
import React from "react";
import { Modal, View } from "react-native";
import { modal } from "../../styles";
export default function SlideModal({
modalVisible,
setModalVisible,
children,
}) {
return (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
>
<View style={modal.alignModalContainer}>
<View style={modal.modalView}>{children}</View>
</View>
</Modal>
);
}

View File

@ -7,6 +7,7 @@ import {
import BarGraph from "../component/charts/bar-graph/bar-graph";
import ChartContainer from "../component/charts/container/chart-container";
import LineGraph from "../component/charts/line-graph/line-graph";
import SessionDetails from "../component/modals/session-details";
export default function SessionScreen() {
return (
@ -16,6 +17,7 @@ export default function SessionScreen() {
data={graph_data_two_measures}
ChartComponent={BarGraph}
/>
<SessionDetails />
</View>
);
}

View File

@ -1,5 +1,6 @@
import Constants from "expo-constants";
import { Platform, StyleSheet } from "react-native";
// GLOBAL STYLES
import { StyleSheet } from "react-native";
export const globalInputStyles = StyleSheet.create({
input: {
@ -28,6 +29,13 @@ export const globalInputStyles = StyleSheet.create({
borderRadius: 4,
},
});
let STATUS_BAR_HEIGHT: number;
Platform.OS === "android"
? (STATUS_BAR_HEIGHT = 24)
: (STATUS_BAR_HEIGHT = Constants.statusBarHeight | 24);
// COLORS:
// can be made more granular to specify utility (ex: fontColors vs backgroundColors)
export const colors = {
@ -59,3 +67,29 @@ export const shadows = {
elevation: 3,
},
};
export const modal = StyleSheet.create({
alignModalContainer: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-end",
marginTop: STATUS_BAR_HEIGHT ?? 54,
},
modalView: {
backgroundColor: "white",
height: "90%",
width: "100%",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
},
columnText: {
fontSize: 18,
color: colors.themeBrown,
fontWeight: "600",
},
columnIcon: {
fontSize: 25,
color: colors.themeBrown,
fontWeight: "500",
},
});