smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: render footer as a component instead of render prop (#5970)

Browse source 
* feat: render footer as a component instead of render prop

* Export FooterCenter as footer

* remove useDevice export

* revert some changes

* remove

* add spec

* update specs

* parse children into a dictionary

* factor app footer components into a single file

* Add docs

* split app footer components

Co-authored-by: dwelle <luzar.david@gmail.com>
This commit is contained in:
Aakansha Doshi 2022-12-21 14:29:06 +05:30 • committed by GitHub
parent d2e371cdf0
commit b704705ed8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 232 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/excalidraw-app/index.tsx
View file

@ -7,7 +7,6 @@ import { ErrorDialog } from "../components/ErrorDialog";
import { TopErrorBoundary } from "../components/TopErrorBoundary";
import {
APP_NAME,
COOKIES,
EVENT,
THEME,
TITLE_TIMEOUT,
@ -22,7 +21,7 @@ import {
} from "../element/types";
import { useCallbackRefState } from "../hooks/useCallbackRefState";
import { t } from "../i18n";
import { Excalidraw, defaultLang } from "../packages/excalidraw/index";
import { Excalidraw, defaultLang, Footer } from "../packages/excalidraw/index";
import {
AppState,
LibraryItems,
@ -50,7 +49,6 @@ import Collab, {
collabDialogShownAtom,
isCollaboratingAtom,
} from "./collab/Collab";
import { LanguageList } from "./components/LanguageList";
import {
exportToBackend,
getCollaborationLinkData,
@ -79,15 +77,12 @@ import { atom, Provider, useAtom } from "jotai";
import { jotaiStore, useAtomWithInitialValue } from "../jotai";
import { reconcileElements } from "./collab/reconciliation";
import { parseLibraryTokensFromUrl, useHandleLibrary } from "../data/library";
import EncryptedIcon from "../components/EncryptedIcon";
import { EncryptedIcon } from "./components/EncryptedIcon";
import { ExcalidrawPlusAppLink } from "./components/ExcalidrawPlusAppLink";
polyfill();
window.EXCALIDRAW_THROTTLE_RENDER = true;
const isExcalidrawPlusSignedUser = document.cookie.includes(
COOKIES.AUTH_STATE_COOKIE,
);
const languageDetector = new LanguageDetector();
languageDetector.init({
languageUtils: {},
@ -577,41 +572,6 @@ const ExcalidrawWrapper = () => {
}
};
const renderFooter = (isMobile: boolean) => {
const renderLanguageList = () => <LanguageList />;
if (isMobile) {
return (
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<div style={{ marginBottom: ".5rem", fontSize: "0.75rem" }}>
{t("labels.language")}
</div>
<div style={{ padding: "0 0.625rem" }}>{renderLanguageList()}</div>
</div>
);
}
return (
<div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
{isExcalidrawPlusSignedUser && (
<a
href={`${process.env.REACT_APP_PLUS_APP}?utm_source=excalidraw&utm_medium=app&utm_content=signedInUserRedirectButton#excalidraw-redirect`}
target="_blank"
rel="noreferrer"
className="plus-button"
>
Go to Excalidraw+
</a>
)}
<EncryptedIcon />
</div>
);
};
const renderCustomStats = (
elements: readonly NonDeletedExcalidrawElement[],
appState: AppState,
@ -672,7 +632,6 @@ const ExcalidrawWrapper = () => {
},
},
}}
renderFooter={renderFooter}
langCode={langCode}
renderCustomStats={renderCustomStats}
detectScroll={false}
@ -680,7 +639,14 @@ const ExcalidrawWrapper = () => {
onLibraryChange={onLibraryChange}
autoFocus={true}
theme={theme}
/>
>
<Footer>
<div style={{ display: "flex", gap: ".5rem", alignItems: "center" }}>
<ExcalidrawPlusAppLink />
<EncryptedIcon />
</div>
</Footer>
</Excalidraw>
{excalidrawAPI && <Collab excalidrawAPI={excalidrawAPI} />}
{errorMessage && (
<ErrorDialog