@tactics/toddle-styleguide 2.0.3 → 3.0.0

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

@@ -1,53 +1,72 @@
-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 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;
+interface TimetableEditorStaffProps {
+  sequence: TimeSlotSequence;
+  onChange: (seq: TimeSlotSequence) => void;
 }
 
-export const TimetableEditorStaff = ({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);
+export const TimetableEditorStaff = ({
+  sequence,
+  onChange,
+}: TimetableEditorStaffProps) => {
+  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);
 
-    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 = TimeSlotRecord.fromEmpty().start
-        newSeq.third.end = TimeSlotRecord.fromEmpty().end;
+  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 = TimeSlotRecord.fromEmpty().start;
+    newSeq.third.end = TimeSlotRecord.fromEmpty().end;
 
-        onChange(newSeq);
-    }, [first, second])
+    onChange(newSeq);
+  }, [first, second]);
 
-    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);}}
-            />
-        </View>
-    );
-}
+  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);
+        }}
+      />
+    </View>
+  );
+};

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

@@ -1,5 +1,5 @@
-import React from "react";
-import { TimeSlotSequence } from "../../../models/time-slot-sequence";
+import React from 'react';
+import { TimeSlotSequence } from '../../../models/time-slot-sequence';
 interface TimetableEditorProps {
     sequence: TimeSlotSequence;
     onChange: (seq: TimeSlotSequence) => void;

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

@@ -1,61 +1,84 @@
-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 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;
+  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 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);
 
-    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;
+  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;
 
-        onChange(newSeq);
-    }, [first, second, third])
+    onChange(newSeq);
+  }, [first, second, third]);
 
-    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);}}
-            />
-        </View>
-    );
-}
+  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);
+        }}
+      />
+    </View>
+  );
+};

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

@@ -1,13 +1,13 @@
 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';
