@tactics/toddle-styleguide 1.4.21 → 1.5.0

package/package.json

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

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

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

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

@@ -6,35 +6,43 @@ import {Stylesheet} from './calendar-select.styles';
 import {Pressable, View} from 'react-native';
 import {Paragraph} from '../../atoms/paragraph-components';
 import {Icon} from '../../../icons/index';
+import { useDebounce } from '../../../hooks/use-debounce';
 
 type CalendarSelectProps = {
   onPressDate: (date: ToddleDateTime) => void;
   startDate: ToddleDateTime;
-  pressChevronRight: (date: ToddleDateTime) => void;
-  pressChevronLeft: (date: ToddleDateTime) => void;
+  onUpdateDate: (date: ToddleDateTime) => void;
 };
 
 const CalendarSelect = ({
   onPressDate,
   startDate,
-  pressChevronLeft,
-  pressChevronRight,
+  onUpdateDate,
 }: CalendarSelectProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
 
   const [visibleDate, setVisibleDate] = useState(startDate);
+  const debouncedVisibleDate = useDebounce<ToddleDateTime>(visibleDate, 500);
 
   useEffect(() => {
     setVisibleDate(startDate);
   }, [startDate]);
 
+  useEffect(() => {
+    // If they are the same dont trigger event again.
+    if (visibleDate !== startDate) {
+      onUpdateDate(debouncedVisibleDate);
+    }
+  }, [debouncedVisibleDate])
+
   return (
     <View style={styles.container}>
       <Pressable
         onPress={() => {
-          pressChevronLeft(visibleDate.minus({days: 1}));
+          setVisibleDate(visibleDate.minus({days: 1}));
         }}
+        style={styles.arrowContainer}
       >
         <Icon style={'regular'} name={'chevron-left'} />
       </Pressable>
@@ -59,8 +67,9 @@ const CalendarSelect = ({
 
       <Pressable
         onPress={() => {
-          pressChevronRight(visibleDate.plus({days: 1}));
+          setVisibleDate(visibleDate.plus({days: 1}));
         }}
+        style={styles.arrowContainer}
       >
         <Icon style={'regular'} name={'chevron-right'} />
       </Pressable>

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

@@ -13,8 +13,7 @@ export const CalendarSelectPreview = ({}: {}) => {
       <CalendarSelect
         onPressDate={() => console.log('open modal')}
         startDate={date}
-        pressChevronRight={setDate}
-        pressChevronLeft={setDate}
+        onUpdateDate={setDate}
       />
     </View>
   );

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

@@ -1,24 +1,27 @@
 export function Stylesheet(context: any): {
-  container: {
-    color: any;
-    flexDirection: 'row';
-    alignItems: 'center';
-    justifyContent: 'space-between';
-  };
-  dateContainer: {
-    flexDirection: 'row';
-    backgroundColor: any;
-    borderRadius: number;
-    paddingTop: number;
-    paddingBottom: number;
-    paddingLeft: number;
-    paddingRight: number;
-    alignItems: 'center';
-  };
-  text: {
-    color: any;
-  };
-  icon: {
-    marginRight: number;
-  };
+    container: {
+        color: any;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-between";
+    };
+    dateContainer: {
+        flexDirection: "row";
+        backgroundColor: any;
+        borderRadius: number;
+        paddingTop: number;
+        paddingBottom: number;
+        paddingLeft: number;
+        paddingRight: number;
+        alignItems: "center";
+    };
+    arrowContainer: {
+        width: number;
+        height: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    icon: {
+        marginRight: number;
+    };
 };

package/src/components/molecules/calendar-select/calendar-select.styles.js

@@ -19,6 +19,12 @@ export const Stylesheet = (context) =>
       paddingRight: Scale.l,
       alignItems: 'center',
     },
+    arrowContainer: {
+      width: Scale.xxl,
+      height: Scale.xxl,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
     icon: {
       marginRight: Scale.m,
     },

package/src/components/molecules/timeline/timeline.component.tsx

@@ -11,8 +11,8 @@ type TimeLineProps = {
 };
 
 export const TimeLine = ({checkIn, checkOut}: TimeLineProps) => {
-  const startHour = 6;
-  const endHour = 21;
+  const startHour = 0;
+  const endHour = 24;
 
   const calculateCheckInPosition = (checkInTime: string) => {
     const [hours, minutes] = checkInTime.split(':');

package/src/hooks/use-debounce.d.ts

@@ -0,0 +1 @@
+export declare function useDebounce<T>(value: T, delay?: number): T;

package/src/hooks/use-debounce.ts

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react'
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500)
+
+    return () => {
+      clearTimeout(timer)
+    }
+  }, [value, delay])
+
+  return debouncedValue
+}