005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import * as React from 'react';
|
|
import { Global } from '@emotion/react';
|
|
import { styled } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import { grey } from '@mui/material/colors';
|
|
import Button from '@mui/material/Button';
|
|
import Box from '@mui/material/Box';
|
|
import Skeleton from '@mui/material/Skeleton';
|
|
import Typography from '@mui/material/Typography';
|
|
import SwipeableDrawer from '@mui/material/SwipeableDrawer';
|
|
|
|
const drawerBleeding = 56;
|
|
|
|
interface Props {
|
|
/**
|
|
* Injected by the documentation to work in an iframe.
|
|
* You won't need it on your project.
|
|
*/
|
|
window?: () => Window;
|
|
}
|
|
|
|
const Root = styled('div')(({ theme }) => ({
|
|
height: '100%',
|
|
backgroundColor: grey[100],
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: (theme.vars || theme).palette.background.default,
|
|
}),
|
|
}));
|
|
|
|
const StyledBox = styled('div')(({ theme }) => ({
|
|
backgroundColor: '#fff',
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: grey[800],
|
|
}),
|
|
}));
|
|
|
|
const Puller = styled('div')(({ theme }) => ({
|
|
width: 30,
|
|
height: 6,
|
|
backgroundColor: grey[300],
|
|
borderRadius: 3,
|
|
position: 'absolute',
|
|
top: 8,
|
|
left: 'calc(50% - 15px)',
|
|
...theme.applyStyles('dark', {
|
|
backgroundColor: grey[900],
|
|
}),
|
|
}));
|
|
|
|
export default function SwipeableEdgeDrawer(props: Props) {
|
|
const { window } = props;
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
const toggleDrawer = (newOpen: boolean) => () => {
|
|
setOpen(newOpen);
|
|
};
|
|
|
|
// This is used only for the example
|
|
const container = window !== undefined ? () => window().document.body : undefined;
|
|
|
|
return (
|
|
<Root>
|
|
<CssBaseline />
|
|
<Global
|
|
styles={{
|
|
'.MuiDrawer-root > .MuiPaper-root': {
|
|
height: `calc(50% - ${drawerBleeding}px)`,
|
|
overflow: 'visible',
|
|
},
|
|
}}
|
|
/>
|
|
<Box sx={{ textAlign: 'center', pt: 1 }}>
|
|
<Button onClick={toggleDrawer(true)}>Open</Button>
|
|
</Box>
|
|
<SwipeableDrawer
|
|
container={container}
|
|
anchor="bottom"
|
|
open={open}
|
|
onClose={toggleDrawer(false)}
|
|
onOpen={toggleDrawer(true)}
|
|
swipeAreaWidth={drawerBleeding}
|
|
disableSwipeToOpen={false}
|
|
keepMounted
|
|
>
|
|
<StyledBox
|
|
sx={{
|
|
position: 'absolute',
|
|
top: -drawerBleeding,
|
|
borderTopLeftRadius: 8,
|
|
borderTopRightRadius: 8,
|
|
visibility: 'visible',
|
|
right: 0,
|
|
left: 0,
|
|
}}
|
|
>
|
|
<Puller />
|
|
<Typography sx={{ p: 2, color: 'text.secondary' }}>51 results</Typography>
|
|
</StyledBox>
|
|
<StyledBox sx={{ px: 2, pb: 2, height: '100%', overflow: 'auto' }}>
|
|
<Skeleton variant="rectangular" height="100%" />
|
|
</StyledBox>
|
|
</SwipeableDrawer>
|
|
</Root>
|
|
);
|
|
}
|