railbird/railbird-gql
10
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

wip: use react-native-modal, swipe close + scrollview for content

Browse Source
This commit is contained in:
Loewy
2024-02-18 15:25:36 -08:00
parent bc7b066864
commit b865f78e22
7 changed files with 120 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/component/modals/session-details.tsx
View File

@@ -22,41 +22,40 @@ export default function SessionDetails() {
return (
<>
<SlideModal modalVisible={visible} setModalVisible={setVisible}>
<View style={styles.container}>
<View style={styles.headerSection}>
<Text style={styles.header}>{sessionTitle}</Text>
<Text>{date}</Text>
</View>
<Image
source={{ uri: "https://picsum.photos/200" }}
style={styles.image}
/>
<View style={styles.statsContainer}>
<View style={styles.statColumn}>
<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>
<View style={styles.statColumn}>
<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>
</View>
<View style={styles.horizontalDivider} />
<Text style={styles.gameType}>{gameType}</Text>
<Text style={styles.notes}>{notes}</Text>
<View style={styles.headerSection}>
<Text style={styles.header}>{sessionTitle}</Text>
<Text>{date}</Text>
</View>
<Image
source={{ uri: "https://picsum.photos/200" }}
style={styles.image}
/>
<View style={styles.statsContainer}>
<View style={styles.statColumn}>
<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>
<View style={styles.statColumn}>
<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>
</View>
{/* USE A BETTER SYSTEM FOR THE DIVIDER, COULD ATTACH TO OTHER COMPONENT */}
<View style={styles.horizontalDivider} />
<Text style={styles.gameType}>{gameType}</Text>
<Text style={styles.notes}>{notes}</Text>
</SlideModal>
<Button title="show modal" onPress={() => setVisible(true)} />
</>
@@ -64,14 +63,9 @@ export default function SessionDetails() {
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "white",
borderRadius: 20,
},
headerSection: {
marginTop: 15,
padding: 20,
paddingHorizontal: 20,
paddingVertical: 15,
},
header: {
fontSize: 24,
@@ -101,7 +95,7 @@ const styles = StyleSheet.create({
textAlign: "center",
},
statValue: {
fontSize: 18,
fontSize: 28,
fontWeight: "bold",
textAlign: "center",
},

52
src/component/modals/slide-modal.tsx
View File

@@ -1,24 +1,58 @@
import React from "react";
import { Modal, View } from "react-native";
import { ScrollView, View } from "react-native";
import Modal from "react-native-modal";
import { modal } from "../../styles";
interface SlideModalInterface {
modalVisible: boolean;
setModalVisible: Function;
children: React.ReactNode;
}
/**
* SlideModal Component
*
* A modal component that slides down from the bottom of the screen and can be dismissed by swiping down or tapping the backdrop.
*
* @param {Object} props - Props for SlideModal component.
* @param {boolean} props.modalVisible - State variable that controls the visibility of the modal.
* @param {Function} props.setModalVisible - State setter function to update the visibility of the modal.
* @param {React.ReactNode} props.children - The content to be rendered inside the modal.
*
* @component
* @example
* const [modalVisible, setModalVisible] = useState(false);
*
* return (
* <SlideModal
* modalVisible={modalVisible}
* setModalVisible={setModalVisible}
* >
* <Text>Modal Content</Text>
* </SlideModal>
* );
*/
export default function SlideModal({
modalVisible,
setModalVisible,
children,
}) {
}: SlideModalInterface): React.JSX.Element {
return (
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
setModalVisible(!modalVisible);
}}
hasBackdrop={true}
isVisible={modalVisible}
onBackdropPress={() => setModalVisible(false)}
onSwipeComplete={() => setModalVisible(false)}
swipeDirection="down"
style={modal.noMargin}
propagateSwipe
>
<View style={modal.alignModalContainer}>
<View style={modal.modalView}>{children}</View>
<View style={modal.grabber} />
<ScrollView contentContainerStyle={modal.contentStyles}>
{children}
</ScrollView>
</View>
</Modal>
);

35
src/styles.ts
View File

@@ -68,28 +68,31 @@ export const shadows = {
},
};
// MODAL STYLES
const MODAL_TOP_PADDING = 20;
const MODAL_TOP_RADIUS = 20;
export const modal = StyleSheet.create({
alignModalContainer: {
flex: 1,
justifyContent: "flex-start",
alignItems: "flex-end",
marginTop: STATUS_BAR_HEIGHT ?? 54,
},
modalView: {
marginTop: STATUS_BAR_HEIGHT + MODAL_TOP_PADDING ?? 54 + MODAL_TOP_PADDING,
backgroundColor: "white",
height: "90%",
borderTopLeftRadius: MODAL_TOP_RADIUS,
borderTopRightRadius: MODAL_TOP_RADIUS,
width: "100%",
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
},
columnText: {
fontSize: 18,
color: colors.themeBrown,
fontWeight: "600",
contentStyles: {
paddingBottom: 20,
},
columnIcon: {
fontSize: 25,
color: colors.themeBrown,
fontWeight: "500",
grabber: {
alignSelf: "center",
width: 40,
height: 5,
backgroundColor: "#ccc",
borderRadius: 2.5,
marginVertical: 15,
},
noMargin: {
margin: 0,
},
});