@tactics/toddle-styleguide 1.4.0 → 1.4.2

package/App.tsx

@@ -74,6 +74,10 @@ import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.previ
 import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
 
+import {
+  SafeAreaProvider,
+} from 'react-native-safe-area-context';
+
 const Stack = createNativeStackNavigator();
 
 const HomeScreen = ({navigation}: {navigation: any}) => {
@@ -299,6 +303,7 @@ function App() {
   }
 
   return (
+    <SafeAreaProvider>
     <ThemeCtx.Provider value={StaffMemberTheme}>
       <NavigationContainer>
         <Stack.Navigator>
@@ -474,6 +479,7 @@ function App() {
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>
+    </SafeAreaProvider>
   );
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",

package/src/components/atoms/footer/footer.component.tsx

@@ -5,6 +5,9 @@ import {ViewStyle} from 'react-native';
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './footer.styles';
 import Animated, {AnimateStyle} from 'react-native-reanimated';
+import {
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 type FooterProps = {
   children: React.ReactNode;
@@ -13,15 +16,16 @@ type FooterProps = {
 
 const Footer = ({children, animatedStyle}: FooterProps) => {
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const insets = useSafeAreaInsets();
+  const styles = Stylesheet(context, insets);
 
   return (
-    <Animated.View
-      style={[styles.container, animatedStyle]}
-      testID="footer-container"
-    >
-      {children}
-    </Animated.View>
+      <Animated.View
+        style={[styles.container, animatedStyle]}
+        testID="footer-container"
+      >
+        {children}
+      </Animated.View>
   );
 };
 

package/src/components/atoms/footer/footer.styles.js

@@ -1,19 +1,18 @@
-import * as React from 'react';
-import {Platform, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {Scale} from '../../../theme/scale/index';
 
-export const Stylesheet = (context) =>
+export const Stylesheet = (context, insets) =>
   StyleSheet.create({
     container: {
       flexDirection: 'row',
-      alignItems: Platform.OS === 'android' ? 'center' : 'flex-start',
+      alignItems: 'center',
       justifyContent: 'center',
-      paddingTop: Platform.OS === 'android' ? 0 : Scale.m,
       backgroundColor: context.colors.ui.xlightgrey,
       borderTopColor: context.colors.ui.lightgrey,
       borderStyle: 'solid',
       borderTopWidth: 1,
-      height: Platform.OS === 'android' ? Scale.xxxl : Scale.xxxxl,
+      minHeight: (Scale.xxxl + insets.bottom),
+      paddingBottom: insets.bottom,
       width: '100%',
     },
   });

package/src/components/organisms/day-select/day-select.component.tsx

@@ -1,8 +1,5 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {
-  Directions,
-  Gesture,
-  GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
 import {View} from 'react-native';
@@ -10,6 +7,8 @@ import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime
 import {ThemeCtx} from '../../../context/theme.context';
 import {Stylesheet} from './day-select.styles';
 import {Day} from '../../molecules/day/day.component';
+import Swipeable from 'react-native-gesture-handler/Swipeable';
+import { Icon } from '../../../icons';
 
 type DaySelectProps = {
   onSelectDate: (date: ToddleDateTime) => void;
@@ -20,6 +19,7 @@ type DaySelectProps = {
 const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
+  const swipeableRef = useRef<Swipeable>(null);
 
   const createWeekDays = (day: ToddleDateTime) => {
     let week = [];
@@ -41,12 +41,14 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
   const onSwipeLeft = () => {
     let firstDayOfWeek = weekData.shift();
     if (!firstDayOfWeek) return;
+    onSelectDate(selectedDate.minus({weeks: 1}));
     setWeekData(createWeekDays(firstDayOfWeek.minus({weeks: 1})));
   };
 
   const onSwipeRight = () => {
     let firstDayOfWeek = weekData.shift();
     if (!firstDayOfWeek) return;
+    onSelectDate(selectedDate.plus({weeks: 1}));
     setWeekData(createWeekDays(firstDayOfWeek.plus({weeks: 1})));
   };
 
@@ -58,39 +60,48 @@ const DaySelect = ({onSelectDate, selectedDate, startDate}: DaySelectProps) => {
     onSelectDate(date);
   };
 
-  const flingRightGesture = Gesture.Fling()
-    .direction(Directions.RIGHT)
-    .onStart((e) => {
-      onSwipeLeft();
-    });
+  const renderLeftActions = () => {
+    return <View style={styles.actionContainer}><Icon name={'chevron-left' } style='regular' color={context.colors.ui.grey} /></View>;
+  }
+
+  const renderRightActions = () => {
+    return <View style={styles.actionContainer}><Icon name={'chevron-right' } style='regular' color={context.colors.ui.grey} /></View>;
+  }
 
-  const flingLeftGesture = Gesture.Fling()
-    .direction(Directions.LEFT)
-    .onStart((e) => {
+  const onSwipeOpen = (direction:string) => {
+    if (direction == "left") {
+      onSwipeLeft();
+    } else if (direction == "right") {
       onSwipeRight();
-    });
+    }
 
-  const composedGesture = Gesture.Simultaneous(
-    flingLeftGesture.runOnJS(true),
-    flingRightGesture.runOnJS(true)
-  );
+    if (swipeableRef.current) {
+      swipeableRef.current.close();
+    }
+  }
 
   return (
     <GestureHandlerRootView>
-      <GestureDetector gesture={composedGesture}>
-        <View style={styles.container}>
-          {weekData.map((weekday, index) => {
-            return (
-              <Day
-                key={index}
-                date={weekday}
-                onSelect={onClick}
-                isSelected={isThisDaySelected(weekday)}
-              />
-            );
-          })}
-        </View>
-      </GestureDetector>
+        <Swipeable
+          ref={swipeableRef}
+          renderLeftActions={renderLeftActions}
+          renderRightActions={renderRightActions}
+          onSwipeableOpen={onSwipeOpen}
+          containerStyle={styles.container}
+          childrenContainerStyle={styles.childrenContainer}
+          overshootFriction={8}
+        >
+              {weekData.map((weekday, index) => {
+                return (
+                  <Day
+                    key={index}
+                    date={weekday}
+                    onSelect={onClick}
+                    isSelected={isThisDaySelected(weekday)}
+                  />
+                );
+              })}
+        </Swipeable>
     </GestureHandlerRootView>
   );
 };

package/src/components/organisms/day-select/day-select.preview.tsx

@@ -12,7 +12,7 @@ export const DaySelectPreview = ({}: {}) => {
   );
 
   return (
-    <View style={{paddingHorizontal: 48}}>
+    <View>
       <DaySelect
         startDate={startOfWeek}
         onSelectDate={setSelectedDate}

package/src/components/organisms/day-select/day-select.styles.js

@@ -11,4 +11,12 @@ export const Stylesheet = (context) =>
       borderRadius: Scale.m,
       overflow: 'hidden',
     },
+    childrenContainer: {
+      flexDirection: 'row',
+      justifyContent: 'space-evenly',
+    },
+    actionContainer: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    }
   });

package/src/components/atoms/footer/footer.styles.d.ts

@@ -1,14 +0,0 @@
-export function Stylesheet(context: any): {
-    container: {
-        flexDirection: "row";
-        alignItems: "center" | "flex-start";
-        justifyContent: "center";
-        paddingTop: number;
-        backgroundColor: any;
-        borderTopColor: any;
-        borderStyle: "solid";
-        borderTopWidth: number;
-        height: number;
-        width: "100%";
-    };
-};

package/src/components/organisms/day-select/day-select.styles.d.ts

@@ -1,10 +0,0 @@
-export function Stylesheet(context: any): {
-  container: {
-    backgroundColor: any;
-    padding: number;
-    flexDirection: 'row';
-    justifyContent: 'space-evenly';
-    borderRadius: number;
-    overflow: 'hidden';
-  };
-};