[docs] Copy icons to clipboard

docs/src/pages/components/material-icons/SearchIcons.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Paper from '@material-ui/core/Paper';
+import copy from 'clipboard-copy';
 import clsx from 'clsx';
 import InputBase from '@material-ui/core/InputBase';
 import Typography from '@material-ui/core/Typography';
@@ -21,6 +22,7 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Radio from '@material-ui/core/Radio';
 import Link from 'docs/src/modules/components/Link';
+import { useTranslate } from 'docs/src/modules/utils/i18n';
 import * as mui from '@material-ui/icons';
 import synonyms from './synonyms';
 
@@ -148,7 +150,26 @@ Icons.propTypes = {
 Icons = React.memo(Icons);
 
 const useDialogStyles = makeStyles((theme) => ({
+  title: {
+    display: 'inline-block',
+    cursor: 'pointer',
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest,
+    }),
+    '&:hover': {
+      backgroundColor: '#96c6fd80',
+    },
+  },
   markdown: {
+    cursor: 'pointer',
+    transition: theme.transitions.create('background-color', {
+      duration: theme.transitions.duration.shortest,
+    }),
+    '&:hover': {
+      '& code': {
+        backgroundColor: '#96c6fd80',
+      },
+    },
     '& pre': {
       borderRadius: 0,
       margin: 0,
@@ -209,10 +230,37 @@ let DialogDetails = (props) => {
   const classes = useDialogStyles();
   const { open, selectedIcon, handleClose } = props;
 
-  const handleClick = (event) => {
-    selectNode(event.currentTarget);
+  const t = useTranslate();
+  const [open1, setOpen1] = React.useState(false);
+  const timeout1 = React.useRef();
+  const [open2, setOpen2] = React.useState(false);
+  const timeout2 = React.useRef();
+
+  const handleClick = (tooltip) => async (event) => {
+    try {
+      await copy(event.currentTarget.textContent);
+      const setOpen = tooltip === 1 ? setOpen1 : setOpen2;
+      const timeout = tooltip === 1 ? timeout1 : timeout2;
+
+      setOpen(true);
+      clearTimeout(timeout.current);
+      timeout.current = setTimeout(() => {
+        setOpen(false);
+      }, 2000);
+    } finally {
+      // Ok
+    }
   };
 
+  React.useEffect(() => {
+    return () => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      clearTimeout(timeout1.current);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      clearTimeout(timeout2.current);
+    };
+  }, []);
+
   return (
     <Dialog
       fullWidth
@@ -223,15 +271,27 @@ let DialogDetails = (props) => {
     >
       {selectedIcon ? (
         <React.Fragment>
-          <DialogTitle id="icon-dialog-title" onClick={handleClick}>
-            {selectedIcon.importName}
+          <DialogTitle disableTypography>
+            <Tooltip placement="right" title={t('copied')} open={open1}>
+              <Typography
+                component="h2"
+                variant="h6"
+                className={classes.title}
+                id="icon-dialog-title"
+                onClick={handleClick(1)}
+              >
+                {selectedIcon.importName}
+              </Typography>
+            </Tooltip>
           </DialogTitle>
-          <HighlightedCode
-            className={classes.markdown}
-            onClick={handleClick}
-            code={`import ${selectedIcon.importName}Icon from '@material-ui/icons/${selectedIcon.importName}';`}
-            language="js"
-          />
+          <Tooltip placement="top" title={t('copied')} open={open2}>
+            <HighlightedCode
+              className={classes.markdown}
+              onClick={handleClick(2)}
+              code={`import ${selectedIcon.importName}Icon from '@material-ui/icons/${selectedIcon.importName}';`}
+              language="js"
+            />
+          </Tooltip>
           <Link
             className={classes.import}
             color="textSecondary"

docs/translations/translations.json

@@ -21,6 +21,7 @@
   "checkoutTitle": "Checkout",
   "close": "Close",
   "codesandbox": "Edit in CodeSandbox",
+  "copied": "Copied",
   "copiedSource": "The source code has been copied to your clipboard.",
   "copiedSourceLink": "Link to the source code has been copied to your clipboard.",
   "copySource": "Copy the source",