feat(feedback): adds feedback over dialog on android (#11)

* adds feedback toast over dialog

* cast dialog as android specific View

* updates View import, and casts dialog option as <any>

* fix: fallback to foregroundActivity if dialog not found

* fix: null coalesce android options

---------

Co-authored-by: Eduardo Speroni <[email protected]>

Author: AdamAtri

apps/demo/src/plugin-demos/nativescript-feedback.xml

@@ -16,6 +16,7 @@
         <Button text="Another custom font" tap="{{ showCustomFont2 }}" class="button button-font" />
         <Button text="Black icon" tap="{{ showBlackCustomIcon }}" class="button button-custom-alt" />
         <Button text="Hide!" tap="{{ hide }}" class="button button-hide" />
+        <Button text="Over dialog" tap="{{ showOverDialog }}" class="button button-custom" />
       </WrapLayout>
     </StackLayout>
   </ScrollView>

packages/nativescript-feedback/common.ts

@@ -1,4 +1,4 @@
-import { Color } from '@nativescript/core';
+import { Color, View } from '@nativescript/core';
 
 export enum FeedbackPosition {
   Top,
@@ -121,6 +121,11 @@ export interface FeedbackShowOptions {
      * Default true.
      */
     iconPulseEnabled?: boolean;
+
+    /***
+     * A view that will be shown modally
+     */
+    dialog?: View;
   };
 }
 

packages/nativescript-feedback/index.android.ts

@@ -1,5 +1,5 @@
 import { FeedbackCommon, FeedbackShowOptions, FeedbackHideOptions, FeedbackType, FeedbackPosition } from './common';
-import { Application, Color, Utils } from '@nativescript/core';
+import { Application, Color, Utils, View } from '@nativescript/core';
 
 export { FeedbackType };
 export { FeedbackPosition };
@@ -10,7 +10,8 @@ export class Feedback extends FeedbackCommon {
   show(options: FeedbackShowOptions): Promise<void> {
     return new Promise<void>((resolve) => {
       this.lastAlert = null;
-      const alerter = com.tapadoo.alerter.Alerter.create(Application.android.foregroundActivity)
+      const activityOrDialog = (options?.android?.dialog as any)?._dialogFragment?.getDialog() || Application.android.foregroundActivity;
+      const alerter = com.tapadoo.alerter.Alerter.create(activityOrDialog)
         .setLayoutGravity(Feedback.getPosition(options.position))
         .setIconColorFilter(0)
         .setDuration(options.duration ? options.duration : 4000);

tools/demo/nativescript-feedback/index.ts

@@ -1,4 +1,4 @@
-import { Color, isIOS } from '@nativescript/core';
+import { alert, Button, Color, EventData, GridLayout, isIOS, Label } from '@nativescript/core';
 import { Feedback, FeedbackPosition, FeedbackType } from '@valor/nativescript-feedback';
 import { DemoSharedBase } from '../utils';
 
@@ -142,4 +142,47 @@ export class DemoSharedNativescriptFeedback extends DemoSharedBase {
   public hide(): void {
     this.feedback.hide();
   }
+
+  public showOverDialog(args: EventData): void {
+    const page = (<Button>args.object).page;
+    const grid = new GridLayout();
+    (<any>grid).rows = '*';
+    (<any>grid).columns = '*';
+    grid.height = 280;
+    grid.width = 400;
+    grid.backgroundColor = '#5d0239';
+    const label = new Label();
+    label.horizontalAlignment = 'center';
+    label.verticalAlignment = 'middle';
+    label.text = 'This is a dialog';
+    label.fontSize = 18;
+    label.color = new Color('#FFFFFF');
+    grid.addChild(label);
+
+    const dialog = page.showModal(grid, {
+      context: null,
+      fullscreen: false,
+      animated: true,
+      stretched: false,
+      closeCallback: () => console.log('closed dialog'),
+    });
+
+    grid.on('tap', () => page.closeModal());
+
+    setTimeout(async () => {
+      await this.feedback.success({
+        title: 'Over dialog',
+        titleSize: 17,
+        messageSize: 14,
+        message: "I'm configured to show over a modal presentation.",
+        duration: 3000,
+        titleFont: isIOS ? 'SourceSansPro-Bold' : 'SourceSansPro-Bold.otf',
+        messageFont: isIOS ? 'Source Sans Pro' : 'SourceSansPro.otf',
+        onTap: () => console.log('over dialog tapped'),
+        android: { dialog },
+      });
+      console.log('closed toast');
+      setTimeout(() => dialog.closeModal(), 5000);
+    }, 1000);
+  }
 }