feat: BottomSheet iOS add onChangeState function

Author: vallemar

src/bottomsheet/bottomsheet-common.ts

@@ -14,6 +14,15 @@ export interface ShownBottomSheetData extends EventData {
     closeCallback?: Function;
 }
 
+export enum StateBottomSheet {
+    CLOSED = -1,
+    COLLAPSED = 0,
+    EXPANDED = 1,
+    DRAGGING = 2
+}
+
+export type onChangeStateBottomSheet = (stateBottomSheet: StateBottomSheet, slideOffset?: number) => void;
+
 export const shownInBottomSheetEvent = 'shownInBottomSheet';
 export const showingInBottomSheetEvent = 'showingInBottomSheet';
 
@@ -33,6 +42,7 @@ export interface BottomSheetOptions {
     skipCollapsedState?: boolean; // optional Android parameter to skip midway state when view is greater than 50%. Default is false
     peekHeight?: number; // optional parameter to set the collapsed sheet height. To work on iOS you need to set trackingScrollView.
     ignoreKeyboardHeight: boolean; //(iOS only) A Boolean value that controls whether the height of the keyboard should affect the bottom sheet's frame when the keyboard shows on the screen. (Default: true)
+    onChangeState?: onChangeStateBottomSheet; // One works to be called on the scroll of the sheet. Parameters: state (CLOSED, DRAGGING, DRAGGING, COLLAPSED) and slideOffset is the new offset of this bottom sheet within [-1,1] range. Offset increases as this bottom sheet is moving upward. From 0 to 1 the sheet is between collapsed and expanded states and from -1 to 0 it is between hidden and collapsed states.
 }
 
 export abstract class ViewWithBottomSheetBase extends View {
@@ -42,6 +52,9 @@ export abstract class ViewWithBottomSheetBase extends View {
     // used when the bottomSheet is dismissed
     public _onDismissBottomSheetCallback: Function;
 
+    // used when the bottomSheet change state
+    public _onChangeStateBottomSheetCallback: onChangeStateBottomSheet;
+
     _bottomSheetFragment: any; // com.google.android.material.bottomsheet.BottomSheetDialogFragment
     protected abstract _hideNativeBottomSheet(parent, whenClosedCallback);
     protected _bottomSheetContext: any;
@@ -111,6 +124,14 @@ export abstract class ViewWithBottomSheetBase extends View {
             };
             this._hideNativeBottomSheet(parent, whenClosedCallback);
         };
+
+        if (options.onChangeState && typeof options.onChangeState === 'function') {
+            this._onChangeStateBottomSheetCallback = (stateBottomSheet: StateBottomSheet, slideOffset: number) => {
+                // only called if not already called by _closeBottomSheetCallback
+                options.onChangeState(stateBottomSheet, slideOffset);
+            };
+        }
+
         this._bottomSheetContext.closeCallback = this._closeBottomSheetCallback;
     }
     protected _raiseShowingBottomSheetEvent() {
@@ -148,4 +169,4 @@ export abstract class ViewWithBottomSheetBase extends View {
             return view;
         }
     }
-}
+}

src/bottomsheet/bottomsheet.ios.ts

@@ -1,9 +1,7 @@
 import { Application, IOSHelper, Page, Screen, Trace, Utils, View, fromObject } from '@nativescript/core';
-import { iOSNativeHelper } from '@nativescript/core/utils';
-import { iosIgnoreSafeAreaProperty } from '@nativescript/core/ui/core/view/view-common';
 import { applyMixins } from '@nativescript-community/ui-material-core';
 import { BottomSheetOptions } from './bottomsheet';
-import { ViewWithBottomSheetBase } from './bottomsheet-common';
+import { StateBottomSheet, ViewWithBottomSheetBase } from './bottomsheet-common';
 
 export { ViewWithBottomSheetBase } from './bottomsheet-common';
 
@@ -24,7 +22,33 @@ class MDCBottomSheetControllerDelegateImpl extends NSObject {
 
         return delegate;
     }
-
+    bottomSheetControllerDidChangeYOffsetYOffset(controller: MDCBottomSheetController, yOffset: number) {
+        const owner = this._owner.get();
+        if (owner && owner._onChangeStateBottomSheetCallback) {
+            const presentationController = controller.presentationController as MDCBottomSheetPresentationController;
+            const heightScreen = Screen.mainScreen.heightDIPs;
+            const heightCollapsedSheet = presentationController.preferredSheetHeight || controller.preferredContentSize.height;
+            const window = UIApplication.sharedApplication.windows.firstObject;
+            const topPadding = window.safeAreaInsets.top;
+            const bottomPadding = window.safeAreaInsets.bottom;
+
+            const isStateCollapsed = heightScreen - yOffset - bottomPadding === heightCollapsedSheet;
+            const isExpanded = yOffset === topPadding;
+            if (!isStateCollapsed && !isExpanded) {
+                //normalized = (value - min) / (max - min);
+                let normalized = 0;
+                if (yOffset + bottomPadding > heightScreen - heightCollapsedSheet) {
+                    normalized =  ((heightScreen - yOffset - bottomPadding) - 0) / (heightCollapsedSheet - 0) - 1;
+                } else {
+                    normalized = ((heightScreen - yOffset) - heightCollapsedSheet) / (heightScreen - heightCollapsedSheet);
+                }
+                owner._onChangeStateBottomSheetCallback(StateBottomSheet.DRAGGING, normalized);
+            } else {
+                const state = isStateCollapsed ? StateBottomSheet.COLLAPSED : StateBottomSheet.EXPANDED;
+                owner._onChangeStateBottomSheetCallback(state, state);
+            }
+        }
+    }
     bottomSheetControllerDidDismissBottomSheet(controller: MDCBottomSheetController) {
         // called when clicked on background
         const owner = this._owner.get();
@@ -37,14 +61,25 @@ class MDCBottomSheetControllerDelegateImpl extends NSObject {
     }
     bottomSheetControllerStateChangedState(controller: MDCBottomSheetController, state: MDCSheetState) {
         // called when swiped
+        const owner = this._owner.get();
         if (state === MDCSheetState.Closed) {
-            const owner = this._owner.get();
             if (owner) {
                 owner._onDismissBottomSheetCallback && owner._onDismissBottomSheetCallback();
+                if (owner._onChangeStateBottomSheetCallback) {
+                    owner._onChangeStateBottomSheetCallback(StateBottomSheet.CLOSED, StateBottomSheet.CLOSED);
+                }
                 if (owner && owner.isLoaded) {
                     owner.callUnloaded();
                 }
             }
+        } else {
+            if (owner && owner._onChangeStateBottomSheetCallback) {
+                if (state === MDCSheetState.Extended) {
+                    owner._onChangeStateBottomSheetCallback(StateBottomSheet.EXPANDED, StateBottomSheet.EXPANDED);
+                } else {
+                    owner._onChangeStateBottomSheetCallback(StateBottomSheet.COLLAPSED, StateBottomSheet.COLLAPSED);
+                }
+            }
         }
     }
 }
@@ -471,4 +506,4 @@ export function install() {
         mixinInstalled = true;
         overrideBottomSheet();
     }
-}
+}