feat: add langCode and renderFooter props (#2644)

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/App.tsx

@@ -111,7 +111,7 @@ import {
   selectGroupsForSelectedElements,
 } from "../groups";
 import { createHistory, SceneHistory } from "../history";
-import { getLanguage, t } from "../i18n";
+import { t, getLanguage, setLanguage, languages, defaultLang } from "../i18n";
 import {
   CODES,
   getResizeCenterPointKey,
@@ -332,7 +332,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       offsetLeft,
     } = this.state;
 
-    const { onCollabButtonClick, onExportToBackend } = this.props;
+    const { onCollabButtonClick, onExportToBackend, renderFooter } = this.props;
     const canvasScale = window.devicePixelRatio;
 
     const canvasWidth = canvasDOMWidth * canvasScale;
@@ -369,9 +369,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
           }
           zenModeEnabled={zenModeEnabled}
           toggleZenMode={this.toggleZenMode}
-          lng={getLanguage().lng}
+          langCode={getLanguage().code}
           isCollaborating={this.props.isCollaborating || false}
           onExportToBackend={onExportToBackend}
+          renderCustomFooter={renderFooter}
         />
         {this.state.showStats && (
           <Stats
@@ -738,6 +739,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
   }
 
   componentDidUpdate(prevProps: ExcalidrawProps, prevState: AppState) {
+    if (prevProps.langCode !== this.props.langCode) {
+      this.updateLanguage();
+    }
+
     if (
       prevProps.width !== this.props.width ||
       prevProps.height !== this.props.height ||
@@ -3849,6 +3854,14 @@ class App extends React.Component<ExcalidrawProps, AppState> {
       offsetTop: typeof offsets?.offsetTop === "number" ? offsets.offsetTop : 0,
     };
   }
+
+  private async updateLanguage() {
+    const currentLang =
+      languages.find((lang) => lang.code === this.props.langCode) ||
+      defaultLang;
+    await setLanguage(currentLang);
+    this.setAppState({});
+  }
 }
 
 // -----------------------------------------------------------------------------

src/components/InitializeApp.tsx

@@ -1,18 +1,29 @@
 import React from "react";
 
 import { LoadingMessage } from "./LoadingMessage";
-import { setLanguageFirstTime } from "../i18n";
+import {
+  defaultLang,
+  Language,
+  languages,
+  setLanguageFirstTime,
+} from "../i18n";
 
-export class InitializeApp extends React.Component<
-  any,
-  { isLoading: boolean }
-> {
+interface Props {
+  langCode: Language["code"];
+}
+interface State {
+  isLoading: boolean;
+}
+export class InitializeApp extends React.Component<Props, State> {
   public state: { isLoading: boolean } = {
     isLoading: true,
   };
 
   async componentDidMount() {
-    await setLanguageFirstTime();
+    const currentLang =
+      languages.find((lang) => lang.code === this.props.langCode) ||
+      defaultLang;
+    await setLanguageFirstTime(currentLang);
     this.setState({
       isLoading: false,
     });

src/components/LanguageList.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import clsx from "clsx";
-import * as i18n from "../i18n";
-
-export const LanguageList = ({
-  onChange,
-  languages = i18n.languages,
-  currentLanguage = i18n.getLanguage().lng,
-  floating,
-}: {
-  languages?: { lng: string; label: string }[];
-  onChange: (value: string) => void;
-  currentLanguage?: string;
-  floating?: boolean;
-}) => (
-  <React.Fragment>
-    <select
-      className={clsx("dropdown-select dropdown-select__language", {
-        "dropdown-select--floating": floating,
-      })}
-      onChange={({ target }) => onChange(target.value)}
-      value={currentLanguage}
-      aria-label={i18n.t("buttons.selectLanguage")}
-    >
-      {languages.map((language) => (
-        <option key={language.lng} value={language.lng}>
-          {language.label}
-        </option>
-      ))}
-    </select>
-  </React.Fragment>
-);

src/components/LayerUI.tsx

@@ -19,8 +19,7 @@ import { FixedSideContainer } from "./FixedSideContainer";
 import { UserList } from "./UserList";
 import { LockIcon } from "./LockIcon";
 import { ExportDialog, ExportCB } from "./ExportDialog";
-import { LanguageList } from "./LanguageList";
-import { t, languages, setLanguage } from "../i18n";
+import { Language, t } from "../i18n";
 import { HintViewer } from "./HintViewer";
 import useIsMobile from "../is-mobile";
 
@@ -64,13 +63,14 @@ interface LayerUIProps {
   onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
   zenModeEnabled: boolean;
   toggleZenMode: () => void;
-  lng: string;
+  langCode: Language["code"];
   isCollaborating: boolean;
   onExportToBackend?: (
     exportedElements: readonly NonDeletedExcalidrawElement[],
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
+  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
 }
 
 const useOnClickOutside = (
@@ -316,6 +316,7 @@ const LayerUI = ({
   toggleZenMode,
   isCollaborating,
   onExportToBackend,
+  renderCustomFooter,
 }: LayerUIProps) => {
   const isMobile = useIsMobile();
 
@@ -551,14 +552,7 @@ const LayerUI = ({
           "transition-right disable-pointerEvents": zenModeEnabled,
         })}
       >
-        <LanguageList
-          onChange={async (lng) => {
-            await setLanguage(lng);
-            setAppState({});
-          }}
-          languages={languages}
-          floating
-        />
+        {renderCustomFooter?.(false)}
         {actionManager.renderAction("toggleShortcuts")}
       </div>
       <button
@@ -628,6 +622,7 @@ const LayerUI = ({
         onLockToggle={onLockToggle}
         canvas={canvas}
         isCollaborating={isCollaborating}
+        renderCustomFooter={renderCustomFooter}
       />
     </>
   ) : (
@@ -665,9 +660,8 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {
   const nextAppState = getNecessaryObj(next.appState);
 
   const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
-
   return (
-    prev.lng === next.lng &&
+    prev.langCode === next.langCode &&
     prev.elements === next.elements &&
     keys.every((key) => prevAppState[key] === nextAppState[key])
   );

src/components/MobileMenu.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import { AppState } from "../types";
 import { ActionManager } from "../actions/manager";
-import { t, setLanguage } from "../i18n";
+import { t } from "../i18n";
 import Stack from "./Stack";
-import { LanguageList } from "./LanguageList";
 import { showSelectedShapeActions } from "../element";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { FixedSideContainer } from "./FixedSideContainer";
@@ -30,6 +29,7 @@ type MobileMenuProps = {
   onLockToggle: () => void;
   canvas: HTMLCanvasElement | null;
   isCollaborating: boolean;
+  renderCustomFooter?: (isMobile: boolean) => JSX.Element;
 };
 
 export const MobileMenu = ({
@@ -43,6 +43,7 @@ export const MobileMenu = ({
   onLockToggle,
   canvas,
   isCollaborating,
+  renderCustomFooter,
 }: MobileMenuProps) => (
   <>
     <FixedSideContainer side="top">
@@ -102,15 +103,7 @@ export const MobileMenu = ({
                   appState={appState}
                   setAppState={setAppState}
                 />
-                <fieldset>
-                  <legend>{t("labels.language")}</legend>
-                  <LanguageList
-                    onChange={async (lng) => {
-                      await setLanguage(lng);
-                      setAppState({});
-                    }}
-                  />
-                </fieldset>
+                {renderCustomFooter?.(true)}
                 <fieldset>
                   <legend>{t("labels.collaborators")}</legend>
                   <UserList mobile>