feat: add menuBgColors prop to HoldMenuProvider for customizable menu…

… dark/light bg colors
hadnet · Aug 10, 2023 · 20031f7 · 20031f7
1 parent 8dd3018
commit 20031f7
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/src/components/menu/MenuList.tsx b/src/components/menu/MenuList.tsx
@@ -36,7 +36,7 @@ import type {MenuItemProps} from './types';
 const AnimatedView = Animated.createAnimatedComponent(BlurView);
 
 const MenuListComponent = () => {
-  const {state, theme, menuProps} = useInternal();
+  const {state, theme, menuProps, menuBgColors} = useInternal();
 
   const [itemList, setItemList] = React.useState<MenuItemProps[]>([]);
 
@@ -98,11 +98,11 @@ const MenuListComponent = () => {
       backgroundColor:
         theme.value === 'light'
           ? IS_IOS
-            ? 'rgba(255, 255, 255, .75)'
-            : 'rgba(255, 255, 255, .95)'
+            ? menuBgColors?.light ?? 'rgba(255, 255, 255, .75)'
+            : menuBgColors?.light ?? 'rgba(255, 255, 255, .95)'
           : IS_IOS
-          ? 'rgba(0,0,0,0.5)'
-          : 'rgba(39, 39, 39, .8)',
+          ? menuBgColors?.dark ?? 'rgba(0,0,0,0.5)'
+          : menuBgColors?.dark ?? 'rgba(39, 39, 39, .8)',
     };
   }, [theme]);
 

diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx
@@ -33,6 +33,7 @@ const ProviderComponent = ({
   safeAreaInsets,
   onOpen,
   onClose,
+  menuBgColors,
 }: HoldMenuProviderProps) => {
   if (iconComponent)
     AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
@@ -80,14 +81,15 @@ const ProviderComponent = ({
       state,
       theme,
       menuProps,
+      menuBgColors,
       safeAreaInsets: safeAreaInsets || {
         top: 0,
         bottom: 0,
         left: 0,
         right: 0,
       },
     }),
-    [state, theme, menuProps, safeAreaInsets]
+    [state, theme, menuProps, menuBgColors, safeAreaInsets]
   );
 
   return (

diff --git a/src/components/provider/types.ts b/src/components/provider/types.ts
@@ -1,3 +1,5 @@
+import type {Color} from '../../context/internal';
+
 export interface HoldMenuProviderProps {
   /**
    * Theme of hold menu. Effects to backdrop and context menu styles. Optional.
@@ -9,6 +11,10 @@ export interface HoldMenuProviderProps {
   theme?: 'dark' | 'light';
   backdropBlur?: boolean;
   iconComponent?: any;
+  menuBgColors?: {
+    light: Color;
+    dark: Color;
+  };
   children: React.ReactElement | React.ReactElement[];
 
   /**

diff --git a/src/context/internal.ts b/src/context/internal.ts
@@ -3,10 +3,21 @@ import type Animated from 'react-native-reanimated';
 import type {CONTEXT_MENU_STATE} from '../constants';
 import type {MenuInternalProps} from '../components/menu/types';
 
+export type Color =
+  | `rgba(${string}`
+  | `rgb(${string})`
+  | `hsl(${string})`
+  | `hsla(${string})`
+  | `#${string}`;
+
 export type InternalContextType = {
   state: Animated.SharedValue<CONTEXT_MENU_STATE>;
   theme: Animated.SharedValue<'light' | 'dark'>;
   menuProps: Animated.SharedValue<MenuInternalProps>;
+  menuBgColors?: {
+    light: Color;
+    dark: Color;
+  };
   safeAreaInsets?: {
     top: number;
     right: number;