@tactics/toddle-styleguide 1.4.8 → 1.4.9

package/App.tsx

@@ -73,6 +73,7 @@ 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 {
   SafeAreaProvider,
@@ -278,6 +279,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Time Tracker"
         onPress={() => navigation.push('time-tracker')}
       />
+      <ReactBtn
+        title="Timetable Edit"
+        onPress={() => navigation.push('timetable-edit')}
+      />
       <ReactBtn title="Timeline" onPress={() => navigation.push('timeline')} />
       <ReactBtn
         title="Toddle DateTime"
@@ -464,6 +469,9 @@ function App() {
           <Stack.Screen name="time-tracker">
             {() => <TimeTrackerPreview />}
           </Stack.Screen>
+          <Stack.Screen name="timetable-edit">
+            {() => <TimetableEditPreview />}
+          </Stack.Screen>
           <Stack.Screen name="timeline">
             {() => <TimeLinePreview />}
           </Stack.Screen>

package/index.d.ts

@@ -58,6 +58,7 @@ import { QuickMessage } from './src/components/atoms/quick-message/quick-message
 import { TabView } from './src/components/organisms/tab-view/tab-view.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 { BubbleAlignment } from './src/types/bubble-alignment.enum';
 import { KeyBoardTypes } from './src/types/keyboard-types.enum';
 import { Size } from './src/types/size.enum';
@@ -67,4 +68,4 @@ import { ToddleDateTime } from './src/utilities/toddle-datetime/toddle-datetime.
 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, };
+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 };

package/index.tsx

@@ -76,6 +76,7 @@ import {QuickMessage} from './src/components/atoms/quick-message/quick-message.c
 import {TabView} from './src/components/organisms/tab-view/tab-view.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';
 
 // Exports of enums
 import {BubbleAlignment} from './src/types/bubble-alignment.enum';
@@ -172,4 +173,5 @@ export {
   VisualState,
   CreateResponsiveStyle,
   Scale,
+  TimetableEdit
 };

package/package.json

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

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

@@ -1,6 +1,6 @@
 import {View} from 'react-native';
 import WheelPickerExpo from 'react-native-wheel-picker-expo';
-import {Heading1, Heading3} from '../../atoms/heading-components';
+import {Heading1} from '../../atoms/heading-components';
 import {Stylesheet} from './time-picker.styles';
 import {Scale} from '../../../theme/scale/index';
 import {useContext} from 'react';

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

@@ -1,27 +1,27 @@
 export function Stylesheet(context: any): {
-  rootContainer: {
-    flexDirection: 'row';
-    alignItems: 'center';
-    gap: number;
-  };
-  container: {
-    borderColor: any;
-    borderWidth: number;
-    borderStyle: 'solid';
-    borderRadius: number;
-    overflow: 'hidden';
-    justifyContent: 'center';
-    alignItems: 'center';
-    maxHeight: number;
-    maxWidth: number;
-  };
-  text: {
-    fontWeight: '200';
-    fontSize: number;
-  };
-  colon: {
-    fontWeight: '200';
-    lineHeight: number;
-    fontSize: number;
-  };
+    rootContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        gap: number;
+    };
+    container: {
+        borderColor: any;
+        borderWidth: number;
+        borderStyle: "solid";
+        borderRadius: number;
+        overflow: "hidden";
+        justifyContent: "center";
+        alignItems: "center";
+        maxHeight: number;
+        maxWidth: number;
+    };
+    text: {
+        fontWeight: "200";
+        fontSize: number;
+    };
+    colon: {
+        fontWeight: "200";
+        lineHeight: number;
+        fontSize: number;
+    };
 };

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

