Add content menu for smaller screens

Author: rvsia

packages/react-renderer-demo/src/helpers/list-of-contents-select.js

@@ -0,0 +1,105 @@
+import React, { useState, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { makeStyles } from '@material-ui/core/styles';
+import { useRouter } from 'next/router';
+
+import Button from '@material-ui/core/Button';
+import ClickAwayListener from '@material-ui/core/ClickAwayListener';
+import Grow from '@material-ui/core/Grow';
+import Paper from '@material-ui/core/Paper';
+import Popper from '@material-ui/core/Popper';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@material-ui/core/MenuList';
+
+import Grid from '@material-ui/core/Grid';
+import Hidden from '@material-ui/core/Hidden';
+
+import { headerToId } from './list-of-contents';
+
+const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
+
+const itemStyles = makeStyles(() => ({
+  a: {
+    textDecoration: 'none',
+    color: 'inherit'
+  }
+}));
+
+const Item = ({ text, setOpen }) => {
+  const router = useRouter();
+  const labelText = text.replace(/#/g, '');
+  const styles = itemStyles();
+
+  return (
+    <MenuItem onClick={() => setOpen(false)} component="a" className={styles.a} href={`${router.pathname}#${headerToId(text)}`} title={labelText}>
+      {labelText}
+    </MenuItem>
+  );
+};
+
+Item.propTypes = {
+  text: PropTypes.string.isRequired,
+  setOpen: PropTypes.func.isRequired
+};
+
+const contentStyles = makeStyles(() => ({
+  button: {
+    paddingLeft: 0,
+    marginTop: '-24px'
+  }
+}));
+
+const ListOfContents = ({ file }) => {
+  const [open, setOpen] = useState(false);
+  const styles = contentStyles();
+  const anchorRef = useRef(null);
+
+  const handleListKeyDown = (event) => {
+    if (event.key === 'Tab') {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+
+  const text = reqSource(`./${file}.md`).default;
+
+  const regex = /^#+ .*/gm;
+  const found = text.match(regex) || [];
+
+  return (
+    <Grid item xs={12} md={false}>
+      <Hidden implementation="css" mdUp>
+        <Button
+          ref={anchorRef}
+          className={styles.button}
+          aria-controls={open ? 'menu-list-grow' : undefined}
+          aria-haspopup="true"
+          onClick={() => setOpen((prevOpen) => !prevOpen)}
+        >
+          Show content
+        </Button>
+        <Popper open={open} role={undefined} transition disablePortal anchorEl={anchorRef.current}>
+          {({ TransitionProps }) => (
+            <Grow {...TransitionProps} style={{ transformOrigin: 'center top' }}>
+              <Paper>
+                <ClickAwayListener onClickAway={() => setOpen(false)}>
+                  <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
+                    {found.map((text) => (
+                      <Item key={text} text={text} setOpen={setOpen} />
+                    ))}
+                  </MenuList>
+                </ClickAwayListener>
+              </Paper>
+            </Grow>
+          )}
+        </Popper>
+      </Hidden>
+    </Grid>
+  );
+};
+
+ListOfContents.propTypes = {
+  file: PropTypes.string.isRequired
+};
+
+export default ListOfContents;

packages/react-renderer-demo/src/helpers/list-of-contents.js

@@ -8,6 +8,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import Typography from '@material-ui/core/Typography';
 import { useRouter } from 'next/router';
 import StickyBox from 'react-sticky-box';
+import Hidden from '@material-ui/core/Hidden';
 
 const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
 
@@ -113,24 +114,26 @@ const ListOfContents = ({ file }) => {
   const regex = /^#+ .*/gm;
   const found = text.match(regex) || [];
   return (
-    <StickyBox offsetTop={96} offsetBottom={20}>
-      <div className={classes.fixedContainer}>
-        <Typography className={classes.contentHeader} component="h3">
-          Content
-        </Typography>
-        <List dense>
-          {found.map((text) => (
-            <ListItem
-              onClick={() => setActive(headerToId(text))}
-              className={clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem })}
-              key={text}
-            >
-              <ListItemText className={classes.listItemText} primary={<ListHeader text={text} />} />
-            </ListItem>
-          ))}
-        </List>
-      </div>
-    </StickyBox>
+    <Hidden implementation="css" smDown>
+      <StickyBox offsetTop={96} offsetBottom={20}>
+        <div className={classes.fixedContainer}>
+          <Typography className={classes.contentHeader} component="h3">
+            Content
+          </Typography>
+          <List dense>
+            {found.map((text) => (
+              <ListItem
+                onClick={() => setActive(headerToId(text))}
+                className={clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem })}
+                key={text}
+              >
+                <ListItemText className={classes.listItemText} primary={<ListHeader text={text} />} />
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </StickyBox>
+    </Hidden>
   );
 };
 

packages/react-renderer-demo/src/next.config.js

@@ -63,7 +63,8 @@ module.exports = withBundleAnalyzer(
           '@docs/examples': path.resolve(__dirname, './examples'),
           '@docs/list-of-contents': path.resolve(__dirname, './helpers/list-of-contents'),
           '@docs/code-example': path.resolve(__dirname, './components/code-example'),
-          '@docs/hooks': path.resolve(__dirname, './hooks')
+          '@docs/hooks': path.resolve(__dirname, './hooks'),
+          '@docs/list-of-contents-select': path.resolve(__dirname, './helpers/list-of-contents-select')
         };
 
         config.optimization.minimizer = [

packages/react-renderer-demo/src/pages/mappers/blueprint-component-mapper.md

@@ -1,7 +1,10 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '@docs/list-of-contents';
+import ListOfContentsMobile from '@docs/list-of-contents-select';
 
 <Grid container item>
+
+<ListOfContentsMobile file="mappers/blueprint-component-mapper" />
 <Grid item xs={12} md={10}>
 
 # BlueprintJS

packages/react-renderer-demo/src/pages/mappers/mui-component-mapper.md

@@ -1,7 +1,10 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '@docs/list-of-contents';
+import ListOfContentsMobile from '@docs/list-of-contents-select';
 
 <Grid container item>
+
+<ListOfContentsMobile file="mappers/mui-component-mapper" />
 <Grid item xs={12} md={10}>
 
 # MaterialUI mapper

packages/react-renderer-demo/src/pages/mappers/pf3-component-mapper.md

@@ -1,7 +1,10 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '@docs/list-of-contents';
+import ListOfContentsMobile from '@docs/list-of-contents-select';
 
 <Grid container item>
+
+<ListOfContentsMobile file="mappers/pf3-component-mapper" />
 <Grid item xs={12} md={10}>
 
 # PatternFly 3 mapper

packages/react-renderer-demo/src/pages/mappers/pf4-component-mapper.md

@@ -1,7 +1,10 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '@docs/list-of-contents';
+import ListOfContentsMobile from '@docs/list-of-contents-select';
 
 <Grid container item>
+
+<ListOfContentsMobile file="mappers/pf4-component-mapper" />
 <Grid item xs={12} md={10}>
 
 # PatternFly 4 mapper

packages/react-renderer-demo/src/pages/mappers/suir-component-mapper.md

@@ -1,7 +1,10 @@
 import Grid from '@material-ui/core/Grid'
 import ListOfContents from '@docs/list-of-contents';
+import ListOfContentsMobile from '@docs/list-of-contents-select';
 
 <Grid container item>
+
+<ListOfContentsMobile file="mappers/suir-component-mapper" />
 <Grid item xs={12} md={10}>
 
 # Semantic UI react

packages/react-renderer-demo/src/pages/migration-guide.md

@@ -4,7 +4,11 @@ import Link from '@material-ui/core/Link';
 
 import ListOfContents from '@docs/list-of-contents';
 
+import ListOfContentsMobile from '@docs/list-of-contents-select';
+
 <Grid container item>
+
+<ListOfContentsMobile file="migration-guide" />
 <Grid item xs={12} md={10}>
 
 # Migration guide to version 2

packages/react-renderer-demo/src/pages/renderer/action-mapper.md

@@ -3,7 +3,12 @@ import ListOfContents from '@docs/list-of-contents';
 import CodeExample from '@docs/code-example';
 
 
+import ListOfContentsMobile from '@docs/list-of-contents-select';
+
 <Grid container item>
+
+<ListOfContentsMobile file="renderer/action-mapper" />
+
 <Grid item xs={12} md={10}>
 
 # Action Mapper