Skip to content

[DO NOT MERGE] use useCommandCallback in use showDialog action #1066

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

[DO NOT MERGE] use useCommandCallback in use showDialog action #1066

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1fcbdc
use useCommandCallback in useShowDialog hook
anserwaseem Apr 18, 2025
20577d0
use useCommandCallback in rest of the actions too
anserwaseem Apr 18, 2025
443444e
add examples for testing onDialogDismiss and onModalDismiss
anserwaseem Apr 18, 2025
a8fbeb7
use jotai's getter for latest storage
anserwaseem May 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 39 additions & 30 deletions apps/kitchen-sink/src/ensemble/screens/actions.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ View:
ensemble.storage.set('dummyId', '1');
ensemble.invokeAPI('getDummyProduct', {id: ensemble.storage.get('dummyId')});
ensemble.storage.set('value',1);
const varr = ensemble.storage.get('var') ?? 0;
console.log("Actions onLoad", varr)
ensemble.storage.set('var', varr + 1);

body:
Column:
Expand Down Expand Up @@ -189,7 +192,7 @@ View:
Column:
children:
- Text:
text: Modal Screen title
text: Modal Screen title ${ensemble.storage.get('var')}
- Text:
text: Modal Screen subtitle
styles:
Expand All @@ -198,7 +201,7 @@ View:
onModalDismiss:
executeCode:
body: |
console.log('Modal Screen Dismissed');
console.log('Modal Screen Dismissed', ensemble.storage.get('var'));
styles:
height: 100%
width: 500px
Expand Down Expand Up @@ -303,35 +306,41 @@ View:
onDialogDismiss:
executeCode:
body: |
console.log('Dialog 1 Dismissed');
console.log('Dialog 1 Dismissed', ensemble.storage.get('var'));
body:
Button:
label: ${'Tap me to ' + showDialogText.text}
onTap:
showDialog:
options:
verticalOffset: 0.6
onDialogDismiss:
executeCode:
body: |
console.log('Dialog 2 Dismissed');
widget:
Button:
label: Tap me to open one more dialog
onTap:
showDialog:
options:
horizontalOffset: -0.8
height: 100%
widget:
Column:
styles:
margin: 100px
children:
- Button:
label: Click me to close all dialogs
onTap:
closeAllDialogs:
Column:
children:
- Button:
label: increment var
onTap: ensemble.storage.set('var', ensemble.storage.get('var')+1)
- Button:
label: ${'Tap me to ' + showDialogText.text}
onTap:
showDialog:
options:
verticalOffset: 0.6
onDialogDismiss:
executeCode:
body: |
console.log('Dialog 2 Dismissed');
widget:
Button:
label: Tap me to open one more dialog
onTap:
showDialog:
options:
horizontalOffset: -0.8
height: 100%
widget:
Column:
styles:
margin: 100px
children:
- Button:
label: Click me to close all dialogs
onTap:
closeAllDialogs:

- Markdown:
text: You can still access the current screen's scope from a dialog.
- Column:
Expand Down
3 changes: 3 additions & 0 deletions apps/kitchen-sink/src/ensemble/screens/forms.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ View:
{ value: "val 2", label: "lab 2" },
{ value: "val 3", label: "lab 3" },
]);
const varr = ensemble.storage.get('var') ?? 0;
console.log("Forms onLoad", varr)
ensemble.storage.set('var', varr + 1);
onComplete:
invokeAPI:
name: getData
Expand Down
2 changes: 2 additions & 0 deletions packages/framework/src/evaluate/binding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,8 @@ export const createBindingAtom = <T = unknown>(
rawJsExpression.includes("ensemble.storage")
? get(screenStorageAtom)
: undefined,
undefined,
get,
),
user: rawJsExpression.includes("ensemble.user")
? get(userAtom)
Expand Down
6 changes: 4 additions & 2 deletions packages/framework/src/hooks/useCommandCallback.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,10 @@ export const useCommandCallback = <
const theme = get(themeAtom);
const user = get(userAtom);

const storageApi = createStorageApi(storage, (next) =>
set(screenStorageAtom, next),
const storageApi = createStorageApi(
storage,
(next) => set(screenStorageAtom, next),
get,
);

const customWidgets =
Expand Down
3 changes: 3 additions & 0 deletions packages/framework/src/hooks/useEnsembleStorage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { Getter } from "jotai";
import { atom, useAtom } from "jotai";
import { createJSONStorage, atomWithStorage } from "jotai/utils";
import { assign, get as lodashGet, has, isObject, merge } from "lodash-es";
Expand Down Expand Up @@ -57,6 +58,7 @@ export const useEnsembleStorage = (): EnsembleStorage => {
export const createStorageApi = (
storage?: { [key: string]: unknown },
setStorage?: (storage: { [key: string]: unknown }) => void,
get?: Getter,
): EnsembleStorage => {
return {
set: (key: string, value: unknown): void => {
Expand All @@ -68,6 +70,7 @@ export const createStorageApi = (
setStorage?.(update);
},
get: (key: string): unknown => {
if (get) return get(screenStorageAtom)[key];
return storage?.[key];
},
delete: (key: string): unknown => {
Expand Down
24 changes: 16 additions & 8 deletions packages/runtime/src/runtime/hooks/useCloseAllDialogs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import { useContext, useMemo } from "react";
import { type EnsembleActionHookResult } from "@ensembleui/react-framework";
import { useContext } from "react";
import {
type EnsembleActionHookResult,
useCommandCallback,
} from "@ensembleui/react-framework";
import { useNavigate } from "react-router-dom";
import { ModalContext } from "../modal";
import type { EnsembleActionHook } from "./useEnsembleAction";

export const useCloseAllDialogs: EnsembleActionHook<
EnsembleActionHookResult
> = () => {
const { closeAllModals } = useContext(ModalContext) || {};
const modalContext = useContext(ModalContext);
const navigate = useNavigate();

return useMemo(
() => ({
callback: () => closeAllModals?.(),
}),
[],
const callback = useCommandCallback(
() => {
modalContext?.closeAllModals();
},
{ navigate },
[modalContext],
);

return { callback };
};
24 changes: 16 additions & 8 deletions packages/runtime/src/runtime/hooks/useCloseAllModalScreens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
import { useContext, useMemo } from "react";
import { type EnsembleActionHookResult } from "@ensembleui/react-framework";
import { useContext } from "react";
import {
type EnsembleActionHookResult,
useCommandCallback,
} from "@ensembleui/react-framework";
import { useNavigate } from "react-router-dom";
import { ModalContext } from "../modal";
import type { EnsembleActionHook } from "./useEnsembleAction";

export const useCloseAllScreens: EnsembleActionHook<
EnsembleActionHookResult
> = () => {
const { closeAllScreens } = useContext(ModalContext) || {};
const modalContext = useContext(ModalContext);
const navigate = useNavigate();

return useMemo(
() => ({
callback: () => closeAllScreens?.(),
}),
[],
const callback = useCommandCallback(
() => {
modalContext?.closeAllScreens();
},
{ navigate },
[modalContext],
);

return { callback };
};
Loading