@tactics/toddle-styleguide 5.0.2 → 5.0.5

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

@@ -0,0 +1,70 @@
+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-staff.component.d.ts

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

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

@@ -0,0 +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';
+
+interface TimetableEditorStaffProps {
+  sequence: TimeSlotSequence;
+  onChange: (seq: TimeSlotSequence) => void;
+}
+
+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;
+
+    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>
+  );
+};

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,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';
+
+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);
+
+  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]);
+
+  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.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/components/fade-panel.component.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type FadePanelProps = {
+    title: string;
+    subtitle?: string;
+    isVisible: boolean;
+    onClose: () => void;
+    maxHeight: number;
+    children: React.ReactNode;
+};
+export declare const FadePanel: ({ title, subtitle, isVisible, onClose, maxHeight, children, }: FadePanelProps) => React.JSX.Element;
+export {};

package/src/components/templates/modal/components/fade-panel.component.tsx

@@ -0,0 +1,53 @@
+import React, {useContext, useEffect, useRef} from 'react';
+import {Animated} from 'react-native';
+import {ThemeCtx} from '../../../../context/theme.context';
+import {Stylesheet} from './fade-panel.styles';
+import {Heading} from '../../popover/components/modal/heading/heading.component';
+import {Close} from '../../popover/components/modal/close/close.component';
+
+type FadePanelProps = {
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  onClose: () => void;
+  maxHeight: number;
+  children: React.ReactNode;
+};
+
+export const FadePanel = ({
+  title,
+  subtitle,
+  isVisible,
+  onClose,
+  maxHeight,
+  children,
+}: FadePanelProps) => {
+  const fadeAnimation = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (isVisible) {
+      Animated.timing(fadeAnimation, {
+        toValue: 1,
+        duration: 400,
+        useNativeDriver: true,
+      }).start();
+    } else if (!isVisible) {
+      Animated.timing(fadeAnimation, {
+        toValue: 0,
+        duration: 100,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [isVisible]);
+
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, fadeAnimation, maxHeight);
+
+  return (
+    <Animated.View style={styles.rootContainer}>
+      <Close onPress={onClose} />
+      <Heading title={title} subtitle={subtitle} />
+      {children}
+    </Animated.View>
+  );
+};

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

@@ -0,0 +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;
+  };
+};

package/src/components/templates/modal/components/fade-panel.styles.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../theme/scale/index';
+
+export const Stylesheet = (Context, fadeAnimation, maxHeight) =>
+  StyleSheet.create({
+    rootContainer: {
+      maxWidth: 560,
+      width: '100%',
+      maxHeight: maxHeight,
+      paddingLeft: Scale.m,
+      paddingTop: Scale.l,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m,
+      borderRadius: Scale.m,
+      backgroundColor: Context.colors.ui.white,
+      opacity: fadeAnimation,
+    },
+  });

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

@@ -0,0 +1,13 @@
+export function Stylesheet(): {
+  regionsContainer: {
+    width: string;
+    paddingLeft: number;
+    paddingRight: number;
+  };
+  regionTitleMargin: {
+    marginBottom: number;
+  };
+  citiesMargin: {
+    marginBottom: number;
+  };
+};

package/src/components/templates/modal/modal-preview.styles.js

@@ -0,0 +1,17 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    regionsContainer: {
+      width: '100%',
+      paddingLeft: Scale.xxs,
+      paddingRight: Scale.xxs,
+    },
+    regionTitleMargin: {
+      marginBottom: Scale.m,
+    },
+    citiesMargin: {
+      marginBottom: Scale.l,
+    },
+  });

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

@@ -0,0 +1,10 @@
+import React from 'react';
+type ModalProps = {
+    title: string;
+    subtitle?: string;
+    isVisible: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+};
+export declare const Modal: ({ title, subtitle, isVisible, onClose, children, }: ModalProps) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,53 @@
+import React, {useEffect, useState} from 'react';
+import {Stylesheet} from './modal.styles';
+import {Dimensions, View} from 'react-native';
+import {Backdrop} from '../../atoms/backdrop/backdrop.component';
+import {FadePanel} from './components/fade-panel.component';
+
+type ModalProps = {
+  title: string;
+  subtitle?: string;
+  isVisible: boolean;
+  onClose: () => void;
+  children?: React.ReactNode;
+};
+
+const window = Dimensions.get('window');
+
+export const Modal = ({
+  title,
+  subtitle,
+  isVisible,
+  onClose,
+  children,
+}: ModalProps) => {
+  const [windowHeight, setWindowHeight] = useState(window.height);
+
+  useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', ({window}) => {
+      setWindowHeight(window.height);
+    });
+    return () => subscription?.remove();
+  });
+
+  const maxHeight = Math.round(windowHeight / 100) * 90;
+
+  const styles = Stylesheet();
+
+  return (
+    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
+      <Backdrop isVisible={isVisible} />
+      <View style={styles.fadePanelContainer}>
+        <FadePanel
+          maxHeight={maxHeight}
+          isVisible={isVisible}
+          onClose={onClose}
+          title={title}
+          subtitle={subtitle}
+        >
+          {children}
+        </FadePanel>
+      </View>
+    </View>
+  );
+};

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

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

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

@@ -0,0 +1,48 @@
+import React, {useState} from 'react';
+import {Button} from '../../molecules/button/button.component';
+import {Paragraph} from '../../atoms/paragraph-components';
+import {Stylesheet} from './modal-preview.styles';
+import {Heading3} from '../../atoms/heading-components';
+import {Heading4} from '../../atoms/heading-components';
+
+const {Modal} = require('./modal.component');
+const {View} = require('react-native');
+
+export const ModalPreview = ({}: {}) => {
+  const [modalIsVisible, setModalIsVisible] = useState(false);
+
+  const styles = Stylesheet();
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View style={{marginTop: 150}}>
+        <Button label="Open modal" onPress={() => setModalIsVisible(true)} />
+      </View>
+      <Modal
+        title={'Mijn login'}
+        subtitle={'Hoe vind ik mijn login gegevens?'}
+        isVisible={modalIsVisible}
+        onClose={() => setModalIsVisible(false)}
+      >
+        <View
+          style={{
+            paddingBottom: 36,
+          }}
+        >
+          <Paragraph textAlign={'center'}>
+            Deze gegevens zijn dezelfde gegevens waarmee u de oorsponkelijke
+            aanvraag heeft gedaan in het ouderplatform. Indien u deze niet meer
+            weet kan u steeds naar de website gaan en uw wachtwoord resetten of
+            oontact opnemen met het verblijf om dit voor u te doen..{' '}
+          </Paragraph>
+        </View>
+      </Modal>
+    </View>
+  );
+};

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

@@ -0,0 +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;
+  };
+};

package/src/components/templates/modal/modal.styles.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 1000,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    fadePanelContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.m * 4.5,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m * 4.5,
+      zIndex: 1004,
+    },
+  });

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Modal } from '../modal/modal.component';
+type PopoverForegroundProps = {
+    children: React.ReactElement<typeof Modal>;
+};
+declare const Foreground: ({ children }: PopoverForegroundProps) => React.JSX.Element;
+export { Foreground as Foreground };

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {Stylesheet} from './foreground.styles';
+import {Modal} from '../modal/modal.component';
+
+type PopoverForegroundProps = {
+  children: React.ReactElement<typeof Modal>;
+};
+
+const Foreground = ({children}: PopoverForegroundProps) => {
+  const styles = Stylesheet();
+
+  return <View style={styles.element}>{children}</View>;
+};
+export {Foreground as Foreground};

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

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