Skip to content

Commit 8ad57a7

Browse files
rvsiarvsia
committed
Compute menu in the layout
1 parent 999f11b commit 8ad57a7

File tree

4 files changed

+81
-78
lines changed

4 files changed

+81
-78
lines changed

‎packages/react-renderer-demo/src/components/doc-page.js

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,47 @@ import PropTypes from 'prop-types';
33
import { useRouter } from 'next/router';
44

55
import Grid from '@material-ui/core/Grid';
6+
import Hidden from '@material-ui/core/Hidden';
7+
8+
import { makeStyles } from '@material-ui/core/styles';
9+
610
import ListOfContents from '../helpers/list-of-contents';
711
import ListOfContentsMobile from '../helpers/list-of-contents-select';
812

13+
const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
14+
15+
const useStyles = makeStyles((theme) => ({
16+
hidden: {
17+
height: '100%'
18+
},
19+
wrapper: {
20+
[theme.breakpoints.down('sm')]: {
21+
flexDirection: 'column-reverse'
22+
}
23+
}
24+
}));
25+
926
const DocPage = ({ children }) => {
1027
const router = useRouter();
28+
const classes = useStyles();
29+
30+
const text = reqSource(`./${router.pathname.replace('/', '')}.md`).default;
31+
32+
const regex = /^#+ .*/gm;
33+
const found = text.match(regex) || [];
1134

1235
return (
13-
<Grid container item>
14-
<ListOfContentsMobile file={router.pathname.replace('/', '')} />
36+
<Grid container item className={classes.wrapper}>
1537
<Grid item xs={12} md={10}>
1638
{children}
1739
</Grid>
18-
<Grid item xs={false} md={2}>
19-
<ListOfContents file={router.pathname.replace('/', '')} />
40+
<Grid item xs={12} md={2}>
41+
<Hidden mdUp>
42+
<ListOfContentsMobile found={found} />
43+
</Hidden>
44+
<Hidden smDown className={classes.hidden}>
45+
<ListOfContents found={found} />
46+
</Hidden>
2047
</Grid>
2148
</Grid>
2249
);

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

Lines changed: 30 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -11,16 +11,11 @@ import Popper from '@material-ui/core/Popper';
1111
import MenuItem from '@material-ui/core/MenuItem';
1212
import MenuList from '@material-ui/core/MenuList';
1313

14-
import Grid from '@material-ui/core/Grid';
15-
import Hidden from '@material-ui/core/Hidden';
16-
1714
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
1815
import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
1916

2017
import { headerToId } from './list-of-contents';
2118

22-
const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
23-
2419
const itemStyles = makeStyles(() => ({
2520
a: {
2621
textDecoration: 'none',
@@ -57,7 +52,7 @@ const contentStyles = makeStyles(() => ({
5752
}
5853
}));
5954

60-
const ListOfContents = ({ file }) => {
55+
const ListOfContents = ({ found }) => {
6156
const [open, setOpen] = useState(false);
6257
const styles = contentStyles();
6358
const anchorRef = useRef(null);
@@ -69,50 +64,41 @@ const ListOfContents = ({ file }) => {
6964
}
7065
};
7166

72-
const text = reqSource(`./${file}.md`).default;
73-
74-
const regex = /^#+ .*/gm;
75-
const found = text.match(regex) || [];
76-
7767
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>
68+
<div className={styles.wrapper}>
69+
<ClickAwayListener onClickAway={() => setOpen(false)}>
70+
<div>
71+
<Button
72+
ref={anchorRef}
73+
className={styles.button}
74+
aria-controls={open ? 'menu-list-grow' : undefined}
75+
aria-haspopup="true"
76+
onClick={() => setOpen((prevOpen) => !prevOpen)}
77+
endIcon={!open ? <KeyboardArrowRightIcon /> : <KeyboardArrowDownIcon />}
78+
>
79+
Show content
80+
</Button>
81+
<Popper open={open} role={undefined} transition disablePortal anchorEl={anchorRef.current}>
82+
{({ TransitionProps }) => (
83+
<Grow {...TransitionProps} style={{ transformOrigin: 'center top' }}>
84+
<Paper>
85+
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
86+
{found.map((text) => (
87+
<Item key={text} text={text} setOpen={setOpen} />
88+
))}
89+
</MenuList>
90+
</Paper>
91+
</Grow>
92+
)}
93+
</Popper>
10894
</div>
109-
</Hidden>
110-
</Grid>
95+
</ClickAwayListener>
96+
</div>
11197
);
11298
};
11399

114100
ListOfContents.propTypes = {
115-
file: PropTypes.string.isRequired
101+
found: PropTypes.array
116102
};
117103

118104
export default ListOfContents;

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

Lines changed: 20 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,6 @@ 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';
12-
13-
const reqSource = require.context('!raw-loader!@docs/pages', true, /\.md/);
1411

1512
export const headerToId = (header) =>
1613
header
@@ -86,7 +83,7 @@ const useStyles = makeStyles((theme) => ({
8683
}
8784
}));
8885

89-
const ListOfContents = ({ file }) => {
86+
const ListOfContents = ({ found = [] }) => {
9087
const [activeItem, setActive] = useState();
9188
let isMounted = true;
9289

@@ -112,36 +109,31 @@ const ListOfContents = ({ file }) => {
112109
};
113110
}, []);
114111
const classes = useStyles();
115-
const text = reqSource(`./${file}.md`).default;
116112

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

143135
ListOfContents.propTypes = {
144-
file: PropTypes.string.isRequired
136+
found: PropTypes.array
145137
};
146138

147139
export default ListOfContents;

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,8 @@ module.exports = withBundleAnalyzer(
6161
'@docs/components': path.resolve(__dirname, './components'),
6262
'@docs/pages': path.resolve(__dirname, './pages'),
6363
'@docs/examples': path.resolve(__dirname, './examples'),
64-
'@docs/list-of-contents': path.resolve(__dirname, './helpers/list-of-contents'),
6564
'@docs/code-example': path.resolve(__dirname, './components/code-example'),
6665
'@docs/hooks': path.resolve(__dirname, './hooks'),
67-
'@docs/list-of-contents-select': path.resolve(__dirname, './helpers/list-of-contents-select'),
6866
'@docs/doc-page': path.resolve(__dirname, './components/doc-page')
6967
};
7068

0 commit comments

Comments
 (0)