feat: support WelcomeScreen customization API (#6048)

This commit is contained in:
David Luzar 2023-01-12 15:49:28 +01:00 committed by GitHub
parent 0982da38fe
commit 599a8f3c6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
20 changed files with 715 additions and 379 deletions

View file

@ -313,10 +313,7 @@ export interface ExcalidrawProps {
elements: readonly NonDeletedExcalidrawElement[],
appState: AppState,
) => JSX.Element;
UIOptions?: {
dockedSidebarBreakpoint?: number;
canvasActions?: CanvasActions;
};
UIOptions?: Partial<UIOptions>;
detectScroll?: boolean;
handleKeyboardGlobally?: boolean;
onLibraryChange?: (libraryItems: LibraryItems) => void | Promise<any>;
@ -373,23 +370,31 @@ export type ExportOpts = {
// truthiness value will determine whether the action is rendered or not
// (see manager renderAction). We also override canvasAction values in
// excalidraw package index.tsx.
type CanvasActions = {
changeViewBackgroundColor?: boolean;
clearCanvas?: boolean;
export?: false | ExportOpts;
loadScene?: boolean;
saveToActiveFile?: boolean;
toggleTheme?: boolean | null;
saveAsImage?: boolean;
};
type CanvasActions = Partial<{
changeViewBackgroundColor: boolean;
clearCanvas: boolean;
export: false | ExportOpts;
loadScene: boolean;
saveToActiveFile: boolean;
toggleTheme: boolean | null;
saveAsImage: boolean;
}>;
type UIOptions = Partial<{
dockedSidebarBreakpoint: number;
welcomeScreen: boolean;
canvasActions: CanvasActions;
}>;
export type AppProps = Merge<
ExcalidrawProps,
{
UIOptions: {
canvasActions: Required<CanvasActions> & { export: ExportOpts };
dockedSidebarBreakpoint?: number;
};
UIOptions: Merge<
MarkRequired<UIOptions, "welcomeScreen">,
{
canvasActions: Required<CanvasActions> & { export: ExportOpts };
}
>;
detectScroll: boolean;
handleKeyboardGlobally: boolean;
isCollaborating: boolean;
@ -517,7 +522,31 @@ export type Device = Readonly<{
}>;
export type UIChildrenComponents = {
[k in "FooterCenter" | "Menu"]?:
| React.ReactPortal
| React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
[k in "FooterCenter" | "Menu" | "WelcomeScreen"]?: React.ReactElement<
{ children?: React.ReactNode },
React.JSXElementConstructor<any>
>;
};
export type UIWelcomeScreenComponents = {
[k in
| "Center"
| "MenuHint"
| "ToolbarHint"
| "HelpHint"]?: React.ReactElement<
{ children?: React.ReactNode },
React.JSXElementConstructor<any>
>;
};
export type UIWelcomeScreenCenterComponents = {
[k in
| "Logo"
| "Heading"
| "Menu"
| "MenuItemLoadScene"
| "MenuItemHelp"]?: React.ReactElement<
{ children?: React.ReactNode },
React.JSXElementConstructor<any>
>;
};