+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())
+  const [seq, setSeq] = useState(TimeSlotSequence.fromEmpty());
 
   return (
     <View
@@ -24,7 +24,7 @@ export const TimetableEditorPreview = ({}: {}) => {
       >
         <Button
           onPress={() => {
-            setPopoverIsVisible(true)
+            setPopoverIsVisible(true);
           }}
           label="Open popover"
         />
@@ -36,13 +36,13 @@ export const TimetableEditorPreview = ({}: {}) => {
         isVisible={popoverIsVisible}
       >
         <View>
-            <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
+          <TimetableEditor sequence={seq} onChange={(seq) => setSeq(seq)} />
 
           <View style={{marginTop: 32, marginBottom: 16, alignItems: 'center'}}>
             <Button
               label={'Bewaar'}
               onPress={() => {
-                console.log(seq)
+                console.log(seq);
               }}
             />
           </View>

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

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

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

@@ -2,11 +2,11 @@ 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'
-        }
-    });
+  StyleSheet.create({
+    rootContainer: {
+      flexDirection: 'column',
+      gap: 16,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

package/src/components/templates/modal/components/fade-panel.styles.d.ts

@@ -1,14 +1,18 @@
-export function Stylesheet(Context: any, fadeAnimation: any, maxHeight: any): {
-    rootContainer: {
-        maxWidth: number;
-        width: "100%";
-        maxHeight: any;
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        borderRadius: number;
-        backgroundColor: any;
-        opacity: any;
-    };
+export function Stylesheet(
+  Context: any,
+  fadeAnimation: any,
+  maxHeight: any
+): {
+  rootContainer: {
+    maxWidth: number;
+    width: '100%';
+    maxHeight: any;
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    borderRadius: number;
+    backgroundColor: any;
+    opacity: any;
+  };
 };

package/src/components/templates/modal/modal.styles.d.ts

@@ -1,23 +1,23 @@
 export function Stylesheet(): {
-    element: {
-        width: "100%";
-        height: "100%";
-        position: "absolute";
-        left: number;
-        top: number;
-        zIndex: number;
-        alignItems: "center";
-        justifyContent: "center";
-    };
-    fadePanelContainer: {
-        flex: number;
-        justifyContent: "center";
-        alignItems: "center";
-        width: "100%";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        zIndex: number;
-    };
+  element: {
+    width: '100%';
+    height: '100%';
+    position: 'absolute';
+    left: number;
+    top: number;
+    zIndex: number;
+    alignItems: 'center';
+    justifyContent: 'center';
+  };
+  fadePanelContainer: {
+    flex: number;
+    justifyContent: 'center';
+    alignItems: 'center';
+    width: '100%';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    zIndex: number;
+  };
 };

package/src/components/templates/popover/components/foreground/foreground.styles.d.ts

@@ -1,12 +1,12 @@
 export function Stylesheet(): {
-    element: {
-        width: "100%";
-        maxWidth: number;
-        height: "100%";
-        paddingRight: number;
-        paddingLeft: number;
-        zIndex: number;
-        position: "absolute";
-        top: number;
-    };
+  element: {
+    width: '100%';
+    maxWidth: number;
+    height: '100%';
+    paddingRight: number;
+    paddingLeft: number;
+    zIndex: number;
+    position: 'absolute';
+    top: number;
+  };
 };

package/src/components/templates/popover/components/modal/heading/heading.styles.d.ts

@@ -1,14 +1,14 @@
 export function Stylesheet(): {
-    element: {
-        display: "flex";
-        flexDirection: "column";
-        marginBottom: number;
-        alignItems: "center";
-    };
-    title: {
-        maxWidth: "75%";
-    };
-    subtitle: {
-        marginTop: number;
-    };
+  element: {
+    display: 'flex';
+    flexDirection: 'column';
+    marginBottom: number;
+    alignItems: 'center';
+  };
+  title: {
+    maxWidth: '75%';
+  };
+  subtitle: {
+    marginTop: number;
+  };
 };

package/src/components/templates/popover/components/modal/modal.styles.d.ts

@@ -1,19 +1,19 @@
 export function Stylesheet(context: any): {
-    element: {
-        position: "relative";
-        display: "flex";
-        alignItems: "stretch";
-        paddingTop: number;
-        paddingBottom: number;
-        paddingLeft: number;
-        paddingRight: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        backgroundColor: any;
-        minHeight: "40%";
-    };
-    inner: {
-        display: "flex";
-        alignItems: "stretch";
-    };
+  element: {
+    position: 'relative';
+    display: 'flex';
+    alignItems: 'stretch';
+    paddingTop: number;
+    paddingBottom: number;
+    paddingLeft: number;
+    paddingRight: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    backgroundColor: any;
+    minHeight: '40%';
+  };
+  inner: {
+    display: 'flex';
+    alignItems: 'stretch';
+  };
 };

package/src/components/templates/popover/popover.styles.d.ts

@@ -1,11 +1,11 @@
 export function Stylesheet(): {
-    element: {
-        width: "100%";
-        height: "100%";
-        zIndex: number;
-        top: number;
-        left: number;
-        position: "absolute";
-        alignItems: "center";
-    };
+  element: {
+    width: '100%';
+    height: '100%';
+    zIndex: number;
+    top: number;
+    left: number;
+    position: 'absolute';
+    alignItems: 'center';
+  };
 };

package/src/components/templates/popover-action/popover-action.component.d.ts

@@ -1,8 +1,12 @@
 import React from 'react';
 type PopOverActionProps = {
-    isVisible: boolean;
-    touchBackDrop: (value: boolean) => void;
-    children?: React.ReactNode;
+  isVisible: boolean;
+  touchBackDrop: (value: boolean) => void;
+  children?: React.ReactNode;
 };
-export declare const PopOverAction: ({ isVisible, children, touchBackDrop, }: PopOverActionProps) => React.JSX.Element;
+export declare const PopOverAction: ({
+  isVisible,
+  children,
+  touchBackDrop,
+}: PopOverActionProps) => React.JSX.Element;
 export {};

package/src/components/templates/popover-action/popover-action.component.tsx

@@ -16,6 +16,7 @@ export const PopOverAction = ({
   children,
   touchBackDrop,
 }: PopOverActionProps) => {
+
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
   );
@@ -31,10 +32,12 @@ export const PopOverAction = ({
   };
 
   const renderChildren = Children.map(children, (child, index) => {
-    return child ? React.cloneElement(child as React.ReactElement, {
-      onLayout: (event: any) =>
-        handleChildLayout(index, event.nativeEvent.layout),
-    }) : null;
+    return child
+      ? React.cloneElement(child as React.ReactElement, {
+          onLayout: (event: any) =>
+            handleChildLayout(index, event.nativeEvent.layout),
+        })
+      : null;
   });
 
   const handleChildIndexChange = (index: number) => {

package/src/components/templates/popover-action/popover-action.styles.d.ts

@@ -1,28 +1,28 @@
 export function Stylesheet(context: any): {
-    element: {
-        width: "100%";
-        height: "100%";
-        position: "absolute";
-        left: number;
-        top: number;
-        zIndex: number;
-        alignItems: "center";
-    };
-    slidePanelContainer: {
-        position: "relative";
-        display: "flex";
-        flex: number;
-        width: "90%";
-        maxWidth: number;
-        alignSelf: "center";
-        alignItems: "stretch";
-        paddingLeft: number;
-        paddingTop: number;
-        paddingRight: number;
-        paddingBottom: number;
-        borderTopLeftRadius: number;
-        borderTopRightRadius: number;
-        zIndex: number;
-        backgroundColor: any;
-    };
+  element: {
+    width: '100%';
+    height: '100%';
+    position: 'absolute';
+    left: number;
+    top: number;
+    zIndex: number;
+    alignItems: 'center';
+  };
+  slidePanelContainer: {
+    position: 'relative';
+    display: 'flex';
+    flex: number;
+    width: '90%';
+    maxWidth: number;
+    alignSelf: 'center';
+    alignItems: 'stretch';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    zIndex: number;
+    backgroundColor: any;
+  };
 };