fix(modal): setCurrentBreakpoint respects animated prop (#27924)

Issue number: resolves #27923

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

`setCurrentBreakpoint` still animates even when `animated: false`.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- `setCurrentBreakpoint` jumps directly to the new breakpoint when
`animated: false`

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Updated design doc:
https://github.com/ionic-team/ionic-framework-design-documents/pull/137
Dev build: `7.2.3-dev.11691069391.1d91d2be`
This commit is contained in:
Liam DeBeasi
2023-08-04 11:14:21 -04:00
committed by GitHub
parent a0b3ef02af
commit da55ab949e
2 changed files with 16 additions and 3 deletions

View File

@ -31,6 +31,12 @@ export interface MoveSheetToBreakpointOptions {
* `true` if the sheet can be transitioned and dismissed off the view. * `true` if the sheet can be transitioned and dismissed off the view.
*/ */
canDismiss?: boolean; canDismiss?: boolean;
/**
* If `true`, the sheet will animate to the breakpoint.
* If `false`, the sheet will jump directly to the breakpoint.
*/
animated: boolean;
} }
export const createSheetGesture = ( export const createSheetGesture = (
@ -246,11 +252,17 @@ export const createSheetGesture = (
breakpoint: closest, breakpoint: closest,
breakpointOffset: offset, breakpointOffset: offset,
canDismiss: canDismissBlocksGesture, canDismiss: canDismissBlocksGesture,
/**
* The swipe is user-driven, so we should
* always animate when the gesture ends.
*/
animated: true,
}); });
}; };
const moveSheetToBreakpoint = (options: MoveSheetToBreakpointOptions) => { const moveSheetToBreakpoint = (options: MoveSheetToBreakpointOptions) => {
const { breakpoint, canDismiss, breakpointOffset } = options; const { breakpoint, canDismiss, breakpointOffset, animated } = options;
/** /**
* canDismiss should only prevent snapping * canDismiss should only prevent snapping
* when users are trying to dismiss. If canDismiss * when users are trying to dismiss. If canDismiss
@ -360,7 +372,7 @@ export const createSheetGesture = (
}, },
{ oneTimeCallback: true } { oneTimeCallback: true }
) )
.progressEnd(1, 0, 500); .progressEnd(1, 0, animated ? 500 : 0);
}); });
}; };

View File

@ -761,7 +761,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
return; return;
} }
const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints } = this; const { currentBreakpoint, moveSheetToBreakpoint, canDismiss, breakpoints, animated } = this;
if (currentBreakpoint === breakpoint) { if (currentBreakpoint === breakpoint) {
return; return;
@ -772,6 +772,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
breakpoint, breakpoint,
breakpointOffset: 1 - currentBreakpoint!, breakpointOffset: 1 - currentBreakpoint!,
canDismiss: canDismiss !== undefined && canDismiss !== true && breakpoints![0] === 0, canDismiss: canDismiss !== undefined && canDismiss !== true && breakpoints![0] === 0,
animated,
}); });
await this.sheetTransition; await this.sheetTransition;
this.sheetTransition = undefined; this.sheetTransition = undefined;