From a7153d9d1d550f71bd8b1218f6e8245f043bc539 Mon Sep 17 00:00:00 2001 From: Aakansha Doshi Date: Mon, 11 Jul 2022 18:11:13 +0530 Subject: [PATCH] feat: update toast api to account for duration and closable (#5427) * feat: update toast api to account for duration and closable * fix * update snaps * update docs * male toast nullable * fix snaps * remove clearToast from App.tsx and replace clearToast prop in Toast comp with onClose --- src/actions/actionAddToLibrary.ts | 2 +- src/actions/actionClipboard.tsx | 18 +-- src/actions/actionExport.tsx | 16 +-- src/actions/actionStyles.ts | 2 +- src/appState.ts | 4 +- src/components/App.tsx | 40 +++---- src/components/Toast.tsx | 10 +- src/excalidraw-app/CustomStats.tsx | 4 +- src/excalidraw-app/index.tsx | 2 +- src/packages/excalidraw/CHANGELOG.md | 8 ++ src/packages/excalidraw/README.md | 26 ++++- .../__snapshots__/contextmenu.test.tsx.snap | 40 ++++--- .../regressionTests.test.tsx.snap | 104 +++++++++--------- .../packages/__snapshots__/utils.test.ts.snap | 2 +- src/types.ts | 4 +- 15 files changed, 162 insertions(+), 120 deletions(-) diff --git a/src/actions/actionAddToLibrary.ts b/src/actions/actionAddToLibrary.ts index 41a70178..a4fca560 100644 --- a/src/actions/actionAddToLibrary.ts +++ b/src/actions/actionAddToLibrary.ts @@ -42,7 +42,7 @@ export const actionAddToLibrary = register({ commitToHistory: false, appState: { ...appState, - toastMessage: t("toast.addedToLibrary"), + toast: { message: t("toast.addedToLibrary") }, }, }; }) diff --git a/src/actions/actionClipboard.tsx b/src/actions/actionClipboard.tsx index 8a25e181..4ca25c3f 100644 --- a/src/actions/actionClipboard.tsx +++ b/src/actions/actionClipboard.tsx @@ -107,14 +107,16 @@ export const actionCopyAsPng = register({ return { appState: { ...appState, - toastMessage: t("toast.copyToClipboardAsPng", { - exportSelection: selectedElements.length - ? t("toast.selection") - : t("toast.canvas"), - exportColorScheme: appState.exportWithDarkMode - ? t("buttons.darkMode") - : t("buttons.lightMode"), - }), + toast: { + message: t("toast.copyToClipboardAsPng", { + exportSelection: selectedElements.length + ? t("toast.selection") + : t("toast.canvas"), + exportColorScheme: appState.exportWithDarkMode + ? t("buttons.darkMode") + : t("buttons.lightMode"), + }), + }, }, commitToHistory: false, }; diff --git a/src/actions/actionExport.tsx b/src/actions/actionExport.tsx index 7ae69db9..015e5216 100644 --- a/src/actions/actionExport.tsx +++ b/src/actions/actionExport.tsx @@ -144,13 +144,15 @@ export const actionSaveToActiveFile = register({ appState: { ...appState, fileHandle, - toastMessage: fileHandleExists - ? fileHandle?.name - ? t("toast.fileSavedToFilename").replace( - "{filename}", - `"${fileHandle.name}"`, - ) - : t("toast.fileSaved") + toast: fileHandleExists + ? { + message: fileHandle?.name + ? t("toast.fileSavedToFilename").replace( + "{filename}", + `"${fileHandle.name}"`, + ) + : t("toast.fileSaved"), + } : null, }, }; diff --git a/src/actions/actionStyles.ts b/src/actions/actionStyles.ts index ded60aa1..6396d5a8 100644 --- a/src/actions/actionStyles.ts +++ b/src/actions/actionStyles.ts @@ -36,7 +36,7 @@ export const actionCopyStyles = register({ return { appState: { ...appState, - toastMessage: t("toast.copyStyles"), + toast: { message: t("toast.copyStyles") }, }, commitToHistory: false, }; diff --git a/src/appState.ts b/src/appState.ts index 879d0590..cf8e2814 100644 --- a/src/appState.ts +++ b/src/appState.ts @@ -81,7 +81,7 @@ export const getDefaultAppState = (): Omit< showStats: false, startBoundElement: null, suggestedBindings: [], - toastMessage: null, + toast: null, viewBackgroundColor: oc.white, zenModeEnabled: false, zoom: { @@ -173,7 +173,7 @@ const APP_STATE_STORAGE_CONF = (< showStats: { browser: true, export: false, server: false }, startBoundElement: { browser: false, export: false, server: false }, suggestedBindings: { browser: false, export: false, server: false }, - toastMessage: { browser: false, export: false, server: false }, + toast: { browser: false, export: false, server: false }, viewBackgroundColor: { browser: true, export: true, server: true }, width: { browser: false, export: false, server: false }, zenModeEnabled: { browser: true, export: false, server: false }, diff --git a/src/components/App.tsx b/src/components/App.tsx index 64a8738f..f88d069a 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -380,7 +380,7 @@ class App extends React.Component { getAppState: () => this.state, getFiles: () => this.files, refresh: this.refresh, - setToastMessage: this.setToastMessage, + setToast: this.setToast, id: this.id, setActiveTool: this.setActiveTool, setCursor: this.setCursor, @@ -549,16 +549,12 @@ class App extends React.Component { onLinkOpen={this.props.onLinkOpen} /> )} - {this.state.toastMessage !== null && ( + {this.state.toast !== null && ( this.setToast(null)} + duration={this.state.toast.duration} + closable={this.state.toast.closable} /> )}
{this.renderCanvas()}
@@ -772,7 +768,7 @@ class App extends React.Component { ? { ...scene.appState.activeTool, type: "selection" } : scene.appState.activeTool, isLoading: false, - toastMessage: this.state.toastMessage || null, + toast: this.state.toast, }; if (initialData?.scrollToContent) { scene.appState = { @@ -931,9 +927,13 @@ class App extends React.Component { (window.outerWidth - scrollBarWidth) / window.innerWidth; const isBrowserZoomed = widthRatio < 0.75 || widthRatio > 1.1; if (isBrowserZoomed) { - this.setToastMessage(t("alerts.browserZoom")); + this.setToast({ + message: t("alerts.browserZoom"), + closable: true, + duration: Infinity, + }); } else { - this.clearToast(); + this.setToast(null); } } }; @@ -1643,12 +1643,14 @@ class App extends React.Component { }); }; - clearToast = () => { - this.setState({ toastMessage: null }); - }; - - setToastMessage = (toastMessage: string) => { - this.setState({ toastMessage }); + setToast = ( + toast: { + message: string; + closable?: boolean; + duration?: number; + } | null, + ) => { + this.setState({ toast }); }; restoreFileFromShare = async () => { diff --git a/src/components/Toast.tsx b/src/components/Toast.tsx index e6fd3648..56eb94db 100644 --- a/src/components/Toast.tsx +++ b/src/components/Toast.tsx @@ -7,13 +7,13 @@ const DEFAULT_TOAST_TIMEOUT = 5000; export const Toast = ({ message, - clearToast, + onClose, closable = false, // To prevent autoclose, pass duration as Infinity duration = DEFAULT_TOAST_TIMEOUT, }: { message: string; - clearToast: () => void; + onClose: () => void; closable?: boolean; duration?: number; }) => { @@ -23,8 +23,8 @@ export const Toast = ({ if (!shouldAutoClose) { return; } - timerRef.current = window.setTimeout(() => clearToast(), duration); - }, [clearToast, duration, shouldAutoClose]); + timerRef.current = window.setTimeout(() => onClose(), duration); + }, [onClose, duration, shouldAutoClose]); useEffect(() => { if (!shouldAutoClose) { @@ -50,7 +50,7 @@ export const Toast = ({ icon={close} aria-label="close" type="icon" - onClick={clearToast} + onClick={onClose} className="close" /> )} diff --git a/src/excalidraw-app/CustomStats.tsx b/src/excalidraw-app/CustomStats.tsx index 3a65e3ca..a849a28b 100644 --- a/src/excalidraw-app/CustomStats.tsx +++ b/src/excalidraw-app/CustomStats.tsx @@ -19,7 +19,7 @@ const getStorageSizes = debounce((cb: (sizes: StorageSizes) => void) => { }, STORAGE_SIZE_TIMEOUT); type Props = { - setToastMessage: (message: string) => void; + setToast: (message: string) => void; }; const CustomStats = (props: Props) => { const [storageSizes, setStorageSizes] = useState({ @@ -68,7 +68,7 @@ const CustomStats = (props: Props) => { onClick={async () => { try { await copyTextToSystemClipboard(getVersion()); - props.setToastMessage(t("toast.copyToClipboard")); + props.setToast(t("toast.copyToClipboard")); } catch {} }} title={t("stats.versionCopy")} diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index f8ff9541..8f35772e 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -658,7 +658,7 @@ const ExcalidrawWrapper = () => { const renderCustomStats = () => { return ( excalidrawAPI!.setToastMessage(message)} + setToast={(message) => excalidrawAPI!.setToast({ message })} /> ); }; diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 9db43614..2e6e043a 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -11,6 +11,14 @@ The change should be grouped under one of the below section and must contain PR Please add the latest change on the top under the correct section. --> +## Unreleased + +### Excalidraw API + +#### Breaking Changes + +- `setToastMessage` API is now renamed to `setToast` API and the function signature is also updated [#5427](https://github.com/excalidraw/excalidraw/pull/5427). You can also pass `duration` and `closable` attributes along with `message`. + ## 0.12.0 (2022-07-07) ### Excalidraw API diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 6c5f9820..3025a9da 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -475,7 +475,7 @@ You might want to use this when you want to load excalidraw with some initial el You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs: | API | signature | Usage | -| --- | --- | --- | +| --- | --- | --- | --- | | ready | `boolean` | This is set to true once Excalidraw is rendered | | readyPromise | [resolvablePromise](https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L317) | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readyPromise) | | [updateScene](#updateScene) | (scene: sceneData) => void | updates the scene with the sceneData | @@ -489,7 +489,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the | scrollToContent | (target?: ExcalidrawElement | ExcalidrawElement[]) => void | Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene. | | refresh | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You don't have to call this when the position is changed on page scroll or when the excalidraw container resizes (we handle that ourselves). For any other cases if the position of excalidraw is updated (example due to scroll on parent container and not page scroll) you should call this API. | | [importLibrary](#importlibrary) | `(url: string, token?: string) => void` | Imports library from given URL | -| setToastMessage | `(message: string) => void` | This API can be used to show the toast with custom message. | +| [setToast](#setToast) | `({message: string, closable?:boolean, duration?:number} | null) => void` | This API can be used to show the toast with custom message. | | [id](#id) | string | Unique ID for the excalidraw component. | | [getFiles](#getFiles) | () => files | This API can be used to get the files present in the scene. It may contain files that aren't referenced by any element, so if you're persisting the files to a storage, you should compare them against stored elements. | | [setActiveTool](#setActiveTool) | (tool: { type: typeof SHAPES[number]["value"] | "eraser" } | { type: "custom"; customType: string }) => void | This API can be used to set the active tool | @@ -705,6 +705,28 @@ useEffect(() => { Try out the [Demo](#Demo) to see it in action. +#### `setToast` + +This API can be used to show the toast with custom message. + +
+({ message: string,
+ closable?:boolean,
+ duration?:number } | null) => void
+
+ +| Attribute | type | Description | +| --- | --- | --- | +| message | string | The message to be shown on the toast. | +| closable | boolean | Indicates whether to show the closable button on toast to dismiss the toast. | +| duration | number | Determines the duration after which the toast should auto dismiss. To prevent autodimiss you can pass `Infinity`. | + +To dismiss an existing toast you can simple pass `null` + +```js +setToast(null); +``` + #### `setActiveTool` This API has the below signature. It sets the `tool` passed in param as the active tool. diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap index 72c4defd..52a1b82d 100644 --- a/src/tests/__snapshots__/contextmenu.test.tsx.snap +++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap @@ -77,7 +77,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -248,7 +248,9 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": "Added to library", + "toast": Object { + "message": "Added to library", + }, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -426,7 +428,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -765,7 +767,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -1104,7 +1106,9 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": "Copied styles.", + "toast": Object { + "message": "Copied styles.", + }, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -1280,7 +1284,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -1496,7 +1500,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -1775,7 +1779,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -2126,7 +2130,9 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": "Copied styles.", + "toast": Object { + "message": "Copied styles.", + }, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -2927,7 +2933,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -3266,7 +3272,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -3609,7 +3615,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -4030,7 +4036,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -4311,7 +4317,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -4661,7 +4667,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -4770,7 +4776,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, @@ -4855,7 +4861,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 200, diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap index 9716320c..c2bc22e7 100644 --- a/src/tests/__snapshots__/regressionTests.test.tsx.snap +++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap @@ -85,7 +85,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -602,7 +602,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -1101,7 +1101,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -1964,7 +1964,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -2191,7 +2191,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -2693,7 +2693,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -2967,7 +2967,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -3148,7 +3148,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -3635,7 +3635,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -3896,7 +3896,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -4120,7 +4120,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -4384,7 +4384,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -4661,7 +4661,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -5107,7 +5107,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -5407,7 +5407,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -5730,7 +5730,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -5933,7 +5933,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -6111,7 +6111,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -6620,7 +6620,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -6962,7 +6962,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -9207,7 +9207,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -9607,7 +9607,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -9882,7 +9882,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -10121,7 +10121,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -10423,7 +10423,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -10601,7 +10601,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -10779,7 +10779,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -10957,7 +10957,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -11165,7 +11165,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -11373,7 +11373,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -11599,7 +11599,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -11807,7 +11807,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -11985,7 +11985,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -12193,7 +12193,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -12371,7 +12371,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -12549,7 +12549,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -12786,7 +12786,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -13574,7 +13574,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -13847,7 +13847,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -13954,7 +13954,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -14066,7 +14066,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -14253,7 +14253,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -14596,7 +14596,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -14825,7 +14825,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -15725,7 +15725,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -15836,7 +15836,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -16703,7 +16703,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -17149,7 +17149,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -17422,7 +17422,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -17531,7 +17531,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -18074,7 +18074,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, @@ -18181,7 +18181,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "width": 1024, diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap index ebc6b9b2..6e2ae702 100644 --- a/src/tests/packages/__snapshots__/utils.test.ts.snap +++ b/src/tests/packages/__snapshots__/utils.test.ts.snap @@ -70,7 +70,7 @@ Object { "startBoundElement": null, "suggestedBindings": Array [], "theme": "light", - "toastMessage": null, + "toast": null, "viewBackgroundColor": "#ffffff", "viewModeEnabled": false, "zenModeEnabled": false, diff --git a/src/types.ts b/src/types.ts index 21e4b164..1539d533 100644 --- a/src/types.ts +++ b/src/types.ts @@ -145,7 +145,7 @@ export type AppState = { previousSelectedElementIds: { [id: string]: boolean }; shouldCacheIgnoreZoom: boolean; showHelpDialog: boolean; - toastMessage: string | null; + toast: { message: string; closable?: boolean; duration?: number } | null; zenModeEnabled: boolean; theme: Theme; gridSize: number | null; @@ -467,7 +467,7 @@ export type ExcalidrawImperativeAPI = { getAppState: () => InstanceType["state"]; getFiles: () => InstanceType["files"]; refresh: InstanceType["refresh"]; - setToastMessage: InstanceType["setToastMessage"]; + setToast: InstanceType["setToast"]; addFiles: (data: BinaryFileData[]) => void; readyPromise: ResolvablePromise; ready: true;