sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reuse common ui dialogs and message for mobile and LayerUI (#5611)

Browse Source 
* refactor: Move common UI dialogs to component

* refactor

* fix
This commit is contained in:
Aakansha Doshi 2022-08-26 11:46:34 +05:30 committed by GitHub
parent 43b13d8e3a
commit 2b4462c941
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 66 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
src/components/LayerUI.tsx
View File

@ -381,7 +381,7 @@ const LayerUI = ({
); );
}; };
const dialogs = ( return (
<> <>
{appState.isLoading && <LoadingMessage delay={250} />} {appState.isLoading && <LoadingMessage delay={250} />}
{appState.errorMessage && ( {appState.errorMessage && (
@ -409,82 +409,77 @@ const LayerUI = ({
} }
/> />
)} )}
</> {device.isMobile && (
); <MobileMenu
return device.isMobile ? (
<>
{dialogs}
<MobileMenu
appState={appState}
elements={elements}
actionManager={actionManager}
libraryMenu={libraryMenu}
renderJSONExportDialog={renderJSONExportDialog}
renderImageExportDialog={renderImageExportDialog}
setAppState={setAppState}
onCollabButtonClick={onCollabButtonClick}
onLockToggle={() => onLockToggle()}
onPenModeToggle={onPenModeToggle}
canvas={canvas}
isCollaborating={isCollaborating}
renderCustomFooter={renderCustomFooter}
showThemeBtn={showThemeBtn}
onImageAction={onImageAction}
renderTopRightUI={renderTopRightUI}
renderCustomStats={renderCustomStats}
/>
</>
) : (
<>
<div
className={clsx("layer-ui__wrapper", {
"disable-pointerEvents":
appState.draggingElement ||
appState.resizingElement ||
(appState.editingElement &&
!isTextElement(appState.editingElement)),
})}
style={
appState.isLibraryOpen &&
appState.isLibraryMenuDocked &&
device.canDeviceFitSidebar
? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
: {}
}
>
{dialogs}
{renderFixedSideContainer()}
<Footer
appState={appState} appState={appState}
elements={elements}
actionManager={actionManager} actionManager={actionManager}
libraryMenu={libraryMenu}
renderJSONExportDialog={renderJSONExportDialog}
renderImageExportDialog={renderImageExportDialog}
setAppState={setAppState}
onCollabButtonClick={onCollabButtonClick}
onLockToggle={() => onLockToggle()}
onPenModeToggle={onPenModeToggle}
canvas={canvas}
isCollaborating={isCollaborating}
renderCustomFooter={renderCustomFooter} renderCustomFooter={renderCustomFooter}
showExitZenModeBtn={showExitZenModeBtn} showThemeBtn={showThemeBtn}
onImageAction={onImageAction}
renderTopRightUI={renderTopRightUI}
renderCustomStats={renderCustomStats}
/> />
{appState.showStats && ( )}
<Stats
{!device.isMobile && (
<div
className={clsx("layer-ui__wrapper", {
"disable-pointerEvents":
appState.draggingElement ||
appState.resizingElement ||
(appState.editingElement &&
!isTextElement(appState.editingElement)),
})}
style={
appState.isLibraryOpen &&
appState.isLibraryMenuDocked &&
device.canDeviceFitSidebar
? { width: `calc(100% - ${LIBRARY_SIDEBAR_WIDTH}px)` }
: {}
}
>
{renderFixedSideContainer()}
<Footer
appState={appState} appState={appState}
setAppState={setAppState} actionManager={actionManager}
elements={elements} renderCustomFooter={renderCustomFooter}
onClose={() => { showExitZenModeBtn={showExitZenModeBtn}
actionManager.executeAction(actionToggleStats);
}}
renderCustomStats={renderCustomStats}
/> />
)} {appState.showStats && (
{appState.scrolledOutside && ( <Stats
<button appState={appState}
className="scroll-back-to-content" setAppState={setAppState}
onClick={() => { elements={elements}
setAppState({ onClose={() => {
...calculateScrollCenter(elements, appState, canvas), actionManager.executeAction(actionToggleStats);
}); }}
}} renderCustomStats={renderCustomStats}
> />
{t("buttons.scrollBackToContent")} )}
</button> {appState.scrolledOutside && (
)} <button
</div> className="scroll-back-to-content"
onClick={() => {
setAppState({
...calculateScrollCenter(elements, appState, canvas),
});
}}
>
{t("buttons.scrollBackToContent")}
</button>
)}
</div>
)}
{appState.isLibraryOpen && ( {appState.isLibraryOpen && (
<div className="layer-ui__sidebar">{libraryMenu}</div> <div className="layer-ui__sidebar">{libraryMenu}</div>
)} )}