@tactics/toddle-styleguide 1.2.2 → 1.2.3

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

@@ -63,18 +63,20 @@ export const Calendar = ({
 }: CalendarProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const initDate = ToddleDateTime.now().toISODate();
+  const initDate = ToddleDateTime.now().toISODate() || undefined;
 
   const today = selected.toISODate();
 
-  const marked = useMemo(
-    () => ({
+  const marked = useMemo(() => {
+    if (today === null) {
+      return {};
+    }
+    return {
       [today]: {
         selected: true,
       },
-    }),
-    [today]
-  );
+    };
+  }, [today]);
 
   return (
     <RNCalendar

package/src/components/molecules/calendar-select/calendar-select.component.d.ts

@@ -2,8 +2,8 @@ import { ToddleDateTime } from '../../../utilities/toddle-datetime/toddle-dateti
 type CalendarSelectProps = {
     onPressDate: (date: ToddleDateTime) => void;
     startDate: ToddleDateTime;
-    pressChevronRight?: (date: ToddleDateTime) => void;
-    pressChevronLeft?: (date: ToddleDateTime) => void;
+    pressChevronRight: (date: ToddleDateTime) => void;
+    pressChevronLeft: (date: ToddleDateTime) => void;
 };
 declare const CalendarSelect: ({ onPressDate, startDate, pressChevronLeft, pressChevronRight, }: CalendarSelectProps) => JSX.Element;
 export { CalendarSelect as CalendarSelect };

package/src/components/molecules/calendar-select/calendar-select.component.tsx

@@ -10,8 +10,8 @@ import {Icon} from '../../../icons/index';
 type CalendarSelectProps = {
   onPressDate: (date: ToddleDateTime) => void;
   startDate: ToddleDateTime;
-  pressChevronRight?: (date: ToddleDateTime) => void;
-  pressChevronLeft?: (date: ToddleDateTime) => void;
+  pressChevronRight: (date: ToddleDateTime) => void;
+  pressChevronLeft: (date: ToddleDateTime) => void;
 };
 
 const CalendarSelect = ({
@@ -29,20 +29,11 @@ const CalendarSelect = ({
     setVisibleDate(startDate);
   }, [startDate]);
 
-  const onPressRight = () => {
-    setVisibleDate(visibleDate.plus({days: 1}));
-  };
-
-  const onPressLeft = () => {
-    setVisibleDate(visibleDate.minus({days: 1}));
-  };
-
   return (
     <View style={styles.container}>
       <Pressable
         onPress={() => {
-          onPressLeft();
-          if (pressChevronLeft) pressChevronLeft(visibleDate.minus({days: 1}));
+          pressChevronLeft(visibleDate.minus({days: 1}));
         }}
       >
         <Icon style={'regular'} name={'chevron-left'} />
@@ -68,8 +59,7 @@ const CalendarSelect = ({
 
       <Pressable
         onPress={() => {
-          onPressRight();
-          if (pressChevronRight) pressChevronRight(visibleDate.plus({days: 1}));
+          pressChevronRight(visibleDate.plus({days: 1}));
         }}
       >
         <Icon style={'regular'} name={'chevron-right'} />

package/src/components/molecules/calendar-select/calendar-select.preview.tsx

@@ -1,33 +1,20 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import {CalendarSelect} from './calendar-select.component';
 import {ToddleDateTime} from '../../../utilities/toddle-datetime/toddle-datetime.class';
 
 export const CalendarSelectPreview = ({}: {}) => {
+  const [date, setDate] = useState(
+    ToddleDateTime.local({zone: 'America/Los_Angeles'})
+  );
+  console.log(date);
   return (
     <View>
       <CalendarSelect
-        onPressDate={(date) =>
-          console.log(
-            'show calendar',
-            ',',
-            'date is:',
-            date.toLocaleString(ToddleDateTime.DATE_MED)
-          )
-        }
-        startDate={ToddleDateTime.now()}
-        pressChevronRight={(date) =>
-          console.log(
-            'pijl rechts gedrukt, aangepaste data=',
-            date.toLocaleString()
-          )
-        }
-        pressChevronLeft={(date) =>
-          console.log(
-            'pijl links gedrukt, aangepaste data=',
-            date.toLocaleString()
-          )
-        }
+        onPressDate={() => console.log('open modal')}
+        startDate={date}
+        pressChevronRight={setDate}
+        pressChevronLeft={setDate}
       />
     </View>
   );