@tactics/toddle-styleguide 1.5.0 → 1.6.1

package/App.tsx

@@ -73,10 +73,11 @@ import {QuickMessagePreview} from './src/components/atoms/quick-message/quick-me
 import {TabViewPreview} from './src/components/organisms/tab-view/tab-view.preview';
 import {LinePreview} from './src/components/atoms/line/line.preview';
 import {JournalEntryPreview} from './src/components/organisms/journal-entry/journal-entry.preview';
-import { TimetableEditPreview } from './src/components/organisms/timetable-edit/timetable-edit.preview';
 import { ContextLabelPreview } from './src/components/molecules/context-label/context-label.preview';
 import { CountPreview } from './src/components/atoms/count/count.preview';
 import { AmountPreview } from './src/components/molecules/amount/amount.preview';
+import { BareTimePickerPreview } from './src/components/molecules/bare-time-picker/bare-time-picker.preview';
+import { TimetableEditorPreview } from './src/components/organisms/timetable-editor/timetable-editor.preview';
 
 import {
   SafeAreaProvider,
@@ -287,13 +288,17 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Time Picker"
         onPress={() => navigation.push('time-picker')}
       />
+      <ReactBtn
+        title="Bare Time Picker"
+        onPress={() => navigation.push('bare-time-picker')}
+      />
       <ReactBtn
         title="Time Tracker"
         onPress={() => navigation.push('time-tracker')}
       />
       <ReactBtn
-        title="Timetable Edit"
-        onPress={() => navigation.push('timetable-edit')}
+        title="Timetable Editor"
+        onPress={() => navigation.push('timetable-editor')}
       />
       <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
       <ReactBtn
@@ -485,11 +490,14 @@ function App() {
           <Stack.Screen name="time-picker">
             {() => <TimePickerPreview />}
           </Stack.Screen>
+          <Stack.Screen name="bare-time-picker">
+            {() => <BareTimePickerPreview />}
+          </Stack.Screen>
           <Stack.Screen name="time-tracker">
             {() => <TimeTrackerPreview />}
           </Stack.Screen>
-          <Stack.Screen name="timetable-edit">
-            {() => <TimetableEditPreview />}
+          <Stack.Screen name="timetable-editor">
+            {() => <TimetableEditorPreview />}
           </Stack.Screen>
           <Stack.Screen name="timeline">
             {() => <TimeLinePreview />}

package/index.d.ts

@@ -62,13 +62,16 @@ import { TimetableEdit } from './src/components/organisms/timetable-edit/timetab
 import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
+import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
 import { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
 import { VisualState } from './src/types/visual-state.enum';
 import { Initials } from './src/models/initials.model';
+import { TimeSlotRecord } from './src/models/time-slot-record';
+import { TimeSlotSequence } from './src/models/time-slot-sequence';
 import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.class';
 import { ThemeCtx } from './src/context/theme.context';
 import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount };
+export { AllCapsHeading, Avatar, BackgroundGradient, BlockedMessage, Button, Calendar, CalendarSelect, CancelLink, Check, Checkbox, ChildListItem, ContactItem, ContactRole, DateInput, DaySelect, DefaultSelect, DepartmentLogo, FilterRange, FilterTab, Footer, Heading1, Heading2, Heading3, Heading4, Icon, ImageBubble, IncrementInput, Info, JournalEntry, LanguageButton, Line, LoadingIndicator, Logo, MessageInput, Modal, MoreInfoButton, MyChildListItem, Paragraph, PasswordInput, PersonInfoCard, Pill, Popover, PopOverAction, PressableIcon, QuickFilter, QuickMessage, Search, SelectLink, SelectListItem, SelectPicker, SmallText, Snackbar, SplitContainer, Swipe, TabView, Tag, TextBubble, TextInput, TimeLine, TimePicker, TimeTracker, TinyText, WaveBackground, WideButton, BubbleAlignment, Initials, KeyBoardTypes, Size, ThemeCtx, ToddleDateTime, VisualState, CreateResponsiveStyle, Scale, TimetableEdit, ContextLabel, Count, Amount, TimetableEditor, TimeSlotRecord, TimeSlotSequence };

package/index.tsx

@@ -80,6 +80,7 @@ import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable
 import { ContextLabel } from './src/components/molecules/context-label/context-label.component';
 import { Count } from './src/components/atoms/count/count.component';
 import { Amount } from './src/components/molecules/amount/amount.component';
+import { TimetableEditor } from './src/components/organisms/timetable-editor/timetable-editor.component';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -89,6 +90,8 @@ import {VisualState} from './src/types/visual-state.enum';
 
 // Exports of models
 import {Initials} from './src/models/initials.model';
+import { TimeSlotRecord } from './src/models/time-slot-record';
+import { TimeSlotSequence } from './src/models/time-slot-sequence';
 
 // Exports of classes
 import {ToddleDateTime} from './src/utilities/toddle-datetime/toddle-datetime.class';
@@ -179,5 +182,8 @@ export {
   TimetableEdit,
   ContextLabel,
   Count,
-  Amount
+  Amount,
+  TimetableEditor,
+  TimeSlotRecord,
+  TimeSlotSequence
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
@@ -57,6 +57,7 @@
     "react-native-swipe-gestures": "^1.0.5",
     "react-native-web": "~0.19.6",
     "react-native-wheel-picker-expo": "^0.5.4",
+    "react-native-wheely": "^0.6.0",
     "react-test-renderer": "^18.2.0"
   },
   "devDependencies": {

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

@@ -0,0 +1,9 @@
+import React from "react";
+interface BareTimePickerProps {
+    initialHours: string;
+    initialMinutes: string;
+    onChangeHours: (value: string) => void;
+    onChangeMinutes: (value: string) => void;
+}
+export declare const BareTimePicker: ({ initialHours, initialMinutes, onChangeHours, onChangeMinutes, }: BareTimePickerProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,80 @@
+import { useContext } from "react";
+import { ThemeCtx } from "../../../context/theme.context";
+import { Stylesheet } from "./bare-time-picker.styles";
+import { View } from "react-native";
+import React from "react";
+import WheelPicker from 'react-native-wheely';
+import { Scale } from "../../../theme/scale";
+
+
+interface BareTimePickerProps {
+    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 BareTimePicker = ({
+    initialHours,
+    initialMinutes,
+    onChangeHours,
+    onChangeMinutes,
+}: BareTimePickerProps) => {
+    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.rootContainer}>
+            <WheelPicker
+                options={HOURS.map((value) => (value == '' ? '--' : value))}
+                onChange={(index) => onChangeHours(HOURS[index])}
+                selectedIndex={initialIndexHandler(HOURS, initialHours)}
+                visibleRest={1}
+                selectedIndicatorStyle={{
+                    borderRadius: 0,
+                    backgroundColor: context.colors.main[9],
+                }}
+                containerStyle={{
+                    backgroundColor: context.colors.ui.xlightgrey,
+                    width: '50%',
+                    borderTopLeftRadius:Scale.xxs,
+                    borderBottomLeftRadius:Scale.xxs,
+                }}
+                itemTextStyle={{fontSize: Scale.l}}
+                scaleFunction={(x) => x/1.5}
+            />
+            <WheelPicker
+                options={MINUTES.map((value) => (value == '' ? '--' : value))}
+                onChange={(index) => onChangeMinutes(MINUTES[index])}
+                selectedIndex={initialIndexHandler(MINUTES, initialMinutes)}
+                visibleRest={1}
+                selectedIndicatorStyle={{
+                    borderRadius: 0,
+                    backgroundColor: context.colors.main[9]
+                }}
+                containerStyle={{
+                    backgroundColor: context.colors.ui.xlightgrey,
+                    width: '50%',
+                    borderTopRightRadius:Scale.xxs,
+                    borderBottomRightRadius:Scale.xxs,
+                }}
+                itemTextStyle={{fontSize: Scale.l}}
+                scaleFunction={(x) => x/1.5}
+            />
+        </View>
+    )
+}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const BareTimePickerPreview: ({}: {}) => React.JSX.Element;

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

@@ -0,0 +1,86 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+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';
+import { BareTimePicker } from './bare-time-picker.component';
+
+export const BareTimePickerPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
+  console.log(`
+    Check In:
+        Hours: ${checkInHours}
+        Minutes: ${checkInMinutes}
+  `);
+
+  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}
+      >
+        <View>
+          <View style={{alignItems: 'center', marginBottom: 16}}>
+            <Avatar
+              source={Initials.for('Zeno', 'Driesen')}
+              size={Size.LARGE}
+            />
+          </View>
+          <View
+            style={{
+              flexDirection: 'column',
+              gap: 26,
+            }}
+          >
+            <View style={{alignItems: 'center'}}>
+              <Heading3
+                bold={true}
+                textAlign={'center'}
+                addStyle={{marginBottom: 8}}
+              >
+                Check In
+              </Heading3>
+              <BareTimePicker
+                initialHours={checkInHours}
+                initialMinutes={checkInMinutes}
+                onChangeHours={setCheckInHours}
+                onChangeMinutes={setCheckInMinutes}
+              />
+            </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/bare-time-picker/bare-time-picker.styles.d.ts

@@ -0,0 +1,8 @@
+export function Stylesheet(context: any): {
+    rootContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        width: "100%";
+        maxWidth: number;
+    };
+};

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

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+    StyleSheet.create({
+        rootContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            width: '100%',
+            maxWidth: 200
+        },
+    });