@@ -0,0 +1,13 @@
+import React from 'react';
+interface TimetableEditProps {
+    initialInHours: string;
+    initialInMinutes: string;
+    initialOutHours: string;
+    initialOutMinutes: string;
+    onChangeInHours: (value: string) => void;
+    onChangeInMinutes: (value: string) => void;
+    onChangeOutHours: (value: string) => void;
+    onChangeOutMinutes: (value: string) => void;
+}
+export declare const TimetableEdit: ({ initialInHours, initialInMinutes, initialOutHours, initialOutMinutes, onChangeInHours, onChangeInMinutes, onChangeOutHours, onChangeOutMinutes, }: TimetableEditProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,94 @@
+import {View} from 'react-native';
+import {Heading3} from '../../atoms/heading-components';
+import {useContext, useState} 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';
+
+interface TimetableEditProps {
+  initialInHours: string;
+  initialInMinutes: string;
+  initialOutHours: string;
+  initialOutMinutes: string;
+  onChangeInHours: (value: string) => void;
+  onChangeInMinutes: (value: string) => void;
+  onChangeOutHours: (value: string) => void;
+  onChangeOutMinutes: (value: string) => void;
+}
+
+export const TimetableEdit = ({
+  initialInHours,
+  initialInMinutes,
+  initialOutHours,
+  initialOutMinutes,
+  onChangeInHours,
+  onChangeInMinutes,
+  onChangeOutHours,
+  onChangeOutMinutes,
+}: 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}>
+        <View style={styles.rowContainer}>
+            <View style={styles.tagContainer}>
+                <Heading3
+                    addStyle={{width: 'auto'}}
+                    bold={true}
+                >Van</Heading3>
+                <Tag
+                    value={TimetableEditState.IN}
+                    label={`${initialInHours}:${initialInMinutes}`}
+                    isSelected={editState == TimetableEditState.IN}
+                    onPress={updateEditState}
+                />
+            </View>
+            <View style={styles.tagContainer}>
+                <Heading3
+                    addStyle={{width: 'auto'}}
+                    bold={true}
+                >Tot</Heading3>
+                <Tag
+                    value={TimetableEditState.OUT}
+                    label={`${initialOutHours}:${initialOutMinutes}`}
+                    isSelected={editState == TimetableEditState.OUT}
+                    onPress={updateEditState}
+                />
+            </View>
+        </View>
+        {editState === TimetableEditState.IN &&
+            <View style={styles.pickerContainer}>
+                <TimePicker
+                    initialHours={initialInHours}
+                    initialMinutes={initialInMinutes}
+                    onChangeHours={onChangeInHours}
+                    onChangeMinutes={onChangeInMinutes}
+                />
+            </View>
+        }
+        {editState === TimetableEditState.OUT &&
+            <View style={styles.pickerContainer}>
+                <TimePicker
+                    initialHours={initialOutHours}
+                    initialMinutes={initialOutMinutes}
+                    onChangeHours={onChangeOutHours}
+                    onChangeMinutes={onChangeOutMinutes}
+                />
+            </View>
+        }
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,72 @@
+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 { TimetableEdit } from './timetable-edit.component';
+
+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('--');
+
+  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={'Bewerken'}
+        subtitle={'17 Jan 2021'}
+        onClose={() => setPopoverIsVisible(false)}
+        isVisible={popoverIsVisible}
+      >
+        <View>
+            <TimetableEdit
+                initialInHours={checkInHours}
+                initialInMinutes={checkInMinutes}
+                initialOutHours={checkOutHours}
+                initialOutMinutes={checkOutMinutes}
+                onChangeInHours={setCheckInHours}
+                onChangeInMinutes={setCheckInMinutes}
+                onChangeOutHours={setCheckOutHours}
+                onChangeOutMinutes={setCheckOutMinutes}
+             />
+
+          <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
+            <Button
+              label={'Bewaar'}
+              onPress={() => console.log('Bewaar registratie aanpassing')}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,25 @@
+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'
+        },
+        rowContainer : {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 32
+        },
+        tagContainer: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 16
+        },
+        pickerContainer: {
+            justifyContent: 'center'
+        }
+    });

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

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

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

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