fix: refactor onSnapPointChange function

Author: dbzx10299

lib/Drawer/components/Root.vue

@@ -213,18 +213,11 @@ const drawerRef = ref<ComponentPublicInstance | null>(null);
 const drawerHeightRef = ref(drawerRef.value?.$el.getBoundingClientRect().height || 0);
 const drawerWidthRef = ref(drawerRef.value?.$el.getBoundingClientRect().width || 0);
 
-let snapPointsOffset: ComputedRef<number[]>
-
-const onSnapPointChange = (activeSnapPointIndex: number) => {
-  // Change openTime ref when we reach the last snap point to prevent dragging for 500ms incase it's scrollable.
-  if (snapPoints && activeSnapPointIndex === snapPointsOffset?.value?.length - 1) openTime.value = new Date();
-}
-
 const {
   activeSnapPoint,
   activeSnapPointIndex,
   onRelease: onReleaseSnapPoints,
-  snapPointsOffset: _snapPointsOffset,
+  snapPointsOffset,
   onDrag: onDragSnapPoints,
   shouldFade,
   getPercentageDragged: getSnapPointsPercentageDragged,
@@ -240,7 +233,11 @@ const {
   snapToSequentialPoint,
 });
 
-snapPointsOffset = _snapPointsOffset
+function onSnapPointChange(activeSnapPointIndex: number, snapPointsOffset: number[]) {
+  if (snapPoints && activeSnapPointIndex === snapPointsOffset.length - 1) {
+    openTime.value = new Date()
+  }
+}
 
 provide('drawerContext', {
   activeSnapPoint,
@@ -432,7 +429,7 @@ function onDrag(event: PointerEvent) {
 
     const opacityValue = 1 - percentageDragged;
 
-    if (shouldFade.value || (fadeFromIndex && activeSnapPointIndex.value === fadeFromIndex - 1)) {
+    if (shouldFade || (fadeFromIndex && activeSnapPointIndex.value === fadeFromIndex - 1)) {
       onDragProp?.(event, percentageDragged);
 
       set(

lib/Drawer/useSnapPoints.ts

@@ -22,7 +22,7 @@ export function useSnapPoints({
   fadeFromIndex?: number;
   drawerRef: Ref<ComponentPublicInstance | null>;
   overlayRef: Ref<ComponentPublicInstance | null>;
-  onSnapPointChange(activeSnapPointIndex: number): void;
+  onSnapPointChange(activeSnapPointIndex: number, snapPointsOffset: number[]): void;
   direction?: DrawerDirection;
   snapToSequentialPoint?: boolean;
 }) {
@@ -67,14 +67,13 @@ export function useSnapPoints({
 
   const activeSnapPointIndex = computed(() => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint.value) ?? null)
 
-  const shouldFade = computed(() => (
+  const shouldFade =
     (snapPoints &&
     snapPoints.length > 0 &&
     (fadeFromIndex || fadeFromIndex === 0) &&
     !Number.isNaN(fadeFromIndex) &&
     snapPoints[fadeFromIndex] === activeSnapPoint.value
-    ) || !snapPoints)
-  )
+    ) || !snapPoints
 
   const snapPointsOffset = computed(() => {
     const containerSize = typeof window !== 'undefined'
@@ -116,7 +115,7 @@ export function useSnapPoints({
 
   const snapToPoint = (dimension: number) => {
     const newSnapPointIndex = snapPointsOffset.value?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
-    onSnapPointChange(newSnapPointIndex);
+    onSnapPointChange(newSnapPointIndex, snapPointsOffset.value);
 
     set(drawerRef.value?.$el, {
       transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
@@ -257,7 +256,7 @@ export function useSnapPoints({
 
     // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
     if (isOverlaySnapPoint && !isDraggingDown) return 1;
-    if (!shouldFade.value && !isOverlaySnapPoint) return null;
+    if (!shouldFade && !isOverlaySnapPoint) return null;
 
     // Either fadeFrom index or the one before
     const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex.value + 1 : activeSnapPointIndex.value - 1;
@@ -286,4 +285,4 @@ export function useSnapPoints({
     onDrag,
     snapPointsOffset,
   };
-}
+}

src/App.vue

@@ -6,5 +6,5 @@ import NestedDrawer from './components/NestedDrawer.vue'
 </script>
 
 <template>
-  <DefaultDrawer/>
+  <SnapDrawer/>
 </template>

src/components/SnapDrawer.vue

@@ -8,7 +8,12 @@ const snap = ref<string | number | null>(snapPoints[0])
 </script>
 
 <template>
-  <Drawer.Root :snapPoints :activeSnapPoint="snap" :setActiveSnapPoint="snapPoint => (snap = snapPoint)">
+  <Drawer.Root
+    :snapPoints
+    :activeSnapPoint="snap"
+    :setActiveSnapPoint="snapPoint => (snap = snapPoint)"
+    :fadeFromIndex="1"
+  >
     <Drawer.Trigger class="relative flex h-10 flex-shrink-0 items-center justify-center gap-2 overflow-hidden rounded-full bg-white px-4 text-sm font-medium shadow-sm transition-all hover:bg-[#FAFAFA] dark:bg-[#161615] dark:hover:bg-[#1A1A19] dark:text-white">
       Open Drawer
     </Drawer.Trigger>