package/src/components/organisms/timetable-edit/timetable-edit.component.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import { TimetableEditState } from '../../../types/timetable-edit.enum';
 interface TimetableEditProps {
+    index: number;
     initialInHours: string;
     initialInMinutes: string;
     initialOutHours: string;
@@ -8,6 +10,8 @@ interface TimetableEditProps {
     onChangeInMinutes: (value: string) => void;
     onChangeOutHours: (value: string) => void;
     onChangeOutMinutes: (value: string) => void;
+    onPressTag: (val: TimetableEditState, index: number) => void;
+    initialEditState: string;
 }
-export declare const TimetableEdit: ({ initialInHours, initialInMinutes, initialOutHours, initialOutMinutes, onChangeInHours, onChangeInMinutes, onChangeOutHours, onChangeOutMinutes, }: TimetableEditProps) => React.JSX.Element;
+export declare const TimetableEdit: ({ index, initialInHours, initialInMinutes, initialOutHours, initialOutMinutes, onChangeInHours, onChangeInMinutes, onChangeOutHours, onChangeOutMinutes, initialEditState, onPressTag }: TimetableEditProps) => React.JSX.Element;
 export {};

package/src/components/organisms/timetable-edit/timetable-edit.component.tsx

@@ -1,14 +1,15 @@
 import {View} from 'react-native';
 import {Heading3} from '../../atoms/heading-components';
-import {useContext, useState} from 'react';
+import {useContext} from 'react';
 import {ThemeCtx} from '../../../context/theme.context';
 import React from 'react';
 import { Stylesheet } from './timetable-edit.styles';
 import { Tag } from '../../molecules/tag/tag.component';
 import { TimetableEditState } from '../../../types/timetable-edit.enum';
-import { TimePicker } from '../../molecules/time-picker/time-picker.component';
+import { BareTimePicker } from '../../molecules/bare-time-picker/bare-time-picker.component';
 
 interface TimetableEditProps {
+  index: number;
   initialInHours: string;
   initialInMinutes: string;
   initialOutHours: string;
@@ -17,9 +18,12 @@ interface TimetableEditProps {
   onChangeInMinutes: (value: string) => void;
   onChangeOutHours: (value: string) => void;
   onChangeOutMinutes: (value: string) => void;
+  onPressTag: (val: TimetableEditState, index: number) => void
+  initialEditState: string
 }
 
 export const TimetableEdit = ({
+  index,
   initialInHours,
   initialInMinutes,
   initialOutHours,
@@ -28,18 +32,11 @@ export const TimetableEdit = ({
   onChangeInMinutes,
   onChangeOutHours,
   onChangeOutMinutes,
+  initialEditState,
+  onPressTag
 }: TimetableEditProps) => {
   const context = useContext(ThemeCtx);
   const styles = Stylesheet(context);
-  const [editState, setEditState] = useState('');
-
-  const updateEditState = (state: string) => {
-    if (editState == state) {
-        setEditState('')
-    } else {
-        setEditState(state);
-    }
-  }
 
   return (
     <View style={styles.rootContainer}>
@@ -52,8 +49,10 @@ export const TimetableEdit = ({
                 <Tag
                     value={TimetableEditState.IN}
                     label={`${initialInHours == '' ? '--' : initialInHours}:${initialInMinutes == '' ? '--' : initialInMinutes}`}
-                    isSelected={editState == TimetableEditState.IN}
-                    onPress={updateEditState}
+                    isSelected={initialEditState == TimetableEditState.IN}
+                    onPress={() => {
+                        onPressTag(TimetableEditState.IN, index)
+                    }}
                 />
             </View>
             <View style={styles.tagContainer}>
@@ -64,14 +63,16 @@ export const TimetableEdit = ({
                 <Tag
                     value={TimetableEditState.OUT}
                     label={`${initialOutHours == '' ? '--' : initialOutHours}:${initialOutMinutes == '' ? '--' : initialOutMinutes}`}
-                    isSelected={editState == TimetableEditState.OUT}
-                    onPress={updateEditState}
+                    isSelected={initialEditState == TimetableEditState.OUT}
+                    onPress={() => {
+                        onPressTag(TimetableEditState.OUT, index)
+                    }}
                 />
             </View>
         </View>
-        {editState === TimetableEditState.IN &&
+        {initialEditState === TimetableEditState.IN &&
             <View style={styles.pickerContainer}>
-                <TimePicker
+                <BareTimePicker
                     initialHours={initialInHours}
                     initialMinutes={initialInMinutes}
                     onChangeHours={onChangeInHours}
@@ -79,9 +80,9 @@ export const TimetableEdit = ({
                 />
             </View>
         }
-        {editState === TimetableEditState.OUT &&
+        {initialEditState === TimetableEditState.OUT &&
             <View style={styles.pickerContainer}>
-                <TimePicker
+                <BareTimePicker
                     initialHours={initialOutHours}
                     initialMinutes={initialOutMinutes}
                     onChangeHours={onChangeOutHours}

package/src/components/organisms/timetable-edit/timetable-edit.preview.tsx

@@ -3,15 +3,16 @@ import {View} from 'react-native';
 import {Modal} from '../../templates/modal/modal.component';
 import { Button } from '../../molecules/button/button.component';
 import { TimetableEdit } from './timetable-edit.component';
+import { TimetableEditState } from '../../../types/timetable-edit.enum';
 
 export const TimetableEditPreview = ({}: {}) => {
   const [popoverIsVisible, setPopoverIsVisible] = useState(false);
-
   const [checkInHours, setCheckInHours] = useState('09');
   const [checkInMinutes, setCheckInMinutes] = useState('06');
 
   const [checkOutHours, setCheckOutHours] = useState('');
   const [checkOutMinutes, setCheckOutMinutes] = useState('');
+  const [editState, setEditState] = useState(TimetableEditState.NONE);
 
   console.log(`
     Check In:
@@ -37,7 +38,10 @@ export const TimetableEditPreview = ({}: {}) => {
         }}
       >
         <Button
-          onPress={() => setPopoverIsVisible(true)}
+          onPress={() => {
+            setEditState(TimetableEditState.NONE);
+            setPopoverIsVisible(true)
+          }}
           label="Open popover"
         />
       </View>
@@ -49,6 +53,7 @@ export const TimetableEditPreview = ({}: {}) => {
       >
         <View>
             <TimetableEdit
+                index={1}
                 initialInHours={checkInHours}
                 initialInMinutes={checkInMinutes}
                 initialOutHours={checkOutHours}
@@ -57,12 +62,17 @@ export const TimetableEditPreview = ({}: {}) => {
                 onChangeInMinutes={setCheckInMinutes}
                 onChangeOutHours={setCheckOutHours}
                 onChangeOutMinutes={setCheckOutMinutes}
+                initialEditState={editState}
+                onPressTag={(val, index) => {setEditState(val)}}
              />
 
           <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
             <Button
               label={'Bewaar'}
-              onPress={() => console.log('Bewaar registratie aanpassing')}
+              onPress={() => {
+                setEditState(TimetableEditState.NONE);
+                console.log('Bewaar registratie aanpassing')
+              }}
             />
           </View>
         </View>

package/src/components/organisms/timetable-editor/components/timetable-edit-wrapper.d.ts

@@ -0,0 +1,12 @@
+import { TimeSlotRecord } from "../../../../models/time-slot-record";
+import React from "react";
+import { TimetableEditState } from "../../../../types/timetable-edit.enum";
+interface TimetableEditWrapperProps {
+    index: number;
+    record: TimeSlotRecord;
+    onUpdate: (rec: TimeSlotRecord) => void;
+    onPressTag: (val: TimetableEditState, index: number) => void;
+    editState: TimetableEditState;
+}
+export declare const TimetableEditWrapper: ({ index, record, onUpdate, editState, onPressTag }: TimetableEditWrapperProps) => React.JSX.Element;
+export {};

package/src/components/organisms/timetable-editor/components/timetable-edit-wrapper.tsx

@@ -0,0 +1,63 @@
+import { useState } from "react";
+import { TimeSlotRecord } from "../../../../models/time-slot-record";
+import { TimetableEdit } from "../../timetable-edit/timetable-edit.component";
+import React from "react";
+import { TimetableEditState } from "../../../../types/timetable-edit.enum";
+
+interface TimetableEditWrapperProps {
+    index: number;
+    record: TimeSlotRecord;
+    onUpdate: (rec: TimeSlotRecord) => void;
+    onPressTag: (val: TimetableEditState, index: number) => void;
+    editState: TimetableEditState
+}
+
+export const TimetableEditWrapper = ({index, record, onUpdate, editState, onPressTag}: TimetableEditWrapperProps) => {
+    const [initialInhours, initialInMinutes] = record.start
+        ? record.start.split(':')
+        : ':'.split(':');
+    const [initialOuthours, initialOutMinutes] = record.end
+        ? record.end.split(':')
+        : ':'.split(':');
+    const [inHours, setInHours] = useState<string>(initialInhours);
+    const [inMinutes, setInMinutes] = useState<string>(initialInMinutes);
+    const [outHours, setOutHours] = useState<string>(initialOuthours);
+    const [outMinutes, setOutMinutes] = useState<string>(initialOutMinutes);
+
+    return (
+        <TimetableEdit
+            index={index}
+            initialEditState={editState}
+            initialInHours={inHours}
+            initialInMinutes={inMinutes}
+            initialOutHours={outHours}
+            initialOutMinutes={outMinutes}
+            onChangeInHours={(hour) => {
+                setInHours(hour);
+                const updatedInHour = `${hour}:${inMinutes}`;
+                record.start = updatedInHour === ':' ? '' : updatedInHour;
+                onUpdate(record);
+            }}
+            onChangeInMinutes={(minutes) => {
+                setInMinutes(minutes);
+                const updatedInMinutes = `${inHours}:${minutes}`;
+                record.start = updatedInMinutes === ':' ? '' : updatedInMinutes;
+                onUpdate(record);
+            }}
+            onChangeOutHours={(hour) => {
+                setOutHours(hour);
+                const updatedOutHour = `${hour}:${outMinutes}`;
+                record.end = updatedOutHour === ':' ? undefined : updatedOutHour;
+                onUpdate(record);
+            }}
+            onChangeOutMinutes={(minutes) => {
+                setOutMinutes(minutes);
+                const updatedOutMinutes = `${outHours}:${minutes}`;
+                record.end =
+                    updatedOutMinutes === ':' ? undefined : updatedOutMinutes;
+                onUpdate(record);
+            }}
+            onPressTag={(val, index) => {onPressTag(val, index)}}
+        />
+    );
+}

package/src/components/organisms/timetable-editor/timetable-editor.component.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { TimeSlotSequence } from "../../../models/time-slot-sequence";
+interface TimetableEditorProps {
+    sequence: TimeSlotSequence;
+    onChange: (seq: TimeSlotSequence) => void;
+}
+export declare const TimetableEditor: ({ sequence, onChange }: TimetableEditorProps) => React.JSX.Element;
+export {};

package/src/components/organisms/timetable-editor/timetable-editor.component.tsx

@@ -0,0 +1,71 @@
+import React, { useContext, useEffect, useState } from "react"
+import { View } from "react-native";
+import { TimeSlotRecord } from "../../../models/time-slot-record";
+import { TimeSlotSequence } from "../../../models/time-slot-sequence";
+import { TimetableEditWrapper } from "./components/timetable-edit-wrapper";
+import { TimetableEditState } from "../../../types/timetable-edit.enum";
+import { ThemeCtx } from "../../../context/theme.context";
+import { Stylesheet } from "./timetable-editor.styles";
+
+interface TimetableEditorProps {
+    sequence: TimeSlotSequence;
+    onChange: (seq: TimeSlotSequence) => void;
+}
+
+export const TimetableEditor = ({sequence, onChange}: TimetableEditorProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const [activeEditState, setActiveEditState] = useState(TimetableEditState.NONE);
+    const [first, setFrist] = useState<TimeSlotRecord>(sequence.first);
+    const [second, setSecond] = useState<TimeSlotRecord>(sequence.second);
+    const [third, setThird] = useState<TimeSlotRecord>(sequence.third);
+    const [fourth, setFourth] = useState<TimeSlotRecord>(sequence.fourth);
+
+    useEffect(() => {
+        const newSeq = TimeSlotSequence.fromEmpty();
+        newSeq.first.start = first.start;
+        newSeq.first.end = first.end;
+        newSeq.second.start = second.start;
+        newSeq.second.end = second.end;
+        newSeq.third.start = third.start;
+        newSeq.third.end = third.end;
+        newSeq.fourth.start = fourth.start;
+        newSeq.fourth.end = fourth.end;
+
+        onChange(newSeq);
+    }, [first, second, third, fourth])
+
+    return (
+        <View style={styles.rootContainer}>
+            <TimetableEditWrapper
+                index={1}
+                record={first}
+                onUpdate={(seq) => {setFrist(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 1 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+            <TimetableEditWrapper
+                index={2}
+                record={second}
+                onUpdate={(seq) => {setSecond(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 2 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+            <TimetableEditWrapper
+                index={3}
+                record={third}
+                onUpdate={(seq) => {setThird(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 3 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+            <TimetableEditWrapper
+                index={4}
+                record={fourth}
+                onUpdate={(seq) => {setFourth(TimeSlotRecord.fromRecord(seq))}}
+                editState={activeIndex === 4 ? activeEditState : TimetableEditState.NONE}
+                onPressTag={(val,index) => { setActiveIndex(index); setActiveEditState(val);}}
+            />
+        </View>
+    );
+}

package/src/components/organisms/timetable-editor/timetable-editor.preview.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const TimetableEditorPreview: ({}: {}) => React.JSX.Element;

package/src/components/organisms/timetable-editor/timetable-editor.preview.tsx

@@ -0,0 +1,53 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Modal} from '../../templates/modal/modal.component';
+import { Button } from '../../molecules/button/button.component';
+import { TimetableEditor } from './timetable-editor.component';
+import { TimeSlotSequence } from '../../../models/time-slot-sequence';
+
+export const TimetableEditorPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+  const [seq, setSeq] = useState(TimeSlotSequence.fromEmpty())
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View
+        style={{
+          marginTop: 150,
+        }}
+      >
+        <Button
+          onPress={() => {
+            setPopoverIsVisible(true)
+          }}
+          label="Open popover"
+        />
+      </View>
+      <Modal
+        title={'Bewerken'}
+        subtitle={'17 Jan 2021'}
+        onClose={() => setPopoverIsVisible(false)}
+        isVisible={popoverIsVisible}
+      >
+        <View>
+            <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
+
+          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
+            <Button
+              label={'Bewaar'}
+              onPress={() => {
+                console.log(seq)
+              }}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

package/src/components/organisms/timetable-editor/timetable-editor.styles.d.ts

@@ -0,0 +1,8 @@
+export function Stylesheet(context: any): {
+    rootContainer: {
+        flexDirection: "column";
+        gap: number;
+        justifyContent: "center";
+        alignItems: "center";
+    };
+};

package/src/components/organisms/timetable-editor/timetable-editor.styles.js

@@ -0,0 +1,12 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+    StyleSheet.create({
+        rootContainer: {
+            flexDirection: 'column',
+            gap: 16,
+            justifyContent: 'center',
+            alignItems: 'center'
+        }
+    });

package/src/components/templates/modal/modal.component.tsx

@@ -30,7 +30,7 @@ export const Modal = ({
     return () => subscription?.remove();
   });
 
-  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const maxHeight = Math.round(windowHeight / 100) * 90;
 
   const styles = Stylesheet();
 

package/src/components/templates/popover/components/modal/modal.component.tsx

@@ -35,7 +35,7 @@ const Modal = ({
 
   const elementHeight = Math.round(elementSize.height);
 
-  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const maxHeight = Math.round(windowHeight / 100) * 90;
   const translateYStartingPoint = windowHeight;
 
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;

package/src/models/time-slot-record.d.ts

@@ -0,0 +1,14 @@
+export interface TimeSlotRecordJSON {
+    in: string;
+    out: string;
+}
+export declare class TimeSlotRecord {
+    start: string;
+    end?: string;
+    private constructor();
+    static fromJson(json: TimeSlotRecordJSON): TimeSlotRecord;
+    static fromEmpty(): TimeSlotRecord;
+    static fromRecord(seq: TimeSlotRecord): TimeSlotRecord;
+    isComplete(): boolean;
+    toJson(): TimeSlotRecordJSON;
+}

package/src/models/time-slot-record.ts

@@ -0,0 +1,33 @@
+export interface TimeSlotRecordJSON {
+  in: string;
+  out: string;
+}
+
+export class TimeSlotRecord {
+  private constructor(public start: string, public end?: string) {}
+
+  static fromJson(json: TimeSlotRecordJSON): TimeSlotRecord {
+    // add validation here if needed
+    return new TimeSlotRecord(json.in, json.out);
+  }
+
+  static fromEmpty(): TimeSlotRecord {
+    // add validation here if needed
+    return new TimeSlotRecord('', '');
+  }
+
+  static fromRecord(seq: TimeSlotRecord): TimeSlotRecord {
+    return new TimeSlotRecord(seq.start, seq.end);
+  }
+
+  isComplete(): boolean {
+    return this.start !== '' && this.end !== '';
+  }
+
+  toJson(): TimeSlotRecordJSON {
+    return {
+      in: this.start,
+      out: this.end ? this.end : '',
+    };
+  }
+}

package/src/models/time-slot-sequence.d.ts

@@ -0,0 +1,15 @@
+import { TimeSlotRecord, TimeSlotRecordJSON } from './time-slot-record';
+export declare class TimeSlotSequence {
+    readonly first: TimeSlotRecord;
+    readonly second: TimeSlotRecord;
+    readonly third: TimeSlotRecord;
+    readonly fourth: TimeSlotRecord;
+    private constructor();
+    static fromAttendanceRecordArray(arr: TimeSlotRecord[]): TimeSlotSequence;
+    static fromTimeSlotRecordJSONArray(arr: TimeSlotRecordJSON[]): TimeSlotSequence;
+    static fromEmpty(): TimeSlotSequence;
+    asArray(): TimeSlotRecord[];
+    toJson(): TimeSlotRecord[];
+    addToNextSlot(checkInOutTime: string): void;
+    isComplete(): boolean;
+}

package/src/models/time-slot-sequence.ts

@@ -0,0 +1,76 @@
+import {TimeSlotRecord, TimeSlotRecordJSON} from './time-slot-record';
+
+export class TimeSlotSequence {
+  private constructor(
+    public readonly first: TimeSlotRecord,
+    public readonly second: TimeSlotRecord,
+    public readonly third: TimeSlotRecord,
+    public readonly fourth: TimeSlotRecord
+  ) {}
+
+  static fromAttendanceRecordArray(arr: TimeSlotRecord[]): TimeSlotSequence {
+    return new TimeSlotSequence(
+      arr[0] ? arr[0] : TimeSlotRecord.fromEmpty(),
+      arr[1] ? arr[1] : TimeSlotRecord.fromEmpty(),
+      arr[2] ? arr[2] : TimeSlotRecord.fromEmpty(),
+      arr[3] ? arr[3] : TimeSlotRecord.fromEmpty()
+    );
+  }
+
+  static fromTimeSlotRecordJSONArray(
+    arr: TimeSlotRecordJSON[]
+  ): TimeSlotSequence {
+    return new TimeSlotSequence(
+      TimeSlotRecord.fromJson(arr[0]),
+      TimeSlotRecord.fromJson(arr[1]),
+      TimeSlotRecord.fromJson(arr[2]),
+      TimeSlotRecord.fromJson(arr[3])
+    );
+  }
+
+  static fromEmpty(): TimeSlotSequence {
+    return new TimeSlotSequence(
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty()
+    );
+  }
+
+  asArray(): TimeSlotRecord[] {
+    return [this.first, this.second, this.third, this.fourth];
+  }
+
+  toJson(): TimeSlotRecord[] {
+    return [this.first, this.second, this.third, this.fourth];
+  }
+
+  addToNextSlot(checkInOutTime: string) {
+    if (this.first.start === '') {
+      this.first.start = checkInOutTime;
+    } else if (this.first.end === undefined || this.first.end === '') {
+      this.first.end = checkInOutTime;
+    } else if (this.second.start === '') {
+      this.second.start = checkInOutTime;
+    } else if (this.second.end === undefined || this.second.end === '') {
+      this.second.end = checkInOutTime;
+    } else if (this.third.start === '') {
+      this.third.start = checkInOutTime;
+    } else if (this.third.end === undefined || this.third.end === '') {
+      this.third.end = checkInOutTime;
+    } else if (this.fourth.start === '') {
+      this.fourth.start = checkInOutTime;
+    } else if (this.fourth.end === undefined || this.fourth.end === '') {
+      this.fourth.end = checkInOutTime;
+    }
+  }
+
+  isComplete(): boolean {
+    return (
+      this.first.isComplete() &&
+      this.second.isComplete() &&
+      this.third.isComplete() &&
+      this.fourth.isComplete()
+    );
+  }
+}

package/src/types/timetable-edit.enum.d.ts

@@ -1,4 +1,5 @@
 export declare enum TimetableEditState {
     IN = "IN",
-    OUT = "OUT"
+    OUT = "OUT",
+    NONE = "NONE"
 }

package/src/types/timetable-edit.enum.ts

@@ -1,4 +1,5 @@
 export enum TimetableEditState {
   IN = 'IN',
   OUT = 'OUT',
+  NONE = 'NONE',
 }