feat: render footer as a component instead of render prop

2022-07-13 12:12:20 +05:30 · 2022-07-13 12:12:20 +05:30 · 67bc10f33b
commit 67bc10f33b
parent a7153d9d1d
7 changed files with 107 additions and 99 deletions
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@ -474,12 +474,8 @@ class App extends React.Component<AppProps, AppState> {
      this.scene.getNonDeletedElements(),
      this.state,
    );
-    const {
-      onCollabButtonClick,
-      renderTopRightUI,
-      renderFooter,
-      renderCustomStats,
-    } = this.props;
+    const { onCollabButtonClick, renderTopRightUI, renderCustomStats } =
+      this.props;

    return (
      <div
@ -520,7 +516,6 @@ class App extends React.Component<AppProps, AppState> {
              langCode={getLanguage().code}
              isCollaborating={this.props.isCollaborating}
              renderTopRightUI={renderTopRightUI}
-              renderCustomFooter={renderFooter}
              renderCustomStats={renderCustomStats}
              viewModeEnabled={viewModeEnabled}
              showExitZenModeBtn={
@ -537,7 +532,9 @@ class App extends React.Component<AppProps, AppState> {
              library={this.library}
              id={this.id}
              onImageAction={this.onImageAction}
-            />
+            >
+              {this.props.children}
+            </LayerUI>
            <div className="excalidraw-textEditorContainer" />
            <div className="excalidraw-contextMenuContainer" />
            {selectedElement.length === 1 && this.state.showHyperlinkPopup && (
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@ -58,7 +58,6 @@ interface LayerUIProps {
  langCode: Language["code"];
  isCollaborating: boolean;
  renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
-  renderCustomFooter?: ExcalidrawProps["renderFooter"];
  renderCustomStats?: ExcalidrawProps["renderCustomStats"];
  viewModeEnabled: boolean;
  libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"];
@ -67,6 +66,7 @@ interface LayerUIProps {
  library: Library;
  id: string;
  onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
+  children?: React.ReactNode;
 }
 const LayerUI = ({
  actionManager,
@ -85,7 +85,6 @@ const LayerUI = ({
  toggleZenMode,
  isCollaborating,
  renderTopRightUI,
-  renderCustomFooter,
  renderCustomStats,
  viewModeEnabled,
  libraryReturnUrl,
@ -94,6 +93,7 @@ const LayerUI = ({
  library,
  id,
  onImageAction,
+  children,
 }: LayerUIProps) => {
  const device = useDevice();

@ -454,7 +454,7 @@ const LayerUI = ({
            },
          )}
        >
-          {renderCustomFooter?.(false, appState)}
+          {children}
        </div>
        <div
          className={clsx(
@ -542,7 +542,6 @@ const LayerUI = ({
        onPenModeToggle={onPenModeToggle}
        canvas={canvas}
        isCollaborating={isCollaborating}
-        renderCustomFooter={renderCustomFooter}
        viewModeEnabled={viewModeEnabled}
        showThemeBtn={showThemeBtn}
        onImageAction={onImageAction}
@ -606,7 +605,6 @@ const areEqual = (prev: LayerUIProps, next: LayerUIProps) => {

  const keys = Object.keys(prevAppState) as (keyof Partial<AppState>)[];
  return (
-    prev.renderCustomFooter === next.renderCustomFooter &&
    prev.langCode === next.langCode &&
    prev.elements === next.elements &&
    prev.files === next.files &&
--- a/src/excalidraw-app/components/Footer.tsx
+++ b/src/excalidraw-app/components/Footer.tsx
@ -0,0 +1,79 @@
+import { isExcalidrawPlusSignedUser, PlusAppLinkJSX, PlusLPLinkJSX } from "..";
+import { shield } from "../../components/icons";
+import { Tooltip } from "../../components/Tooltip";
+import { t } from "../../i18n";
+import { languages } from "../../packages/excalidraw/index";
+import { LanguageList } from "./LanguageList";
+
+const EncryptedIcon = () => (
+  <a
+    className="encrypted-icon tooltip"
+    href="https://blog.excalidraw.com/end-to-end-encryption/"
+    target="_blank"
+    rel="noopener noreferrer"
+    aria-label={t("encrypted.link")}
+  >
+    <Tooltip label={t("encrypted.tooltip")} long={true}>
+      {shield}
+    </Tooltip>
+  </a>
+);
+
+const Footer = ({
+  isMobile,
+  langCode,
+  onLangChange,
+}: {
+  isMobile: boolean;
+  langCode: string;
+  onLangChange: (langCode: string) => void;
+}) => {
+  if (isMobile) {
+    const isTinyDevice = window.innerWidth < 362;
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: isTinyDevice ? "column" : "row",
+        }}
+      >
+        <fieldset>
+          <legend>{t("labels.language")}</legend>
+          <LanguageList
+            onChange={onLangChange}
+            languages={languages}
+            currentLangCode={langCode}
+          />
+        </fieldset>
+        {/* FIXME remove after 2021-05-20 */}
+        <div
+          style={{
+            width: "24ch",
+            fontSize: "0.7em",
+            textAlign: "center",
+            marginTop: isTinyDevice ? 16 : undefined,
+            marginLeft: "auto",
+            marginRight: isTinyDevice ? "auto" : undefined,
+            padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px",
+            border: isExcalidrawPlusSignedUser ? undefined : "1px dashed #aaa",
+            borderRadius: 12,
+          }}
+        >
+          {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
+        </div>
+      </div>
+    );
+  }
+  return (
+    <>
+      <EncryptedIcon />
+      <LanguageList
+        onChange={onLangChange}
+        languages={languages}
+        currentLangCode={langCode}
+      />
+    </>
+  );
+};
+
+export default Footer;
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@ -19,11 +19,7 @@ import {
 } from "../element/types";
 import { useCallbackRefState } from "../hooks/useCallbackRefState";
 import { t } from "../i18n";
-import {
-  Excalidraw,
-  defaultLang,
-  languages,
-} from "../packages/excalidraw/index";
+import { Excalidraw, defaultLang } from "../packages/excalidraw/index";
 import {
  AppState,
  LibraryItems,
@ -51,7 +47,6 @@ import Collab, {
  collabDialogShownAtom,
  isCollaboratingAtom,
 } from "./collab/Collab";
-import { LanguageList } from "./components/LanguageList";
 import {
  exportToBackend,
  getCollaborationLinkData,
@ -65,8 +60,6 @@ import {
 } from "./data/localStorage";
 import CustomStats from "./CustomStats";
 import { restore, restoreAppState, RestoredDataState } from "../data/restore";
-import { Tooltip } from "../components/Tooltip";
-import { shield } from "../components/icons";

 import "./index.scss";
 import { ExportToExcalidrawPlus } from "./components/ExportToExcalidrawPlus";
@ -82,8 +75,9 @@ import { Provider, useAtom } from "jotai";
 import { jotaiStore, useAtomWithInitialValue } from "../jotai";
 import { reconcileElements } from "./collab/reconciliation";
 import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
+import Footer from "./components/Footer";

-const isExcalidrawPlusSignedUser = document.cookie.includes(
+export const isExcalidrawPlusSignedUser = document.cookie.includes(
  COOKIES.AUTH_STATE_COOKIE,
 );

@ -197,7 +191,7 @@ const initializeScene = async (opts: {
  return { scene: null, isExternalScene: false };
 };

-const PlusLPLinkJSX = (
+export const PlusLPLinkJSX = (
  <p style={{ direction: "ltr", unicodeBidi: "embed" }}>
    Introducing Excalidraw+
    <br />
@ -211,7 +205,7 @@ const PlusLPLinkJSX = (
  </p>
 );

-const PlusAppLinkJSX = (
+export const PlusAppLinkJSX = (
  <a
    href={`${process.env.REACT_APP_PLUS_APP}/#excalidraw-redirect`}
    target="_blank"
@ -588,73 +582,6 @@ const ExcalidrawWrapper = () => {
    [],
  );

-  const renderFooter = useCallback(
-    (isMobile: boolean) => {
-      const renderEncryptedIcon = () => (
-        <a
-          className="encrypted-icon tooltip"
-          href="https://blog.excalidraw.com/end-to-end-encryption/"
-          target="_blank"
-          rel="noopener noreferrer"
-          aria-label={t("encrypted.link")}
-        >
-          <Tooltip label={t("encrypted.tooltip")} long={true}>
-            {shield}
-          </Tooltip>
-        </a>
-      );
-
-      const renderLanguageList = () => (
-        <LanguageList
-          onChange={(langCode) => setLangCode(langCode)}
-          languages={languages}
-          currentLangCode={langCode}
-        />
-      );
-      if (isMobile) {
-        const isTinyDevice = window.innerWidth < 362;
-        return (
-          <div
-            style={{
-              display: "flex",
-              flexDirection: isTinyDevice ? "column" : "row",
-            }}
-          >
-            <fieldset>
-              <legend>{t("labels.language")}</legend>
-              {renderLanguageList()}
-            </fieldset>
-            {/* FIXME remove after 2021-05-20 */}
-            <div
-              style={{
-                width: "24ch",
-                fontSize: "0.7em",
-                textAlign: "center",
-                marginTop: isTinyDevice ? 16 : undefined,
-                marginLeft: "auto",
-                marginRight: isTinyDevice ? "auto" : undefined,
-                padding: isExcalidrawPlusSignedUser ? undefined : "4px 2px",
-                border: isExcalidrawPlusSignedUser
-                  ? undefined
-                  : "1px dashed #aaa",
-                borderRadius: 12,
-              }}
-            >
-              {isExcalidrawPlusSignedUser ? PlusAppLinkJSX : PlusLPLinkJSX}
-            </div>
-          </div>
-        );
-      }
-      return (
-        <>
-          {renderEncryptedIcon()}
-          {renderLanguageList()}
-        </>
-      );
-    },
-    [langCode],
-  );
-
  const renderCustomStats = () => {
    return (
      <CustomStats
@ -710,14 +637,19 @@ const ExcalidrawWrapper = () => {
          },
        }}
        renderTopRightUI={renderTopRightUI}
-        renderFooter={renderFooter}
        langCode={langCode}
        renderCustomStats={renderCustomStats}
        detectScroll={false}
        handleKeyboardGlobally={true}
        onLibraryChange={onLibraryChange}
        autoFocus={true}
-      />
+      >
+        <Footer
+          isMobile={false}
+          langCode={langCode}
+          onLangChange={(langCode) => setLangCode(langCode)}
+        />
+      </Excalidraw>
      {excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
      {errorMessage && (
        <ErrorDialog
--- a/src/packages/excalidraw/example/App.tsx
+++ b/src/packages/excalidraw/example/App.tsx
@ -654,11 +654,12 @@ export default function App() {
            name="Custom name of drawing"
            UIOptions={{ canvasActions: { loadScene: false } }}
            renderTopRightUI={renderTopRightUI}
-            renderFooter={renderFooter}
            onLinkOpen={onLinkOpen}
            onPointerDown={onPointerDown}
            onScrollChange={rerenderCommentIcons}
-          />
+          >
+            {renderFooter()}
+          </Excalidraw>
          {Object.keys(commentIcons || []).length > 0 && renderCommentIcons()}
          {comment && renderComment()}
        </div>
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@ -21,7 +21,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
    isCollaborating = false,
    onPointerUpdate,
    renderTopRightUI,
-    renderFooter,
    langCode = defaultLang.code,
    viewModeEnabled,
    zenModeEnabled,
@ -39,6 +38,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
    onLinkOpen,
    onPointerDown,
    onScrollChange,
+    children,
  } = props;

  const canvasActions = props.UIOptions?.canvasActions;
@ -86,7 +86,6 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
          isCollaborating={isCollaborating}
          onPointerUpdate={onPointerUpdate}
          renderTopRightUI={renderTopRightUI}
-          renderFooter={renderFooter}
          langCode={langCode}
          viewModeEnabled={viewModeEnabled}
          zenModeEnabled={zenModeEnabled}
@ -105,7 +104,9 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
          onLinkOpen={onLinkOpen}
          onPointerDown={onPointerDown}
          onScrollChange={onScrollChange}
-        />
+        >
+          {children}
+        </App>
      </Provider>
    </InitializeApp>
  );
--- a/src/types.ts
+++ b/src/types.ts
@ -280,7 +280,6 @@ export interface ExcalidrawProps {
    isMobile: boolean,
    appState: AppState,
  ) => JSX.Element | null;
-  renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
  langCode?: Language["code"];
  viewModeEnabled?: boolean;
  zenModeEnabled?: boolean;
@ -312,6 +311,7 @@ export interface ExcalidrawProps {
    pointerDownState: PointerDownState,
  ) => void;
  onScrollChange?: (scrollX: number, scrollY: number) => void;
+  children?: React.ReactNode;
 }

 export type SceneData = {