ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/module/components/bottomSheet/index.js

@@ -0,0 +1,915 @@
+"use strict";
+
+import { useImperativeHandle, forwardRef, useEffect, useState, useRef, createElement as _createElement } from "react";
+import { PanResponder, ScrollView, Platform, Animated, Easing, View } from "react-native";
+import stylesheet from "./stylesheet.js";
+import { NCoreUIKitTheme } from "../../core/hooks.js";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { safeGlobal, webStyle } from "../../types/index.js";
+import { windowHeight, uuid, windowWidth } from "../../utils/index.js";
+import Modal from "../modal/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const BottomSheet = ({
+  isContentReady: isContentReadyProp = true,
+  renderHeader: RenderHeaderComponent,
+  renderBottom: RenderBottomComponent,
+  isForceFullScreenOnSwipe = false,
+  isCanFullScreenOnSwipe = false,
+  handleContainerBackgroundColor,
+  handleHeight: handleHeightProp,
+  isWrapSafeAreaContext = true,
+  backgroundColor = "default",
+  isWorkAsFullScreen = false,
+  scrollEndThreshold = 0.85,
+  isWorkWithPortal = true,
+  isCloseOnOverlay = true,
+  handleContainerSpacing,
+  isActive: isActiveProp,
+  handleBackgroundColor,
+  isAutoHeight = false,
+  isSwipeClose = true,
+  isShowHandle = true,
+  isCanSwipe = true,
+  onOverlayPressed,
+  scrollViewProps,
+  scrollViewStyle,
+  onScrollEnd,
+  customTheme,
+  portalName,
+  modalProps,
+  snapPoint,
+  customKey,
+  id: outID,
+  children,
+  onClosed,
+  onOpened,
+  onClose,
+  onOpen,
+  style,
+  ...props
+}, ref) => {
+  const {
+    radiuses,
+    colors,
+    spaces
+  } = NCoreUIKitTheme.useContext(customTheme);
+  const {
+    bottom,
+    top
+  } = useSafeAreaInsets();
+  const [isMeasured, setIsMeasured] = useState(false);
+  const [isActive, setIsActive] = useState(isActiveProp === undefined ? false : isActiveProp);
+  const id = useRef(outID ? outID : uuid());
+  const bottomSheetKey = useRef(customKey ? customKey : uuid());
+  let bottomSafeArea = isWrapSafeAreaContext ? bottom : 0;
+  let topSafeArea = isWrapSafeAreaContext ? top : 0;
+  if (isForceFullScreenOnSwipe) {
+    topSafeArea = 0;
+  }
+  if (!isWorkWithPortal) {
+    bottomSafeArea = 0;
+    topSafeArea = 0;
+  }
+  const scrollViewRef = useRef(null);
+  const modalRef = useRef(null);
+  const containerHeightRef = useRef(windowHeight);
+  const animatedTranslateY = useRef(new Animated.Value(snapPoint && !isWorkAsFullScreen ? snapPoint : containerHeightRef.current)).current;
+  const animatedHeight = useRef(new Animated.Value(isAutoHeight ? 0 : snapPoint ?? 0)).current;
+  const TOP_GRAB_AREA = 140;
+  const maxHeight = useRef(isWorkAsFullScreen ? containerHeightRef.current - (isWrapSafeAreaContext ? topSafeArea : 0) : containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0));
+  const heightValue = useRef(isWorkAsFullScreen ? containerHeightRef.current : snapPoint ?? 0);
+  const initialTranslateY = useRef(0);
+  const translateYValue = useRef(0);
+  const contentHeight = useRef(-1);
+  const initialHeight = useRef(0);
+  const scrollViewContentHeight = useRef(-1);
+  const scrollViewLayoutHeight = useRef(-1);
+  const initialScrollOffset = useRef(0);
+  const scrollOffset = useRef(0);
+  const gestureStartY = useRef(0);
+  const isCanFullScreenOnSwipeRef = useRef(isCanFullScreenOnSwipe);
+  const isWorkAsFullScreenRef = useRef(isWorkAsFullScreen);
+  const isSwipeCloseRef = useRef(isSwipeClose);
+  const isCanSwipeRef = useRef(isCanSwipe);
+  const isContentReadyRef = useRef(isContentReadyProp);
+  if (!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
+    maxHeight.current = snapPoint;
+  }
+  useImperativeHandle(ref, () => ({
+    close: onClosed => {
+      closeAnimation(undefined, onClosed);
+    },
+    open: () => {
+      setIsActive(true);
+    },
+    setIsContentReady: status => {
+      isContentReadyRef.current = status;
+    }
+  }), []);
+  useEffect(() => {
+    isCanSwipeRef.current = isCanSwipe;
+  }, [isCanSwipe]);
+  useEffect(() => {
+    isSwipeCloseRef.current = isSwipeClose;
+  }, [isSwipeClose]);
+  useEffect(() => {
+    isCanFullScreenOnSwipeRef.current = isCanFullScreenOnSwipe;
+  }, [isCanFullScreenOnSwipe]);
+  useEffect(() => {
+    isWorkAsFullScreenRef.current = isWorkAsFullScreen;
+  }, [isWorkAsFullScreen]);
+  useEffect(() => {
+    isContentReadyRef.current = isContentReadyProp;
+  }, [isContentReadyProp]);
+  useEffect(() => {
+    if (!isMeasured || contentHeight.current === -1) return;
+    if (isCanFullScreenOnSwipe && !isWorkAsFullScreen) {
+      maxHeight.current = containerHeightRef.current - (isForceFullScreenOnSwipe ? 0 : topSafeArea);
+    } else if (isAutoHeight || !snapPoint) {
+      maxHeight.current = contentHeight.current;
+    }
+    if (isActive) {
+      open();
+    }
+  }, [isActive, isMeasured]);
+  if (isActiveProp !== undefined) {
+    useEffect(() => {
+      setIsActive(isActiveProp);
+    }, [isActiveProp]);
+  }
+  useEffect(() => {
+    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);
+    }
+  }, [isForceFullScreenOnSwipe, isCanFullScreenOnSwipe, isWrapSafeAreaContext, isWorkAsFullScreen, topSafeArea, 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
+    }) => {
+      heightValue.current = value;
+    });
+    const listenerTYId = animatedTranslateY.addListener(({
+      value
+    }) => {
+      translateYValue.current = value;
+    });
+    return () => {
+      animatedHeight.removeListener(listenerAHeightId);
+      animatedTranslateY.removeListener(listenerTYId);
+    };
+  }, []);
+  const checkScrollThreshold = () => {
+    if (!onScrollEnd) return;
+    const maxS = Math.max(0, scrollViewContentHeight.current - scrollViewLayoutHeight.current);
+    if (maxS <= 0) return;
+    const ratio = scrollOffset.current / maxS;
+    if (ratio >= scrollEndThreshold) {
+      onScrollEnd();
+    }
+  };
+  const openAnimation = runIndex => {
+    if (isContentReadyRef.current) {
+      Animated.timing(animatedTranslateY, {
+        useNativeDriver: false,
+        duration: 300,
+        toValue: 0
+      }).start(({
+        finished
+      }) => {
+        if (finished) {
+          if (onOpened) onOpened();
+        }
+      });
+    } else {
+      if (!runIndex || runIndex < 10) {
+        setTimeout(() => {
+          openAnimation(runIndex ? runIndex + 1 : 1);
+        }, 100);
+      }
+    }
+  };
+  const open = () => {
+    if (translateYValue.current < 0) {
+      const safeValue = snapPoint ?? contentHeight.current;
+      animatedTranslateY.setValue(safeValue);
+      translateYValue.current = safeValue;
+    }
+    resetState();
+    if (isAutoHeight || !snapPoint) {
+      animatedHeight.setValue(contentHeight.current);
+    }
+    if (onOpen) onOpen();
+    setTimeout(() => {
+      openAnimation();
+    }, 100);
+  };
+  const closeAnimation = (toValue, _onClosed) => {
+    if (onClose) onClose({
+      id: id.current
+    });
+    const currentSnapPoint = isWorkAsFullScreen ? containerHeightRef.current : isAutoHeight || !snapPoint ? contentHeight.current : snapPoint;
+    Animated.timing(animatedTranslateY, {
+      toValue: toValue ?? currentSnapPoint,
+      useNativeDriver: false,
+      duration: 300
+    }).start(({
+      finished
+    }) => {
+      if (finished) {
+        resetState();
+        setIsActive(false);
+        if (onClosed) onClosed({
+          id: id.current
+        });
+        if (_onClosed) _onClosed({
+          id: id.current
+        });
+      }
+    });
+  };
+  const onLayout = event => {
+    const {
+      height
+    } = event.nativeEvent.layout;
+    if (height === contentHeight.current) return;
+    contentHeight.current = height;
+    if (!isMeasured) {
+      animatedHeight.setValue(height);
+      setIsMeasured(true);
+    }
+  };
+  const resetState = () => {
+    animatedHeight.setOffset(0);
+    animatedTranslateY.setOffset(0);
+    scrollOffset.current = 0;
+    initialScrollOffset.current = 0;
+    const pivot = isWorkAsFullScreen ? containerHeightRef.current : isAutoHeight ? 0 : snapPoint ?? contentHeight.current;
+    initialHeight.current = pivot;
+    initialTranslateY.current = 0;
+    heightValue.current = pivot;
+    translateYValue.current = 0;
+  };
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => false,
+    onMoveShouldSetPanResponderCapture: (_, gestureState) => {
+      const {
+        dy
+      } = gestureState;
+      if (!isCanSwipeRef.current) {
+        return false;
+      }
+      if (Math.abs(dy) < 20) {
+        return false;
+      }
+      return true;
+    },
+    onPanResponderGrant: evt => {
+      console.log("GRANT", evt.nativeEvent);
+      if (!isCanSwipeRef.current) return;
+      gestureStartY.current = evt.nativeEvent.pageY;
+      animatedTranslateY.stopAnimation(currentY => {
+        translateYValue.current = currentY;
+      });
+      animatedHeight.stopAnimation(currentH => {
+        heightValue.current = currentH;
+      });
+      animatedTranslateY.flattenOffset();
+      animatedHeight.flattenOffset();
+      initialTranslateY.current = translateYValue.current;
+      initialScrollOffset.current = scrollOffset.current;
+      initialHeight.current = heightValue.current;
+      animatedHeight.setOffset(heightValue.current);
+      animatedHeight.setValue(0);
+      animatedTranslateY.setOffset(translateYValue.current);
+      animatedTranslateY.setValue(0);
+    },
+    onPanResponderMove: (_, gestureState) => {
+      if (!isCanSwipeRef.current) return;
+      const {
+        dy
+      } = gestureState;
+      const isAtTop = scrollOffset.current <= 0;
+      const isAtTavan = heightValue.current >= maxHeight.current - 1;
+      const hasScroll = scrollViewContentHeight.current > scrollViewLayoutHeight.current;
+      const isFromTopArea = gestureStartY.current < TOP_GRAB_AREA;
+      if (dy > 0 && isAtTavan && hasScroll && !isAtTop && !isFromTopArea) {
+        const currentDelta = -dy;
+        const initialS = initialScrollOffset.current;
+        const usedForS = Math.max(currentDelta, -initialS);
+        scrollOffset.current = initialS + usedForS;
+        scrollViewRef.current?.scrollTo({
+          y: scrollOffset.current,
+          animated: false
+        });
+        return;
+      }
+      const delta = -dy;
+      const pivot = snapPoint ?? contentHeight.current;
+      const initialH = initialHeight.current;
+      const initialS = initialScrollOffset.current;
+      const initialT = initialTranslateY.current;
+      const maxS = Math.max(0, scrollViewContentHeight.current - scrollViewLayoutHeight.current);
+      if (dy < 0) {
+        let currentDelta = delta;
+        const effectiveInitialT = Math.max(0, initialT);
+        const usedForT = Math.min(currentDelta, effectiveInitialT);
+        animatedTranslateY.setValue(-usedForT);
+        currentDelta -= usedForT;
+        if (currentDelta > 0) {
+          if (initialH < pivot) {
+            const spaceToPivot = pivot - initialH;
+            const usedForH = Math.min(currentDelta, spaceToPivot);
+            animatedHeight.setValue(usedForH);
+            currentDelta -= usedForH;
+          }
+          const isRestoringHeight = initialH < pivot;
+          const canScroll = isCanFullScreenOnSwipeRef.current || isWorkAsFullScreenRef.current || !isRestoringHeight;
+          if (currentDelta > 0 && canScroll) {
+            const remainingScroll = maxS - initialS;
+            if (remainingScroll > 0) {
+              const usedForS = Math.min(currentDelta, remainingScroll);
+              scrollOffset.current = initialS + usedForS;
+              scrollViewRef.current?.scrollTo({
+                y: scrollOffset.current,
+                animated: false
+              });
+              currentDelta -= usedForS;
+              animatedHeight.setValue(initialH < pivot ? pivot - initialH : 0);
+            }
+          }
+          if (currentDelta > 0) {
+            if (isCanFullScreenOnSwipeRef.current) {
+              const totalUsedBefore = initialH < pivot ? pivot - initialH : 0;
+              animatedHeight.setValue(totalUsedBefore + currentDelta);
+            } else {
+              animatedHeight.setValue(initialH < pivot ? pivot - initialH : 0);
+            }
+          }
+        }
+      } else {
+        let currentDelta = delta;
+        if (initialH > pivot || initialS > 0) {
+          if (initialS > 0) {
+            const usedForS = Math.max(currentDelta, -initialS);
+            scrollOffset.current = initialS + usedForS;
+            scrollViewRef.current?.scrollTo({
+              y: scrollOffset.current,
+              animated: false
+            });
+            currentDelta -= usedForS;
+            animatedHeight.setValue(initialH > pivot ? 0 : pivot - initialH);
+          }
+          if (currentDelta < 0 && initialH > pivot) {
+            const distanceToPivot = pivot - initialH;
+            const usedForH = Math.max(currentDelta, distanceToPivot);
+            animatedHeight.setValue(usedForH);
+            currentDelta -= usedForH;
+          }
+        }
+        if (currentDelta < 0) {
+          animatedHeight.setValue(initialH > pivot ? pivot - initialH : 0);
+          animatedTranslateY.setValue(-currentDelta);
+          scrollOffset.current = 0;
+          scrollViewRef.current?.scrollTo({
+            y: 0,
+            animated: false
+          });
+        }
+      }
+    },
+    onPanResponderEnd: (_, gestureState) => {
+      if (!isCanSwipeRef.current) return;
+      const isAtTop = scrollOffset.current <= 1;
+      const isAtTavan = heightValue.current >= maxHeight.current - 1;
+      const hasScroll = scrollViewContentHeight.current > scrollViewLayoutHeight.current;
+      const isFromTopArea = gestureStartY.current < TOP_GRAB_AREA;
+      if (isAtTavan && hasScroll && !isAtTop && !isFromTopArea) {
+        const velocity = gestureState.vy;
+        if (Math.abs(velocity) > 0.1) {
+          const momentum = velocity * -350;
+          const maxS = Math.max(0, scrollViewContentHeight.current - scrollViewLayoutHeight.current);
+          const targetOffset = Math.max(0, Math.min(scrollOffset.current + momentum, maxS));
+          const scrollAnim = new Animated.Value(scrollOffset.current);
+          scrollAnim.addListener(({
+            value
+          }) => {
+            scrollViewRef.current?.scrollTo({
+              y: value,
+              animated: false
+            });
+            scrollOffset.current = value;
+          });
+          Animated.timing(scrollAnim, {
+            duration: Math.min(Math.abs(momentum) * 2, 600),
+            easing: Easing.out(Easing.quad),
+            useNativeDriver: false,
+            toValue: targetOffset
+          }).start(() => {
+            scrollAnim.removeAllListeners();
+            checkScrollThreshold();
+          });
+        } else {
+          checkScrollThreshold();
+        }
+        return;
+      }
+      const currentH = animatedHeight.__getValue();
+      const currentT = animatedTranslateY.__getValue();
+      animatedHeight.flattenOffset();
+      animatedTranslateY.flattenOffset();
+      heightValue.current = currentH;
+      translateYValue.current = currentT;
+      const pivot = snapPoint ?? contentHeight.current;
+      const tavan = maxHeight.current;
+      const isFastSwipeDown = gestureState.vy > 0.5;
+      const isFastSwipeUp = gestureState.vy < -0.5;
+      if (currentT <= Math.max(pivot * 0.2, 60)) {
+        let toValue = pivot;
+        if (isFastSwipeUp && isCanFullScreenOnSwipeRef.current) {
+          toValue = tavan;
+        } else if (isFastSwipeDown) {
+          toValue = pivot;
+        } else {
+          if (!isCanFullScreenOnSwipeRef.current) {
+            toValue = pivot;
+          } else {
+            const totalRange = tavan - pivot;
+            const distFromPivot = currentH - pivot;
+            if (distFromPivot < totalRange * 0.33) {
+              toValue = pivot;
+            } else if (distFromPivot > totalRange * 0.66) {
+              toValue = tavan;
+            } else {
+              toValue = tavan - currentH < currentH - pivot ? tavan : pivot;
+            }
+          }
+        }
+        Animated.spring(animatedHeight, {
+          useNativeDriver: false,
+          toValue: toValue,
+          friction: 10,
+          tension: 40
+        }).start();
+        Animated.spring(animatedTranslateY, {
+          useNativeDriver: false,
+          toValue: 0,
+          friction: 10,
+          tension: 40
+        }).start();
+      } else {
+        let toValueT = 0;
+        let isClosing = false;
+        if (!isSwipeCloseRef.current) {
+          Animated.spring(animatedHeight, {
+            useNativeDriver: false,
+            toValue: pivot,
+            friction: 10,
+            tension: 40
+          }).start();
+          Animated.timing(animatedTranslateY, {
+            useNativeDriver: false,
+            duration: 300,
+            toValue: 0
+          }).start();
+        } else {
+          if (isFastSwipeDown) {
+            toValueT = pivot + 100;
+            isClosing = true;
+          } else {
+            if (currentT > pivot * 0.5) {
+              toValueT = pivot + 100;
+              isClosing = true;
+            } else {
+              toValueT = 0;
+              isClosing = false;
+            }
+          }
+          if (onClose) onClose({
+            id: id.current
+          });
+          Animated.timing(animatedTranslateY, {
+            useNativeDriver: false,
+            toValue: toValueT,
+            duration: 300
+          }).start(({
+            finished
+          }) => {
+            if (finished && isClosing) {
+              setIsActive(false);
+              if (onClosed) onClosed({
+                id: id.current
+              });
+            }
+          });
+        }
+      }
+    },
+    onPanResponderTerminationRequest: () => false,
+    onShouldBlockNativeResponder: () => true
+  })).current;
+  const renderView = () => {
+    return /*#__PURE__*/_jsxs(Animated.View, {
+      ...props,
+      ...(Platform.OS === "web" ? {} : panResponder.panHandlers),
+      onPointerDown: Platform.OS === "web" ? evt => {
+        const nativeEvt = evt;
+        const startY = nativeEvt.clientY;
+        gestureStartY.current = nativeEvt.clientY;
+        const initialT = translateYValue.current;
+        const initialH = heightValue.current;
+        const initialS = scrollOffset.current;
+        animatedTranslateY.setOffset(initialT);
+        animatedTranslateY.setValue(0);
+        animatedHeight.setOffset(initialH);
+        animatedHeight.setValue(0);
+        let lastY = startY;
+        let lastTime = Date.now();
+        let velocityY = 0;
+        const handlePointerMove = moveEvt => {
+          if (!isCanSwipeRef.current) return;
+          const dy = moveEvt.clientY - startY;
+          if (Math.abs(dy) < 5) return;
+          const now = Date.now();
+          const dt = now - lastTime;
+          if (dt > 0) {
+            velocityY = (moveEvt.clientY - lastY) / dt;
+          }
+          lastY = moveEvt.clientY;
+          lastTime = now;
+          const delta = -dy;
+          const pivot = snapPoint ?? contentHeight.current;
+          const isAtTavan = heightValue.current >= maxHeight.current - 1;
+          const hasScroll = scrollViewContentHeight.current > scrollViewLayoutHeight.current;
+          const isAtTop = scrollOffset.current <= 0;
+          const isFromTopArea = gestureStartY.current < TOP_GRAB_AREA;
+          const maxS = Math.max(0, scrollViewContentHeight.current - scrollViewLayoutHeight.current);
+          if (dy > 0 && isAtTavan && hasScroll && !isAtTop && !isFromTopArea) {
+            const usedForS = Math.max(-dy, -initialS);
+            scrollOffset.current = initialS + usedForS;
+            scrollViewRef.current?.scrollTo({
+              y: scrollOffset.current,
+              animated: false
+            });
+            return;
+          }
+          if (dy < 0) {
+            let currentDelta = delta;
+            const effectiveInitialT = Math.max(0, initialT);
+            const usedForT = Math.min(currentDelta, effectiveInitialT);
+            animatedTranslateY.setValue(-usedForT);
+            currentDelta -= usedForT;
+            if (currentDelta > 0) {
+              if (initialH < pivot) {
+                const spaceToPivot = pivot - initialH;
+                const usedForH = Math.min(currentDelta, spaceToPivot);
+                animatedHeight.setValue(usedForH);
+                currentDelta -= usedForH;
+              }
+              const isRestoringHeight = initialH < pivot;
+              const canScroll = isCanFullScreenOnSwipeRef.current || isWorkAsFullScreenRef.current || !isRestoringHeight;
+              if (currentDelta > 0 && canScroll) {
+                const remainingScroll = maxS - initialS;
+                if (remainingScroll > 0) {
+                  const usedForS = Math.min(currentDelta, remainingScroll);
+                  scrollOffset.current = initialS + usedForS;
+                  scrollViewRef.current?.scrollTo({
+                    y: scrollOffset.current,
+                    animated: false
+                  });
+                  currentDelta -= usedForS;
+                  animatedHeight.setValue(initialH < pivot ? pivot - initialH : 0);
+                }
+              }
+              if (currentDelta > 0) {
+                if (isCanFullScreenOnSwipeRef.current) {
+                  const totalUsedBefore = initialH < pivot ? pivot - initialH : 0;
+                  animatedHeight.setValue(totalUsedBefore + currentDelta);
+                } else {
+                  animatedHeight.setValue(initialH < pivot ? pivot - initialH : 0);
+                }
+              }
+            }
+          } else {
+            let currentDelta = delta;
+            if (initialH > pivot || initialS > 0) {
+              if (initialS > 0) {
+                const usedForS = Math.max(currentDelta, -initialS);
+                scrollOffset.current = initialS + usedForS;
+                scrollViewRef.current?.scrollTo({
+                  y: scrollOffset.current,
+                  animated: false
+                });
+                currentDelta -= usedForS;
+                animatedHeight.setValue(initialH > pivot ? 0 : pivot - initialH);
+              }
+              if (currentDelta < 0 && initialH > pivot) {
+                const distanceToPivot = pivot - initialH;
+                const usedForH = Math.max(currentDelta, distanceToPivot);
+                animatedHeight.setValue(usedForH);
+                currentDelta -= usedForH;
+              }
+            }
+            if (currentDelta < 0) {
+              animatedHeight.setValue(initialH > pivot ? pivot - initialH : 0);
+              animatedTranslateY.setValue(-currentDelta);
+              scrollOffset.current = 0;
+              scrollViewRef.current?.scrollTo({
+                y: 0,
+                animated: false
+              });
+            }
+          }
+        };
+        const handlePointerUp = () => {
+          safeGlobal.removeEventListener("pointermove", handlePointerMove);
+          safeGlobal.removeEventListener("pointerup", handlePointerUp);
+          animatedHeight.flattenOffset();
+          animatedTranslateY.flattenOffset();
+          const currentT = translateYValue.current;
+          const currentH = heightValue.current;
+          const pivot = snapPoint ?? contentHeight.current;
+          const tavan = maxHeight.current;
+          const isAtTavan = currentH >= tavan - 1;
+          const hasScroll = scrollViewContentHeight.current > scrollViewLayoutHeight.current;
+          const isAtTop = scrollOffset.current <= 1;
+          const isFromTopArea = gestureStartY.current < TOP_GRAB_AREA;
+          if (isAtTavan && hasScroll && !isAtTop && !isFromTopArea) {
+            if (Math.abs(velocityY) > 0.1) {
+              const momentum = velocityY * -350;
+              const maxS = Math.max(0, scrollViewContentHeight.current - scrollViewLayoutHeight.current);
+              const targetOffset = Math.max(0, Math.min(scrollOffset.current + momentum, maxS));
+              const scrollAnim = new Animated.Value(scrollOffset.current);
+              scrollAnim.addListener(({
+                value
+              }) => {
+                scrollViewRef.current?.scrollTo({
+                  y: value,
+                  animated: false
+                });
+                scrollOffset.current = value;
+              });
+              Animated.timing(scrollAnim, {
+                toValue: targetOffset,
+                duration: Math.min(Math.abs(momentum) * 2, 600),
+                easing: Easing.out(Easing.quad),
+                useNativeDriver: false
+              }).start(() => {
+                scrollAnim.removeAllListeners();
+                checkScrollThreshold();
+              });
+            } else {
+              checkScrollThreshold();
+            }
+            return;
+          }
+          const isFastSwipeDown = velocityY > 0.5;
+          const isFastSwipeUp = velocityY < -0.5;
+          if (currentT <= Math.max(pivot * 0.2, 60)) {
+            let toValue = pivot;
+            if (isFastSwipeUp && isCanFullScreenOnSwipeRef.current) {
+              toValue = tavan;
+            } else if (isFastSwipeDown) {
+              toValue = pivot;
+            } else {
+              if (!isCanFullScreenOnSwipeRef.current) {
+                toValue = pivot;
+              } else {
+                const totalRange = tavan - pivot;
+                const distFromPivot = currentH - pivot;
+                if (distFromPivot < totalRange * 0.33) toValue = pivot;else if (distFromPivot > totalRange * 0.66) toValue = tavan;else toValue = tavan - currentH < currentH - pivot ? tavan : pivot;
+              }
+            }
+            Animated.spring(animatedHeight, {
+              toValue,
+              useNativeDriver: false,
+              friction: 10,
+              tension: 40
+            }).start();
+            Animated.spring(animatedTranslateY, {
+              toValue: 0,
+              useNativeDriver: false,
+              friction: 10,
+              tension: 40
+            }).start();
+          } else {
+            if (!isSwipeCloseRef.current) {
+              Animated.spring(animatedHeight, {
+                toValue: pivot,
+                useNativeDriver: false,
+                friction: 10,
+                tension: 40
+              }).start();
+              Animated.timing(animatedTranslateY, {
+                toValue: 0,
+                useNativeDriver: false,
+                duration: 300
+              }).start();
+            } else {
+              let toValueT = 0;
+              let isClosing = false;
+              if (isFastSwipeDown) {
+                toValueT = pivot + 100;
+                isClosing = true;
+              } else {
+                if (currentT > pivot * 0.5) {
+                  toValueT = pivot + 100;
+                  isClosing = true;
+                } else {
+                  toValueT = 0;
+                  isClosing = false;
+                }
+              }
+              if (onClose) onClose({
+                id: id.current
+              });
+              Animated.timing(animatedTranslateY, {
+                toValue: toValueT,
+                useNativeDriver: false,
+                duration: 300
+              }).start(({
+                finished
+              }) => {
+                if (finished && isClosing) {
+                  setIsActive(false);
+                  if (onClosed) onClosed({
+                    id: id.current
+                  });
+                }
+              });
+            }
+          }
+        };
+        safeGlobal.addEventListener("pointermove", handlePointerMove);
+        safeGlobal.addEventListener("pointerup", handlePointerUp);
+      } : undefined,
+      onLayout: onLayout,
+      style: [{
+        borderTopStartRadius: radiuses.lg,
+        borderTopEndRadius: radiuses.lg
+      }, style, {
+        height: (isAutoHeight || !snapPoint) && !isMeasured ? "auto" : animatedHeight,
+        backgroundColor: colors.content.container[backgroundColor],
+        paddingBottom: bottomSafeArea + spaces.spacingMd,
+        opacity: isMeasured || !isAutoHeight ? 1 : 0,
+        paddingRight: spaces.spacingMd,
+        paddingLeft: spaces.spacingMd,
+        paddingTop: spaces.spacingMd,
+        maxHeight: maxHeight.current,
+        transform: [{
+          translateY: animatedTranslateY
+        }]
+      }, stylesheet.container, webStyle({
+        touchAction: "none",
+        userSelect: "none",
+        cursor: "grab"
+      })],
+      children: [renderHeader(), /*#__PURE__*/_jsx(ScrollView, {
+        ...scrollViewProps,
+        onContentSizeChange: (_, h) => {
+          scrollViewContentHeight.current = h;
+        },
+        onLayout: e => {
+          scrollViewLayoutHeight.current = e.nativeEvent.layout.height;
+        },
+        onStartShouldSetResponderCapture: () => false,
+        onMoveShouldSetResponderCapture: () => false,
+        showsHorizontalScrollIndicator: false,
+        showsVerticalScrollIndicator: false,
+        scrollEnabled: !isCanSwipe,
+        scrollEventThrottle: 1,
+        overScrollMode: "never",
+        ref: scrollViewRef,
+        bounces: false,
+        style: [scrollViewStyle, webStyle({
+          maxWidth: windowWidth > 500 ? 500 : undefined,
+          width: windowWidth > 500 ? 500 : undefined,
+          alignSelf: "center"
+        })],
+        children: children
+      }), renderBottom(), renderHandle()]
+    });
+  };
+  const renderHeader = () => {
+    if (!RenderHeaderComponent) {
+      return null;
+    }
+    if (Platform.OS === "web") {
+      return /*#__PURE__*/_jsx(View, {
+        style: [webStyle({
+          maxWidth: windowWidth > 500 ? 500 : undefined,
+          width: windowWidth > 500 ? 500 : undefined,
+          alignSelf: "center"
+        })],
+        children: RenderHeaderComponent()
+      });
+    }
+    return RenderHeaderComponent();
+  };
+  const renderBottom = () => {
+    if (!RenderBottomComponent) {
+      return null;
+    }
+    if (Platform.OS === "web") {
+      return /*#__PURE__*/_jsx(View, {
+        style: [webStyle({
+          maxWidth: windowWidth > 500 ? 500 : undefined,
+          width: windowWidth > 500 ? 500 : undefined,
+          alignSelf: "center"
+        })],
+        children: /*#__PURE__*/_jsx(RenderBottomComponent, {})
+      });
+    }
+    return /*#__PURE__*/_jsx(RenderBottomComponent, {});
+  };
+  const renderHandle = () => {
+    if (!isShowHandle || isWorkAsFullScreen) {
+      return null;
+    }
+    const handleHeight = handleHeightProp ? handleHeightProp : 8;
+    const handleContainerHeight = handleHeight + (handleContainerSpacing ? spaces[handleContainerSpacing] : spaces.spacingSm) * 2;
+    const handleBorderRadius = Math.ceil(handleHeight / 2);
+    return /*#__PURE__*/_jsx(View, {
+      onStartShouldSetResponderCapture: () => Platform.OS === "web",
+      onMoveShouldSetResponderCapture: () => Platform.OS === "web",
+      style: [stylesheet.handleContainer, {
+        backgroundColor: handleContainerBackgroundColor ? colors.content.container[handleContainerBackgroundColor] : "transparent",
+        height: handleContainerHeight,
+        transform: [{
+          translateY: -handleContainerHeight * (Platform.OS === "web" ? 1.75 : 1)
+        }]
+      }, webStyle({
+        touchAction: "none !important",
+        userSelect: "none",
+        cursor: "grab"
+      })],
+      children: /*#__PURE__*/_jsx(View, {
+        style: [stylesheet.handle, {
+          backgroundColor: handleBackgroundColor ? colors.content.container[handleBackgroundColor] : colors.content.container.default,
+          borderRadius: handleBorderRadius,
+          height: handleHeight
+        }]
+      })
+    });
+  };
+  return /*#__PURE__*/_createElement(Modal, {
+    ...modalProps,
+    portalName: portalName ? portalName : "bottomSheet-system",
+    isWorkWithPortal: isWorkWithPortal,
+    key: `${bottomSheetKey}-modal`,
+    isContentRequired: false,
+    isActive: isActive,
+    alignContent: "free",
+    isAnimated: false,
+    id: id.current,
+    ref: modalRef,
+    onContainerLayout: e => {
+      const containerLayoutHeight = e.nativeEvent.layout.height;
+      if (containerLayoutHeight && containerLayoutHeight !== containerHeightRef.current) {
+        containerHeightRef.current = containerLayoutHeight;
+        if (!isWorkAsFullScreen && !isCanFullScreenOnSwipe && snapPoint) {
+          maxHeight.current = snapPoint;
+        } else if (!isWorkAsFullScreen) {
+          maxHeight.current = containerLayoutHeight - (isForceFullScreenOnSwipe ? 0 : isWrapSafeAreaContext ? topSafeArea : 0);
+        } else {
+          maxHeight.current = containerLayoutHeight;
+        }
+      }
+    },
+    overlayProps: {
+      onStartShouldSetResponderCapture: () => false,
+      onMoveShouldSetResponderCapture: () => false
+    },
+    onOverlayPress: () => {
+      if (onOverlayPressed) onOverlayPressed();
+      if (isCloseOnOverlay) {
+        closeAnimation();
+      }
+    },
+    style: [{
+      paddingTop: topSafeArea
+    }]
+  }, renderView());
+};
+export default /*#__PURE__*/forwardRef(BottomSheet);
+//# sourceMappingURL=index.js.map