@tactics/toddle-styleguide 5.4.9 → 5.4.11

package/App.tsx

@@ -80,8 +80,9 @@ import { SelectableListItemPreview } from './src/components/molecules/selectable
 import {
   SafeAreaProvider,
 } from 'react-native-safe-area-context';
-import {ContactAddress} from './src/components/molecules/contact-address/contact-address.component';
 import {ContactAddressPreview} from './src/components/molecules/contact-address/contact-address.preview';
+import {IsSafePreview} from './src/components/atoms/safe-check/safe-check.preview';
+import {SnapshotItemPreview} from './src/components/organisms/snapshot-item/snapshot-item.preview';
 
 const Stack = createNativeStackNavigator();
 
@@ -125,6 +126,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact Info Card"
         onPress={() => navigation.push('person-info-card')}
       />
+      <ReactBtn
+        title="Snapshot Item"
+        onPress={() => navigation.push('snapshot-item')}
+      />
       <ReactBtn
         title="Contact Item"
         onPress={() => navigation.push('contact-item')}
@@ -133,6 +138,10 @@ const HomeScreen = ({navigation}: {navigation: any}) => {
         title="Contact Address"
         onPress={() => navigation.push('contact-address')}
       />
+      <ReactBtn
+        title="Safe Check"
+        onPress={() => navigation.push('safe-check')}
+      />
       <ReactBtn
         title="Contact Role"
         onPress={() => navigation.push('contact-role')}
@@ -522,6 +531,11 @@ function App() {
   }}>
             {() => <PersonInfoCardPreview />}
           </Stack.Screen>
+          <Stack.Screen name="snapshot-item" options={{
+            freezeOnBlur: false,
+          }}>
+            {() => <SnapshotItemPreview />}
+          </Stack.Screen>
           <Stack.Screen name="pill" options={{
     freezeOnBlur: false,
   }}>{() => <PillPreview />}</Stack.Screen>
@@ -637,6 +651,11 @@ function App() {
           }}>
             {() => <ContactAddressPreview />}
           </Stack.Screen>
+          <Stack.Screen name="safe-check" options={{
+            freezeOnBlur: false,
+          }}>
+            {() => <IsSafePreview />}
+          </Stack.Screen>
         </Stack.Navigator>
       </NavigationContainer>
     </ThemeCtx.Provider>

package/index.tsx

@@ -127,6 +127,8 @@ import { DayInterface, DayOutputFormat } from './src/utilities/datetime/day.clas
 import { DateTime, DateTimeCalculation, DateTimeInterface, DateTimeOutputFormat } from './src/utilities/datetime/datetime.class';
 import { DateOnly, DateOnlyInterface, DateOnlyLocaleAwareOutputFormat, DateOnlyOutputFormat } from './src/utilities/datetime/dateonly.class';
 import { TimeSlotEmployeeSequence } from "./src/models/time-slot-employee-sequence";
+import { SnapshotItem } from "./src/components/organisms/snapshot-item/snapshot-item.component";
+import { SafeCheck } from "./src/components/atoms/safe-check/safe-check.component";
 
 // ================================
 // Exports
