From bffe4609708fcba7f759d2fe5796c35140bf6bdd Mon Sep 17 00:00:00 2001 From: kumibrr Date: Sat, 15 Mar 2025 04:25:54 +0100 Subject: [PATCH 1/5] fix(modal): fixed expand gesture animation --- core/src/components/modal/gestures/sheet.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index f06bb459387..ca1b03b15f3 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -265,10 +265,14 @@ export const createSheetGesture = ( const onMove = (detail: GestureDetail) => { /** * If `expandToScroll` is disabled, we should not allow the swipe gesture - * to continue if the gesture is not pulling down. + * to continue if the gesture is not pulling down within scrollable content. */ if (!expandToScroll && detail.deltaY <= 0) { - return; + const contentEl = findClosestIonContent(detail.event.target! as HTMLElement) + const scrollEl = contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl; + if (scrollEl) { + return; + } } /** From ff992043b9159305697cb0eac077c58b9efb0041 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Sat, 15 Mar 2025 04:27:43 +0100 Subject: [PATCH 2/5] fix(modal): modal incremented breakpoints when scrolling --- core/src/components/modal/gestures/sheet.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index ca1b03b15f3..c5148bdb2fe 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -340,6 +340,19 @@ export const createSheetGesture = ( return Math.abs(b - diff) < Math.abs(a - diff) ? b : a; }); + /** + * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint + * function to be called if the user is trying to swipe upwards and the content + * is not scrolled to the top. + */ + if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) { + const contentEl = findClosestIonContent(detail.event.target! as HTMLElement)!; + const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl; + if (scrollEl!.scrollTop > 0) { + return; + } + } + moveSheetToBreakpoint({ breakpoint: closest, breakpointOffset: offset, From 2c9dfa1248a97431e93c6fd9e325a5f08c954f53 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Sat, 15 Mar 2025 04:58:23 +0100 Subject: [PATCH 3/5] refactor: moved exit condition to the top of the onEnd function --- core/src/components/modal/gestures/sheet.ts | 24 ++++++++++----------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index c5148bdb2fe..cf6a79acbde 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -328,18 +328,6 @@ export const createSheetGesture = ( }; const onEnd = (detail: GestureDetail) => { - /** - * When the gesture releases, we need to determine - * the closest breakpoint to snap to. - */ - const velocity = detail.velocityY; - const threshold = (detail.deltaY + velocity * 350) / height; - - const diff = currentBreakpoint - threshold; - const closest = breakpoints.reduce((a, b) => { - return Math.abs(b - diff) < Math.abs(a - diff) ? b : a; - }); - /** * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint * function to be called if the user is trying to swipe upwards and the content @@ -353,6 +341,18 @@ export const createSheetGesture = ( } } + /** + * When the gesture releases, we need to determine + * the closest breakpoint to snap to. + */ + const velocity = detail.velocityY; + const threshold = (detail.deltaY + velocity * 350) / height; + + const diff = currentBreakpoint - threshold; + const closest = breakpoints.reduce((a, b) => { + return Math.abs(b - diff) < Math.abs(a - diff) ? b : a; + }); + moveSheetToBreakpoint({ breakpoint: closest, breakpointOffset: offset, From e958e5e5403435589b56526a6e893d856f4a5cb1 Mon Sep 17 00:00:00 2001 From: kumibrr Date: Sat, 15 Mar 2025 05:09:27 +0100 Subject: [PATCH 4/5] refactor: comments --- core/src/components/modal/gestures/sheet.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index cf6a79acbde..0b718a97232 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -264,8 +264,8 @@ export const createSheetGesture = ( const onMove = (detail: GestureDetail) => { /** - * If `expandToScroll` is disabled, we should not allow the swipe gesture - * to continue if the gesture is not pulling down within scrollable content. + * If `expandToScroll` is disabled, and an upwards swipe gesture is done within + * the scrollable content, we should not allow the swipe gesture to continue. */ if (!expandToScroll && detail.deltaY <= 0) { const contentEl = findClosestIonContent(detail.event.target! as HTMLElement) @@ -330,7 +330,7 @@ export const createSheetGesture = ( const onEnd = (detail: GestureDetail) => { /** * If expandToScroll is disabled, we should not allow the moveSheetToBreakpoint - * function to be called if the user is trying to swipe upwards and the content + * function to be called if the user is trying to swipe content upwards and the content * is not scrolled to the top. */ if (!expandToScroll && detail.deltaY <= 0 && findClosestIonContent(detail.event.target! as HTMLElement)) { From fedefa34e234ca4b3008dcf2aa081e1bf95a806a Mon Sep 17 00:00:00 2001 From: kumibrr Date: Mon, 17 Mar 2025 14:42:34 +0100 Subject: [PATCH 5/5] lint fix --- core/src/components/modal/gestures/sheet.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/core/src/components/modal/gestures/sheet.ts b/core/src/components/modal/gestures/sheet.ts index 0b718a97232..2375cfd89bd 100644 --- a/core/src/components/modal/gestures/sheet.ts +++ b/core/src/components/modal/gestures/sheet.ts @@ -268,8 +268,9 @@ export const createSheetGesture = ( * the scrollable content, we should not allow the swipe gesture to continue. */ if (!expandToScroll && detail.deltaY <= 0) { - const contentEl = findClosestIonContent(detail.event.target! as HTMLElement) - const scrollEl = contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl; + const contentEl = findClosestIonContent(detail.event.target! as HTMLElement); + const scrollEl = + contentEl && isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl; if (scrollEl) { return; }