@tactics/toddle-styleguide 0.1.11 → 0.1.12

package/package.json

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

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

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

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

@@ -11,9 +11,16 @@ import {CalendarIcon} from '../../../icons/outline/calendar/calendar.icon';
 type CalendarSelectProps = {
   onPressDate: (date: ToddleDateTime) => void;
   startDate: ToddleDateTime;
+  pressChevronRight?: (date: ToddleDateTime) => void;
+  pressChevronLeft?: (date: ToddleDateTime) => void;
 };
 
-const CalendarSelect = ({onPressDate, startDate}: CalendarSelectProps) => {
+const CalendarSelect = ({
+  onPressDate,
+  startDate,
+  pressChevronLeft,
+  pressChevronRight,
+}: CalendarSelectProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
@@ -29,7 +36,12 @@ const CalendarSelect = ({onPressDate, startDate}: CalendarSelectProps) => {
 
   return (
     <View style={styles.container}>
-      <Pressable onPress={onPressLeft}>
+      <Pressable
+        onPress={() => {
+          onPressLeft();
+          if (pressChevronLeft) pressChevronLeft(visibleDate.minus({days: 1}));
+        }}
+      >
         <ChevronLeftIcon />
       </Pressable>
 
@@ -47,7 +59,12 @@ const CalendarSelect = ({onPressDate, startDate}: CalendarSelectProps) => {
         </View>
       </Pressable>
 
-      <Pressable onPress={onPressRight}>
+      <Pressable
+        onPress={() => {
+          onPressRight();
+          if (pressChevronRight) pressChevronRight(visibleDate.plus({days: 1}));
+        }}
+      >
         <ChevronRightIcon />
       </Pressable>
     </View>

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

@@ -16,6 +16,18 @@ export const CalendarSelectPreview = ({}: {}) => {
           )
         }
         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()
+          )
+        }
       />
     </View>
   );

package/src/utilities/toddle-datetime/toddle-datetime.class.d.ts

@@ -1,10 +1,9 @@
-import { DateTime as LuxonDateTime } from 'luxon';
 import { LocaleOptions, DateTimeOptions } from './interfaces/toddle-datetime.interface';
 import { DurationLike } from './types/duration-like.type';
 import { DateTimeFormatOptions, DateTimeUnit } from './types/toddle-datetime.type';
 export declare class ToddleDateTime {
     private dateTime;
-    constructor(dateTime?: LuxonDateTime);
+    private constructor();
     static now(): ToddleDateTime;
     static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime;
     static get DATE_MED(): DateTimeFormatOptions;