@@ -206,6 +208,8 @@ export {
   SwipeableContainer,
   SwipeableAction,
   Day,
+  SnapshotItem,
+  SafeCheck,
 
   // Enums
   BubbleAlignment,

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@tactics/toddle-styleguide",
-  "version": "5.4.9",
+  "version": "5.4.11",
   "main": "index.tsx",
   "types": "index.d.ts",
   "prepublish": "tsc",
   "scripts": {
     "eas-build-pre-install": "corepack enable",
-    "start": "./node_modules/.bin/tsc && ./node_modules/.bin/expo start",
+    "start": "./node_modules/.bin/tsc && npx expo start --dev-client",
     "test": "./node_modules/.bin/jest",
     "format": "./node_modules/.bin/prettier --write src/.",
     "types": "./node_modules/.bin/tsc index.tsx --declaration --allowJs --emitDeclarationOnly --esModuleInterop --jsx react-native --skipLibCheck --target es5",
-    "android": "expo run:android",
-    "ios": "expo run:ios"
+    "android": "npx expo run:android",
+    "ios": "npx expo run:ios"
   },
   "engineStrict": true,
   "engines": {

package/src/components/atoms/safe-check/safe-check.component.tsx

@@ -0,0 +1,38 @@
+import {Pressable, PressableProps} from 'react-native';
+import {useContext} from 'react';
+import {ThemeCtx} from '../../../context/theme.context';
+import {Stylesheet} from './safe-check.styles';
+import React from 'react';
+import {Icon} from '../../../icons/index';
+
+interface SafeCheckProps extends PressableProps {
+  isSafe: boolean;
+  onPress?: () => void;
+}
+
+export const SafeCheck = ({
+  isSafe,
+  onPress,
+ ...props
+}: SafeCheckProps) => {
+  const context = useContext(ThemeCtx);
+  const styles = Stylesheet(context, isSafe);
+
+  return (
+    <Pressable
+      onPress={() => {
+        if (onPress) {
+          onPress()
+        }
+      }}
+      {...props}
+      style={styles.container}
+      testID={'safe-check-test'}
+    >
+      {isSafe ?
+        <Icon color={'#FFFFFF'} style={'solid'} name={'check-circle'} /> :
+        <Icon color={'#000000'} style={'solid'} name={'exclamation'} />
+      }
+    </Pressable>
+  );
+};

package/src/components/atoms/safe-check/safe-check.preview.tsx

@@ -0,0 +1,22 @@
+import {Text, View} from 'react-native';
+import {useState} from 'react';
+import React from 'react';
+import {SafeCheck} from './safe-check.component';
+
+export const IsSafePreview = () => {
+  const [firstSafe, setFirstSafe] = useState<boolean>(false);
+  const [secondSafe, setSecondSafe] = useState<boolean>(true);
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <SafeCheck isSafe={firstSafe} onPress={() => {setFirstSafe(!firstSafe)}}/>
+      <SafeCheck isSafe={secondSafe} onPress={() => {setSecondSafe(!secondSafe)}}/>
+    </View>
+  );
+};

package/src/components/atoms/safe-check/safe-check.styles.js

@@ -0,0 +1,18 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+import {Size} from '../../../types/size.enum';
+
+export const Stylesheet = (context, isSafe) =>
+  StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        backgroundColor: isSafe
+          ? context.colors.ui.success.default
+          : context.colors.ui.lightgrey,
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: 60,
+        height: 60,
+        borderRadius: 60 / 2,
+    },
+  });

package/src/components/organisms/snapshot-item/snapshot-item.component.tsx

@@ -0,0 +1,84 @@
+import {ImageSourcePropType, View, ViewStyle, Text, PressableProps, Pressable} from 'react-native';
+import React, {useCallback, useContext, useMemo} from "react";
+import {ThemeCtx} from "../../../context/theme.context";
+import {Stylesheet} from "./snapshot-item.styles";
+import {Icon} from "../../../icons/index";
+import {SafeCheck} from "../../atoms/safe-check/safe-check.component";
+import {Paragraph, SmallText} from "../../atoms/paragraph-components";
+import {Heading2} from "../../atoms/heading-components";
+
+interface SnapshotItemProps extends PressableProps {
+    id: string;
+    name: string;
+    department: string;
+    isSafe: boolean;
+    onPressArrow: (id: string) => void;
+    onPressText: (id: string) => void;
+}
+
+export const SnapshotItem = ({
+  id,
+  name,
+  department,
+  isSafe,
+  onPressArrow,
+  onPressText,
+  ...props
+}: SnapshotItemProps) => {
+    const context = useContext(ThemeCtx);
+    const styles = Stylesheet(context, isSafe);
+
+    const onPressTextCallback = useCallback(() => {
+        onPressText(id);
+    }, [id, onPressText]);
+
+    const onPressArrowCallback = useCallback(() => {
+        onPressArrow(id);
+    }, [id, onPressArrow]);
+
+    const textColor = useMemo(() => {
+        return context.colors.ui.black;
+    }, [isSafe]);
+
+    return (
+        <View style={styles.container}>
+            <View style={styles.pressableContainer}>
+                <Pressable
+                    onPress={onPressTextCallback}
+                    style={styles.innerContainer}
+                >
+                    <View style={styles.pressableCheck}>
+                        <SafeCheck
+                            isSafe={isSafe}
+                            onPress={() => onPressTextCallback()}
+                        />
+                    </View>
+                    <View style={styles.pressableText}>
+                        <View>
+                            <Heading2
+                                bold={true}
+                                numberOfLines={1}
+                                ellipsizeMode={'tail'}
+                                textColor={textColor}
+                            >
+                                {name}
+                            </Heading2>
+                            <SmallText textColor={textColor}>{department}</SmallText>
+                        </View>
+                    </View>
+                </Pressable>
+                <Pressable
+                    onPress={onPressArrowCallback}
+                    style={styles.iconContainer}
+                >
+                    <Icon
+                        style={'regular'}
+                        name={'chevron-right'}
+                        size={20}
+                        color={context.colors.ui.black}
+                    />
+                </Pressable>
+            </View>
+        </View>
+    );
+};

