@tactics/toddle-styleguide 5.0.4 → 5.0.5

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    element: {
+      width: '100%',
+      maxWidth: 768,
+      height: '100%',
+      paddingRight: Scale.m,
+      paddingLeft: Scale.m,
+      zIndex: 1002,
+      position: 'absolute',
+      top: 0,
+    },
+  });

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

@@ -0,0 +1,4 @@
+import {Backdrop} from './backdrop/backdrop.component';
+import {Foreground} from './foreground/foreground.component';
+import {Modal} from './modal/modal.component';
+export {Backdrop, Foreground, Modal};

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

@@ -0,0 +1,5 @@
+import {Backdrop} from '../../../atoms/backdrop/backdrop.component';
+import {Foreground} from './foreground/foreground.component';
+import {Modal} from './modal/modal.component';
+
+export {Backdrop, Foreground, Modal};

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { GestureResponderEvent } from 'react-native';
+type ModalCloseProps = {
+    onPress: (event: GestureResponderEvent) => void;
+};
+declare const Close: ({ onPress }: ModalCloseProps) => React.JSX.Element;
+export { Close as Close };

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {GestureResponderEvent, Pressable} from 'react-native';
+import {Icon} from '../../../../../../icons/index';
+import {Stylesheet} from './close.styles';
+import {ThemeCtx} from '../../../../../../context/theme.context';
+
+type ModalCloseProps = {
+  onPress: (event: GestureResponderEvent) => void;
+};
+
+const Close = ({onPress}: ModalCloseProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet();
+
+  return (
+    <Pressable onPress={onPress} style={styles.container}>
+      <Icon
+        style={'regular'}
+        name={'xmark'}
+        size={20}
+        color={context.colors.ui.darkgrey}
+      />
+    </Pressable>
+  );
+};
+export {Close as Close};

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

@@ -0,0 +1,10 @@
+export function Stylesheet(): {
+  container: {
+    width: number;
+    height: number;
+    position: 'absolute';
+    top: number;
+    right: number;
+    zIndex: number;
+  };
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    container: {
+      width: 42,
+      height: 42,
+      position: 'absolute',
+      top: 16,
+      right: 12,
+      zIndex: 1003,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+  });

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+type ModalHeadingProps = {
+    title: string;
+    subtitle?: string;
+};
+declare const Heading: ({ title, subtitle }: ModalHeadingProps) => React.JSX.Element;
+export { Heading as Heading };

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import {View} from 'react-native';
+import {Stylesheet} from './heading.styles';
+import {Heading2, Heading3} from '../../../../../atoms/heading-components';
+
+type ModalHeadingProps = {
+  title: string;
+  subtitle?: string;
+};
+
+const Heading = ({title, subtitle}: ModalHeadingProps) => {
+  const styles = Stylesheet();
+
+  return (
+    <View style={styles.element}>
+      <Heading2
+        bold={true}
+        textAlign={'center'}
+        numberOfLines={1}
+        ellipsizeMode={'tail'}
+        addStyle={styles.title}
+      >
+        {title}
+      </Heading2>
+      {subtitle ? (
+        <Heading3 textAlign={'center'} addStyle={styles.subtitle}>
+          {subtitle}
+        </Heading3>
+      ) : (
+        ''
+      )}
+    </View>
+  );
+};
+export {Heading as Heading};

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../../theme/scale';
+
+export const Stylesheet = () =>
+  StyleSheet.create({
+    element: {
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: Scale.xl,
+      alignItems: 'center',
+    },
+    title: {
+      maxWidth: '75%',
+    },
+    subtitle: {
+      marginTop: Scale.xs,
+    },
+  });

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

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

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

