refactor(modal): replaced snapBreakpoints array implementation with scrollAtEdge boolean

Author: kumibrr

core/api.txt

@@ -1085,8 +1085,8 @@ ion-modal,prop,keyboardClose,boolean,true,false,false
 ion-modal,prop,leaveAnimation,((baseEl: any, opts?: any) => Animation) | undefined,undefined,false,false
 ion-modal,prop,mode,"ios" | "md",undefined,false,false
 ion-modal,prop,presentingElement,HTMLElement | undefined,undefined,false,false
+ion-modal,prop,scrollAtEdge,boolean,true,false,false
 ion-modal,prop,showBackdrop,boolean,true,false,false
-ion-modal,prop,snapBreakpoints,number[] | undefined,undefined,false,false
 ion-modal,prop,trigger,string | undefined,undefined,false,false
 ion-modal,method,dismiss,dismiss(data?: any, role?: string) => Promise<boolean>
 ion-modal,method,getCurrentBreakpoint,getCurrentBreakpoint() => Promise<number | undefined>

core/src/components.d.ts

@@ -1793,6 +1793,10 @@ export namespace Components {
           * The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode.
          */
         "presentingElement"?: HTMLElement;
+        /**
+          * Determines whether or not the sheet modal will only scroll when fully expanded.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
+         */
+        "scrollAtEdge": boolean;
         /**
           * Move a sheet style modal to a specific breakpoint. The breakpoint value must be a value defined in your `breakpoints` array.
          */
@@ -1801,10 +1805,6 @@ export namespace Components {
           * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
         "showBackdrop": boolean;
-        /**
-          * The snapBreakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property and they must be a value in `breakpoints` property.  The difference between `breakpoints` and `snapBreakpoints` is that `snapBreakpoints` allows the content to scroll, and the modal will only be draggable by the handle.
-         */
-        "snapBreakpoints"?: number[];
         /**
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */
@@ -6623,13 +6623,13 @@ declare namespace LocalJSX {
          */
         "presentingElement"?: HTMLElement;
         /**
-          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
+          * Determines whether or not the sheet modal will only scroll when fully expanded.  If the value is `true`, the modal will only scroll when fully expanded. If the value is `false`, the modal will scroll at any breakpoint.
          */
-        "showBackdrop"?: boolean;
+        "scrollAtEdge"?: boolean;
         /**
-          * The snapBreakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property and they must be a value in `breakpoints` property.  The difference between `breakpoints` and `snapBreakpoints` is that `snapBreakpoints` allows the content to scroll, and the modal will only be draggable by the handle.
+          * If `true`, a backdrop will be displayed behind the modal. This property controls whether or not the backdrop darkens the screen when the modal is presented. It does not control whether or not the backdrop is active or present in the DOM.
          */
-        "snapBreakpoints"?: number[];
+        "showBackdrop"?: boolean;
         /**
           * An ID corresponding to the trigger element that causes the modal to open when clicked.
          */

core/src/components/modal/gestures/sheet.ts

@@ -50,7 +50,7 @@ export const createSheetGesture = (
   backdropBreakpoint: number,
   animation: Animation,
   breakpoints: number[] = [],
-  snapBreakpoints: number[] = [],
+  scrollAtEdge: boolean,
   getCurrentBreakpoint: () => number,
   onDismiss: () => void,
   onBreakpointChange: (breakpoint: number) => void
@@ -90,7 +90,12 @@ export const createSheetGesture = (
   const wrapperAnimation = animation.childAnimations.find((ani) => ani.id === 'wrapperAnimation');
   const backdropAnimation = animation.childAnimations.find((ani) => ani.id === 'backdropAnimation');
   let contentAnimation: Animation | undefined;
-  if (snapBreakpoints.length > 0) {
+  if (!scrollAtEdge) {
+    /**
+     * If scrollAtEdge is disabled, the content should be scrollable
+     * at any breakpoint and the maxHeight animated so the content is
+     * fully viewable at any breakpoint.
+     */
     contentAnimation = animation
       .addAnimation(
         createAnimation('contentAnimation')
@@ -154,7 +159,7 @@ export const createSheetGesture = (
     }
   }
 
-  if (contentEl && currentBreakpoint !== maxBreakpoint && !snapBreakpoints.includes(currentBreakpoint)) {
+  if (contentEl && currentBreakpoint !== maxBreakpoint && scrollAtEdge) {
     contentEl.scrollY = false;
   }
 
@@ -171,9 +176,10 @@ export const createSheetGesture = (
     currentBreakpoint = getCurrentBreakpoint();
 
     /**
-     * If we are in a snap breakpoint, we should not allow the swipe to start.
+     * If we have scrollAtEdge disabled, we should not allow the swipe gesture to start
+     * if the content is being swiped.
      */
-    if (snapBreakpoints.includes(currentBreakpoint) && contentEl) {
+    if (!scrollAtEdge && contentEl) {
       return false;
     }
 
@@ -347,6 +353,13 @@ export const createSheetGesture = (
       ]);
 
       if (contentAnimation) {
+        /**
+         * The modal content should scroll at any breakpoint when scrollAtEdge
+         * is disabled. In order to do this, the content needs to be completely
+         * viewable so scrolling can access everything. Othewise, the default
+         * behavior would show the content off the screen and only allow
+         * scrolling when the sheet is fully expanded.
+         */
         contentAnimation.keyframes([
           { offset: 0, maxHeight: `${(1 - breakpointOffset) * 100}%` },
           { offset: 1, maxHeight: `${snapToBreakpoint * 100}%` },
@@ -369,16 +382,14 @@ export const createSheetGesture = (
     }
 
     /**
-     * If the sheet is going to be fully expanded then we should enable
-     * scrolling immediately. The sheet modal animation takes ~500ms to finish
-     * so if we wait until then there is a visible delay for when scrolling is
-     * re-enabled. Native iOS allows for scrolling on the sheet modal as soon
-     * as the gesture is released, so we align with that.
+     * If the sheet is going to be fully expanded or if the sheet has toggled
+     * to scroll at any breakpoint then we should enable scrolling immediately.
+     * then we should enable scrolling immediately. The sheet modal animation
+     * takes ~500ms to finish so if we wait until then there is a visible delay
+     * for when scrolling is re-enabled. Native iOS allows for scrolling on the
+     * sheet modal as soon as the gesture is released, so we align with that.
      */
-    if (
-      contentEl &&
-      (snapToBreakpoint === breakpoints[breakpoints.length - 1] || snapBreakpoints.includes(snapToBreakpoint))
-    ) {
+    if (contentEl && (snapToBreakpoint === breakpoints[breakpoints.length - 1] || !scrollAtEdge)) {
       contentEl.scrollY = true;
     }
 

core/src/components/modal/modal.tsx

@@ -75,7 +75,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
   private wrapperEl?: HTMLElement;
   private backdropEl?: HTMLIonBackdropElement;
   private sortedBreakpoints?: number[];
-  private sortedSnapBreakpoints?: number[];
   private keyboardOpenCallback?: () => void;
   private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
   private inheritedAttributes: Attributes = {};
@@ -132,17 +131,15 @@ export class Modal implements ComponentInterface, OverlayInterface {
   @Prop() breakpoints?: number[];
 
   /**
-   * The snapBreakpoints to use when creating a sheet modal. Each value in the
-   * array must be a decimal between 0 and 1 where 0 indicates the modal is fully
-   * closed and 1 indicates the modal is fully open. Values are relative
-   * to the height of the modal, not the height of the screen. One of the values in this
-   * array must be the value of the `initialBreakpoint` property and they must be a
-   * value in `breakpoints` property.
+   * Determines whether or not the sheet modal will only
+   * scroll when fully expanded.
    *
-   * The difference between `breakpoints` and `snapBreakpoints` is that `snapBreakpoints`
-   * allows the content to scroll, and the modal will only be draggable by the handle.
+   * If the value is `true`, the modal will only scroll
+   * when fully expanded.
+   * If the value is `false`, the modal will scroll at
+   * any breakpoint.
    */
-  @Prop() snapBreakpoints?: number[];
+  @Prop() scrollAtEdge = true;
 
   /**
    * A decimal value between 0 and 1 that indicates the
@@ -368,12 +365,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
     }
   }
 
-  snapBreakpointsChanged(snapBreakpoints: number[] | undefined) {
-    if (snapBreakpoints !== undefined) {
-      this.sortedSnapBreakpoints = snapBreakpoints.sort((a, b) => a - b);
-    }
-  }
-
   connectedCallback() {
     const { el } = this;
     prepareOverlay(el);
@@ -449,7 +440,6 @@ export class Modal implements ComponentInterface, OverlayInterface {
       raf(() => this.present());
     }
     this.breakpointsChanged(this.breakpoints);
-    this.snapBreakpointsChanged(this.snapBreakpoints);
 
     /**
      * When binding values in frameworks such as Angular
@@ -701,7 +691,7 @@ export class Modal implements ComponentInterface, OverlayInterface {
       backdropBreakpoint,
       ani,
       this.sortedBreakpoints,
-      this.sortedSnapBreakpoints,
+      this.scrollAtEdge,
       () => this.currentBreakpoint ?? 0,
       () => this.sheetOnDismiss(),
       (breakpoint: number) => {

core/src/components/modal/test/sheet/index.html

@@ -102,9 +102,9 @@
           </button>
           <button
             id="custom-breakpoint-modal"
-            onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0,0.25, 0.5, 0.75], snapBreakpoints: [0.5, 0.75] })"
+            onclick="presentModal({ initialBreakpoint: 0.5, breakpoints: [0,0.25, 0.5, 0.75], scrollAtEdge: false })"
           >
-            Present Sheet Modal (SnapBreakpoints)
+            Present Sheet Modal (scrollAtEdge)
           </button>
           <button
             id="custom-backdrop-modal"
@@ -190,6 +190,11 @@
           ${items}
         </ion-list>
       </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-title>Footer</ion-title>
+        </ion-toolbar>
+      </ion-footer>
       `;
 
         let extraOptions = {