@niibase/bottom-sheet-manager 1.2.0 → 1.4.0

package/src/router/view.tsx

@@ -1,265 +1,163 @@
-import {
-  BottomSheetBackdrop,
-  BottomSheetModal,
-  BottomSheetModalProps,
-  BottomSheetModalProvider,
-} from "@gorhom/bottom-sheet";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { ParamListBase, useTheme } from "@react-navigation/native";
+import { SNAP_POINT_TYPE } from "@gorhom/bottom-sheet";
 import * as React from "react";
-import { StatusBar } from "react-native";
-import Animated, {
-  Easing,
-  interpolate,
-  interpolateColor,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from "react-native-reanimated";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import type {
   BottomSheetDescriptorMap,
-  BottomSheetNavigationConfig,
   BottomSheetNavigationHelpers,
-  BottomSheetNavigationProp,
   BottomSheetNavigationState,
+  BottomSheetRoute,
 } from "./types";
+import { BottomSheetInstance, BottomSheetProps } from "../types";
+import { BottomSheetActions } from "./router";
+import BottomSheet from "../sheet";
 
-type BottomSheetModalScreenProps = BottomSheetModalProps & {
-  navigation: BottomSheetNavigationProp<ParamListBase>;
-  /**
-   * When `true`, tapping on the backdrop will not dismiss the modal.
-   * @default false
-   */
-  clickThrough?: boolean;
-
-  /**
-   * Opacity of the sheet's overlay.
-   * @default 0.45
-   */
-  opacity?: number;
-
-  /**
-   * IOS modal sheet type of animation
-   * @default false
-   */
-  iosModalSheetTypeOfAnimation?: boolean;
+type Props = {
+  state: BottomSheetNavigationState<ParamListBase>;
+  navigation: BottomSheetNavigationHelpers;
+  descriptors: BottomSheetDescriptorMap;
 };
 
-function BottomSheetModalScreen({
-  index,
-  navigation,
-  clickThrough,
-  iosModalSheetTypeOfAnimation,
-  opacity,
+function BottomSheetScreen({
   children,
+  navigation,
+  route,
   ...props
-}: BottomSheetModalScreenProps) {
-  const ref = React.useRef<BottomSheetModal>(null);
-  const lastIndexRef = React.useRef(index);
-
-  // Present on mount.
-  React.useEffect(() => {
-    ref.current?.present();
-  }, []);
+}: BottomSheetProps & {
+  route: BottomSheetRoute<ParamListBase>;
+  navigation: BottomSheetNavigationHelpers;
+}) {
+  const ref = React.useRef<BottomSheetInstance>(null);
+  const lastSnapIndexRef = React.useRef(route.snapToIndex ?? props.index ?? 0);
 
-  const isMounted = React.useRef(true);
+  // Handle route closing state
   React.useEffect(() => {
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
+    if (route.closing) {
+      ref.current?.close();
+    }
+  }, [route.closing]);
 
+  // Handle snap point changes from navigation actions
   React.useEffect(() => {
-    if (index != null && lastIndexRef.current !== index) {
-      ref.current?.snapToIndex(index);
+    if (route.snapToIndex != null && route.snapToIndex !== lastSnapIndexRef.current) {
+      ref.current?.snapToIndex(route.snapToIndex);
+      lastSnapIndexRef.current = route.snapToIndex;
     }
-  }, [index]);
+  }, [route.snapToIndex, route.snapToKey]);
+
+  const handleChange = React.useCallback(
+    (newIndex: number, position: number, type: SNAP_POINT_TYPE) => {
+      navigation.emit({
+        type: "sheetOnChange",
+        target: route.key,
+        data: { index: newIndex, position, type },
+      });
+
+      const currentIndex = lastSnapIndexRef.current;
+      lastSnapIndexRef.current = newIndex;
 
-  const onChange = React.useCallback(
-    (newIndex: number) => {
-      const currentIndex = lastIndexRef.current;
-      lastIndexRef.current = newIndex;
       if (newIndex >= 0 && newIndex !== currentIndex) {
-        navigation.snapTo(newIndex);
+        navigation.dispatch(BottomSheetActions.snapTo(newIndex));
       }
     },
     [navigation],
   );
 
-  const onDismiss = React.useCallback(() => {
-    // BottomSheetModal will call onDismiss on unmount, be we do not want that since
-    // we already popped the screen.
-    if (isMounted.current) {
-      navigation.goBack();
-    }
-  }, [navigation]);
-
   return (
-    <BottomSheetModal
-      ref={ref}
-      onDismiss={onDismiss}
-      onChange={onChange}
-      index={index}
-      backdropComponent={(props) => (
-        <BottomSheetBackdrop
-          {...props}
-          appearsOnIndex={0}
-          disappearsOnIndex={-1}
-          enableTouchThrough={!!clickThrough}
-          opacity={opacity || 0.45}
-        />
-      )}
-      {...props}
-    >
+    <BottomSheet ref={ref} onChange={handleChange} {...props}>
       {children}
-    </BottomSheetModal>
+    </BottomSheet>
   );
 }
 
-const DEFAULT_SNAP_POINTS = ["66%"];
-
-type Props = BottomSheetNavigationConfig & {
-  state: BottomSheetNavigationState<ParamListBase>;
-  navigation: BottomSheetNavigationHelpers;
-  descriptors: BottomSheetDescriptorMap;
-};
-
-export function BottomSheetView({ state, descriptors }: Props) {
+export function BottomSheetView({ state, navigation, descriptors }: Props) {
   const { colors } = useTheme();
-  const { top } = useSafeAreaInsets();
+  const { bottom, left, right } = useSafeAreaInsets();
+
   const themeBackgroundStyle = React.useMemo(
     () => ({
+      borderCurve: "continuous" as unknown as undefined,
       backgroundColor: colors.card,
     }),
     [colors.card],
   );
+
   const themeHandleIndicatorStyle = React.useMemo(
     () => ({
+      borderCurve: "continuous" as unknown as undefined,
       backgroundColor: colors.border,
-      height: 5,
-      width: 50,
     }),
     [colors.border],
   );
 
-  // IOS modal sheet type of animation
-  const isFullScreen = useSharedValue(0);
-  const colorStyle = useAnimatedStyle(() => ({
-    flex: 1,
-    backgroundColor: interpolateColor(
-      isFullScreen.value,
-      [0, 1],
-      ["transparent", "#000"],
-    ),
-  }));
-  const animatedStyle = useAnimatedStyle(() => ({
-    flex: 1,
-    transform: [
-      {
-        scaleX: withSpring(interpolate(isFullScreen.value, [0, 1], [1, 0.92]), {
-          damping: 15,
-          stiffness: 100,
-        }),
-      },
-      {
-        translateY: withSpring(interpolate(isFullScreen.value, [0, 1], [0, top + 5]), {
-          damping: 15,
-          stiffness: 100,
-        }),
-      },
-    ],
-  }));
-
-  // Since background color is white, we need to set status bar to light
-  const setStatusBar = StatusBar.setBarStyle;
-  useAnimatedReaction(
-    () => isFullScreen.value,
-    (currentValue) => {
-      "worklet";
-      if (currentValue > -1) {
-        runOnJS(setStatusBar)(currentValue >= 0.5 ? "light-content" : "default");
-      }
-    },
-    [],
+  const defaultStyle = React.useMemo(
+    () => ({ paddingBottom: bottom, paddingLeft: left, paddingRight: right }),
+    [bottom, left, right],
   );
 
-  // Avoid rendering provider if we only have one screen.
-  const shouldRenderProvider = React.useRef(false);
-  shouldRenderProvider.current = shouldRenderProvider.current || state.routes.length > 1;
-
-  const firstRoute = state.routes[0];
-  if (!firstRoute) {
-    // no routes at all, probably shouldn't happen, but let's be defensive
-    return null;
-  }
-
-  const firstDescriptor = descriptors[firstRoute.key];
-  if (!firstDescriptor) {
-    // if we don't have a descriptor for the first route, bail out
-    return null;
-  }
+  const [baseRoute, ...sheetRoutes] = state.routes;
+  const baseDescriptor = baseRoute ? descriptors[baseRoute.key] : null;
 
   return (
     <>
-      <Animated.View style={colorStyle}>
-        <Animated.View style={animatedStyle}>{firstDescriptor.render?.()}</Animated.View>
-      </Animated.View>
-      {shouldRenderProvider.current && (
-        <BottomSheetModalProvider>
-          {state.routes.slice(1).map((route) => {
-            const descriptor = descriptors[route.key];
-            if (!descriptor) return null;
-
-            const { options, navigation, render } = descriptor;
-            const {
-              index,
-              snapPoints,
-              handleStyle,
-              backgroundStyle,
-              handleIndicatorStyle,
-              enableDynamicSizing,
-              ...sheetProps
-            } = options;
-
-            return (
-              <BottomSheetModalScreen
-                key={route.key}
-                // Make sure index is in range, it could be out if snapToIndex is persisted
-                // and snapPoints is changed.
-                index={Math.min(
-                  route.snapToIndex ?? index ?? 0,
-                  !!snapPoints ? snapPoints.length - 1 : 0,
-                )}
-                snapPoints={
-                  !snapPoints && !enableDynamicSizing ? DEFAULT_SNAP_POINTS : snapPoints
-                }
-                onAnimate={(_, to) => {
-                  // @ts-ignore TODO: Fix types
-                  isFullScreen.value = ["%100", "100%"].includes(snapPoints?.[to])
-                    ? 1
-                    : 0;
-                }}
-                animationConfigs={{
-                  duration: 300,
-                  easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-                }}
-                topInset={top + 18}
-                navigation={navigation}
-                enableDynamicSizing={enableDynamicSizing}
-                backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
-                handleIndicatorStyle={[themeHandleIndicatorStyle, handleIndicatorStyle]}
-                handleStyle={[themeBackgroundStyle, { borderRadius: 20 }, handleStyle]}
-                {...sheetProps}
-              >
-                {render?.()}
-              </BottomSheetModalScreen>
-            );
-          })}
-        </BottomSheetModalProvider>
-      )}
+      {baseDescriptor?.render()}
+      {sheetRoutes.map((route) => {
+        const descriptor = descriptors[route.key];
+        if (!descriptor) return null;
+
+        const { options, render } = descriptor;
+        const {
+          index = 0,
+          style,
+          backgroundStyle,
+          handleIndicatorStyle,
+          handleStyle,
+          ...props
+        } = options;
+
+        return (
+          <BottomSheetScreen
+            key={route.key}
+            id={route.key}
+            route={route}
+            index={index}
+            navigation={navigation}
+            style={[defaultStyle, style]}
+            backgroundStyle={[themeBackgroundStyle, backgroundStyle]}
+            handleIndicatorStyle={[themeHandleIndicatorStyle, handleIndicatorStyle]}
+            handleStyle={[themeBackgroundStyle, { borderRadius: 24 }, handleStyle]}
+            onClose={(data) => {
+              navigation.dispatch({
+                ...BottomSheetActions.remove(),
+                source: route.key,
+              });
+              navigation.emit({
+                type: "sheetDismiss",
+                target: route.key,
+                data,
+              });
+            }}
+            onBeforeShow={(data) => {
+              navigation.emit({
+                type: "sheetPresent",
+                target: route.key,
+                data,
+              });
+            }}
+            onAnimate={(fromIndex, toIndex, fromPosition, toPosition) => {
+              navigation.emit({
+                type: "sheetOnAnimate",
+                target: route.key,
+                data: { fromIndex, toIndex, fromPosition, toPosition },
+              });
+            }}
+            {...props}
+          >
+            {render()}
+          </BottomSheetScreen>
+        );
+      })}
     </>
   );
 }