Procházet zdrojové kódy

Continue: SelectBox continue.

lfabl před 2 měsíci
rodič
revize
d6f7fcc646

+ 7 - 0
example/src/navigation/type.ts

@@ -0,0 +1,7 @@
+type RootStackParamList = {
+    TestSubPage: undefined;
+    Home: undefined;
+};
+export type {
+    RootStackParamList as default
+};

+ 7 - 4
example/src/pages/home/index.tsx

@@ -18,6 +18,10 @@ import {
 import {
     useNavigation
 } from "@react-navigation/native";
+import type {
+    NativeStackNavigationProp
+} from "@react-navigation/native-stack";
+import type RootStackParamList from "../../navigation/type";
 
 const X = [{
     t: "x",
@@ -32,7 +36,7 @@ const Home = () => {
 
     const bottomSheetRef = useRef<IBottomSheetRef>(null);
 
-    const navigation = useNavigation();
+    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
     return <View
         style={[
@@ -78,8 +82,6 @@ const Home = () => {
             variant="filled"
         />
         <BottomSheet
-            isWorkAsFullScreen={true}
-            isWorkWithPortal={false}
             ref={bottomSheetRef}
             renderHeader={() => {
                 return <View
@@ -93,7 +95,8 @@ const Home = () => {
                     <Text>Burası header.</Text>
                 </View>;
             }}
-            // snapPoint={300}
+            isCanFullScreenOnSwipe={true}
+            snapPoint={300}
             key="ahmet"
         >
             <Button

+ 41 - 3
src/components/bottomSheet/index.tsx

@@ -208,6 +208,36 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         snapPoint
     ]);
 
+    useEffect(() => {
+        if (!isActive) {
+            const newSnapValue = isWorkAsFullScreen
+                ? containerHeightRef.current
+                : (snapPoint ?? contentHeight.current);
+
+            animatedHeight.setValue(isAutoHeight ? 0 : newSnapValue);
+            animatedTranslateY.setValue(newSnapValue);
+
+            heightValue.current = newSnapValue;
+            translateYValue.current = newSnapValue;
+            initialHeight.current = newSnapValue;
+        }
+
+        if (!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
+            maxHeight.current = snapPoint;
+        } else if (!isWorkAsFullScreen) {
+            maxHeight.current = containerHeightRef.current - (
+                isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0
+            );
+        } else {
+            maxHeight.current = containerHeightRef.current - (
+                isWrapSafeAreaContext ? topSafeArea : 0
+            );
+        }
+    }, [
+        snapPoint,
+        isWorkAsFullScreen
+    ]);
+
     useEffect(() => {
         const listenerAHeightId = animatedHeight.addListener(({
             value
@@ -248,8 +278,12 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
     const closeAnimation = (toValue?: number) => {
         if(onClose) onClose();
 
+        const currentSnapPoint = isWorkAsFullScreen
+            ? containerHeightRef.current
+            : (isAutoHeight || !snapPoint ? contentHeight.current : snapPoint);
+
         Animated.timing(animatedTranslateY, {
-            toValue: toValue ? toValue : isAutoHeight || !snapPoint ? contentHeight.current : snapPoint,
+            toValue: toValue ?? currentSnapPoint,
             useNativeDriver: false,
             duration: 300
         }).start(({
@@ -286,10 +320,14 @@ const BottomSheet: RefForwardingComponent<IBottomSheetRef, IBottomSheetProps> =
         scrollOffset.current = 0;
         initialScrollOffset.current = 0;
 
-        initialHeight.current = snapPoint ?? contentHeight.current;
+        const pivot = isWorkAsFullScreen
+            ? containerHeightRef.current
+            : (snapPoint ?? contentHeight.current);
+
+        initialHeight.current = pivot;
         initialTranslateY.current = 0;
 
-        heightValue.current = snapPoint ?? contentHeight.current;
+        heightValue.current = pivot;
         translateYValue.current = 0;
     };
 

+ 5 - 0
src/components/selectBox/index.tsx

@@ -145,6 +145,11 @@ function SelectBox<T>({
         };
     }));
 
+    const [
+        isActive,
+        setIsActive
+    ] = useState(); --> continue
+
     const [
         selectedItems,
         setSelectedItems