Skip to content

Commit

Permalink
[docs] Improve the demos copy experience (#19291)
Browse files Browse the repository at this point in the history
  • Loading branch information
@theswerd @oliviertassinari
theswerd authored and oliviertassinari committed Jan 20, 2020
1 parent 80d9d7c commit d430e80
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 25 deletions.
70 changes: 45 additions & 25 deletions docs/src/modules/components/Demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ import Collapse from '@material-ui/core/Collapse';
import NoSsr from '@material-ui/core/NoSsr';
import EditIcon from '@material-ui/icons/Edit';
import CodeIcon from '@material-ui/icons/Code';
import GitHubIcon from '@material-ui/icons/GitHub';
import FileCopyIcon from '@material-ui/icons/FileCopy';
import Snackbar from '@material-ui/core/Snackbar';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import MoreVertIcon from '@material-ui/icons/MoreVert';
Expand Down Expand Up @@ -168,6 +169,13 @@ function Demo(props) {
setDemoHovered(event.type === 'mouseenter');
};

const [snackbarOpen, setSnackbarOpen] = React.useState(false);
const [snackbarMessage, setSnackbarMessage] = React.useState(undefined);

const handleSnackbarClose = () => {
setSnackbarOpen(false);
};

const handleCodeLanguageClick = (event, clickedCodeVariant) => {
if (codeVariant !== clickedCodeVariant) {
dispatch({
Expand All @@ -179,7 +187,7 @@ function Demo(props) {
}
};

const handleClickCodeSandbox = () => {
const handleCodeSandboxClick = () => {
const demoConfig = getDemoConfig(demoData);
const parameters = compress({
files: {
Expand Down Expand Up @@ -214,23 +222,25 @@ function Demo(props) {
};

const [anchorEl, setAnchorEl] = React.useState(null);
const handleClickMore = event => {
const handleMoreClick = event => {
setAnchorEl(event.currentTarget);
};

const handleCloseMore = () => {
const handleMoreClose = () => {
setAnchorEl(null);
};

const handleClickCopy = async () => {
const handleCopyClick = async () => {
try {
await copy(demoData.raw);
setSnackbarMessage(t('copiedSource'));
setSnackbarOpen(true);
} finally {
handleCloseMore();
handleMoreClose();
}
};

const handleClickStackBlitz = () => {
const handleStackBlitzClick = () => {
const demoConfig = getDemoConfig(demoData);
const form = document.createElement('form');
form.method = 'POST';
Expand All @@ -248,7 +258,7 @@ function Demo(props) {
document.body.appendChild(form);
form.submit();
document.body.removeChild(form);
handleCloseMore();
handleMoreClose();
};

const showSourceHint = demoHovered && !sourceHintSeen;
Expand All @@ -273,8 +283,10 @@ function Demo(props) {
const createHandleCodeSourceLink = anchor => async () => {
try {
await copy(`${window.location.href.split('#')[0]}#${anchor}`);
setSnackbarMessage(t('copiedSourceLink'));
setSnackbarOpen(true);
} finally {
handleCloseMore();
handleMoreClose();
}
};

Expand All @@ -287,7 +299,7 @@ function Demo(props) {
}
}, [demoName]);

const handleClickCodeOpen = () => {
const handleCodeOpenClick = () => {
document.cookie = `sourceHintSeen=true;path=/;max-age=31536000`;
setCodeOpen(open => !open);
setSourceHintSeen(setSourceHintSeen(true));
Expand Down Expand Up @@ -355,7 +367,7 @@ function Demo(props) {
data-ga-event-category="demo"
data-ga-event-label={demoOptions.demo}
data-ga-event-action="expand"
onClick={handleClickCodeOpen}
onClick={handleCodeOpenClick}
color={demoHovered ? 'primary' : 'default'}
>
<CodeIcon fontSize="small" />
Expand All @@ -372,31 +384,29 @@ function Demo(props) {
data-ga-event-category="demo"
data-ga-event-label={demoOptions.demo}
data-ga-event-action="codesandbox"
onClick={handleClickCodeSandbox}
onClick={handleCodeSandboxClick}
>
<EditIcon fontSize="small" />
</IconButton>
</Tooltip>
)}
<Tooltip
classes={{ popper: classes.tooltip }}
title={t('viewGitHub')}
title={t('copySource')}
placement="top"
>
<IconButton
aria-label={t('viewGitHub')}
aria-label={t('copySource')}
data-ga-event-category="demo"
data-ga-event-label={demoOptions.demo}
data-ga-event-action="github"
href={demoData.githubLocation}
target="_blank"
rel="noopener nofollow"
data-ga-event-action="copy"
onClick={handleCopyClick}
>
<GitHubIcon fontSize="small" />
<FileCopyIcon fontSize="small" />
</IconButton>
</Tooltip>
<IconButton
onClick={handleClickMore}
onClick={handleMoreClick}
aria-owns={anchorEl ? 'demo-menu-more' : undefined}
aria-haspopup="true"
aria-label={t('seeMore')}
Expand All @@ -407,7 +417,7 @@ function Demo(props) {
id="demo-menu-more"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={handleCloseMore}
onClose={handleMoreClose}
getContentAnchorEl={null}
anchorOrigin={{
vertical: 'top',
Expand All @@ -421,17 +431,21 @@ function Demo(props) {
<MenuItem
data-ga-event-category="demo"
data-ga-event-label={demoOptions.demo}
data-ga-event-action="copy"
onClick={handleClickCopy}
data-ga-event-action="github"
component="a"
href={demoData.githubLocation}
target="_blank"
rel="noopener nofollow"
onClick={handleMoreClose}
>
{t('copySource')}
{t('viewGitHub')}
</MenuItem>
{demoOptions.hideEditButton ? null : (
<MenuItem
data-ga-event-category="demo"
data-ga-event-label={demoOptions.demo}
data-ga-event-action="stackblitz"
onClick={handleClickStackBlitz}
onClick={handleStackBlitzClick}
>
{t('stackblitz')}
</MenuItem>
Expand Down Expand Up @@ -463,6 +477,12 @@ function Demo(props) {
text={`\`\`\`${demoData.sourceLanguage}\n${codeOpen ? demoData.raw : jsx}\n\`\`\``}
/>
</Collapse>
<Snackbar
open={snackbarOpen}
autoHideDuration={3000}
onClose={handleSnackbarClose}
message={snackbarMessage}
/>
</div>
);
}
Expand Down
2 changes: 2 additions & 0 deletions docs/translations/translations.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,10 @@
"codesandbox": "Edit in CodeSandbox",
"seeMore": "See more",
"copySource": "Copy the source",
"copiedSource": "The source code has been copied.",
"copySourceLinkJS": "Copy link to JavaScript source",
"copySourceLinkTS": "Copy link to TypeScript source",
"copiedSourceLink": "Link to the source code has been copied.",
"stackblitz": "Edit in StackBlitz (JS only)",
"headTitle": "Material-UI: A popular React UI framework",
"emojiLove": "Love",
Expand Down

2 comments on commit d430e80

@theswerd
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oliviertassinari How long does it take for changes to show up on the website?

@oliviertassinari
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It will be live with the next release.

Please sign in to comment.