related-ui-components 2.4.8 → 2.5.0

package/src/contexts/BottomSheetContext.tsx

@@ -1,28 +0,0 @@
-import { createContext, useContext, ReactNode } from "react";
-
-interface BottomSheetContextProps {
-  openBottomSheet: (
-    content: ReactNode | (() => ReactNode),
-    size: "small" | "large",
-    onClose?: () => void,
-    snapPoints?: string[]
-  ) => void;
-  closeBottomSheet: () => void;
-  isOpen: boolean;
-}
-
-const BottomSheetContext = createContext<BottomSheetContextProps | undefined>(
-  undefined
-);
-
-export const useBottomSheet = () => {
-  const context = useContext(BottomSheetContext);
-  if (!context) {
-    throw new Error(
-      "useBottomSheet must be used within a BottomSheetProvider"
-    );
-  }
-  return context;
-};
-
-export default BottomSheetContext;

package/src/contexts/BottomSheetProvider.tsx

@@ -1,136 +0,0 @@
-import React, {
-  useState,
-  useRef,
-  useCallback,
-  ReactNode,
-  useMemo,
-  useEffect,
-} from "react";
-import BottomSheet, {
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-} from "@gorhom/bottom-sheet";
-import BottomSheetContext from "./BottomSheetContext";
-import { Keyboard, StyleSheet } from "react-native";
-import { ThemeType, useTheme } from "../theme";
-
-interface BottomSheetProviderProps {
-  children: ReactNode;
-}
-
-export const BottomSheetProvider: React.FC<BottomSheetProviderProps> = ({
-  children,
-}) => {
-  const { theme } = useTheme(); // Get theme for styling the provider's sheet if needed
-  const styles = useMemo(() => providerStyles(theme), [theme]);
-  const sheetRef = useRef<BottomSheet>(null);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [content, setContent] = useState<ReactNode>(null);
-  const [size, setSize] = useState<"small" | "large">("small");
-  const [sp, setSnapPoints] = useState<string[] | undefined>([
-    "30%",
-    "50%",
-    "85%",
-  ]);
-
-  const [onCloseCallback, setOnCloseCallback] = useState<(() => void) | null>(
-    null
-  );
-
-  const openBottomSheet = useCallback(
-    (
-      newContent: ReactNode | (() => ReactNode),
-      size: "small" | "large",
-      onClose?: () => void,
-      snapPoints?: string[]
-    ) => {
-      setContent(newContent);
-      setSize(size);
-      setOnCloseCallback(() => onClose);
-      setIsOpen(true);
-      if (snapPoints) {
-        setSnapPoints(snapPoints);
-      }
-    },
-    []
-  );
-
-  const closeBottomSheet = useCallback(() => {
-    sheetRef.current?.close();
-    setIsOpen(false);
-  }, []);
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        disappearsOnIndex={-1}
-        appearsOnIndex={0}
-        opacity={0.5}
-        pressBehavior="close"
-        style={[props.style, { backgroundColor: "rgba(0,0,0,0.5)" }]}
-      />
-    ),
-    []
-  );
-
-  useEffect(() => {
-    if (isOpen && content) {
-      sheetRef.current?.snapToIndex(size === "small" ? 0 : 1);
-    } else {
-      sheetRef.current?.close();
-    }
-  }, [isOpen, content, size]);
-
-  return (
-    <BottomSheetContext.Provider
-      value={{ openBottomSheet, closeBottomSheet, isOpen }}
-    >
-      {children}
-      <BottomSheet
-        ref={sheetRef}
-        index={-1}
-        snapPoints={sp}
-        enablePanDownToClose
-        backdropComponent={renderBackdrop}
-        android_keyboardInputMode="adjustResize"
-        keyboardBlurBehavior="restore"
-        keyboardBehavior="extend"
-        enableDynamicSizing={false}
-        style={styles.bottomSheetContainer}
-        onClose={() => {
-          setIsOpen(false);
-          Keyboard.dismiss();
-        }}
-        handleIndicatorStyle={{ backgroundColor: theme.onSurface }}
-      >
-        {content}
-      </BottomSheet>
-    </BottomSheetContext.Provider>
-  );
-};
-
-const providerStyles = (theme: ThemeType) =>
-  StyleSheet.create({
-    bottomSheetContainer: {
-      backgroundColor: theme.surface, // Ensure sheet background matches theme
-      borderTopLeftRadius: 20,
-      borderTopRightRadius: 20,
-      overflow: "hidden", // Important for rounded corners with content
-    },
-    headerContainer: {
-      padding: 16,
-      borderBottomWidth: 1,
-      borderBottomColor: theme.divider, // Use theme color for divider
-      alignItems: "center",
-    },
-    headerTitle: {
-      fontSize: 18,
-      fontWeight: "bold",
-      color: theme.onSurface,
-    },
-    contentContainer: {
-      flex: 1, // Ensure content can take up available space
-    },
-  });