javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(modal): allow dragging when expandToScroll is false (#30235)

Browse Source
This commit is contained in:
Maria Hutt
2025-03-10 11:39:10 -07:00
committed by GitHub
parent 57b784aa53
commit 335672d523
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components.d.ts vendored
View File

@ -1736,7 +1736,7 @@ export namespace Components {
*/ */
"enterAnimation"?: AnimationBuilder; "enterAnimation"?: AnimationBuilder;
/** /**
* Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set. If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content, and the modal will only expand when dragging the header or handle. * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set. If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
*/ */
"expandToScroll": boolean; "expandToScroll": boolean;
/** /**
@ -6553,7 +6553,7 @@ declare namespace LocalJSX {
*/ */
"enterAnimation"?: AnimationBuilder; "enterAnimation"?: AnimationBuilder;
/** /**
* Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set. If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content, and the modal will only expand when dragging the header or handle. * Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set. If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top.
*/ */
"expandToScroll"?: boolean; "expandToScroll"?: boolean;
/** /**

15
core/src/components/modal/gestures/sheet.ts
View File

@ -192,11 +192,12 @@ export const createSheetGesture = (
currentBreakpoint = getCurrentBreakpoint(); currentBreakpoint = getCurrentBreakpoint();
/** /**
* If we have expandToScroll disabled, we should not allow the swipe gesture to start * If `expandToScroll` is disabled, we should not allow the swipe gesture
* if the content is being swiped. * to start if the content is not scrolled to the top.
*/ */
if (!expandToScroll && contentEl) { if (!expandToScroll && contentEl) {
return false; const scrollEl = isIonContent(contentEl) ? getElementRoot(contentEl).querySelector('.inner-scroll') : contentEl;
return scrollEl!.scrollTop === 0;
} }
if (currentBreakpoint === 1 && contentEl) { if (currentBreakpoint === 1 && contentEl) {
@ -262,6 +263,14 @@ export const createSheetGesture = (
}; };
const onMove = (detail: GestureDetail) => { const onMove = (detail: GestureDetail) => {
/**
* If `expandToScroll` is disabled, we should not allow the swipe gesture
* to continue if the gesture is not pulling down.
*/
if (!expandToScroll && detail.deltaY <= 0) {
return;
}
/** /**
* If we are pulling down, then it is possible we are pulling on the content. * If we are pulling down, then it is possible we are pulling on the content.
* We do not want scrolling to happen at the same time as the gesture. * We do not want scrolling to happen at the same time as the gesture.

9
core/src/components/modal/modal.tsx
View File

@ -136,9 +136,12 @@ export class Modal implements ComponentInterface, OverlayInterface {
* and `initialBreakpoint` are set. * and `initialBreakpoint` are set.
* *
* If `true`, scrolling or dragging anywhere in the modal will first expand * If `true`, scrolling or dragging anywhere in the modal will first expand
* it to the next breakpoint. Once fully expanded, scrolling will affect the content. * it to the next breakpoint. Once fully expanded, scrolling will affect the
* If `false`, scrolling will always affect the content, and the modal will only expand * content.
* when dragging the header or handle. * If `false`, scrolling will always affect the content. The modal will
* only expand when dragging the header or handle. The modal will close when
* dragging the header or handle. It can also be closed when dragging the
* content, but only if the content is scrolled to the top.
*/ */
@Prop() expandToScroll = true; @Prop() expandToScroll = true;