Merge pull request #377 from webbeetechnologies/improvements/chips

fix: background context not available in mobile
webbeetechnologies · Feb 4, 2025 · de237d2 · de237d2
2 parents 154102d + 2c791c1
commit de237d2
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@bambooapp/bamboo-molecules",
-    "version": "0.4.4",
+    "version": "0.4.5",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/webbeetechnologies/bamboo-molecules.git"

diff --git a/src/components/Surface/BackgroundContextWrapper.tsx b/src/components/Surface/BackgroundContextWrapper.tsx
@@ -0,0 +1,30 @@
+import { ReactNode, useContext, useMemo } from 'react';
+import { BackgroundContext } from '../../utils';
+import { useContrastColor } from '../../hooks';
+
+export const BackgroundContextWrapper = ({
+    backgroundColor,
+    children,
+}: {
+    backgroundColor: string;
+    children: ReactNode;
+}) => {
+    const contrastColor = useContrastColor(backgroundColor, undefined, undefined);
+
+    const parentContext = useContext(BackgroundContext);
+    const isTransparent = backgroundColor === 'transparent';
+
+    const surfaceContextValue = useMemo(
+        () => ({
+            backgroundColor,
+            color: contrastColor,
+        }),
+        [backgroundColor, contrastColor],
+    );
+
+    return (
+        <BackgroundContext.Provider value={isTransparent ? parentContext : surfaceContextValue}>
+            {children}
+        </BackgroundContext.Provider>
+    );
+};
diff --git a/src/components/Surface/Surface.android.tsx b/src/components/Surface/Surface.android.tsx
@@ -6,6 +6,7 @@ import { isAnimatedValue } from '../../styles/overlay';
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../core/theme/types';
 import { getElevationAndroid } from './utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -109,9 +110,11 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props) =>
     }, [backgroundColor, elevation, surfaceStyles]);
 
     return (
-        <Animated.View {...props} testID={testID} style={memoizedStyles}>
-            {children}
-        </Animated.View>
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+            <Animated.View {...props} testID={testID} style={memoizedStyles}>
+                {children}
+            </Animated.View>
+        </BackgroundContextWrapper>
     );
 };
 

diff --git a/src/components/Surface/Surface.ios.tsx b/src/components/Surface/Surface.ios.tsx
@@ -6,6 +6,7 @@ import { isAnimatedValue } from '../../styles/overlay';
 import { inputRange } from '../../styles/shadow';
 import type { MD3Elevation } from '../../core/theme/types';
 import { getStyleForAnimatedShadowLayer, getStyleForShadowLayer } from './utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -106,24 +107,28 @@ const Surface = ({ elevation = 1, style, children, testID, ...props }: Props) =>
 
     if (isAnimatedValue(elevation)) {
         return (
-            <Animated.View style={layer0Style}>
-                <Animated.View style={layer1Style}>
-                    <Animated.View {...props} testID={testID} style={sharedStyle}>
-                        {children}
+            <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+                <Animated.View style={layer0Style}>
+                    <Animated.View style={layer1Style}>
+                        <Animated.View {...props} testID={testID} style={sharedStyle}>
+                            {children}
+                        </Animated.View>
                     </Animated.View>
                 </Animated.View>
-            </Animated.View>
+            </BackgroundContextWrapper>
         );
     }
 
     return (
-        <Animated.View style={layer0Style}>
-            <Animated.View style={layer1Style}>
-                <Animated.View {...props} testID={testID} style={sharedStyle}>
-                    {children}
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
+            <Animated.View style={layer0Style}>
+                <Animated.View style={layer1Style}>
+                    <Animated.View {...props} testID={testID} style={sharedStyle}>
+                        {children}
+                    </Animated.View>
                 </Animated.View>
             </Animated.View>
-        </Animated.View>
+        </BackgroundContextWrapper>
     );
 };
 

diff --git a/src/components/Surface/Surface.tsx b/src/components/Surface/Surface.tsx
@@ -1,10 +1,10 @@
-import { ComponentPropsWithRef, ReactNode, memo, useMemo, forwardRef, useContext } from 'react';
+import { ComponentPropsWithRef, ReactNode, memo, useMemo, forwardRef } from 'react';
 import { Animated, View, StyleProp, ViewStyle } from 'react-native';
 
 import type { MD3Elevation } from '../../core/theme/types';
-import { useComponentStyles, useContrastColor } from '../../hooks';
+import { useComponentStyles } from '../../hooks';
 import shadow from '../../styles/shadow';
-import { BackgroundContext } from '../../utils';
+import { BackgroundContextWrapper } from './BackgroundContextWrapper';
 
 export type Props = ComponentPropsWithRef<typeof View> & {
     /**
@@ -73,27 +73,19 @@ export type Props = ComponentPropsWithRef<typeof View> & {
 // for Web
 const Surface = ({ elevation = 1, style, children, testID, ...props }: Props, ref: any) => {
     const surfaceStyles = useComponentStyles('Surface', style);
-    const contrastColor = useContrastColor(surfaceStyles?.backgroundColor, undefined, undefined);
 
-    const parentContext = useContext(BackgroundContext);
-    const isTransparent = surfaceStyles?.backgroundColor === 'transparent';
-
-    const { surfaceStyle, surfaceContextValue } = useMemo(() => {
+    const { surfaceStyle } = useMemo(() => {
         return {
-            surfaceContextValue: {
-                backgroundColor: surfaceStyles?.backgroundColor,
-                color: contrastColor,
-            },
             surfaceStyle: [elevation ? shadow(elevation) : null, surfaceStyles],
         };
-    }, [elevation, surfaceStyles, contrastColor]);
+    }, [elevation, surfaceStyles]);
 
     return (
-        <BackgroundContext.Provider value={isTransparent ? parentContext : surfaceContextValue}>
+        <BackgroundContextWrapper backgroundColor={surfaceStyles.backgroundColor}>
             <Animated.View ref={ref} {...props} testID={testID} style={surfaceStyle}>
                 {children}
             </Animated.View>
-        </BackgroundContext.Provider>
+        </BackgroundContextWrapper>
     );
 };
 

diff --git a/src/components/Surface/index.tsx b/src/components/Surface/index.tsx
@@ -1,2 +1,3 @@
 export { default as Surface, Props as SurfaceProps } from './Surface';
 export { defaultStyles as surfaceStyles } from './utils';
+export * from './BackgroundContextWrapper';