@tactics/toddle-styleguide 1.4.0 → 1.4.1

package/package.json

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

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 = [];
@@ -58,39 +58,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/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';
-  };
-};