rebase
This commit is contained in:
parent
7bddeca783
commit
7b4af08296
96
src/component/modals/session-details.tsx
Normal file
96
src/component/modals/session-details.tsx
Normal 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",
|
||||
},
|
||||
});
|
25
src/component/modals/slide-modal.tsx
Normal file
25
src/component/modals/slide-modal.tsx
Normal 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>
|
||||
);
|
||||
}
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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",
|
||||
},
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user