Shiloh/remnantchat
Shiloh/remnantchat
1
0
Fork 1
Code Issues Pull Requests Packages Projects 4 Releases Wiki Activity

refactor: move app bar to its own component file

Browse Source
This commit is contained in:
Jeremy Kahn 2022-09-16 09:46:11 -05:00
parent 0b15957d93
commit 28e09213d8
2 changed files with 108 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/Shell/Shell.tsx
View File

@ -9,18 +9,10 @@ import {
useState,
} from 'react'
import CssBaseline from '@mui/material/CssBaseline'
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
import { ThemeProvider, createTheme, styled } from '@mui/material/styles'
import Toolbar from '@mui/material/Toolbar'
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import StepIcon from '@mui/material/StepIcon'
import Tooltip from '@mui/material/Tooltip'
import Snackbar from '@mui/material/Snackbar'
import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu'
import LinkIcon from '@mui/icons-material/Link'
import { ShellContext } from 'contexts/ShellContext'
import { SettingsContext } from 'contexts/SettingsContext'
@ -29,6 +21,7 @@ import { AlertOptions } from 'models/shell'
import { Drawer, drawerWidth } from './Drawer'
import { UpgradeDialog } from './UpgradeDialog'
import { DrawerHeader } from './DrawerHeader'
import { ShellAppBar } from './ShellAppBar'
const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
props,
@ -54,27 +47,6 @@ const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
}),
}))
interface AppBarProps extends MuiAppBarProps {
open?: boolean
}
const AppBar = styled(MuiAppBar, {
shouldForwardProp: prop => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}))
export interface ShellProps extends PropsWithChildren {
userPeerId: string
appNeedsUpdate: boolean
@ -182,52 +154,14 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
{alertText}
</Alert>
</Snackbar>
<AppBar position="fixed" open={isDrawerOpen}>
<Toolbar
variant="regular"
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="Open menu"
sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
onClick={handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ marginRight: 'auto' }}
>
{title}
</Typography>
<Tooltip title="Copy current URL">
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="Copy current URL"
sx={{ ml: 'auto' }}
onClick={handleLinkButtonClick}
>
<LinkIcon />
</IconButton>
</Tooltip>
{doShowPeers ? (
<Tooltip title="Number of peers in the room">
<StepIcon icon={numberOfPeers} sx={{ ml: 2 }} />
</Tooltip>
) : null}
</Toolbar>
</AppBar>
<ShellAppBar
doShowPeers={doShowPeers}
handleDrawerOpen={handleDrawerOpen}
handleLinkButtonClick={handleLinkButtonClick}
isDrawerOpen={isDrawerOpen}
numberOfPeers={numberOfPeers}
title={title}
/>
<Drawer
isDrawerOpen={isDrawerOpen}
onDrawerClose={handleDrawerClose}

99
src/components/Shell/ShellAppBar.tsx Normal file
View File

@ -0,0 +1,99 @@
import { styled } from '@mui/material/styles'
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
import Toolbar from '@mui/material/Toolbar'
import Typography from '@mui/material/Typography'
import StepIcon from '@mui/material/StepIcon'
import Tooltip from '@mui/material/Tooltip'
import IconButton from '@mui/material/IconButton'
import MenuIcon from '@mui/icons-material/Menu'
import LinkIcon from '@mui/icons-material/Link'
import { drawerWidth } from './Drawer'
interface AppBarProps extends MuiAppBarProps {
open?: boolean
}
export const AppBar = styled(MuiAppBar, {
shouldForwardProp: prop => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.sharp,
duration: theme.transitions.duration.leavingScreen,
}),
...(open && {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: `${drawerWidth}px`,
transition: theme.transitions.create(['margin', 'width'], {
easing: theme.transitions.easing.easeOut,
duration: theme.transitions.duration.enteringScreen,
}),
}),
}))
interface ShellAppBarProps {
doShowPeers: boolean
handleDrawerOpen: () => void
handleLinkButtonClick: () => Promise<void>
isDrawerOpen: boolean
numberOfPeers: number
title: string
}
export const ShellAppBar = ({
doShowPeers,
handleDrawerOpen,
handleLinkButtonClick,
isDrawerOpen,
numberOfPeers,
title,
}: ShellAppBarProps) => {
return (
<AppBar position="fixed" open={isDrawerOpen}>
<Toolbar
variant="regular"
sx={{
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
}}
>
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="Open menu"
sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
onClick={handleDrawerOpen}
>
<MenuIcon />
</IconButton>
<Typography
variant="h6"
noWrap
component="div"
sx={{ marginRight: 'auto' }}
>
{title}
</Typography>
<Tooltip title="Copy current URL">
<IconButton
size="large"
edge="start"
color="inherit"
aria-label="Copy current URL"
sx={{ ml: 'auto' }}
onClick={handleLinkButtonClick}
>
<LinkIcon />
</IconButton>
</Tooltip>
{doShowPeers ? (
<Tooltip title="Number of peers in the room">
<StepIcon icon={numberOfPeers} sx={{ ml: 2 }} />
</Tooltip>
) : null}
</Toolbar>
</AppBar>
)
}