@tactics/toddle-styleguide 1.2.1 → 1.2.3

package/src/components/molecules/time-picker/time-picker.component.d.ts

@@ -0,0 +1,8 @@
+interface TimePickerProps {
+    initialHours: string;
+    initialMinutes: string;
+    onChangeHours: (value: string) => void;
+    onChangeMinutes: (value: string) => void;
+}
+export declare const TimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: TimePickerProps) => JSX.Element;
+export {};

package/src/components/molecules/time-picker/time-picker.component.tsx

@@ -0,0 +1,65 @@
+import {View} from 'react-native';
+import WheelPickerExpo from 'react-native-wheel-picker-expo';
+import {Heading3} from '../../atoms/heading-components';
+import {Stylesheet} from './time-picker.styles';
+import {Scale} from '../../../theme/scale/index';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+
+interface TimePickerProps {
+  initialHours: string;
+  initialMinutes: string;
+  onChangeHours: (value: string) => void;
+  onChangeMinutes: (value: string) => void;
+}
+
+const HOURS: string[] = [
+  '--',
+  ...Array.from({length: 24}, (_, i) => i.toString().padStart(2, '0')),
+];
+const MINUTES: string[] = [
+  '--',
+  ...Array.from({length: 60}, (_, i) => i.toString().padStart(2, '0')),
+];
+
+export const TimePicker = ({
+  initialHours,
+  initialMinutes,
+  onChangeHours,
+  onChangeMinutes,
+}: TimePickerProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const initialIndexHandler = (dataArray: string[], value: string): number => {
+    return dataArray.findIndex((element) => element === value);
+  };
+
+  return (
+    <View style={styles.container}>
+      <WheelPickerExpo
+        items={HOURS.map((value) => ({label: value, value: value}))}
+        onChange={({item}) => onChangeHours(item.label)}
+        width={Scale.m * 4.5}
+        selectedStyle={styles.selected}
+        renderItem={({label, textAlign}) => (
+          <Heading3 textAlign={textAlign}>{label}</Heading3>
+        )}
+        initialSelectedIndex={initialIndexHandler(HOURS, initialHours)}
+      />
+      <View>
+        <Heading3>:</Heading3>
+      </View>
+      <WheelPickerExpo
+        items={MINUTES.map((value) => ({label: value, value: value}))}
+        onChange={({item}) => onChangeMinutes(item.label)}
+        width={Scale.m * 4.5}
+        selectedStyle={styles.selected}
+        renderItem={({label, textAlign}) => (
+          <Heading3 textAlign={textAlign}>{label}</Heading3>
+        )}
+        initialSelectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
+      />
+    </View>
+  );
+};

package/src/components/molecules/time-picker/time-picker.preview.d.ts

@@ -0,0 +1 @@
+export declare const TimePickerPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/time-picker/time-picker.preview.tsx

@@ -0,0 +1,109 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {TimePicker} from './time-picker.component';
+import {Heading3} from '../../atoms/heading-components';
+import {Button} from '../button/button.component';
+import {Avatar} from '../avatar/avatar.component';
+import {Initials} from '../../../models/initials.model';
+import {Size} from '../../../types/size.enum';
+import {Modal} from '../../templates/modal/modal.component';
+
+export const TimePickerPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
+  const [checkOutHours, setCheckOutHours] = useState('--');
+  const [checkOutMinutes, setCheckOutMinutes] = useState('--');
+
+  console.log(`
+    Check In:
+        Hours: ${checkInHours}
+        Minutes: ${checkInMinutes}
+        
+    Check Out:
+        Hours: ${checkOutHours}
+        Minutes: ${checkOutMinutes}
+  `);
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View
+        style={{
+          marginTop: 150,
+        }}
+      >
+        <Button
+          onPress={() => setPopoverIsVisible(true)}
+          label="Open popover"
+        />
+      </View>
+      <Modal
+        title={'Zeno Driesennnnnnnnnnnnnnnnn'}
+        subtitle={'Registratie aanpassen'}
+        onClose={() => setPopoverIsVisible(false)}
+        isVisible={popoverIsVisible}
+        scrollable={false}
+      >
+        <View>
+          <View style={{alignItems: 'center', marginBottom: 16}}>
+            <Avatar
+              source={Initials.for('Zeno', 'Driesen')}
+              size={Size.LARGE}
+            />
+          </View>
+          <View
+            style={{
+              flexDirection: 'row',
+              justifyContent: 'space-between',
+            }}
+          >
+            <View>
+              <Heading3
+                bold={true}
+                textAlign={'center'}
+                addStyle={{marginBottom: 8}}
+              >
+                Check In
+              </Heading3>
+              <TimePicker
+                initialHours={checkInHours}
+                initialMinutes={checkInMinutes}
+                onChangeHours={setCheckInHours}
+                onChangeMinutes={setCheckInMinutes}
+              />
+            </View>
+            <View>
+              <Heading3
+                bold={true}
+                textAlign={'center'}
+                addStyle={{marginBottom: 8}}
+              >
+                Check Out
+              </Heading3>
+              <TimePicker
+                initialHours={checkOutHours}
+                initialMinutes={checkOutMinutes}
+                onChangeHours={setCheckOutHours}
+                onChangeMinutes={setCheckOutMinutes}
+              />
+            </View>
+          </View>
+          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
+            <Button
+              label={'Bewaar'}
+              onPress={() => console.log('Bewaar registratie aanpassing')}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

