chore: added useBottomSheet hook & backgroundComponent

gorhom · Aug 11, 2020 · 069fca0 · 069fca0
1 parent fdef2a9
commit 069fca0
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 20 deletions.
diff --git a/src/components/bottomSheet/BottomSheet.tsx b/src/components/bottomSheet/BottomSheet.tsx
@@ -44,7 +44,10 @@ import {
   useStableCallback,
   useScrollable,
 } from '../../utilities';
-import { BottomSheetInternalProvider } from '../../context';
+import {
+  BottomSheetInternalProvider,
+  BottomSheetProvider,
+} from '../../context';
 import {
   DEFAULT_ANIMATION_EASING,
   DEFAULT_ANIMATION_DURATION,
@@ -79,6 +82,7 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       onChange: _onChange,
       // components
       handleComponent: HandleComponent = Handle,
+      backgroundComponent: BackgroundComponent = null,
       children,
     },
     ref
@@ -245,6 +249,13 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     );
+    const contextVariables = useMemo(
+      () => ({
+        snapTo: handleOnSnapTo,
+        close: handleClose,
+      }),
+      [handleOnSnapTo, handleClose]
+    );
     //#endregion
 
     //#region effects
@@ -309,24 +320,29 @@ const BottomSheetComponent = forwardRef<BottomSheet, BottomSheetProps>(
           {...tapGestureHandler}
         >
           <Animated.View style={contentContainerStyle}>
-            <PanGestureHandler
-              ref={handlePanGestureRef}
-              simultaneousHandlers={rootTapGestureRef}
-              shouldCancelWhenOutside={false}
-              {...handlePanGestureHandler}
-            >
-              <Animated.View>
-                <HandleComponent
-                  animatedPositionIndex={animatedPositionIndex}
-                />
-              </Animated.View>
-            </PanGestureHandler>
+            {BackgroundComponent && (
+              <BackgroundComponent pointerEvents="none" />
+            )}
+            <BottomSheetProvider value={contextVariables}>
+              <PanGestureHandler
+                ref={handlePanGestureRef}
+                simultaneousHandlers={rootTapGestureRef}
+                shouldCancelWhenOutside={false}
+                {...handlePanGestureHandler}
+              >
+                <Animated.View>
+                  <HandleComponent
+                    animatedPositionIndex={animatedPositionIndex}
+                  />
+                </Animated.View>
+              </PanGestureHandler>
 
-            <BottomSheetInternalProvider value={internalContextVariables}>
-              <DraggableView style={styles.contentContainer}>
-                {children}
-              </DraggableView>
-            </BottomSheetInternalProvider>
+              <BottomSheetInternalProvider value={internalContextVariables}>
+                <DraggableView style={styles.contentContainer}>
+                  {children}
+                </DraggableView>
+              </BottomSheetInternalProvider>
+            </BottomSheetProvider>
           </Animated.View>
         </ContentWrapper>
 

diff --git a/src/components/bottomSheet/styles.ts b/src/components/bottomSheet/styles.ts
@@ -9,7 +9,6 @@ export const styles = StyleSheet.create({
   },
   contentContainer: {
     flex: 1,
-    backgroundColor: 'black',
   },
   debug: {
     position: 'absolute',

diff --git a/src/components/bottomSheet/types.d.ts b/src/components/bottomSheet/types.d.ts
@@ -1,6 +1,7 @@
 import type React from 'react';
 import type Animated from 'react-native-reanimated';
 import type { BottomSheetHandleProps } from '../handle';
+import type { ViewProps } from 'react-native';
 
 export interface BottomSheetProps extends BottomSheetAnimationConfigs {
   /**
@@ -38,6 +39,11 @@ export interface BottomSheetProps extends BottomSheetAnimationConfigs {
    * @type React.FC\<BottomSheetHandleProps\>
    */
   handleComponent?: React.FC<BottomSheetHandleProps>;
+  /**
+   * Component to be placed as a background.
+   * @type React.FC
+   */
+  backgroundComponent?: React.FC<ViewProps>;
   /**
    * Callback when sheet position changed to a provided point.
    * @type (index: number) => void;

diff --git a/src/context.ts b/src/context.ts
@@ -21,3 +21,13 @@ export const BottomSheetInternalContext = createContext<
 >();
 
 export const BottomSheetInternalProvider = BottomSheetInternalContext.Provider;
+
+export interface BottomSheetContextType {
+  snapTo: (index: number) => void;
+  close: () => void;
+}
+
+// @ts-ignore
+export const BottomSheetContext = createContext<BottomSheetContextType>();
+
+export const BottomSheetProvider = BottomSheetContext.Provider;
diff --git a/src/hooks.ts b/src/hooks.ts
@@ -1,6 +1,10 @@
 import { useContext } from 'react';
-import { BottomSheetInternalContext } from './context';
+import { BottomSheetInternalContext, BottomSheetContext } from './context';
 
 export const useBottomSheetInternal = () => {
   return useContext(BottomSheetInternalContext);
 };
+
+export const useBottomSheet = () => {
+  return useContext(BottomSheetContext);
+};
diff --git a/src/index.ts b/src/index.ts
@@ -13,3 +13,5 @@ export const {
 } = BottomSheetTouchable;
 
 export type { BottomSheetHandleProps } from './components/handle';
+
+export { useBottomSheet } from './hooks';