From f1bc90e08ae81084f44530e1eae5847c9e6b81f6 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Mon, 6 Jun 2022 20:45:06 +0530
Subject: [PATCH] fix: Allow null in renderFooter prop (#5282)

* fix: Allow null in render props

* update docs
---
 src/components/LayerUI.tsx             | 5 ++++-
 src/components/MobileMenu.tsx          | 5 ++++-
 src/packages/excalidraw/CHANGELOG.md   | 2 ++
 src/packages/excalidraw/README_NEXT.md | 4 ++--
 src/types.ts                           | 2 +-
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 6e2ea29d..83715ffd 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -60,7 +60,10 @@ interface LayerUIProps {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderCustomFooter?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
   UIOptions: AppProps["UIOptions"];
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 9b40a437..f59fc42f 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -32,7 +32,10 @@ type MobileMenuProps = {
   onPenModeToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
-  renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderCustomFooter?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   viewModeEnabled: boolean;
   showThemeBtn: boolean;
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index 72c616a5..f6dc3151 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -53,6 +53,8 @@ Please add the latest change on the top under the correct section.
 
 #### Fixes
 
+- Allow returning `null ` in [`renderFooter`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderFooter) prop [#5282](https://github.com/excalidraw/excalidraw/pull/5282).
+
 - Use `window.EXCALIDRAW_ASSET_PATH` for fonts when exporting to svg [#5065](https://github.com/excalidraw/excalidraw/pull/5065).
 - Library menu now properly rerenders if open when library is updated using `updateScene({ libraryItems })` [#4995](https://github.com/excalidraw/excalidraw/pull/4995).
 
diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md
index 58d8ea6f..1cb7e617 100644
--- a/src/packages/excalidraw/README_NEXT.md
+++ b/src/packages/excalidraw/README_NEXT.md
@@ -596,7 +596,7 @@ import { defaultLang, languages } from "@excalidraw/excalidraw-next";
 #### `renderTopRightUI`
 
 <pre>
-(isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX
+(isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX | null
 </pre>
 
 A function returning JSX to render custom UI in the top right corner of the app.
@@ -604,7 +604,7 @@ A function returning JSX to render custom UI in the top right corner of the app.
 #### `renderFooter`
 
 <pre>
-(isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX
+(isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX | null
 </pre>
 
 A function returning JSX to render custom UI footer. For example, you can use this to render a language picker that was previously being rendered by Excalidraw itself (for now, you'll need to implement your own language picker).
diff --git a/src/types.ts b/src/types.ts
index 0eb01d57..beee2538 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -277,7 +277,7 @@ export interface ExcalidrawProps {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
-  renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;
   zenModeEnabled?: boolean;