From c6ffc065411c1b0fa8fb106ed0e660098f4c5322 Mon Sep 17 00:00:00 2001
From: Aakansha Doshi <aakansha1216@gmail.com>
Date: Sun, 17 Oct 2021 21:44:46 +0530
Subject: [PATCH] feat: support renderTopRightUI in mobile (#4065)

---
 src/components/LayerUI.tsx           | 6 +++++-
 src/components/MobileMenu.tsx        | 6 ++++++
 src/excalidraw-app/index.tsx         | 3 +++
 src/packages/excalidraw/CHANGELOG.md | 4 +++-
 src/types.ts                         | 5 ++++-
 5 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index eb3bcd51..f08c7620 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -65,7 +65,10 @@ interface LayerUIProps {
   toggleZenMode: () => void;
   langCode: Language["code"];
   isCollaborating: boolean;
-  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
   viewModeEnabled: boolean;
   libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@@ -761,6 +764,7 @@ const LayerUI = ({
         renderCustomFooter={renderCustomFooter}
         viewModeEnabled={viewModeEnabled}
         showThemeBtn={showThemeBtn}
+        renderTopRightUI={renderTopRightUI}
       />
     </>
   ) : (
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index 7291301f..1c7ecc70 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -33,6 +33,10 @@ type MobileMenuProps = {
   renderCustomFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
   viewModeEnabled: boolean;
   showThemeBtn: boolean;
+  renderTopRightUI?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
 };
 
 export const MobileMenu = ({
@@ -50,6 +54,7 @@ export const MobileMenu = ({
   renderCustomFooter,
   viewModeEnabled,
   showThemeBtn,
+  renderTopRightUI,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -68,6 +73,7 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
+                {renderTopRightUI && renderTopRightUI(true, appState)}
                 <LockButton
                   checked={appState.elementLocked}
                   onChange={onLockToggle}
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index adf308c2..af325c03 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -307,6 +307,9 @@ const ExcalidrawWrapper = () => {
 
   const renderTopRightUI = useCallback(
     (isMobile: boolean, appState: AppState) => {
+      if (isMobile) {
+        return null;
+      }
       return (
         <div
           style={{
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index 338204c1..b7c98d56 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/src/packages/excalidraw/CHANGELOG.md
@@ -17,7 +17,9 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
-- Export `THEME` constant from the package so host can use this when passing the theme
+- Support [`renderTopRightUI`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRightUI) in mobile UI.
+
+- Export `THEME` constant from the package so host can use this when passing the theme.
 
   #### BREAKING CHANGE
 
diff --git a/src/types.ts b/src/types.ts
index dfb8362a..543b83e7 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -186,7 +186,10 @@ export interface ExcalidrawProps {
     data: ClipboardData,
     event: ClipboardEvent | null,
   ) => Promise<boolean> | boolean;
-  renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element;
+  renderTopRightUI?: (
+    isMobile: boolean,
+    appState: AppState,
+  ) => JSX.Element | null;
   renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;