Skip to content

Commit ba06e2b

Browse files
Hyperkid123Hyperkid123
authored
Merge pull request #567 from rvsia/commonLayoutComponent
Use common layout component for each doc page
2 parents cd71dce + d76aab5 commit ba06e2b

30 files changed

Lines changed: 193 additions & 438 deletions

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import { useRouter } from 'next/router';
4+
5+
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+
10+
import ListOfContents from '../helpers/list-of-contents';
11+
import ListOfContentsMobile from '../helpers/list-of-contents-select';
12+
13+
const useStyles = makeStyles((theme) => ({
14+
hidden: {
15+
height: '100%'
16+
},
17+
wrapper: {
18+
[theme.breakpoints.down('sm')]: {
19+
flexDirection: 'column-reverse'
20+
}
21+
}
22+
}));
23+
24+
const DocPage = ({ children }) => {
25+
const router = useRouter();
26+
const classes = useStyles();
27+
28+
const text = require(`!raw-loader!@docs/pages/${router.pathname.replace('/', '')}.md`).default;
29+
30+
const regex = /^#+ .*/gm;
31+
const found = text.match(regex) || [];
32+
33+
return (
34+
<Grid container item className={classes.wrapper}>
35+
<Grid item xs={12} md={10}>
36+
{children}
37+
</Grid>
38+
<Grid item xs={12} md={2}>
39+
<Hidden mdUp>
40+
<ListOfContentsMobile found={found} />
41+
</Hidden>
42+
<Hidden smDown className={classes.hidden}>
43+
<ListOfContents found={found} />
44+
</Hidden>
45+
</Grid>
46+
</Grid>
47+
);
48+
};
49+
50+
DocPage.propTypes = {
51+
children: PropTypes.node
52+
};
53+
54+
export default DocPage;

‎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: 23 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
@@ -80,10 +77,13 @@ const useStyles = makeStyles((theme) => ({
8077
contentHeader: {
8178
paddingLeft: 16,
8279
paddingRight: 16
80+
},
81+
hidden: {
82+
height: '100%'
8383
}
8484
}));
8585

86-
const ListOfContents = ({ file }) => {
86+
const ListOfContents = ({ found = [] }) => {
8787
const [activeItem, setActive] = useState();
8888
let isMounted = true;
8989

@@ -109,36 +109,31 @@ const ListOfContents = ({ file }) => {
109109
};
110110
}, []);
111111
const classes = useStyles();
112-
const text = reqSource(`./${file}.md`).default;
113112

114-
const regex = /^#+ .*/gm;
115-
const found = text.match(regex) || [];
116113
return (
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>
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>
137132
);
138133
};
139134

140135
ListOfContents.propTypes = {
141-
file: PropTypes.string.isRequired
136+
found: PropTypes.array
142137
};
143138

144139
export default ListOfContents;

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,9 @@ 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')
66+
'@docs/doc-page': path.resolve(__dirname, './components/doc-page')
6867
};
6968

7069
config.optimization.minimizer = [

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Grid from '@material-ui/core/Grid'
2-
import ListOfContents from '@docs/list-of-contents';
3-
import ListOfContentsMobile from '@docs/list-of-contents-select';
1+
import DocPage from '@docs/doc-page';
42

5-
<Grid container item>
6-
7-
<ListOfContentsMobile file="mappers/blueprint-component-mapper" />
8-
<Grid item xs={12} md={10}>
3+
<DocPage>
94

105
# BlueprintJS
116

@@ -88,8 +83,4 @@ const FormTemplate = ({ formFields }) => {
8883

8984
You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/blueprint-component-mapper).
9085

91-
</Grid>
92-
<Grid item xs={false} md={2}>
93-
<ListOfContents file="mappers/blueprint-component-mapper" />
94-
</Grid>
95-
</Grid>
86+
</DocPage>

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Grid from '@material-ui/core/Grid'
2-
import ListOfContents from '@docs/list-of-contents';
3-
import ListOfContentsMobile from '@docs/list-of-contents-select';
1+
import DocPage from '@docs/doc-page';
42

5-
<Grid container item>
6-
7-
<ListOfContentsMobile file="mappers/mui-component-mapper" />
8-
<Grid item xs={12} md={10}>
3+
<DocPage>
94

105
# MaterialUI mapper
116

@@ -44,8 +39,4 @@ This field will show the error immediately.
4439

4540
You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/mui-component-mapper).
4641

47-
</Grid>
48-
<Grid item xs={false} md={2}>
49-
<ListOfContents file="mappers/mui-component-mapper" />
50-
</Grid>
51-
</Grid>
42+
</DocPage>

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Grid from '@material-ui/core/Grid'
2-
import ListOfContents from '@docs/list-of-contents';
3-
import ListOfContentsMobile from '@docs/list-of-contents-select';
1+
import DocPage from '@docs/doc-page';
42

5-
<Grid container item>
6-
7-
<ListOfContentsMobile file="mappers/pf3-component-mapper" />
8-
<Grid item xs={12} md={10}>
3+
<DocPage>
94

105
# PatternFly 3 mapper
116

@@ -44,8 +39,4 @@ This field will show the error immediately.
4439

4540
You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/pf3-component-mapper).
4641

47-
</Grid>
48-
<Grid item xs={false} md={2}>
49-
<ListOfContents file="mappers/pf3-component-mapper" />
50-
</Grid>
51-
</Grid>
42+
</DocPage>

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Grid from '@material-ui/core/Grid'
2-
import ListOfContents from '@docs/list-of-contents';
3-
import ListOfContentsMobile from '@docs/list-of-contents-select';
1+
import DocPage from '@docs/doc-page';
42

5-
<Grid container item>
6-
7-
<ListOfContentsMobile file="mappers/pf4-component-mapper" />
8-
<Grid item xs={12} md={10}>
3+
<DocPage>
94

105
# PatternFly 4 mapper
116

@@ -29,8 +24,4 @@ PatternFly 4 has to be installed seperately. Please follow their [guidelines](ht
2924

3025
You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/pf4-component-mapper).
3126

32-
</Grid>
33-
<Grid item xs={false} md={2}>
34-
<ListOfContents file="mappers/pf4-component-mapper" />
35-
</Grid>
36-
</Grid>
27+
</DocPage>

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

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import Grid from '@material-ui/core/Grid'
2-
import ListOfContents from '@docs/list-of-contents';
3-
import ListOfContentsMobile from '@docs/list-of-contents-select';
1+
import DocPage from '@docs/doc-page';
42

5-
<Grid container item>
6-
7-
<ListOfContentsMobile file="mappers/suir-component-mapper" />
8-
<Grid item xs={12} md={10}>
3+
<DocPage>
94

105
# Semantic UI react
116

@@ -49,8 +44,4 @@ To avoid re-refining common customization for each field in schema, check out th
4944

5045
You can contribute to this mapper [here](https://github.com/data-driven-forms/react-forms/tree/master/packages/suir-component-mapper).
5146

52-
</Grid>
53-
<Grid item xs={false} md={2}>
54-
<ListOfContents file="mappers/suir-component-mapper" />
55-
</Grid>
56-
</Grid>
47+
</DocPage>

0 commit comments

Comments
 (0)