package/src/components/organisms/snapshot-item/snapshot-item.preview.tsx

@@ -0,0 +1,40 @@
+import React, {useState} from 'react';
+import {SnapshotItem} from './snapshot-item.component';
+
+const {View} = require('react-native');
+
+export const SnapshotItemPreview = ({}: {}) => {
+
+  const [firstSafe, setFirstSafe] = useState<boolean>(false);
+  const [secondSafe, setSecondSafe] = useState<boolean>(true);
+
+
+  return (
+    <View
+      style={{
+        flex: 1,
+        backgroundColor: 'white',
+        paddingTop: 150,
+      }}
+    >
+      <View>
+        <SnapshotItem
+            id={'1'}
+            name={'Joske vermeulen'}
+            department={"Kleutertjes"}
+            isSafe={firstSafe}
+            onPressArrow={() => {console.log('navigate to details')}}
+            onPressText={() => {setFirstSafe(!firstSafe)}}
+        />
+        <SnapshotItem
+          id={'2'}
+          name={'Patrick Loveren'}
+          department={"Peuters"}
+          isSafe={secondSafe}
+          onPressArrow={() => {console.log('navigate to details')}}
+          onPressText={() => {setSecondSafe(!secondSafe)}}
+        />
+      </View>
+    </View>
+  );
+};

package/src/components/organisms/snapshot-item/snapshot-item.styles.js

@@ -0,0 +1,44 @@
+import {StyleSheet} from 'react-native';
+import {Scale} from '../../../theme/scale/index';
+
+export const Stylesheet = (context, isSafe) =>
+  StyleSheet.create({
+    container: {
+      width: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xl,
+      borderBottomLeftRadius: Scale.xl,
+      flexDirection: 'column',
+      backgroundColor: context.colors.ui.white,
+      minHeight: 100
+    },
+    innerContainer: {
+      flex: 1,
+      padding: Scale.xs,
+      flexDirection: 'row',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+      borderTopLeftRadius: Scale.xxl,
+      borderBottomLeftRadius: Scale.xxl,
+      alignItems: 'center',
+    },
+    pressableContainer: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    pressableCheck: {},
+    pressableText: {
+      marginLeft: Scale.l,
+    },
+    iconContainer: {
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      paddingRight: Scale.xs,
+      width: Scale.m * 4,
+      height: '100%',
+      borderTopRightRadius: Scale.l,
+      borderBottomRightRadius: Scale.l,
+    },
+  });

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

