Merge pull request #342 from wyne/SCORE-85-full-width-header-handle-a…

…ction

Sheet Title Button style and action

src/components/GameBottomSheet.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
@@ -39,43 +39,59 @@ const GameBottomSheet: React.FunctionComponent<Props> = ({ navigation, container
     const snapPoints = useMemo(() => [bottomSheetHeight, '60%', '100%'], []);
 
     // State variable for the current snap point index
-    const [snapPointIndex, setSnapPointIndex] = useState(1);
-
-    // Function to cycle through the snap points
-    const cycleSnapPoints = () => {
+    const [, setSnapPointIndex] = useState(0);
+
+    /**
+     * Function to handle changes in the bottom sheet
+     */
+    const onSheetChange = useCallback((index: number) => {
+        setSnapPointIndex(index);
+    }, []);
+
+    /**
+     * Function to snap to the next point when the handle is pressed
+     */
+    const sheetTitlePress = () => {
         setSnapPointIndex((prevIndex) => {
-            const nextIndex = prevIndex + 1;
-            return nextIndex < snapPoints.length ? nextIndex : 0;
+            const nextIndex = (prevIndex + 1) % snapPoints.length;
+            bottomSheetRef.current?.snapToIndex(nextIndex);
+            return nextIndex;
         });
     };
 
-    // Function to snap to the next point when the button is pressed
-    const handleButtonPress = () => {
-        cycleSnapPoints();
-        bottomSheetRef.current?.snapToIndex(snapPointIndex);
-    };
-
+    /**
+     * Animated position of the bottom sheet
+     * Calculated as the difference between the current position and the first snap point
+     */
     const animatedPosition = useSharedValue(0);
 
-    const newStyles = useAnimatedStyle(() => {
+    /**
+     * Animated style for the bottom sheet
+     */
+    const animatedSheetStyle = useAnimatedStyle(() => {
         const snapPoint0: number = typeof snapPoints[0] === 'string'
             ? parseFloat(snapPoints[0]) / 100 * containerHeight
             : containerHeight - snapPoints[0];
 
         const delta = snapPoint0 - animatedPosition.value;
 
-        const i = interpolate(delta, [0, 30], [0, 1], Extrapolate.CLAMP);
+        const interpolatedValue = interpolate(
+            delta,
+            [0, 100], // Pixel distance
+            [0, 1], // Opacity
+            Extrapolate.CLAMP
+        );
 
         return {
-            opacity: i
+            opacity: interpolatedValue
         };
     });
 
     return (
-
         <BottomSheet
             ref={bottomSheetRef}
             index={0}
+            onChange={onSheetChange}
             snapPoints={snapPoints}
             backgroundStyle={{ backgroundColor: 'rgb(30,40,50)' }}
             handleIndicatorStyle={{ backgroundColor: 'white' }}
@@ -84,23 +100,23 @@ const GameBottomSheet: React.FunctionComponent<Props> = ({ navigation, container
             <BottomSheetScrollView >
                 <SafeAreaView edges={['right', 'left']}>
                     <View style={styles.sheetHeaderContainer}>
-                        <Text style={styles.sheetHeader} onPress={() => handleButtonPress()}>
+                        <Text style={[styles.sheetHeader]} numberOfLines={1} onPress={() => sheetTitlePress()}>
                             {currentGame.title}
                         </Text>
                         <Text style={styles.sheetHeaderButton} onPress={() => navigation.navigate('Settings')}>
                             Edit
                         </Text>
                     </View>
 
-                    <Animated.View style={[styles.sheetContent, newStyles]}>
+                    <Animated.View style={[styles.sheetContent, animatedSheetStyle]}>
                         <Rounds navigation={navigation} show={!fullscreen} />
                         <Text style={{ color: 'white' }}>
                             Tap on a column to set the current round.
                         </Text>
 
                         <View style={{ flexDirection: 'row', justifyContent: 'space-around', paddingVertical: 10 }}>
                             <TouchableOpacity onPress={() => navigation.navigate('Share')}>
-                                <View style={{ margin: 5, padding: 10, paddingHorizontal: 20, backgroundColor: 'rgba(0,0,0,.2)', borderRadius: 10, alignItems: 'center' }}>
+                                <View style={[styles.shareButton]}>
                                     <Icon name="share-outline" type="ionicon" size={30} color={systemBlue} />
                                     <Text style={{ color: systemBlue, fontSize: 15, paddingTop: 5 }}>Share</Text>
                                 </View>
@@ -121,17 +137,28 @@ const styles = StyleSheet.create({
     },
     sheetHeader: {
         color: 'white',
+        flex: 1,
         fontSize: 20,
+        fontWeight: 'bold',
+        paddingHorizontal: 10,
         paddingTop: 0,
-        fontWeight: 'bold'
     },
     sheetHeaderButton: {
-        paddingHorizontal: 10,
-        fontSize: 20,
         color: systemBlue,
+        fontSize: 20,
+        paddingHorizontal: 10,
     },
     sheetContent: {
+        paddingVertical: 10,
+        paddingHorizontal: 20,
+    },
+    shareButton: {
+        margin: 5,
         padding: 10,
+        paddingHorizontal: 20,
+        backgroundColor: 'rgba(0,0,0,.2)',
+        borderRadius: 10,
+        alignItems: 'center'
     },
 });