diff --git a/apps/kitchen-sink/src/ensemble/screens/help.yaml b/apps/kitchen-sink/src/ensemble/screens/help.yaml index e90cb49a7..c742768b0 100644 --- a/apps/kitchen-sink/src/ensemble/screens/help.yaml +++ b/apps/kitchen-sink/src/ensemble/screens/help.yaml @@ -28,6 +28,37 @@ View: inputs: input1: "hello" input2: "world" + + - Button: + label: toggle modal + onTap: + showDialog: + options: + minWidth: 500px + body: + MultiSelect: + label: test + data: ${ensemble.storage.get('testoptions')} + labelKey: label + valueKey: value + value: ${ensemble.storage.get('testselect') || []} + onChange: + executeCode: | + ensemble.storage.set('testselect', option) + onSearch: + executeCode: | + const tempOptions = ensemble.storage.get('testlistoptions') + const filteredResult = tempOptions.filter(option => + option.label.toLowerCase().startsWith(search.toLowerCase()) + ) + ensemble.storage.set('testoptions', filteredResult) + + - Button: + label: set storage variable + onTap: + executeCode: | + ensemble.storage.set('isTestAvailable', 'yes !!!') + - Text: styles: names: heading-1 diff --git a/apps/kitchen-sink/src/ensemble/screens/testActions.yaml b/apps/kitchen-sink/src/ensemble/screens/testActions.yaml index f05f9b540..5945600cf 100644 --- a/apps/kitchen-sink/src/ensemble/screens/testActions.yaml +++ b/apps/kitchen-sink/src/ensemble/screens/testActions.yaml @@ -191,6 +191,19 @@ View: label: close all screens onTap: closeAllScreens: + - Button: + label: navigate screen modal for test storage + onTap: + navigateModalScreen: + name: help + height: 200px + width: 900px + - Button: + label: check storage variable + onTap: + executeCode: | + ensemble.storage.set('storageTested', 'okay') + console.log(ensemble.storage.get('isTestAvailable')) Socket: echo: diff --git a/packages/framework/src/hooks/useCommandCallback.ts b/packages/framework/src/hooks/useCommandCallback.ts index 564b0131e..5ba3a0d2d 100644 --- a/packages/framework/src/hooks/useCommandCallback.ts +++ b/packages/framework/src/hooks/useCommandCallback.ts @@ -29,7 +29,7 @@ import type { ShowDialogAction, } from "../shared"; import { deviceAtom } from "./useDeviceObserver"; -import { createStorageApi, screenStorageAtom } from "./useEnsembleStorage"; +import { useEnsembleStorage } from "./useEnsembleStorage"; import { useCustomScope } from "./useCustomScope"; import { useLanguageScope } from "./useLanguageScope"; @@ -53,21 +53,17 @@ export const useCommandCallback = < ): ReturnType> => { const customScope = useCustomScope(); const { i18n } = useLanguageScope(); + const storage = useEnsembleStorage(); return useAtomCallback( useCallback( (get, set, ...args: T) => { const applicationContext = get(appAtom); const screenContext = get(screenAtom); - const storage = get(screenStorageAtom); const device = get(deviceAtom); const theme = get(themeAtom); const user = get(userAtom); - const storageApi = createStorageApi(storage, (next) => - set(screenStorageAtom, next), - ); - const customWidgets = applicationContext.application?.customWidgets.reduce( (acc, widget) => ({ ...acc, [widget.name]: widget }), @@ -83,7 +79,7 @@ export const useCommandCallback = < ...user, setUser: (userUpdate: EnsembleUser) => set(userAtom, userUpdate), }, - storage: storageApi, + storage, formatter: DateFormatter(), env: applicationContext.env, secrets: applicationContext.secrets, @@ -110,7 +106,7 @@ export const useCommandCallback = < ensemble: { env: applicationContext.env, secrets: applicationContext.secrets, - storage: storageApi, + storage, }, }, undefined, diff --git a/packages/framework/src/hooks/useEnsembleStorage.ts b/packages/framework/src/hooks/useEnsembleStorage.ts index b4afd8f74..085ace1f4 100644 --- a/packages/framework/src/hooks/useEnsembleStorage.ts +++ b/packages/framework/src/hooks/useEnsembleStorage.ts @@ -39,6 +39,7 @@ export const screenStorageAtom = atom( export const useEnsembleStorage = (): EnsembleStorage => { const [storage, setStorage] = useAtom(screenStorageAtom); + // Use a buffer so we can perform imperative changes without forcing re-render const storageBuffer = useMemo<{ [key: string]: unknown }>(() => ({}), []); @@ -46,10 +47,7 @@ export const useEnsembleStorage = (): EnsembleStorage => { merge(storageBuffer, storage); }, [storageBuffer, storage]); - const storageApi = useMemo( - () => createStorageApi(storageBuffer, setStorage), - [setStorage, storageBuffer], - ); + const storageApi = createStorageApi(storage, setStorage); return storageApi; }; @@ -64,8 +62,8 @@ export const createStorageApi = ( update[key] = value; if (storage) { assign(storage, update); + setStorage?.(storage); } - setStorage?.(update); }, get: (key: string): unknown => { return storage?.[key];