Philip Cesar Garay
88 lines
2.2 KiB
JavaScript
88 lines
2.2 KiB
JavaScript
import React, { useState, useCallback, useEffect } from "react";
|
|
import { Keyboard, StyleSheet } from "react-native";
|
|
import { AnimatePresence, Motion } from "@legendapp/motion";
|
|
import { useKeyboard } from "@react-native-community/hooks";
|
|
|
|
import BottomSheet from "./BottomSheet";
|
|
|
|
import { Palette } from "../styles";
|
|
import useLayoutType from "../hooks/useLayoutType";
|
|
|
|
export default ({
|
|
children,
|
|
bottomSheetRef,
|
|
snapPoints = ["25%", "50%"],
|
|
handleStyle = {},
|
|
...rest
|
|
}) => {
|
|
const [currentSnapPointIndex, setCurrentSnapPointIndex] = useState(0);
|
|
|
|
const { keyboardShown = false } = useKeyboard();
|
|
const { isWeb } = useLayoutType();
|
|
|
|
const handleSheetChanges = useCallback((index) => {
|
|
setCurrentSnapPointIndex(index);
|
|
|
|
if (index <= 0) {
|
|
Keyboard.dismiss();
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (bottomSheetRef.current && !isWeb && currentSnapPointIndex > 0) {
|
|
if (keyboardShown) {
|
|
bottomSheetRef.current.expand();
|
|
} else {
|
|
bottomSheetRef.current.snapToIndex(1);
|
|
}
|
|
}
|
|
}, [keyboardShown]);
|
|
|
|
return (
|
|
<>
|
|
<AnimatePresence>
|
|
{currentSnapPointIndex > 0 ? (
|
|
<Motion.Pressable
|
|
style={{ ...StyleSheet.absoluteFill }}
|
|
onPress={() => bottomSheetRef?.current?.close()}
|
|
>
|
|
<Motion.View
|
|
key={"A"}
|
|
style={{
|
|
flex: 1,
|
|
backgroundColor: Palette.black,
|
|
}}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 0.9 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{
|
|
default: {
|
|
type: "spring",
|
|
},
|
|
opacity: {
|
|
type: "timing",
|
|
},
|
|
}}
|
|
></Motion.View>
|
|
</Motion.Pressable>
|
|
) : null}
|
|
</AnimatePresence>
|
|
|
|
<BottomSheet
|
|
ref={bottomSheetRef}
|
|
snapPoints={snapPoints}
|
|
handleStyle={{
|
|
backgroundColor: Palette.darkPurple,
|
|
...handleStyle,
|
|
}}
|
|
handleIndicatorStyle={{ backgroundColor: Palette.primary }}
|
|
style={{ zIndex: 100 }}
|
|
onChange={handleSheetChanges}
|
|
{...rest}
|
|
>
|
|
{children}
|
|
</BottomSheet>
|
|
</>
|
|
);
|
|
};
|