mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
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:
@ -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);
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user