Skip to content

Commit

Permalink
[docs][base] Move styles to the bottom of demos code for Snackbar (#…
Browse files Browse the repository at this point in the history 
…36719)

Co-authored-by: Michał Dudak <michal@dudak.me>
  • Loading branch information
@varunmulay22 @michaldudak
varunmulay22 and michaldudak committed Apr 28, 2023
1 parent cad1c7b commit 05bce52
Show file tree
Hide file tree
Showing 6 changed files with 268 additions and 268 deletions.
152 changes: 76 additions & 76 deletions docs/data/base/components/snackbar/TransitionComponentSnackbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,82 @@ import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
import CloseIcon from '@mui/icons-material/Close';
import Snackbar from '@mui/base/Snackbar';

export default function TransitionComponentSnackbar() {
const [open, setOpen] = React.useState(false);
const [exited, setExited] = React.useState(true);
const nodeRef = React.useRef(null);

const handleClose = (_, reason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

const handleOnEnter = () => {
setExited(false);
};

const handleOnExited = () => {
setExited(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar
autoHideDuration={5000}
open={open}
onClose={handleClose}
exited={exited}
>
<Transition
timeout={{ enter: 400, exit: 400 }}
in={open}
appear
unmountOnExit
onEnter={handleOnEnter}
onExited={handleOnExited}
nodeRef={nodeRef}
>
{(status) => (
<SnackbarContent
style={{
transform: positioningStyles[status],
transition: 'transform 300ms ease',
}}
ref={nodeRef}
>
<CheckRoundedIcon
sx={{
flexShrink: 0,
marginRight: '0.75rem',
width: '1.25rem',
height: '1.5rem',
}}
/>
<div className="snackbar-message">
<div className="snackbar-title">Notifications sent</div>
<div className="snackbar-description">
All your notifications were sent to the desired address.
</div>
</div>
<CloseIcon onClick={handleClose} className="snackbar-close-icon" />
</SnackbarContent>
)}
</Transition>
</StyledSnackbar>
</React.Fragment>
);
}

const blue = {
50: '#F0F7FF',
100: '#DAECFF',
Expand Down Expand Up @@ -85,79 +161,3 @@ const positioningStyles = {
exited: 'translateX(500px)',
unmounted: 'translateX(500px)',
};

export default function TransitionComponentSnackbar() {
const [open, setOpen] = React.useState(false);
const [exited, setExited] = React.useState(true);
const nodeRef = React.useRef(null);

const handleClose = (_, reason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

const handleOnEnter = () => {
setExited(false);
};

const handleOnExited = () => {
setExited(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar
autoHideDuration={5000}
open={open}
onClose={handleClose}
exited={exited}
>
<Transition
timeout={{ enter: 400, exit: 400 }}
in={open}
appear
unmountOnExit
onEnter={handleOnEnter}
onExited={handleOnExited}
nodeRef={nodeRef}
>
{(status) => (
<SnackbarContent
style={{
transform: positioningStyles[status],
transition: 'transform 300ms ease',
}}
ref={nodeRef}
>
<CheckRoundedIcon
sx={{
flexShrink: 0,
marginRight: '0.75rem',
width: '1.25rem',
height: '1.5rem',
}}
/>
<div className="snackbar-message">
<div className="snackbar-title">Notifications sent</div>
<div className="snackbar-description">
All your notifications were sent to the desired address.
</div>
</div>
<CloseIcon onClick={handleClose} className="snackbar-close-icon" />
</SnackbarContent>
)}
</Transition>
</StyledSnackbar>
</React.Fragment>
);
}
152 changes: 76 additions & 76 deletions docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,82 @@ import CloseIcon from '@mui/icons-material/Close';
import Snackbar from '@mui/base/Snackbar';
import { SnackbarCloseReason } from '@mui/base/useSnackbar';

export default function TransitionComponentSnackbar() {
const [open, setOpen] = React.useState(false);
const [exited, setExited] = React.useState(true);
const nodeRef = React.useRef(null);

const handleClose = (_: any, reason: SnackbarCloseReason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

const handleOnEnter = () => {
setExited(false);
};

const handleOnExited = () => {
setExited(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar
autoHideDuration={5000}
open={open}
onClose={handleClose}
exited={exited}
>
<Transition
timeout={{ enter: 400, exit: 400 }}
in={open}
appear
unmountOnExit
onEnter={handleOnEnter}
onExited={handleOnExited}
nodeRef={nodeRef}
>
{(status) => (
<SnackbarContent
style={{
transform: positioningStyles[status],
transition: 'transform 300ms ease',
}}
ref={nodeRef}
>
<CheckRoundedIcon
sx={{
flexShrink: 0,
marginRight: '0.75rem',
width: '1.25rem',
height: '1.5rem',
}}
/>
<div className="snackbar-message">
<div className="snackbar-title">Notifications sent</div>
<div className="snackbar-description">
All your notifications were sent to the desired address.
</div>
</div>
<CloseIcon onClick={handleClose} className="snackbar-close-icon" />
</SnackbarContent>
)}
</Transition>
</StyledSnackbar>
</React.Fragment>
);
}

const blue = {
50: '#F0F7FF',
100: '#DAECFF',
Expand Down Expand Up @@ -86,79 +162,3 @@ const positioningStyles = {
exited: 'translateX(500px)',
unmounted: 'translateX(500px)',
};

export default function TransitionComponentSnackbar() {
const [open, setOpen] = React.useState(false);
const [exited, setExited] = React.useState(true);
const nodeRef = React.useRef(null);

const handleClose = (_: any, reason: SnackbarCloseReason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

const handleOnEnter = () => {
setExited(false);
};

const handleOnExited = () => {
setExited(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar
autoHideDuration={5000}
open={open}
onClose={handleClose}
exited={exited}
>
<Transition
timeout={{ enter: 400, exit: 400 }}
in={open}
appear
unmountOnExit
onEnter={handleOnEnter}
onExited={handleOnExited}
nodeRef={nodeRef}
>
{(status) => (
<SnackbarContent
style={{
transform: positioningStyles[status],
transition: 'transform 300ms ease',
}}
ref={nodeRef}
>
<CheckRoundedIcon
sx={{
flexShrink: 0,
marginRight: '0.75rem',
width: '1.25rem',
height: '1.5rem',
}}
/>
<div className="snackbar-message">
<div className="snackbar-title">Notifications sent</div>
<div className="snackbar-description">
All your notifications were sent to the desired address.
</div>
</div>
<CloseIcon onClick={handleClose} className="snackbar-close-icon" />
</SnackbarContent>
)}
</Transition>
</StyledSnackbar>
</React.Fragment>
);
}
54 changes: 27 additions & 27 deletions docs/data/base/components/snackbar/UnstyledSnackbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,33 @@ import * as React from 'react';
import { styled, keyframes, css } from '@mui/system';
import Snackbar from '@mui/base/Snackbar';

export default function UnstyledSnackbar() {
const [open, setOpen] = React.useState(false);

const handleClose = (_, reason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
Hello World
</StyledSnackbar>
</React.Fragment>
);
}

const blue = {
50: '#F0F7FF',
400: '#3399FF',
Expand Down Expand Up @@ -48,30 +75,3 @@ const StyledSnackbar = styled(Snackbar)(
transition: transform 0.2s ease-out;
`,
);

export default function UnstyledSnackbar() {
const [open, setOpen] = React.useState(false);

const handleClose = (_, reason) => {
if (reason === 'clickaway') {
return;
}

setOpen(false);
};

const handleClick = () => {
setOpen(true);
};

return (
<React.Fragment>
<button type="button" onClick={handleClick}>
Open snackbar
</button>
<StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
Hello World
</StyledSnackbar>
</React.Fragment>
);
}
Loading

0 comments on commit 05bce52

Please sign in to comment.