[docs] Persist copied state indefinitely or until the user moves thei…

…r cursor (mui#26336)
cyrke · May 24, 2021 · e983df5 · e983df5
1 parent 6a58eed
commit e983df5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 45 deletions.
diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -30,7 +30,7 @@ import synonyms from './synonyms';
 if (process.env.NODE_ENV !== 'production') {
   Object.keys(synonyms).forEach((icon) => {
     if (!mui[icon]) {
-      throw new Error(`The icon ${icon} no longer exists.`);
+      console.warn(`The icon ${icon} no longer exists. Remove it from \`synonyms\``);
     }
   });
 }
@@ -96,7 +96,7 @@ function selectNode(node) {
   selection.addRange(range);
 }
 
-let Icons = (props) => {
+const Icons = React.memo(function Icons(props) {
   const { icons, classes, handleOpenClick } = props;
 
   const handleIconClick = (icon) => () => {
@@ -144,14 +144,13 @@ let Icons = (props) => {
       })}
     </div>
   );
-};
+});
 
 Icons.propTypes = {
   classes: PropTypes.object.isRequired,
   handleOpenClick: PropTypes.func.isRequired,
   icons: PropTypes.array.isRequired,
 };
-Icons = React.memo(Icons);
 
 const useDialogStyles = makeStyles(
   (theme) => ({
@@ -230,40 +229,20 @@ const useDialogStyles = makeStyles(
   { defaultTheme },
 );
 
-let DialogDetails = (props) => {
+const DialogDetails = React.memo(function DialogDetails(props) {
   const classes = useDialogStyles();
   const { open, selectedIcon, handleClose } = props;
 
   const t = useTranslate();
   const [copied1, setCopied1] = React.useState(false);
-  const timeout1 = React.useRef();
   const [copied2, setCopied2] = React.useState(false);
-  const timeout2 = React.useRef();
 
   const handleClick = (tooltip) => async (event) => {
-    try {
-      await copy(event.currentTarget.textContent);
-      const setOpen = tooltip === 1 ? setCopied1 : setCopied2;
-      const timeout = tooltip === 1 ? timeout1 : timeout2;
-
-      setOpen(true);
-      clearTimeout(timeout.current);
-      timeout.current = setTimeout(() => {
-        setOpen(false);
-      }, 2000);
-    } finally {
-      // Ok
-    }
-  };
+    await copy(event.currentTarget.textContent);
+    const setCopied = tooltip === 1 ? setCopied1 : setCopied2;
 
-  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);
-    };
-  }, []);
+    setCopied(true);
+  };
 
   return (
     <Dialog
@@ -279,6 +258,9 @@ let DialogDetails = (props) => {
             <Tooltip
               placement="right"
               title={copied1 ? t('copied') : t('clickToCopy')}
+              TransitionProps={{
+                onExited: () => setCopied1(false),
+              }}
             >
               <Typography
                 component="h2"
@@ -291,7 +273,11 @@ let DialogDetails = (props) => {
               </Typography>
             </Tooltip>
           </DialogTitle>
-          <Tooltip placement="top" title={copied2 ? t('copied') : t('clickToCopy')}>
+          <Tooltip
+            placement="top"
+            title={copied2 ? t('copied') : t('clickToCopy')}
+            TransitionProps={{ onExited: () => setCopied2(false) }}
+          >
             <HighlightedCode
               className={classes.markdown}
               onClick={handleClick(2)}
@@ -380,14 +366,13 @@ let DialogDetails = (props) => {
       )}
     </Dialog>
   );
-};
+});
 
 DialogDetails.propTypes = {
   handleClose: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
   selectedIcon: PropTypes.object,
 };
-DialogDetails = React.memo(DialogDetails);
 
 const useStyles = makeStyles(
   (theme) => ({
@@ -507,21 +492,9 @@ export default function SearchIcons() {
     setOpen(false);
   }, []);
 
-  const isMounted = React.useRef(false);
-  React.useEffect(() => {
-    isMounted.current = true;
-    return () => {
-      isMounted.current = false;
-    };
-  }, []);
-
   const handleChange = React.useMemo(
     () =>
       debounce((value) => {
-        if (!isMounted.current) {
-          return;
-        }
-
         if (value === '') {
           setKeys(null);
         } else {
@@ -543,6 +516,12 @@ export default function SearchIcons() {
     [],
   );
 
+  React.useEffect(() => {
+    return () => {
+      handleChange.cancel();
+    };
+  }, [handleChange]);
+
   const icons = React.useMemo(
     () =>
       (keys === null ? allIcons : keys.map((key) => allIconsMap[key])).filter(

diff --git a/docs/src/pages/components/material-icons/synonyms.js b/docs/src/pages/components/material-icons/synonyms.js
@@ -213,7 +213,6 @@ const synonyms = {
   Duo: 'call chat conference device video',
   Dvr: 'laptop monitor',
   DynamicFeed: 'live refresh update',
-  Eco: 'environment green leaf',
   EditLocation: 'gps map pin write',
   Eject: 'arrow player remove triangle up',
   Elderly: 'old',