package/src/components/molecules/time-picker/time-picker.styles.d.ts

@@ -0,0 +1,15 @@
+export function Stylesheet(context: any): {
+  container: {
+    borderColor: any;
+    borderWidth: number;
+    borderStyle: 'solid';
+    borderRadius: number;
+    overflow: 'hidden';
+    flexDirection: 'row';
+    alignItems: 'center';
+  };
+  selected: {
+    borderColor: any;
+    borderWidth: number;
+  };
+};

package/src/components/molecules/time-picker/time-picker.styles.js

@@ -0,0 +1,19 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    container: {
+      borderColor: context.colors.ui.xlightgrey,
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderRadius: Scale.m,
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    selected: {
+      borderColor: context.colors.ui.lightgrey,
+      borderWidth: 1,
+    },
+  });

package/src/components/molecules/time-picker/time-picker.test.js

@@ -0,0 +1,18 @@
+import renderer from 'react-test-renderer';
+import {TimePicker} from './time-picker.component';
+
+describe('Time picker test', () => {
+  it('Should render a time picker where we can choose the hours and minutes separately, and our initial set time is 08:00', () => {
+    const tree = renderer
+      .create(
+        <TimePicker
+          initialHours={'08'}
+          initialMinutes={'00'}
+          onChangeHours={() => console.log('set the hours')}
+          onChangeMinutes={() => console.log('set the minutes')}
+        />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

package/src/components/molecules/time-tracker/time-tracker.component.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { VisualState } from '../../../types/visual-state.enum';
 type TimeTrackerProps = {
     text: string;

package/src/components/molecules/time-tracker/time-tracker.preview.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TimeTrackerPreview: ({}: {}) => JSX.Element;

package/src/components/molecules/time-tracker/time-tracker.test.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import {TimeTracker} from './time-tracker.component';
-import render from 'react-test-renderer';
 
 describe('test time-tracker', () => {
   it('given the visualState is DEFAULT return a blue colored ball', () => {

package/src/components/molecules/timeline/__snapshots__/timeline.test.js.snap

@@ -4,6 +4,8 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
 <View
   style={
     {
+      "marginBottom": 8,
+      "marginTop": 8,
       "width": "100%",
     }
   }
@@ -14,6 +16,7 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
         "height": 8,
+        "overflow": "hidden",
       }
     }
   >
@@ -36,35 +39,36 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
         }
       }
       style={
-        [
-          {
-            "borderRadius": 50,
-            "height": 8,
-            "left": "8%",
-          },
-          {
-            "width": "40%",
-          },
-        ]
+        {
+          "borderRadius": 50,
+          "height": 8,
+          "left": "10%",
+          "width": "33.333333333333336%",
+        }
       }
     />
   </View>
   <View
     style={
-      {
-        "flexDirection": "row",
-        "height": 24,
-        "justifyContent": "space-between",
-        "marginLeft": "8%",
-        "marginTop": 8,
-        "width": "40%",
-      }
+      [
+        {
+          "flexDirection": "row",
+          "height": 24,
+          "marginTop": 8,
+          "width": "33.333333333333336%",
+        },
+        {
+          "justifyContent": "space-between",
+          "marginLeft": "10%",
+        },
+        false,
+      ]
     }
   >
     <View
       style={
         {
-          "right": 20,
+          "right": 16,
         }
       }
     >
@@ -93,7 +97,7 @@ exports[`Timeline visual test renders a check-in time and check-out time 1`] = `
     <View
       style={
         {
-          "left": 20,
+          "left": 16,
         }
       }
     >
@@ -127,6 +131,8 @@ exports[`Timeline visual test renders a check-in time with no known check-out ti
 <View
   style={
     {
+      "marginBottom": 8,
+      "marginTop": 8,
       "width": "100%",
     }
   }
@@ -137,6 +143,7 @@ exports[`Timeline visual test renders a check-in time with no known check-out ti
         "backgroundColor": "#E5E8EB",
         "borderRadius": 50,
         "height": 8,
+        "overflow": "hidden",
       }
     }
   >
@@ -159,35 +166,36 @@ exports[`Timeline visual test renders a check-in time with no known check-out ti
         }
       }
       style={
-        [
-          {
-            "borderRadius": 50,
-            "height": 8,
-            "left": "8%",
-          },
-          {
-            "width": "35%",
-          },
-        ]
+        {
+          "borderRadius": 50,
+          "height": 8,
+          "left": "10%",
+          "width": "25%",
+        }
       }
     />
   </View>
   <View
     style={
-      {
-        "flexDirection": "row",
-        "height": 24,
-        "justifyContent": "space-between",
-        "marginLeft": "8%",
-        "marginTop": 8,
-        "width": "35%",
-      }
+      [
+        {
+          "flexDirection": "row",
+          "height": 24,
+          "marginTop": 8,
+          "width": "25%",
+        },
+        {
+          "justifyContent": "space-between",
+          "marginLeft": "10%",
+        },
+        false,
+      ]
     }
   >
     <View
       style={
         {
-          "right": 20,
+          "right": 16,
         }
       }
     >

package/src/components/molecules/timeline/timeline.component.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
-type TimelineProps = {
+type TimeLineProps = {
     checkIn: string;
     checkOut?: string;
 };
-export declare const Timeline: ({ checkIn, checkOut }: TimelineProps) => JSX.Element;
+export declare const TimeLine: ({ checkIn, checkOut }: TimeLineProps) => JSX.Element;
 export {};

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

@@ -5,132 +5,42 @@ import {Stylesheet} from './timeline.styles';
 import {LinearGradient} from 'expo-linear-gradient';
 import {SmallText} from '../../atoms/paragraph-components';
 
-type TimelineProps = {
+type TimeLineProps = {
   checkIn: string;
   checkOut?: string;
 };
 
-export const Timeline = ({checkIn, checkOut}: TimelineProps) => {
-  let position: number;
+export const TimeLine = ({checkIn, checkOut}: TimeLineProps) => {
+  const startHour = 6;
+  const endHour = 21;
 
-  function positionHandler(prop: string) {
-    if (prop === '06:30') {
-      position = 0;
-    } else if (prop < '07:00') {
-      position = 2;
-    } else if (prop === '07:00') {
-      position = 4;
-    } else if (prop < '07:30') {
-      position = 6;
-    } else if (prop === '07:30') {
-      position = 8;
-    } else if (prop < '08:00') {
-      position = 10;
-    } else if (prop === '08:00') {
-      position = 12;
-    } else if (prop < '08:30') {
-      position = 14;
-    } else if (prop === '08:30') {
-      position = 16;
-    } else if (prop < '09:00') {
-      position = 18;
-    } else if (prop === '09:00') {
-      position = 20;
-    } else if (prop < '09:30') {
-      position = 22;
-    } else if (prop === '09:30') {
-      position = 24;
-    } else if (prop < '10:00') {
-      position = 26;
-    } else if (prop === '10:00') {
-      position = 28;
-    } else if (prop < '10:30') {
-      position = 30;
-    } else if (prop === '10:30') {
-      position = 32;
-    } else if (prop < '11:00') {
-      position = 34;
-    } else if (prop === '11:00') {
-      position = 36;
-    } else if (prop < '11:30') {
-      position = 38;
-    } else if (prop === '11:30') {
-      position = 40;
-    } else if (prop < '12:00') {
-      position = 42;
-    } else if (prop === '12:00') {
-      position = 44;
-    } else if (prop < '12:30') {
-      position = 46;
-    } else if (prop === '12:30') {
-      position = 48;
-    } else if (prop < '13:00') {
-      position = 50;
-    } else if (prop === '13:00') {
-      position = 52;
-    } else if (prop < '13:30') {
-      position = 54;
-    } else if (prop === '13:30') {
-      position = 56;
-    } else if (prop < '14:00') {
-      position = 58;
-    } else if (prop === '14:00') {
-      position = 60;
-    } else if (prop < '14:30') {
-      position = 62;
-    } else if (prop === '14:30') {
-      position = 64;
-    } else if (prop < '15:00') {
-      position = 66;
-    } else if (prop === '15:00') {
-      position = 68;
-    } else if (prop < '15:30') {
-      position = 70;
-    } else if (prop === '15:30') {
-      position = 72;
-    } else if (prop < '16:00') {
-      position = 74;
-    } else if (prop === '16:00') {
-      position = 76;
-    } else if (prop < '16:30') {
-      position = 78;
-    } else if (prop === '16:30') {
-      position = 80;
-    } else if (prop < '17:00') {
-      position = 82;
-    } else if (prop === '17:00') {
-      position = 84;
-    } else if (prop < '17:30') {
-      position = 86;
-    } else if (prop === '17:30') {
-      position = 88;
-    } else if (prop < '18:00') {
-      position = 90;
-    } else if (prop === '18:00') {
-      position = 92;
-    } else if (prop < '18:30') {
-      position = 94;
-    } else if (prop === '18:30') {
-      position = 96;
-    } else if (prop < '19:00') {
-      position = 98;
-    } else if (prop === '19:00') {
-      position = 100;
-    }
-    return position;
-  }
+  const calculateCheckInPosition = (checkInTime: string) => {
+    const [hours, minutes] = checkInTime.split(':');
+    const totalMinutes =
+      parseInt(hours) * 60 + parseInt(minutes) - startHour * 60;
+    return (totalMinutes / ((endHour - startHour) * 60)) * 100;
+  };
 
-  const checkInPosition = positionHandler(checkIn);
-  const checkOutPosition = positionHandler(checkOut!);
+  const calculateCheckOutPosition = (checkOutTime?: string) => {
+    if (checkOutTime) {
+      const [hours, minutes] = checkOutTime.split(':');
+      const totalMinutes =
+        parseInt(hours) * 60 + parseInt(minutes) - startHour * 60;
+      return (totalMinutes / ((endHour - startHour) * 60)) * 100;
+    }
+    return 25;
+  };
 
-  function calcWidth(prop1: number, prop2: number) {
-    return prop1 - prop2;
-  }
+  const checkInPosition = calculateCheckInPosition(checkIn);
+  const checkOutPosition = calculateCheckOutPosition(checkOut);
 
-  const lineWidth = calcWidth(checkOutPosition, checkInPosition);
+  const gradientWidth =
+    checkOut && checkOutPosition !== checkInPosition
+      ? checkOutPosition - checkInPosition
+      : 25;
 
   const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context, checkInPosition, lineWidth, checkOut);
+  const styles = Stylesheet(context, checkInPosition, gradientWidth);
 
   return (
     <View style={styles.container}>
@@ -141,10 +51,7 @@ export const Timeline = ({checkIn, checkOut}: TimelineProps) => {
               ? [context.colors.main['5'], context.colors.ui.lightgrey]
               : [context.colors.main['5'], context.colors.main['5']]
           }
-          style={[
-            styles.checkInLine,
-            !checkOut ? styles.checkInWidth : styles.checkOutWidth,
-          ]}
+          style={styles.checkInLine}
           start={{x: 0, y: 0}}
           end={{x: 1, y: 0}}
         />

package/src/components/molecules/timeline/timeline.preview.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
 export declare const TimeLinePreview: ({}: {}) => JSX.Element;

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

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Timeline} from './timeline.component';
-import {SafeAreaView, ScrollView} from 'react-native';
+import {TimeLine} from './timeline.component';
 const {View} = require('react-native');
 
 export const TimeLinePreview = ({}: {}) => {
@@ -19,24 +18,14 @@ export const TimeLinePreview = ({}: {}) => {
           justifyContent: 'center',
         }}
       >
-        <Timeline checkIn={'07:00'} checkOut={'12:00'} />
-        <Timeline checkIn={'08:00'} checkOut={'12:30'} />
-        <Timeline checkIn={'13:00'} />
-        <View
-          style={{
-            width: '60%',
-            marginTop: 30,
-            marginBottom: 30,
-          }}
-        >
-          <Timeline checkIn={'13:30'} checkOut={'19:00'} />
-          <Timeline checkIn={'09:00'} checkOut={'17:30'} />
-          <Timeline checkIn={'07:12'} />
-          <Timeline checkIn={'06:30'} checkOut={'19:00'} />
-        </View>
-        <Timeline checkIn={'08:17'} />
-        <Timeline checkIn={'07:52'} checkOut={'12:20'} />
-        <Timeline checkIn={'13:00'} checkOut={'17:45'} />
+        <TimeLine checkIn={'07:00'} checkOut={'12:00'} />
+        <TimeLine checkIn={'08:00'} checkOut={'12:30'} />
+        <TimeLine checkIn={'13:00'} checkOut={''} />
+        <TimeLine checkIn={'16:00'} checkOut={'21:00'} />
+        <TimeLine checkIn={'07:52'} checkOut={'12:20'} />
+        <TimeLine checkIn={'13:00'} checkOut={'17:45'} />
+        <TimeLine checkIn={'18:00'} />
+        <TimeLine checkIn={'15:00'} checkOut={'20:00'} />
       </View>
     </View>
   );