Merge pull request #326 from BouyguesTelecom/fix/box-fullheight

add context to set full height for boxcontent when box is full height
BouyguesTelecom · Jan 27, 2025 · 646809d · 646809d
2 parents 25db978 + 61ccb5d
commit 646809d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 42 deletions.
diff --git a/packages/react/components/box/Box.native.tsx b/packages/react/components/box/Box.native.tsx
@@ -1,10 +1,11 @@
+import { BoxProps } from '@/components/box/BoxProps'
+import { BoxContext } from '@/components/box/context/boxContext'
 import { ComponentName } from '@/components/enumsComponentsName'
 import { StatesContext } from '@/context/providerStates'
 import { getColorStyle, TrilogyColor, TrilogyColorValues } from '@/objects/facets/Color'
 import React, { useState } from 'react'
 import ContentLoader, { Rect } from 'react-content-loader/native'
 import { ImageBackground, Platform, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { BoxProps } from './BoxProps'
 
 /**
  * Box Component
@@ -147,33 +148,35 @@ const Box = ({
   }
 
   return (
-    <View
-      onLayout={(event) => {
-        const { height } = event.nativeEvent.layout
-        setBoxHeight(height)
-      }}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      style={[styles.box, !flat && styles.shadow, (others as any)?.style]}
-      testID={boxTestId}
-    >
-      {backgroundSrc ? (
-        <ImageBackground
-          imageStyle={{ borderRadius: boxRadius }}
-          style={styles.boxImage}
-          source={typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }}
-        >
-          {Boolean(highlighted) && <View style={styles.highlighted} />}
+    <BoxContext.Provider value={{ fullHeight: fullheight || false }}>
+      <View
+        onLayout={(event) => {
+          const { height } = event.nativeEvent.layout
+          setBoxHeight(height)
+        }}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        style={[styles.box, !flat && styles.shadow, (others as any)?.style]}
+        testID={boxTestId}
+      >
+        {backgroundSrc ? (
+          <ImageBackground
+            imageStyle={{ borderRadius: boxRadius }}
+            style={styles.boxImage}
+            source={typeof backgroundSrc === 'number' ? backgroundSrc : { uri: backgroundSrc }}
+          >
+            {Boolean(highlighted) && <View style={styles.highlighted} />}
+            <StatesContext.Provider value={{ inverted: !!inverted, active: !!active, flat: !!flat }}>
+              {children}
+            </StatesContext.Provider>
+          </ImageBackground>
+        ) : (
           <StatesContext.Provider value={{ inverted: !!inverted, active: !!active, flat: !!flat }}>
+            {Boolean(highlighted) && <View style={styles.highlighted} />}
             {children}
           </StatesContext.Provider>
-        </ImageBackground>
-      ) : (
-        <StatesContext.Provider value={{ inverted: !!inverted, active: !!active, flat: !!flat }}>
-          {Boolean(highlighted) && <View style={styles.highlighted} />}
-          {children}
-        </StatesContext.Provider>
-      )}
-    </View>
+        )}
+      </View>
+    </BoxContext.Provider>
   )
 }
 

diff --git a/packages/react/components/box/content/BoxContent.native.tsx b/packages/react/components/box/content/BoxContent.native.tsx
@@ -1,35 +1,31 @@
-import * as React from "react"
-import { StyleSheet, Text, View } from "react-native"
-import { BoxContentProps } from "./BoxContentProps"
-import { ComponentName } from "@/components/enumsComponentsName"
-import { getColorStyle } from "@/objects"
+import { BoxContentProps } from '@/components/box/content/BoxContentProps'
+import { BoxContext } from '@/components/box/context/boxContext'
+import { ComponentName } from '@/components/enumsComponentsName'
+import { getColorStyle } from '@/objects/facets/Color'
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
 
 /**
  * Box Content Component
  * @param children {React.ReactNode} Childrens
  * @param backgroundColor {TrilogyColor} Box Content Background Color
  */
-const BoxContent = ({
-  children,
-  backgroundColor,
-  ...others
-}: BoxContentProps): JSX.Element => {
+const BoxContent = ({ children, backgroundColor, ...others }: BoxContentProps): JSX.Element => {
+  const { fullHeight } = React.useContext(BoxContext)
+
   const styles = StyleSheet.create({
     boxContent: {
       padding: 16,
-      justifyContent: "center",
-      backgroundColor: backgroundColor && getColorStyle(backgroundColor) || "transparent",
+      justifyContent: 'center',
+      backgroundColor: (backgroundColor && getColorStyle(backgroundColor)) || 'transparent',
       borderRadius: 6,
+      flex: fullHeight ? 1 : undefined,
     },
   })
 
   return (
     <View style={[styles.boxContent]} {...others}>
-      {children && typeof children.valueOf() === "string" ? (
-        <Text>{children}</Text>
-      ) : (
-        children
-      )}
+      {children && typeof children.valueOf() === 'string' ? <Text>{children}</Text> : children}
     </View>
   )
 }

diff --git a/packages/react/components/box/context/boxContext.tsx b/packages/react/components/box/context/boxContext.tsx
@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const BoxContext = React.createContext({ fullHeight: false })
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import React from 'react'

		export const BoxContext = React.createContext({ fullHeight: false })