@tactics/toddle-styleguide 1.2.3 → 1.2.5

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import {useContext, useEffect, useState} from 'react';
-
-import {ThemeCtx} from '../../../context/theme.context';
-import {Dimensions, useWindowDimensions, View} from 'react-native';
+import {useEffect, useState} from 'react';
+import {Dimensions, Platform, StatusBar, View} from 'react-native';
 import {Stylesheet} from './popover.styles';
 import {Backdrop} from '../../atoms/backdrop/backdrop.component';
 import {Modal, Foreground} from './components';
@@ -15,8 +13,6 @@ type PopoverProps = {
   children?: React.ReactNode;
 };
 
-const window = Dimensions.get('window');
-
 const Popover = ({
   isVisible,
   title,
@@ -24,20 +20,37 @@ const Popover = ({
   onClose,
   children,
 }: PopoverProps) => {
-  const {width, height} = useWindowDimensions();
+  const [windowHeight, setWindowHeight] = useState(
+    Dimensions.get('window').height
+  );
+
+  useEffect(() => {
+    const updateWindowHeight = () => {
+      let availableHeight = Dimensions.get('window').height;
+      if (Platform.OS === 'android') {
+        availableHeight += StatusBar.currentHeight ?? 0;
+      }
+      setWindowHeight(availableHeight);
+    };
+
+    updateWindowHeight();
+
+    const subscription = Dimensions.addEventListener(
+      'change',
+      updateWindowHeight
+    );
+
+    return () => subscription?.remove();
+  }, []);
 
-  const context = useContext(ThemeCtx);
-  const styles = Stylesheet(context);
+  const styles = Stylesheet();
 
   return (
-    <View
-      style={[styles.element, {width: width, height: height}]}
-      pointerEvents={isVisible ? 'auto' : 'none'}
-    >
+    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
       <Backdrop isVisible={isVisible} />
       <Foreground>
         <Modal
-          windowHeight={height}
+          windowHeight={windowHeight}
           isVisible={isVisible}
           onClose={onClose}
           title={title}

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

@@ -1,7 +1,5 @@
 import React, {useState} from 'react';
 import {Button} from '../../molecules/button/button.component';
-import {ScrollView} from 'react-native';
-
 const {Popover} = require('./popover.component');
 const {View} = require('react-native');
 
@@ -32,101 +30,69 @@ export const PopoverPreview = ({}: {}) => {
         title={'Taal'}
         subtitle={'Welke taal wilt u gebruiken?'}
       >
-        <ScrollView style={{flex: 1}}>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-          <View>
-            <Button label={'test'} />
-          </View>
-        </ScrollView>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
+        <View>
+          <Button label={'test'} />
+        </View>
       </Popover>
     </View>
   );

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

@@ -1,4 +1,4 @@
-export function Stylesheet(Context: any): {
+export function Stylesheet(): {
   element: {
     zIndex: number;
     top: number;

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

@@ -1,9 +1,11 @@
 import React from 'react';
 import {StyleSheet} from 'react-native';
 
-export const Stylesheet = (Context) =>
+export const Stylesheet = () =>
   StyleSheet.create({
     element: {
+      width: '100%',
+      height: '100%',
       zIndex: 1000,
       top: 0,
       left: 0,

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

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

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

@@ -0,0 +1,119 @@
+import React, {Children, useContext, useEffect, useMemo, useState} from 'react';
+import {Animated, Dimensions, Platform, StatusBar, View} from 'react-native';
+import {Backdrop} from '../../atoms/backdrop/backdrop.component';
+import {Stylesheet} from './popover-action.styles';
+import {Swipe} from '../../molecules/swipe/swipe.component';
+import {ThemeCtx} from '../../../context/theme.context';
+
+type PopOverActionProps = {
+  isVisible: boolean;
+  touchBackDrop: (value: boolean) => void;
+  children?: React.ReactNode;
+};
+export const PopOverAction = ({
+  isVisible,
+  children,
+  touchBackDrop,
+}: PopOverActionProps) => {
+  const [windowHeight, setWindowHeight] = useState(
+    Dimensions.get('window').height
+  );
+  const [elementSize, setElementSize] = useState({width: 0, height: 0});
+  const [currentChildIndex, setCurrentChildIndex] = useState(0);
+  const [childDimensions, setChildDimensions] = useState<any[]>([]);
+
+  const handleChildLayout = (index: number, layout: any) => {
+    const updatedDimensions = [...childDimensions];
+    updatedDimensions[index] = layout;
+
+    setChildDimensions(updatedDimensions);
+  };
+
+  const renderChildren = Children.map(children, (child, index) => {
+    return React.cloneElement(child as React.ReactElement, {
+      onLayout: (event: any) =>
+        handleChildLayout(index, event.nativeEvent.layout),
+    });
+  });
+
+  const handleChildIndexChange = (index: number) => {
+    setCurrentChildIndex(index);
+
+    const childDimension = childDimensions[index];
+    if (childDimension) {
+      const {width, height} = childDimension;
+      setElementSize({width: width, height: height});
+    }
+  };
+
+  useEffect(() => {
+    const updateWindowHeight = () => {
+      let availableHeight = Dimensions.get('window').height;
+      if (Platform.OS === 'android') {
+        availableHeight += StatusBar.currentHeight ?? 0;
+      }
+      setWindowHeight(availableHeight);
+    };
+
+    updateWindowHeight();
+
+    const subscription = Dimensions.addEventListener(
+      'change',
+      updateWindowHeight
+    );
+
+    return () => subscription?.remove();
+  }, []);
+
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const elementHeight = Math.round(elementSize.height);
+  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const translateYStartingPoint = windowHeight;
+  const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
+
+  const translateY = useMemo(
+    () => new Animated.Value(translateYStartingPoint),
+    [translateYStartingPoint]
+  );
+
+  const open = () => {
+    Animated.timing(translateY, {
+      toValue: translateYStartingPoint - saveHeight,
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  const close = () => {
+    Animated.timing(translateY, {
+      toValue: translateYStartingPoint,
+      duration: 500,
+      useNativeDriver: true,
+    }).start();
+  };
+
+  if (isVisible) {
+    open();
+  } else {
+    close();
+  }
+
+  const transform = [{translateY: translateY}];
+
+  return (
+    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
+      <Backdrop isVisible={isVisible} touchBackDrop={touchBackDrop} />
+      <Animated.View
+        style={[
+          styles.slidePanelContainer,
+          {maxHeight: maxHeight},
+          {transform: transform},
+        ]}
+      >
+        <Swipe onIndexChange={handleChildIndexChange}>{renderChildren}</Swipe>
+      </Animated.View>
+    </View>
+  );
+};

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

@@ -0,0 +1 @@
+export declare const PopOverActionPreview: () => JSX.Element;

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

@@ -0,0 +1,142 @@
+import React, {useState} from 'react';
+import {View} from 'react-native';
+import {Button} from '../../molecules/button/button.component';
+import {PopOverAction} from './popover-action.component';
+import {Heading2} from '../../atoms/heading-components';
+import {Icon} from '../../../icons/index';
+import {Paragraph} from '../../atoms/paragraph-components';
+import {TimePicker} from '../../molecules/time-picker/time-picker.component';
+
+export const PopOverActionPreview = () => {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+  const [checkInHours, setCheckInHours] = useState('09');
+  const [checkInMinutes, setCheckInMinutes] = useState('06');
+
+  return (
+    <View style={{width: '100%', height: '100%', zIndex: 10000}}>
+      <View style={{marginTop: 150}}>
+        <Button
+          label={'Open popover action'}
+          onPress={() => setIsVisible(true)}
+        />
+      </View>
+
+      <PopOverAction isVisible={isVisible} touchBackDrop={setIsVisible}>
+        {/*FIRST CHILD*/}
+        <View
+          style={{
+            alignItems: 'center',
+            gap: 60,
+            height: 460,
+          }}
+          key={1}
+        >
+          <View style={{gap: 10}}>
+            <Heading2 bold={true} textAlign={'center'}>
+              Uurregistratie
+            </Heading2>
+
+            <View
+              style={{
+                flexDirection: 'row',
+                gap: 16,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+              <View>
+                <Paragraph>17 Jan 2021</Paragraph>
+              </View>
+            </View>
+          </View>
+          <TimePicker
+            initialHours={checkInHours}
+            initialMinutes={checkInMinutes}
+            onChangeHours={setCheckInHours}
+            onChangeMinutes={setCheckInMinutes}
+          />
+        </View>
+
+        {/*SECOND CHILD*/}
+
+        <View
+          style={{
+            alignItems: 'center',
+            gap: 60,
+            height: 400,
+          }}
+          key={2}
+        >
+          <View style={{gap: 12}}>
+            <Heading2 bold={true} textAlign={'center'}>
+              Uurregistratie
+            </Heading2>
+
+            <View
+              style={{
+                flexDirection: 'row',
+                gap: 16,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+              <View>
+                <Paragraph>17 Jan 2021</Paragraph>
+              </View>
+            </View>
+          </View>
+
+          <TimePicker
+            initialHours={checkInHours}
+            initialMinutes={checkInMinutes}
+            onChangeHours={setCheckInHours}
+            onChangeMinutes={setCheckInMinutes}
+          />
+
+          <Button
+            label={'Test button'}
+            onPress={() => console.log('pressed')}
+          />
+        </View>
+
+        {/*Third CHILD*/}
+
+        <View
+          style={{
+            alignItems: 'center',
+            gap: 60,
+            height: 600,
+          }}
+          key={3}
+        >
+          <View style={{gap: 12}}>
+            <Heading2 bold={true} textAlign={'center'}>
+              Uurregistratie
+            </Heading2>
+
+            <View
+              style={{
+                flexDirection: 'row',
+                gap: 16,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <Icon style={'regular'} name={'calendar'} color={'#000000'} />
+              <View>
+                <Paragraph>17 Jan 2021</Paragraph>
+              </View>
+            </View>
+          </View>
+
+          <Button
+            label={'Test button'}
+            onPress={() => console.log('pressed')}
+          />
+        </View>
+      </PopOverAction>
+    </View>
+  );
+};

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

@@ -0,0 +1,26 @@
+export function Stylesheet(context: any): {
+  element: {
+    width: string;
+    height: string;
+    position: 'absolute';
+    left: number;
+    top: number;
+    zIndex: number;
+  };
+  slidePanelContainer: {
+    position: 'relative';
+    display: 'flex';
+    flex: number;
+    alignItems: 'stretch';
+    paddingLeft: number;
+    paddingTop: number;
+    paddingRight: number;
+    paddingBottom: number;
+    marginLeft: number;
+    marginRight: number;
+    borderTopLeftRadius: number;
+    borderTopRightRadius: number;
+    zIndex: number;
+    backgroundColor: any;
+  };
+};

package/src/components/templates/popover-action/popover-action.styles.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      zIndex: 1000,
+    },
+    slidePanelContainer: {
+      position: 'relative',
+      display: 'flex',
+      flex: 1,
+      alignItems: 'stretch',
+      paddingLeft: Scale.m,
+      paddingTop: Scale.xl,
+      paddingRight: Scale.m,
+      paddingBottom: Scale.m,
+      marginLeft: Scale.m,
+      marginRight: Scale.m,
+      borderTopLeftRadius: Scale.l,
+      borderTopRightRadius: Scale.l,
+      zIndex: 1004,
+      backgroundColor: context.colors.ui.white,
+    },
+  });

package/src/utilities/toddle-datetime/toddle-datetime.class.d.ts

@@ -21,7 +21,12 @@ export declare class ToddleDateTime {
     static local(year: number, month: number, day: number, hour: number, minute: number, second: number, opts?: DateTimeJSOptions): ToddleDateTime;
     static local(year: number, month: number, day: number, hour: number, minute: number, second: number, milliseconds: number, opts?: DateTimeJSOptions): ToddleDateTime;
     static fromISO(date: string, options?: DateTimeOptions): ToddleDateTime;
+    static fromSeconds(seconds: number, options?: DateTimeJSOptions): ToddleDateTime;
     static get DATE_MED(): DateTimeFormatOptions;
+    get hour(): number;
+    get minute(): number;
+    get second(): number;
+    get millisecond(): number;
     get day(): number;
     get weekdayShort(): string;
     plus(duration: DurationLike): ToddleDateTime;

package/src/utilities/toddle-datetime/toddle-datetime.class.tsx

@@ -87,6 +87,13 @@ export class ToddleDateTime {
     return new ToddleDateTime(LuxonDateTime.fromISO(date, options));
   }
 
+  static fromSeconds(
+    seconds: number,
+    options?: DateTimeJSOptions
+  ): ToddleDateTime {
+    return new ToddleDateTime(LuxonDateTime.fromSeconds(seconds, options));
+  }
+
   // FORMAT PRESETS
 
   static get DATE_MED(): DateTimeFormatOptions {
@@ -95,6 +102,22 @@ export class ToddleDateTime {
 
   // GET
 
+  get hour(): number {
+    return this.dateTime.hour;
+  }
+
+  get minute(): number {
+    return this.dateTime.minute;
+  }
+
+  get second(): number {
+    return this.dateTime.second;
+  }
+
+  get millisecond(): number {
+    return this.dateTime.millisecond;
+  }
+
   get day(): number {
     return this.dateTime.day;
   }

package/src/utilities/toddle-datetime/toddle-datetime.preview.tsx

@@ -7,13 +7,15 @@ import {Heading2, Heading4} from '../../components/atoms/heading-components';
 export const ToddleDateTimePreview = ({}: {}) => {
   const now = ToddleDateTime.now();
   const fromISO = ToddleDateTime.fromISO('2016-05-25T09:08:34.123');
-  const fromISO2 = ToddleDateTime.fromISO('2022-03-14');
+  const timestamp = 1688729520;
+
   return (
     <View
       style={{
         marginTop: 50,
         alignContent: 'center',
         justifyContent: 'center',
+        paddingBottom: 50,
       }}
     >
       <Heading2 bold={true} textAlign={'center'} addStyle={{marginBottom: 50}}>
@@ -110,6 +112,18 @@ export const ToddleDateTimePreview = ({}: {}) => {
         <Paragraph addStyle={{marginBottom: 12}}>
           {fromISO.timestamp()}
         </Paragraph>
+
+        <Heading4 bold={true}>.fromSeconds(seconds, options?)</Heading4>
+        <Paragraph>Returns a ToddleDateTime from a timestamp.</Paragraph>
+        <Paragraph addStyle={{marginBottom: 12}}>
+          {ToddleDateTime.fromSeconds(timestamp).toLocaleString({
+            day: 'numeric',
+            month: 'short',
+            hourCycle: 'h24',
+            hour: 'numeric',
+            minute: '2-digit',
+          })}
+        </Paragraph>
       </ScrollView>
     </View>
   );