@@ -0,0 +1,92 @@
+import * as React from 'react';
+import {useContext, useMemo, useState} from 'react';
+import {Animated, View} from 'react-native';
+import {Stylesheet} from './modal.styles';
+import {Close} from './close/close.component';
+import {Heading} from './heading/heading.component';
+import {ScrollContent} from './scroll-content/scroll-content.component';
+import {ThemeCtx} from '../../../../../context/theme.context';
+
+type PopoverModalProps = {
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children: React.ReactNode;
+  windowHeight: number;
+  disableSrollContent?: boolean;
+};
+
+const Modal = ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  windowHeight,
+  disableSrollContent,
+}: PopoverModalProps) => {
+  // Keep element and window size in local state.
+  const [elementSize, setElementSize] = useState({width: 0, height: 0});
+
+  // Load theme and apply theme context to styleguide.
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  const elementHeight = Math.round(elementSize.height);
+
+  const maxHeight = Math.round(windowHeight / 100) * 90;
+  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 (
+    <Animated.View
+      style={[styles.element, {maxHeight: maxHeight}, {transform: transform}]}
+      onLayout={(event) => {
+        const {width, height} = event.nativeEvent.layout;
+        setElementSize({width: width, height: height});
+      }}
+    >
+      <Close onPress={onClose} />
+      <Animated.View style={styles.inner}>
+        {title ? <Heading title={title} subtitle={subtitle} /> : null}
+        {disableSrollContent ? (
+          <View>{children}</View>
+        ) : (
+          <ScrollContent>{children}</ScrollContent>
+        )}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+export {Modal as Modal};

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

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

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../../../theme/scale';
+
+export const Stylesheet = (context) =>
+  StyleSheet.create({
+    element: {
+      position: 'relative',
+      display: 'flex',
+      alignItems: 'stretch',
+      paddingTop: Scale.m * 1.25,
+      paddingBottom: Scale.m,
+      paddingLeft: Scale.m,
+      paddingRight: Scale.m,
+      borderTopLeftRadius: Scale.l,
+      borderTopRightRadius: Scale.l,
+      backgroundColor: context.colors.ui.white,
+      minHeight: '40%',
+    },
+    inner: {
+      display: 'flex',
+      alignItems: 'stretch',
+    },
+  });

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.component.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+type ModalScrollContentProps = {
+    children: React.ReactNode;
+};
+declare const ScrollContent: ({ children }: ModalScrollContentProps) => React.JSX.Element;
+export { ScrollContent as ScrollContent };

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.component.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import {useContext} from 'react';
+
+import {ScrollView} from 'react-native';
+import {Stylesheet} from './scroll-content.styles';
+import {ThemeCtx} from '../../../../../../context/theme.context';
+
+type ModalScrollContentProps = {
+  children: React.ReactNode;
+};
+
+const ScrollContent = ({children}: ModalScrollContentProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context);
+
+  return (
+    <ScrollView contentContainerStyle={styles.element}>{children}</ScrollView>
+  );
+};
+export {ScrollContent as ScrollContent};

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.styles.d.ts

@@ -0,0 +1,6 @@
+export function Stylesheet(Context: any): {
+  element: {
+    display: 'flex';
+    alignItems: 'stretch';
+  };
+};

package/src/components/templates/popover/components/modal/scroll-content/scroll-content.styles.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import {StyleSheet} from 'react-native';
+
+export const Stylesheet = (Context) =>
+  StyleSheet.create({
+    element: {
+      display: 'flex',
+      alignItems: 'stretch',
+    },
+  });

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

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

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

@@ -0,0 +1,67 @@
+import * as React from 'react';
+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';
+
+type PopoverProps = {
+  onClose: () => void;
+  title?: string;
+  subtitle?: string;
+  isVisible: boolean;
+  children?: React.ReactNode;
+  disableScrollContent?: boolean;
+};
+
+const Popover = ({
+  isVisible,
+  title,
+  subtitle,
+  onClose,
+  children,
+  disableScrollContent,
+}: PopoverProps) => {
+  const styles = Stylesheet();
+  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();
+  }, []);
+
+  return (
+    <View style={styles.element} pointerEvents={isVisible ? 'auto' : 'none'}>
+      <Backdrop isVisible={isVisible} />
+      <Foreground>
+        <Modal
+          windowHeight={windowHeight}
+          isVisible={isVisible}
+          onClose={onClose}
+          title={title}
+          subtitle={subtitle}
+          disableSrollContent={disableScrollContent}
+        >
+          {children}
+        </Modal>
+      </Foreground>
+    </View>
+  );
+};
+export {Popover as Popover};

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

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

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

@@ -0,0 +1,99 @@
+import React, {useState} from 'react';
+import {Button} from '../../molecules/button/button.component';
+const {Popover} = require('./popover.component');
+const {View} = require('react-native');
+
+export const PopoverPreview = ({}: {}) => {
+  const [popoverIsVisible, setPopoverIsVisible] = useState(false);
+
+  return (
+    <View
+      style={{
+        width: '100%',
+        height: '100%',
+        zIndex: 10000,
+      }}
+    >
+      <View
+        style={{
+          marginTop: 150,
+        }}
+      >
+        <Button
+          onPress={() => setPopoverIsVisible(true)}
+          label="Open popover"
+        />
+      </View>
+      <Popover
+        isVisible={popoverIsVisible}
+        onClose={() => setPopoverIsVisible(false)}
+        title={'Taal'}
+        subtitle={'Welke taal wilt u gebruiken?'}
+      >
+        <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

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

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

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

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

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