94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import {
|
|
TLComponents,
|
|
TLUiOverrides,
|
|
TldrawUiToastsProvider,
|
|
TLUiToast,
|
|
TLUiToastsContextType,
|
|
Atom,
|
|
atom
|
|
} from '@tldraw/tldraw';
|
|
import { ReactNode } from 'react';
|
|
|
|
import { regularComponentsIndex, presentationComponentsIndex } from './ui-overrides/components';
|
|
import { presentationUiOverridesIndex, regularUiOverridesIndex } from './ui-overrides/overrides';
|
|
|
|
// Toast Wrapper Component
|
|
const ToastWrapper = ({ children }: { children: ReactNode }) => {
|
|
// Create custom toast overrides
|
|
const toastOverrides = (): TLUiToastsContextType => {
|
|
const toasts: Atom<TLUiToast[]> = atom('toasts', []);
|
|
|
|
return {
|
|
addToast: (toast) => {
|
|
const id = toast.id || Math.random().toString();
|
|
const newToast: TLUiToast = { ...toast, id };
|
|
toasts.set([...toasts.get(), newToast]);
|
|
return id;
|
|
},
|
|
removeToast: (id) => {
|
|
toasts.set(toasts.get().filter((t: TLUiToast) => t.id !== id));
|
|
return id;
|
|
},
|
|
clearToasts: () => {
|
|
toasts.set([]);
|
|
},
|
|
toasts
|
|
};
|
|
};
|
|
|
|
return (
|
|
<TldrawUiToastsProvider overrides={toastOverrides}>
|
|
{children}
|
|
</TldrawUiToastsProvider>
|
|
);
|
|
};
|
|
|
|
// Function to get the appropriate UI overrides
|
|
export const getUiOverrides = (presentationMode: boolean): TLUiOverrides => {
|
|
return presentationMode ? presentationUiOverridesIndex : regularUiOverridesIndex;
|
|
};
|
|
|
|
// Function to get the appropriate UI configuration
|
|
export const getUiComponents = (presentationMode: boolean): TLComponents => {
|
|
return presentationMode ? presentationComponents : regularComponents;
|
|
};
|
|
|
|
// Regular components configuration
|
|
const regularComponents: TLComponents = {
|
|
Toolbar: regularComponentsIndex.Toolbar,
|
|
InFrontOfTheCanvas: regularComponentsIndex.InFrontOfTheCanvas,
|
|
KeyboardShortcutsDialog: regularComponentsIndex.KeyboardShortcutsDialog,
|
|
HelperButtons: regularComponentsIndex.HelperButtons,
|
|
ActionsMenu: regularComponentsIndex.ActionsMenu,
|
|
ContextMenu: regularComponentsIndex.ContextMenu,
|
|
DebugMenu: regularComponentsIndex.DebugMenu,
|
|
HelpMenu: regularComponentsIndex.HelpMenu,
|
|
MainMenu: regularComponentsIndex.MainMenu,
|
|
NavigationPanel: regularComponentsIndex.NavigationPanel,
|
|
PageMenu: regularComponentsIndex.PageMenu,
|
|
QuickActions: regularComponentsIndex.QuickActions,
|
|
StylePanel: regularComponentsIndex.StylePanel,
|
|
ZoomMenu: regularComponentsIndex.ZoomMenu
|
|
};
|
|
|
|
// Presentation components configuration
|
|
const presentationComponents: TLComponents = {
|
|
Toolbar: presentationComponentsIndex.Toolbar,
|
|
InFrontOfTheCanvas: presentationComponentsIndex.InFrontOfTheCanvas,
|
|
KeyboardShortcutsDialog: presentationComponentsIndex.KeyboardShortcutsDialog,
|
|
HelperButtons: presentationComponentsIndex.HelperButtons,
|
|
ActionsMenu: presentationComponentsIndex.ActionsMenu,
|
|
ContextMenu: presentationComponentsIndex.ContextMenu,
|
|
DebugMenu: presentationComponentsIndex.DebugMenu,
|
|
HelpMenu: presentationComponentsIndex.HelpMenu,
|
|
MainMenu: presentationComponentsIndex.MainMenu,
|
|
NavigationPanel: presentationComponentsIndex.NavigationPanel,
|
|
PageMenu: presentationComponentsIndex.PageMenu,
|
|
QuickActions: presentationComponentsIndex.QuickActions,
|
|
StylePanel: presentationComponentsIndex.StylePanel,
|
|
ZoomMenu: presentationComponentsIndex.ZoomMenu
|
|
};
|
|
|
|
export { ToastWrapper };
|
|
|