@tactics/toddle-styleguide 1.4.7 → 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.7",
+  "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/child-list-item/child-list-item.component.tsx

@@ -76,81 +76,75 @@ const ChildListItem = React.memo(
         visualState={visualStateTimeTracker}
         textColor={textColor}
       />
-      } else {
-        return <View style={styles.timeTrackerSpacer}></View>
       }
-
     }
 
     return (
       <View style={styles.container}>
-        <Pressable
-          onPress={onPressSelectable}
-          style={styles.innerContainer}
-          onLongPress={onLongPressCallback}
-        >
-          <Avatar
-            source={sourceAvatar}
-            size={Size.MEDIUM}
-            isLoading={longPressExecuting}
-          />
-          <View style={styles.pressableText}>
-            <View style={styles.trackerContainer}>
-              {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
-            </View>
-            <View>
-              <Heading2
-                bold={true}
-                numberOfLines={1}
-                ellipsizeMode={'tail'}
-                textColor={
-                  isSelected ? context.colors.ui.white : context.colors.ui.black
-                }
-              >
-                {name}
-              </Heading2>
-              <SmallText
-                textColor={
-                  isSelected ? context.colors.ui.white : context.colors.ui.black
-                }
-              >
-                {department}
-              </SmallText>
-            </View>
-            {tags && (
-              <View
-                style={{
-                  flexDirection: 'row',
-                  gap: 6,
-                  flexWrap: 'wrap',
-                  marginTop: 10,
-                }}
-              >
-                {tags.map((tag) => {
-                  return (
-                    <ChildListTag
-                      key={`${id}--${tag}`}
-                      label={tag}
-                      isSelected={isSelected}
-                    />
-                  );
-                })}
-              </View>
-            )}
-          </View>
-        </Pressable>
-        {!selectable && (
+        <View style={styles.pressableContainer}>
           <Pressable
-            onPress={onPressArrowCallback}
-            style={styles.iconContainer}
+            onPress={onPressSelectable}
+            style={styles.innerContainer}
+            onLongPress={onLongPressCallback}
           >
-            <Icon
-              style={'regular'}
-              name={'chevron-right'}
-              size={20}
-              color={context.colors.ui.black}
+            <Avatar
+              source={sourceAvatar}
+              size={Size.MEDIUM}
+              isLoading={longPressExecuting}
             />
+            <View style={styles.pressableText}>
+              <View style={styles.trackerContainer}>
+                {renderTimeTracker(textTimeTracker, visualStateTimeTracker)}
+              </View>
+              <View>
+                <Heading2
+                  bold={true}
+                  numberOfLines={1}
+                  ellipsizeMode={'tail'}
+                  textColor={
+                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                  }
+                >
+                  {name}
+                </Heading2>
+                <SmallText
+                  textColor={
+                    isSelected ? context.colors.ui.white : context.colors.ui.black
+                  }
+                >
+                  {department}
+                </SmallText>
+              </View>
+            </View>
           </Pressable>
+          {!selectable && (
+            <Pressable
+              onPress={onPressArrowCallback}
+              style={styles.iconContainer}
+            >
+              <Icon
+                style={'regular'}
+                name={'chevron-right'}
+                size={20}
+                color={context.colors.ui.black}
+              />
+            </Pressable>
+          )}
+        </View>
+        {tags && (
+          <View
+            style={styles.tagContainer}
+          >
+            {tags.map((tag) => {
+              return (
+                <ChildListTag
+                  key={`${id}--${tag}`}
+                  label={tag}
+                  isSelected={isSelected}
+                />
+              );
+            })}
+          </View>
         )}
       </View>
     );

package/src/components/organisms/child-list-item/child-list-item.styles.d.ts

@@ -5,7 +5,7 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         borderBottomRightRadius: number;
         borderTopLeftRadius: number;
         borderBottomLeftRadius: number;
-        flexDirection: "row";
+        flexDirection: "column";
         backgroundColor: any;
     };
     innerContainer: {
@@ -16,6 +16,12 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         borderBottomRightRadius: number;
         borderTopLeftRadius: number;
         borderBottomLeftRadius: number;
+        alignItems: "center";
+    };
+    pressableContainer: {
+        flex: number;
+        flexDirection: "row";
+        alignItems: "center";
     };
     pressableText: {
         marginLeft: number;
@@ -37,4 +43,10 @@ export function Stylesheet(isSelectedItem: any, context: any): {
         height: number;
         marginBottom: number;
     };
+    tagContainer: {
+        flexDirection: "row";
+        gap: number;
+        flexWrap: "wrap";
+        marginLeft: number;
+    };
 };

package/src/components/organisms/child-list-item/child-list-item.styles.js

@@ -10,7 +10,7 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xl,
       borderBottomLeftRadius: Scale.xl,
-      flexDirection: 'row',
+      flexDirection: 'column',
       backgroundColor: isSelectedItem
         ? context.colors.main[6]
         : context.colors.ui.white,
@@ -23,10 +23,16 @@ export const Stylesheet = (isSelectedItem, context) =>
       borderBottomRightRadius: Scale.l,
       borderTopLeftRadius: Scale.xxl,
       borderBottomLeftRadius: Scale.xxl,
+      alignItems: 'center'
+    },
+    pressableContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
     },
     pressableText: {
       marginLeft: Scale.l,
-      flex: 1,
+      flex: 1
     },
     iconContainer: {
       alignItems: 'flex-end',
@@ -43,5 +49,11 @@ export const Stylesheet = (isSelectedItem, context) =>
     timeTrackerSpacer: {
       height: Scale.s,
       marginBottom: Scale.xxs
+    },
+    tagContainer: {
+      flexDirection: 'row',
+      gap: Scale.s,
+      flexWrap: 'wrap',
+      marginLeft: Scale.xxxxl
     }
   });

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',
+}