@tactics/toddle-styleguide 5.4.2 → 5.4.4

package/index.tsx

@@ -5,77 +5,70 @@ import 'intl/locale-data/jsonp/en';
 
 import App from './App';
 
-let webBuild = process.env.EXPO_PUBLIC_WEBBUILD;
-if (!webBuild) {
+if (!process.env.EXPO_PUBLIC_WEBBUILD) {
   registerRootComponent(App);
 }
 
-// Exports of components
-import {Avatar} from './src/components/molecules/avatar/avatar.component';
-import {Button} from './src/components/molecules/button/button.component';
-import {CancelLink} from './src/components/molecules/cancel-link/cancel-link.component';
-import {Check} from './src/components/atoms/check-switch/check-switch.component';
-import {Checkbox} from './src/components/molecules/checkbox/checkbox.component';
-import {ChildListItem} from './src/components/organisms/child-list-item/child-list-item.component';
-import {ContactItem} from './src/components/organisms/contact-item/contact-item.component';
-import {FilterTab} from './src/components/molecules/filter-tab/filter-tab.component';
-import {SplitContainer} from './src/components/atoms/split-container/split-container.component';
-import {ImageBubble} from './src/components/atoms/image-bubble/image-bubble.component';
-import {Info} from './src/components/molecules/info/info.component';
-import {Pill} from './src/components/molecules/pill/pill.component';
-import {Popover} from './src/components/templates/popover/popover.component';
-import {PressableIcon} from './src/components/molecules/pressable-icon/pressable-icon.component';
-import {QuickFilter} from './src/components/molecules/quick-filter/quick-filter.component';
-import {SelectListItem} from './src/components/molecules/select-list-item/select-list-item.component';
-import {Snackbar} from './src/components/molecules/snackbar/snackbar.component';
-import {Tag} from './src/components/molecules/tag/tag.component';
-import {TextBubble} from './src/components/organisms/text-bubble/text-bubble.component';
-import {TextInput} from './src/components/atoms/text-input/text-input.component';
-import {TimeTracker} from './src/components/molecules/time-tracker/time-tracker.component';
-import {WideButton} from './src/components/molecules/wide-button/wide-button.component';
-import {Icon} from './src/icons';
-import {Calendar} from './src/components/atoms/calendar/calendar.component';
-import {IncrementInput} from './src/components/atoms/increment-input/increment-input.component';
-import {Logo} from './src/components/atoms/logo/logo.component';
-import {Search} from './src/components/molecules/search-input/search.component';
-import {BlockedMessage} from './src/components/molecules/blocked-message/blocked-message.component';
-import {DepartmentLogo} from './src/components/molecules/department_logo/department-logo.component';
-import {ContactRole} from './src/components/molecules/contact-role/contact-role.component';
-import {TimeLine} from './src/components/molecules/timeline/timeline.component';
-import {SelectPicker} from './src/components/molecules/select-picker/select-picker.component';
-import {CalendarSelect} from './src/components/molecules/calendar-select/calendar-select.component';
-import {DateInput} from './src/components/molecules/date-input/date-input.component';
-import {FilterRange} from './src/components/molecules/filter-range/filter-range.component';
-import {Footer} from './src/components/atoms/footer/footer.component';
-import {DefaultSelect} from './src/components/molecules/default-select/default-select.component';
-import {PasswordInput} from './src/components/molecules/password-input/password-input.component';
-import {MessageInput} from './src/components/molecules/message-input/message-input.component';
+// ================================
+// Components
+// ================================
+import { Avatar } from './src/components/molecules/avatar/avatar.component';
+import { Button } from './src/components/molecules/button/button.component';
+import { CancelLink } from './src/components/molecules/cancel-link/cancel-link.component';
+import { Check } from './src/components/atoms/check-switch/check-switch.component';
+import { Checkbox } from './src/components/molecules/checkbox/checkbox.component';
+import { ChildListItem } from './src/components/organisms/child-list-item/child-list-item.component';
+import { ContactItem } from './src/components/organisms/contact-item/contact-item.component';
+import { FilterTab } from './src/components/molecules/filter-tab/filter-tab.component';
+import { SplitContainer } from './src/components/atoms/split-container/split-container.component';
+import { ImageBubble } from './src/components/atoms/image-bubble/image-bubble.component';
+import { Info } from './src/components/molecules/info/info.component';
+import { Pill } from './src/components/molecules/pill/pill.component';
+import { Popover } from './src/components/templates/popover/popover.component';
+import { PressableIcon } from './src/components/molecules/pressable-icon/pressable-icon.component';
+import { QuickFilter } from './src/components/molecules/quick-filter/quick-filter.component';
+import { SelectListItem } from './src/components/molecules/select-list-item/select-list-item.component';
+import { Snackbar } from './src/components/molecules/snackbar/snackbar.component';
+import { Tag } from './src/components/molecules/tag/tag.component';
+import { TextBubble } from './src/components/organisms/text-bubble/text-bubble.component';
+import { TextInput } from './src/components/atoms/text-input/text-input.component';
+import { TimeTracker } from './src/components/molecules/time-tracker/time-tracker.component';
+import { WideButton } from './src/components/molecules/wide-button/wide-button.component';
+import { Icon } from './src/icons';
+import { Calendar } from './src/components/atoms/calendar/calendar.component';
+import { IncrementInput } from './src/components/atoms/increment-input/increment-input.component';
+import { Logo } from './src/components/atoms/logo/logo.component';
+import { Search } from './src/components/molecules/search-input/search.component';
+import { BlockedMessage } from './src/components/molecules/blocked-message/blocked-message.component';
+import { DepartmentLogo } from './src/components/molecules/department_logo/department-logo.component';
+import { ContactRole } from './src/components/molecules/contact-role/contact-role.component';
+import { TimeLine } from './src/components/molecules/timeline/timeline.component';
+import { SelectPicker } from './src/components/molecules/select-picker/select-picker.component';
+import { CalendarSelect } from './src/components/molecules/calendar-select/calendar-select.component';
+import { DateInput } from './src/components/molecules/date-input/date-input.component';
+import { FilterRange } from './src/components/molecules/filter-range/filter-range.component';
+import { Footer } from './src/components/atoms/footer/footer.component';
+import { DefaultSelect } from './src/components/molecules/default-select/default-select.component';
+import { PasswordInput } from './src/components/molecules/password-input/password-input.component';
+import { MessageInput } from './src/components/molecules/message-input/message-input.component';
 import {
-  AllCapsHeading,
-  Heading1,
-  Heading2,
-  Heading3,
-  Heading4,
+  AllCapsHeading, Heading1, Heading2, Heading3, Heading4
 } from './src/components/atoms/heading-components';
-import {
-  Paragraph,
-  SmallText,
-  TinyText,
-} from './src/components/atoms/paragraph-components';
-import {SelectLink} from './src/components/molecules/select-link/select-link.component';
-import {MyChildListItem} from './src/components/organisms/my-child-list-item/my-child-list-item.component';
-import {MoreInfoButton} from './src/components/molecules/more-info-button/more-info-button.component';
-import {LanguageButton} from './src/components/molecules/language-button/language-button.component';
-import {Modal} from './src/components/templates/modal/modal.component';
-import {LoadingIndicator} from './src/components/organisms/loading-indicator/loading-indicator.component';
-import {WaveBackground} from './src/components/molecules/wave-background/wave.component';
-import {BackgroundGradient} from './src/components/atoms/background-gradient/background-gradient.component';
-import {PersonInfoCard} from './src/components/organisms/person-info-card/person-info-card.component';
-import {TimePicker} from './src/components/molecules/time-picker/time-picker.component';
-import {QuickMessage} from './src/components/atoms/quick-message/quick-message.component';
-import {Line} from './src/components/atoms/line/line.component';
-import {JournalEntry} from './src/components/organisms/journal-entry/journal-entry.component';
-import {TimetableEdit} from './src/components/organisms/timetable-edit/timetable-edit.component';
+import { Paragraph, SmallText, TinyText } from './src/components/atoms/paragraph-components';
+import { SelectLink } from './src/components/molecules/select-link/select-link.component';
+import { MyChildListItem } from './src/components/organisms/my-child-list-item/my-child-list-item.component';
+import { MoreInfoButton } from './src/components/molecules/more-info-button/more-info-button.component';
+import { LanguageButton } from './src/components/molecules/language-button/language-button.component';
+import { Modal } from './src/components/templates/modal/modal.component';
+import { LoadingIndicator } from './src/components/organisms/loading-indicator/loading-indicator.component';
+import { WaveBackground } from './src/components/molecules/wave-background/wave.component';
+import { BackgroundGradient } from './src/components/atoms/background-gradient/background-gradient.component';
+import { PersonInfoCard } from './src/components/organisms/person-info-card/person-info-card.component';
+import { TimePicker } from './src/components/molecules/time-picker/time-picker.component';
+import { QuickMessage } from './src/components/atoms/quick-message/quick-message.component';
+import { Line } from './src/components/atoms/line/line.component';
+import { JournalEntry } from './src/components/organisms/journal-entry/journal-entry.component';
+import { TimetableEdit } from './src/components/organisms/timetable-edit/timetable-edit.component';
 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';
@@ -87,45 +80,58 @@ import { SelectableListItem } from './src/components/molecules/selectable-list-i
 import { SwipeableContainer } from './src/components/molecules/swipeable/swipeable-container.component';
 import { SwipeableAction } from './src/components/molecules/swipeable/swipeable-action.component';
 import { ContactAddress } from './src/components/molecules/contact-address/contact-address.component';
+import { Day } from './src/components/molecules/day/day.component';
 
-// Exports of enums
-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';
+// ================================
+// Enums
+// ================================
+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';
 
-// Exports of models
-import {Initials} from './src/models/initials.model';
+// ================================
+// 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 context
-import {ThemeCtx} from './src/context/theme.context';
+// ================================
+// Context
+// ================================
+import { ThemeCtx } from './src/context/theme.context';
 
-//Export of Theme
-import {Scale} from './src/theme/scale/index';
-
-// Export of responsive style
+// ================================
+// Theme / Style
+// ================================
+import { Scale } from './src/theme/scale/index';
 import CreateResponsiveStyle from './src/theme/responsive/index';
-import { ClockInterface, SystemClock } from "./src/utilities/datetime/clock.class";
-import { YearAndMonth, YearAndMonthInterface, YearAndMonthLocaleAwareOutputFormat, YearAndMonthOutputFormat } from "./src/utilities/datetime/yearandmonth.class";
-import { Year, YearInterface, YearOutputFormat } from "./src/utilities/datetime/year.class";
-import {SystemTimezone, TimeZone, TimeZoneInterface, UTCTimezone } from "./src/utilities/datetime/timezone.class";
-import { Time, TimeInputFormat, TimeInterface, TimeOutputFormat } from "./src/utilities/datetime/time.class";
-import { Second, SecondInterface, SecondOutputFormat } from "./src/utilities/datetime/second.class";
-import { Month, MonthIndex, MonthInterface, MonthLocalAwareOutputFormat, MonthOutputFormat } from "./src/utilities/datetime/month.class";
-import { Minute, MinuteInterface, MinuteOutputFormat } from "./src/utilities/datetime/minute.class";
-import { Millisecond, MillisecondInterface, MilliSecondOutputFormat } from "./src/utilities/datetime/millisecond.class";
-import { Locale } from "./src/utilities/datetime/locale";
-import { Hour, HourInterface, HourOutputFormat } from "./src/utilities/datetime/hour.class";
-import { DayOfWeek, DayOfWeekIndex, DayOfWeekLocaleAwareOutputFormat, DayOfWeekOutputFormat, IDayOfWeek,
-  Iso8601WeekdayNumbers, ZeroBasedWeekdayNumbers } from "./src/utilities/datetime/dayoftheweek.class";
-import { Day } from "./src/components/molecules/day/day.component";
-import { DayInterface, DayOutputFormat } from "./src/utilities/datetime/day.class";
-import { DateTime, DateTimeCalculation, DateTimeInterface, DateTimeOutputFormat } from "./src/utilities/datetime/datetime.class";
-import { DateOnly, DateOnlyInterface, DateOnlyLocaleAwareOutputFormat, DateOnlyOutputFormat } from "./src/utilities/datetime/dateonly.class";
 
+// ================================
+// Date / Time Utilities
+// ================================
+import { ClockInterface, SystemClock } from './src/utilities/datetime/clock.class';
+import { YearAndMonth, YearAndMonthInterface, YearAndMonthLocaleAwareOutputFormat, YearAndMonthOutputFormat } from './src/utilities/datetime/yearandmonth.class';
+import { Year, YearInterface, YearOutputFormat } from './src/utilities/datetime/year.class';
+import { SystemTimezone, TimeZone, TimeZoneInterface, UTCTimezone } from './src/utilities/datetime/timezone.class';
+import { Time, TimeInputFormat, TimeInterface, TimeOutputFormat } from './src/utilities/datetime/time.class';
+import { Second, SecondInterface, SecondOutputFormat } from './src/utilities/datetime/second.class';
+import { Month, MonthIndex, MonthInterface, MonthLocalAwareOutputFormat, MonthOutputFormat } from './src/utilities/datetime/month.class';
+import { Minute, MinuteInterface, MinuteOutputFormat } from './src/utilities/datetime/minute.class';
+import { Millisecond, MillisecondInterface, MilliSecondOutputFormat } from './src/utilities/datetime/millisecond.class';
+import { Locale } from './src/utilities/datetime/locale';
+import { Hour, HourInterface, HourOutputFormat } from './src/utilities/datetime/hour.class';
+import { DayOfWeek, DayOfWeekIndex, DayOfWeekLocaleAwareOutputFormat, DayOfWeekOutputFormat, IDayOfWeek, Iso8601WeekdayNumbers, ZeroBasedWeekdayNumbers } from './src/utilities/datetime/dayoftheweek.class';
+import { DayInterface, DayOutputFormat } from './src/utilities/datetime/day.class';
+import { DateTime, DateTimeCalculation, DateTimeInterface, DateTimeOutputFormat } from './src/utilities/datetime/datetime.class';
+import { DateOnly, DateOnlyInterface, DateOnlyLocaleAwareOutputFormat, DateOnlyOutputFormat } from './src/utilities/datetime/dateonly.class';
+
+// ================================
+// Exports
+// ================================
 export {
+  // Components
   AllCapsHeading,
   Avatar,
   BackgroundGradient,
@@ -187,78 +193,88 @@ export {
   TinyText,
   WaveBackground,
   WideButton,
-  BubbleAlignment,
-  Initials,
-  KeyBoardTypes,
-  Size,
-  ThemeCtx,
-  VisualState,
-  CreateResponsiveStyle,
-  Scale,
-  TimetableEdit,
   ContextLabel,
   Count,
   Amount,
+  TimetableEdit,
   TimetableEditor,
   TimetableEditorStaff,
-  TimeSlotRecord,
-  TimeSlotSequence,
   InlineError,
   InlineNotice,
   SelectableListItem,
   SwipeableContainer,
   SwipeableAction,
+  Day,
+
+  // Enums
+  BubbleAlignment,
+  KeyBoardTypes,
+  Size,
+  VisualState,
+
+  // Models
+  Initials,
+  TimeSlotRecord,
+  TimeSlotSequence,
+
+  // Context
+  ThemeCtx,
+
+  // Theme
+  Scale,
+  CreateResponsiveStyle,
+
+  // Date / Time Utilities
   ClockInterface,
   SystemClock,
-  DateOnlyOutputFormat,
-  DateOnlyLocaleAwareOutputFormat,
-  DateOnlyInterface,
   DateOnly,
-  DateTimeOutputFormat,
+  DateOnlyInterface,
+  DateOnlyLocaleAwareOutputFormat,
+  DateOnlyOutputFormat,
+  DateTime,
   DateTimeCalculation,
   DateTimeInterface,
-  DateTime,
-  DayOutputFormat,
+  DateTimeOutputFormat,
   DayInterface,
-  Day,
-  Iso8601WeekdayNumbers,
-  ZeroBasedWeekdayNumbers,
+  DayOutputFormat,
+  DayOfWeek,
+  DayOfWeekIndex,
   DayOfWeekLocaleAwareOutputFormat,
   DayOfWeekOutputFormat,
-  DayOfWeekIndex,
   IDayOfWeek,
-  DayOfWeek,
-  HourOutputFormat,
-  HourInterface,
+  Iso8601WeekdayNumbers,
+  ZeroBasedWeekdayNumbers,
   Hour,
+  HourInterface,
+  HourOutputFormat,
   Locale,
-  MilliSecondOutputFormat,
-  MillisecondInterface,
   Millisecond,
-  MinuteOutputFormat,
-  MinuteInterface,
+  MillisecondInterface,
+  MilliSecondOutputFormat,
   Minute,
-  MonthOutputFormat,
-  MonthLocalAwareOutputFormat,
-  MonthInterface,
-  MonthIndex,
+  MinuteInterface,
+  MinuteOutputFormat,
   Month,
-  SecondOutputFormat,
-  SecondInterface,
+  MonthIndex,
+  MonthInterface,
+  MonthLocalAwareOutputFormat,
+  MonthOutputFormat,
   Second,
+  SecondInterface,
+  SecondOutputFormat,
+  Time,
   TimeInputFormat,
-  TimeOutputFormat,
   TimeInterface,
-  Time,
-  TimeZoneInterface,
+  TimeOutputFormat,
   TimeZone,
   SystemTimezone,
+  TimeZoneInterface,
   UTCTimezone,
-  YearOutputFormat,
-  YearInterface,
   Year,
-  YearAndMonthLocaleAwareOutputFormat,
-  YearAndMonthOutputFormat,
+  YearInterface,
+  YearOutputFormat,
+  YearAndMonth,
   YearAndMonthInterface,
-  YearAndMonth
-};
+  YearAndMonthLocaleAwareOutputFormat,
+  YearAndMonthOutputFormat
+}

package/package.json

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

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

@@ -1,15 +1,15 @@
 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';
+import {TimeSlotEmployeeSequence} from '../../../models/time-slot-employee-sequence';
 
 interface TimetableEditorStaffProps {
-  sequence: TimeSlotSequence;
-  onChange: (seq: TimeSlotSequence) => void;
+  sequence: TimeSlotEmployeeSequence;
+  onChange: (seq: TimeSlotEmployeeSequence) => void;
 }
 
 export const TimetableEditorStaff = ({
@@ -22,17 +22,41 @@ export const TimetableEditorStaff = ({
   const [activeEditState, setActiveEditState] = useState(
     TimetableEditState.NONE
   );
-  const [first, setFrist] = useState<TimeSlotRecord>(sequence.first);
+  const [first, setFirst] = 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);
+  const [fifth, setFifth] = useState<TimeSlotRecord>(sequence.fifth);
+  const [sixth, setSixth] = useState<TimeSlotRecord>(sequence.sixth);
+  const [seventh, setSeventh] = useState<TimeSlotRecord>(sequence.seventh);
+  const [eighth, setEighth] = useState<TimeSlotRecord>(sequence.eighth);
+  const [nineth, setNinth] = useState<TimeSlotRecord>(sequence.ninth);
+  const [tenth, setTenth] = useState<TimeSlotRecord>(sequence.tenth);
+
 
   useEffect(() => {
-    const newSeq = TimeSlotSequence.fromEmpty();
+    const newSeq = TimeSlotEmployeeSequence.fromEmpty();
     newSeq.first.start = first.start;
     newSeq.first.end = first.end;
     newSeq.second.start = second.start;
     newSeq.second.end = second.end;
-    newSeq.third.start = TimeSlotRecord.fromEmpty().start;
-    newSeq.third.end = TimeSlotRecord.fromEmpty().end;
+    newSeq.third.start = third.start;
+    newSeq.third.end = third.end;
+
+    newSeq.fourth.start = fourth.start;
+    newSeq.fourth.end = fourth.end;
+    newSeq.fifth.start = fifth.start;
+    newSeq.fifth.end = fifth.end;
+    newSeq.sixth.start = sixth.start;
+    newSeq.sixth.end = sixth.end;
+    newSeq.seventh.start = seventh.start;
+    newSeq.seventh.end = seventh.end;
+    newSeq.eighth.start = eighth.start;
+    newSeq.eighth.end = eighth.end;
+    newSeq.ninth.start = nineth.start;
+    newSeq.ninth.end = nineth.end;
+    newSeq.tenth.start = tenth.start;
+    newSeq.tenth.end = tenth.end;
 
     onChange(newSeq);
   }, [first, second]);
@@ -43,7 +67,7 @@ export const TimetableEditorStaff = ({
         index={1}
         record={first}
         onUpdate={(seq) => {
-          setFrist(TimeSlotRecord.fromRecord(seq));
+          setFirst(TimeSlotRecord.fromRecord(seq));
         }}
         editState={
           activeIndex === 1 ? activeEditState : TimetableEditState.NONE
@@ -67,6 +91,118 @@ export const TimetableEditorStaff = ({
           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);
+        }}
+      />
+      <TimetableEditWrapper
+        index={5}
+        record={fifth}
+        onUpdate={(seq) => {
+          setFifth(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 5 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
+      <TimetableEditWrapper
+        index={6}
+        record={sixth}
+        onUpdate={(seq) => {
+          setSixth(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 6 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
+      <TimetableEditWrapper
+        index={7}
+        record={seventh}
+        onUpdate={(seq) => {
+          setSeventh(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 7 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
+      <TimetableEditWrapper
+        index={8}
+        record={eighth}
+        onUpdate={(seq) => {
+          setEighth(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 8 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
+      <TimetableEditWrapper
+        index={9}
+        record={nineth}
+        onUpdate={(seq) => {
+          setNinth(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 9 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
+      <TimetableEditWrapper
+        index={10}
+        record={tenth}
+        onUpdate={(seq) => {
+          setTenth(TimeSlotRecord.fromRecord(seq));
+        }}
+        editState={
+          activeIndex === 10 ? activeEditState : TimetableEditState.NONE
+        }
+        onPressTag={(val, index) => {
+          setActiveIndex(index);
+          setActiveEditState(val);
+        }}
+      />
     </View>
   );
 };

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

@@ -0,0 +1,165 @@
+import {TimeSlotRecord, TimeSlotRecordJSON} from './time-slot-record';
+
+export class TimeSlotEmployeeSequence {
+  private constructor(
+    public readonly first: TimeSlotRecord,
+    public readonly second: TimeSlotRecord,
+    public readonly third: TimeSlotRecord,
+    public readonly fourth: TimeSlotRecord,
+    public readonly fifth: TimeSlotRecord,
+    public readonly sixth: TimeSlotRecord,
+    public readonly seventh: TimeSlotRecord,
+    public readonly eighth: TimeSlotRecord,
+    public readonly ninth: TimeSlotRecord,
+    public readonly tenth: TimeSlotRecord,
+  ) {}
+
+  static fromAttendanceRecordArray(arr: TimeSlotRecord[]): TimeSlotEmployeeSequence {
+    return new TimeSlotEmployeeSequence(
+      arr[0] ? arr[0] : TimeSlotRecord.fromEmpty(),
+      arr[1] ? arr[1] : TimeSlotRecord.fromEmpty(),
+      arr[2] ? arr[2] : TimeSlotRecord.fromEmpty(),
+      arr[3] ? arr[2] : TimeSlotRecord.fromEmpty(),
+      arr[4] ? arr[4] : TimeSlotRecord.fromEmpty(),
+      arr[5] ? arr[5] : TimeSlotRecord.fromEmpty(),
+      arr[6] ? arr[6] : TimeSlotRecord.fromEmpty(),
+      arr[7] ? arr[7] : TimeSlotRecord.fromEmpty(),
+      arr[8] ? arr[8] : TimeSlotRecord.fromEmpty(),
+      arr[9] ? arr[9] : TimeSlotRecord.fromEmpty(),
+    );
+  }
+
+  static fromTimeSlotRecordJSONArray(
+    arr: TimeSlotRecordJSON[]
+  ): TimeSlotEmployeeSequence {
+    return new TimeSlotEmployeeSequence(
+      TimeSlotRecord.fromJson(
+        arr[0] ? arr[0] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[1] ? arr[1] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[2] ? arr[2] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[3] ? arr[3] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[4] ? arr[4] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[5] ? arr[5] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[6] ? arr[6] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[7] ? arr[7] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[8] ? arr[8] : TimeSlotRecord.fromEmpty().toJson()
+      ),
+      TimeSlotRecord.fromJson(
+        arr[9] ? arr[9] : TimeSlotRecord.fromEmpty().toJson()
+      )
+    );
+  }
+
+  static fromEmpty(): TimeSlotEmployeeSequence {
+    return new TimeSlotEmployeeSequence(
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+      TimeSlotRecord.fromEmpty(),
+    );
+  }
+
+  asArray(): TimeSlotRecord[] {
+    return [this.first, this.second, this.third,  this.fourth,  this.fifth,  this.sixth,  this.seventh,  this.eighth, this.ninth , this.tenth];
+  }
+
+  toJson(): TimeSlotRecord[] {
+    return this.asArray();
+  }
+
+  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;
+    } else if (this.fifth.start === '') {
+      this.fifth.start = checkInOutTime;
+    } else if (this.fifth.end === undefined || this.fifth.end === '') {
+      this.fifth.end = checkInOutTime;
+    } else if (this.sixth.start === '') {
+      this.sixth.start = checkInOutTime;
+    } else if (this.sixth.end === undefined || this.sixth.end === '') {
+      this.sixth.end = checkInOutTime;
+    } else if (this.seventh.start === '') {
+      this.seventh.start = checkInOutTime;
+    } else if (this.seventh.end === undefined || this.seventh.end === '') {
+      this.seventh.end = checkInOutTime;
+    } else if (this.eighth.start === '') {
+      this.eighth.start = checkInOutTime;
+    } else if (this.eighth.end === undefined || this.eighth.end === '') {
+      this.eighth.end = checkInOutTime;
+    } else if (this.ninth.start === '') {
+      this.ninth.start = checkInOutTime;
+    } else if (this.ninth.end === undefined || this.ninth.end === '') {
+      this.ninth.end = checkInOutTime;
+    } else if (this.tenth.start === '') {
+      this.tenth.start = checkInOutTime;
+    } else if (this.tenth.end === undefined || this.tenth.end === '') {
+      this.tenth.end = checkInOutTime;
+    }
+  }
+
+  isComplete(): boolean {
+    return (
+      this.first.isComplete() &&
+      this.second.isComplete() &&
+      this.third.isComplete() &&
+      this.fourth.isComplete() &&
+      this.fifth.isComplete() &&
+      this.sixth.isComplete() &&
+      this.seventh.isComplete() &&
+      this.eighth.isComplete() &&
+      this.ninth.isComplete() &&
+      this.tenth.isComplete()
+    );
+  }
+
+  isEmpty(): boolean {
+    return (
+      this.first.isEmpty() &&
+      this.second.isEmpty() &&
+      this.third.isEmpty() &&
+      this.fourth.isEmpty() &&
+      this.fifth.isEmpty() &&
+      this.sixth.isEmpty() &&
+      this.seventh.isEmpty() &&
+      this.eighth.isEmpty() &&
+      this.ninth.isEmpty() &&
+      this.tenth.isEmpty()
+    );
+  }
+}