support showToast action via code (#1071)

Author: anserwaseem

.changeset/light-years-do.md

@@ -0,0 +1,7 @@
+---
+"@ensembleui/react-framework": patch
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+support showToast via code

apps/kitchen-sink/src/ensemble/screens/testActions.yaml

@@ -10,6 +10,17 @@ View:
       styles:
         names: ${ensemble.storage.get('yyy')}
       children:
+        - Button:
+            label: show Toast
+            onTap:
+              showToast:
+                message: Hello 1
+                options:
+                  type: warning
+        - Button:
+            label: show Toast via code
+            onTap: |-
+              ensemble.showToast({ message: 'Hello 2', options: { type: 'info', position: 'topLeft' } })
         - Button:
             id: navigateScreen
             label: navigate screen

packages/framework/src/api/index.ts

@@ -1,3 +1,4 @@
 export * from "./data";
 export * from "./navigate";
 export * from "./modal";
+export * from "./toast";

packages/framework/src/api/toast.ts

@@ -0,0 +1,21 @@
+import { get, kebabCase } from "lodash-es";
+import type { ShowToastAction } from "../shared/actions";
+
+export const showToast = (
+  toastAction: ShowToastAction | undefined,
+  toaster?: (...args: unknown[]) => void,
+): void => {
+  if (!toastAction || !toaster) {
+    return;
+  }
+
+  const position = kebabCase(
+    get(toastAction.options, "position", "bottom-right"),
+  );
+  const type = get(toastAction.options, "type", "success");
+
+  toaster(toastAction.message, {
+    position,
+    type,
+  });
+};

packages/framework/src/hooks/useCommandCallback.ts

@@ -18,6 +18,7 @@ import {
   navigateModalScreen,
   navigateUrl,
   showDialog,
+  showToast,
 } from "../api";
 import type {
   EnsembleScreenModel,
@@ -27,6 +28,7 @@ import type {
   NavigateModalScreenAction,
   NavigateScreenAction,
   ShowDialogAction,
+  ShowToastAction,
 } from "../shared";
 import { deviceAtom } from "./useDeviceObserver";
 import { createStorageApi, screenStorageAtom } from "./useEnsembleStorage";
@@ -40,6 +42,7 @@ interface CallbackContext {
     inputs?: { [key: string]: unknown };
     screen: EnsembleScreenModel;
   }>;
+  toaster?: (...args: unknown[]) => void;
 }
 
 export const useCommandCallback = <
@@ -158,6 +161,8 @@ export const useCommandCallback = <
                 applicationContext.application ?? screenContext.app,
               );
             },
+            showToast: (action: ShowToastAction): void =>
+              showToast(action, callbackContext?.toaster),
           },
           context: {
             ...customWidgets,

packages/framework/src/shared/ensemble.d.ts

@@ -1,5 +1,5 @@
 import type { Response } from "../data";
-import type { ShowDialogAction } from "./actions";
+import type { ShowDialogAction, ShowToastAction } from "./actions";
 
 export interface EnsembleContext {
   app: EnsembleAppConfig;
@@ -31,7 +31,7 @@ export interface EnsembleInterface {
   stopTimer: (timerId: string) => void;
   openCamera: () => void;
   navigateBack: () => void;
-  showToast: (inputs: unknown) => void;
+  showToast: (action: ShowToastAction) => void;
   debug: (value: unknown) => void;
   copyToClipboard: (value: unknown) => void;
   connectSocket: (name: string) => void;

packages/runtime/src/runtime/hooks/useEnsembleAction.tsx

@@ -53,6 +53,7 @@ import {
 import { useState, useEffect, useMemo, useCallback, useContext } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
 import { ModalContext } from "../modal";
 import { EnsembleRuntime } from "../runtime";
 import { getShowDialogOptions } from "../showDialog";
@@ -152,6 +153,7 @@ export const useExecuteCode: EnsembleActionHook<
       modalContext,
       render: EnsembleRuntime.render,
       EnsembleScreen,
+      toaster: toast as (...args: unknown[]) => void,
     },
   );