Skip to content

Commit c37d044

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #564 from rvsia/addMobileContent
Add mobile friendly table of content
2 parents a745fcd + 40516fd commit c37d044

30 files changed

+241
-19
lines changed

‎packages/react-renderer-demo/src/components/code-editor/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import vsTheme from 'prism-react-renderer/themes/vsDark';
77

88
const useStyles = makeStyles({
99
pre: {
10+
maxWidth: '100vw',
1011
textAlign: 'left',
1112
margin: '1em 0',
1213
padding: '0.5em',

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, { useState, useRef } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import { useRouter } from 'next/router';
5+
6+
import Button from '@material-ui/core/Button';
7+
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
8+
import Grow from '@material-ui/core/Grow';
9+
import Paper from '@material-ui/core/Paper';
10+
import Popper from '@material-ui/core/Popper';
11+
import MenuItem from '@material-ui/core/MenuItem';
12+
import MenuList from '@material-ui/core/MenuList';
13+
14+
import Grid from '@material-ui/core/Grid';
15+
import Hidden from '@material-ui/core/Hidden';
16+
17+
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
18+
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
19+
20+
import { headerToId } from './list-of-contents';
21+
22+
const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
23+
24+
const itemStyles = makeStyles(() => ({
25+
a: {
26+
textDecoration: 'none',
27+
color: 'inherit'
28+
}
29+
}));
30+
31+
const Item = ({ text, setOpen }) => {
32+
const router = useRouter();
33+
const labelText = text.replace(/#/g, '');
34+
const styles = itemStyles();
35+
36+
return (
37+
<MenuItem onClick={() => setOpen(false)} component="a" className={styles.a} href={`${router.pathname}#${headerToId(text)}`} title={labelText}>
38+
{labelText}
39+
</MenuItem>
40+
);
41+
};
42+
43+
Item.propTypes = {
44+
text: PropTypes.string.isRequired,
45+
setOpen: PropTypes.func.isRequired
46+
};
47+
48+
const contentStyles = makeStyles(() => ({
49+
button: {
50+
paddingRight: 0,
51+
marginTop: '-24px'
52+
},
53+
wrapper: {
54+
width: '100%',
55+
display: 'flex',
56+
justifyContent: 'flex-end'
57+
}
58+
}));
59+
60+
const ListOfContents = ({ file }) => {
61+
const [open, setOpen] = useState(false);
62+
const styles = contentStyles();
63+
const anchorRef = useRef(null);
64+
65+
const handleListKeyDown = (event) => {
66+
if (event.key === 'Tab') {
67+
event.preventDefault();
68+
setOpen(false);
69+
}
70+
};
71+
72+
const text = reqSource(`./${file}.md`).default;
73+
74+
const regex = /^#+ .*/gm;
75+
const found = text.match(regex) || [];
76+
77+
return (
78+
<Grid item xs={12} md={false}>
79+
<Hidden implementation="css" mdUp>
80+
<div className={styles.wrapper}>
81+
<ClickAwayListener onClickAway={() => setOpen(false)}>
82+
<div>
83+
<Button
84+
ref={anchorRef}
85+
className={styles.button}
86+
aria-controls={open ? 'menu-list-grow' : undefined}
87+
aria-haspopup="true"
88+
onClick={() => setOpen((prevOpen) => !prevOpen)}
89+
endIcon={!open ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
90+
>
91+
Show content
92+
</Button>
93+
<Popper open={open} role={undefined} transition disablePortal anchorEl={anchorRef.current}>
94+
{({ TransitionProps }) => (
95+
<Grow {...TransitionProps} style={{ transformOrigin: 'center top' }}>
96+
<Paper>
97+
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
98+
{found.map((text) => (
99+
<Item key={text} text={text} setOpen={setOpen} />
100+
))}
101+
</MenuList>
102+
</Paper>
103+
</Grow>
104+
)}
105+
</Popper>
106+
</div>
107+
</ClickAwayListener>
108+
</div>
109+
</Hidden>
110+
</Grid>
111+
);
112+
};
113+
114+
ListOfContents.propTypes = {
115+
file: PropTypes.string.isRequired
116+
};
117+
118+
export default ListOfContents;

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

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import ListItemText from '@material-ui/core/ListItemText';
88
import Typography from '@material-ui/core/Typography';
99
import { useRouter } from 'next/router';
1010
import StickyBox from 'react-sticky-box';
11+
import Hidden from '@material-ui/core/Hidden';
1112

1213
const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
1314

@@ -113,24 +114,26 @@ const ListOfContents = ({ file }) => {
113114
const regex = /^#+ .*/gm;
114115
const found = text.match(regex) || [];
115116
return (
116-
<StickyBox offsetTop={96} offsetBottom={20}>
117-
<div className={classes.fixedContainer}>
118-
<Typography className={classes.contentHeader} component="h3">
119-
Content
120-
</Typography>
121-
<List dense>
122-
{found.map((text) => (
123-
<ListItem
124-
onClick={() => setActive(headerToId(text))}
125-
className={clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem })}
126-
key={text}
127-
>
128-
<ListItemText className={classes.listItemText} primary={<ListHeader text={text} />} />
129-
</ListItem>
130-
))}
131-
</List>
132-
</div>
133-
</StickyBox>
117+
<Hidden implementation="css" smDown>
118+
<StickyBox offsetTop={96} offsetBottom={20}>
119+
<div className={classes.fixedContainer}>
120+
<Typography className={classes.contentHeader} component="h3">
121+
Content
122+
</Typography>
123+
<List dense>
124+
{found.map((text) => (
125+
<ListItem
126+
onClick={() => setActive(headerToId(text))}
127+
className={clsx(classes.listItem, { [classes.listItemActive]: headerToId(text) === activeItem })}
128+
key={text}
129+
>
130+
<ListItemText className={classes.listItemText} primary={<ListHeader text={text} />} />
131+
</ListItem>
132+
))}
133+
</List>
134+
</div>
135+
</StickyBox>
136+
</Hidden>
134137
);
135138
};
136139

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,8 @@ module.exports = withBundleAnalyzer(
6363
'@docs/examples': path.resolve(__dirname, './examples'),
6464
'@docs/list-of-contents': path.resolve(__dirname, './helpers/list-of-contents'),
6565
'@docs/code-example': path.resolve(__dirname, './components/code-example'),
66-
'@docs/hooks': path.resolve(__dirname, './hooks')
66+
'@docs/hooks': path.resolve(__dirname, './hooks'),
67+
'@docs/list-of-contents-select': path.resolve(__dirname, './helpers/list-of-contents-select')
6768
};
6869

6970
config.optimization.minimizer = [

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import Grid from '@material-ui/core/Grid'
22
import ListOfContents from '@docs/list-of-contents';
3+
import ListOfContentsMobile from '@docs/list-of-contents-select';
34

45
<Grid container item>
6+
7+
<ListOfContentsMobile file="mappers/blueprint-component-mapper" />
58
<Grid item xs={12} md={10}>
69

710
# BlueprintJS

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import Grid from '@material-ui/core/Grid'
22
import ListOfContents from '@docs/list-of-contents';
3+
import ListOfContentsMobile from '@docs/list-of-contents-select';
34

45
<Grid container item>
6+
7+
<ListOfContentsMobile file="mappers/mui-component-mapper" />
58
<Grid item xs={12} md={10}>
69

710
# MaterialUI mapper

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import Grid from '@material-ui/core/Grid'
22
import ListOfContents from '@docs/list-of-contents';
3+
import ListOfContentsMobile from '@docs/list-of-contents-select';
34

45
<Grid container item>
6+
7+
<ListOfContentsMobile file="mappers/pf3-component-mapper" />
58
<Grid item xs={12} md={10}>
69

710
# PatternFly 3 mapper

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import Grid from '@material-ui/core/Grid'
22
import ListOfContents from '@docs/list-of-contents';
3+
import ListOfContentsMobile from '@docs/list-of-contents-select';
34

45
<Grid container item>
6+
7+
<ListOfContentsMobile file="mappers/pf4-component-mapper" />
58
<Grid item xs={12} md={10}>
69

710
# PatternFly 4 mapper

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import Grid from '@material-ui/core/Grid'
22
import ListOfContents from '@docs/list-of-contents';
3+
import ListOfContentsMobile from '@docs/list-of-contents-select';
34

45
<Grid container item>
6+
7+
<ListOfContentsMobile file="mappers/suir-component-mapper" />
58
<Grid item xs={12} md={10}>
69

710
# Semantic UI react

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,11 @@ import Link from '@material-ui/core/Link';
44

55
import ListOfContents from '@docs/list-of-contents';
66

7+
import ListOfContentsMobile from '@docs/list-of-contents-select';
8+
79
<Grid container item>
10+
11+
<ListOfContentsMobile file="migration-guide" />
812
<Grid item xs={12} md={10}>
913

1014
# Migration guide to version 2

0 commit comments

Comments
 (0)