@@ -1,53 +1,88 @@
-import React, {Children, isValidElement, useContext, useEffect, useMemo, useState} from 'react';
-import {Animated, Dimensions, LayoutChangeEvent, Platform, StatusBar, View, ViewProps} 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';
-import {Foreground} from '../popover/components';
+import React, {
+  Children,
+  isValidElement,
+  ReactNode,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
+import {
+  Animated,
+  Dimensions,
+  LayoutChangeEvent,
+  Platform,
+  StatusBar,
+  View,
+  ViewProps,
+} 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) => {
 
+export const PopOverAction = ({
+                                isVisible,
+                                children,
+                                touchBackDrop,
+                              }: PopOverActionProps) => {
   const [windowHeight, setWindowHeight] = useState(
     Dimensions.get('window').height
   );
-  const [elementSize, setElementSize] = useState({width: 0, height: 0});
+  const [elementSize, setElementSize] = useState({ width: 0, height: 0 });
   const [currentChildIndex, setCurrentChildIndex] = useState(0);
-  const [childDimensions, setChildDimensions] = useState<any[]>([]);
+  const [childDimensions, setChildDimensions] = useState<
+    LayoutChangeEvent['nativeEvent']['layout'][]
+  >([]);
+
+  const handleChildLayout = (
+    index: number,
+    layout: LayoutChangeEvent['nativeEvent']['layout']
+  ) => {
+    setChildDimensions((prev) => {
+      const updated = [...prev];
+      updated[index] = layout;
+      return updated;
+    });
+  };
 
-  const handleChildLayout = (index: number, layout: any) => {
-    const updatedDimensions = [...childDimensions];
-    updatedDimensions[index] = layout;
+  function renderChildrenWithLayout(
+    children: ReactNode,
+    handleChildLayout: (
+      index: number,
+      layout: LayoutChangeEvent['nativeEvent']['layout']
+    ) => void
+  ) {
+    return Children.map(children, (child, index) => {
+      if (!isValidElement<ViewProps>(child)) return child;
 
-    setChildDimensions(updatedDimensions);
-  };
+      // Merge any existing onLayout the child might have
+      const existingOnLayout = child.props.onLayout;
 
-  const renderChildren = Children.map(children, (child, index) => {
-    if (isValidElement<ViewProps>(child)) {
       return React.cloneElement(child, {
-        onLayout: (event: LayoutChangeEvent) =>
-          handleChildLayout(index, event.nativeEvent.layout),
+        onLayout: (event: LayoutChangeEvent) => {
+          existingOnLayout?.(event);
+          handleChildLayout(index, event.nativeEvent.layout);
+        },
       });
-    }
-    return null;
-  });
+    });
+  }
 
   const handleChildIndexChange = (index: number) => {
     setCurrentChildIndex(index);
 
     const childDimension = childDimensions[index];
     if (childDimension) {
-      const {width, height} = childDimension;
-      setElementSize({width: width, height: height});
+      setElementSize({
+        width: childDimension.width,
+        height: childDimension.height,
+      });
     }
   };
 
@@ -61,11 +96,7 @@ export const PopOverAction = ({
     };
 
     updateWindowHeight();
-
-    const subscription = Dimensions.addEventListener(
-      'change',
-      updateWindowHeight
-    );
+    const subscription = Dimensions.addEventListener('change', updateWindowHeight);
 
     return () => subscription?.remove();
   }, []);
@@ -74,7 +105,7 @@ export const PopOverAction = ({
   const styles = Stylesheet(context);
 
   const elementHeight = Math.round(elementSize.height);
-  const maxHeight = Math.round(windowHeight / 100) * 80;
+  const maxHeight = Math.round(windowHeight * 0.8);
   const translateYStartingPoint = windowHeight;
   const saveHeight = elementHeight > maxHeight ? maxHeight : elementHeight;
 
@@ -99,13 +130,12 @@ export const PopOverAction = ({
     }).start();
   };
 
-  if (isVisible) {
-    open();
-  } else {
-    close();
-  }
+  useEffect(() => {
+    if (isVisible) open();
+    else close();
+  }, [isVisible, saveHeight]);
 
-  const transform = [{translateY: translateY}];
+  const transform = [{ translateY }];
 
   return (
     <View
@@ -117,11 +147,13 @@ export const PopOverAction = ({
       <Animated.View
         style={[
           styles.slidePanelContainer,
-          {maxHeight: maxHeight},
-          {transform: transform},
+          { maxHeight },
+          { transform },
         ]}
       >
-        <Swipe onIndexChange={handleChildIndexChange}>{renderChildren}</Swipe>
+        <Swipe onIndexChange={handleChildIndexChange}>
+          {renderChildrenWithLayout(children, handleChildLayout)}
+        </Swipe>
       </Animated.View>
     </View>
   );