Skip to content

Commit 99fc5d1

Browse files
Hyperkid123Hyperkid123
committed
Added connected links.
1 parent 15c6e5e commit 99fc5d1

File tree

11 files changed

+197
-125
lines changed

11 files changed

+197
-125
lines changed

‎packages/mui-component-mapper/size-snapshot.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dist/index.js": {
3+
"bundled": 633496,
4+
"minified": 264412,
5+
"gzipped": 74673
6+
}
7+
}

‎packages/pf3-component-mapper/size-snapshot.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dist/index.js": {
3+
"bundled": 669922,
4+
"minified": 271580,
5+
"gzipped": 74248
6+
}
7+
}

‎packages/pf4-component-mapper/size-snapshot.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dist/index.js": {
3+
"bundled": 346567,
4+
"minified": 141696,
5+
"gzipped": 39777
6+
}
7+
}

‎packages/react-form-renderer/size-snapshot.json

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"dist/index.js": {
3+
"bundled": 246500,
4+
"minified": 87931,
5+
"gzipped": 26546
6+
}
7+
}

‎packages/react-renderer-demo/src-bak/common/menu-renderer/find-connected-links.js

Lines changed: 0 additions & 23 deletions
This file was deleted.

‎packages/react-renderer-demo/src/components/common/connected-links.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useContext } from 'react';
2+
import clsx from 'clsx';
3+
import Grid from '@material-ui/core/Grid';
4+
import Button from '@material-ui/core/Button';
5+
import makeStyles from '@material-ui/styles/makeStyles';
6+
import ChevronRight from '@material-ui/icons/ChevronRight';
7+
import ChevronLeft from '@material-ui/icons/ChevronLeft';
8+
import Link from 'next/link';
9+
import { useRouter } from 'next/router';
10+
11+
import MenuContext from '../navigation/menu-context';
12+
13+
const useStyles = makeStyles(() => ({
14+
linksContainer: {
15+
paddingRight: 32,
16+
marginTop: 16,
17+
marginBottom: 16,
18+
},
19+
withSideNav: {
20+
width: 'calc(100% - 240px)',
21+
},
22+
link: {
23+
textDecoration: 'none',
24+
},
25+
}));
26+
27+
const ConnectedLinks = () => {
28+
const { prev, next } = useContext(MenuContext);
29+
const { pathname } = useRouter();
30+
const classNames = useStyles();
31+
return (
32+
<Grid container justify="space-between" className={ clsx(classNames.linksContainer, {
33+
[classNames.withSideNav]: pathname.includes('/renderer/'),
34+
}) }>
35+
<Grid item>
36+
{ prev && prev.link && (
37+
<Link href={ `/${prev.link.replace(/component-example\//, 'component-example?')}` }>
38+
<a className={ classNames.link }>
39+
<Button>
40+
<ChevronLeft />
41+
{ prev.label }
42+
</Button>
43+
</a>
44+
</Link>
45+
) }
46+
</Grid>
47+
<Grid item>
48+
{ next && next.link && (
49+
<Link href={ `/${next.link.replace(/component-example\//, 'component-example?')}` }>
50+
<a className={ classNames.link }>
51+
<Button >
52+
{ next.label }
53+
<ChevronRight />
54+
</Button>
55+
</a>
56+
</Link>
57+
) }
58+
</Grid>
59+
</Grid>
60+
);
61+
};
62+
63+
export default ConnectedLinks;

‎packages/react-renderer-demo/src/components/layout.js

Lines changed: 66 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,14 @@ import MenuIcon from '@material-ui/icons/Menu';
1111
import SvgIcon from '@material-ui/core/SvgIcon';
1212
import { useRouter } from 'next/router';
1313

14+
import { flatSchema } from './navigation/schema';
1415
import GhIcon from './common/gh-svg-icon';
1516
import Navigation from './navigation/app-navigation';
1617
import MapperContext from './mappers-context';
1718
import MuiWizzard from '../components/missing-demo-fields/mui-wizard/mui-wizard';
19+
import MenuContext from './navigation/menu-context';
20+
import findConnectedLinks from './navigation/find-connected-links';
21+
import ConnectedLinks from './common/connected-links';
1822

1923
const drawerWidth = 240;
2024

@@ -115,6 +119,7 @@ const Layout = ({ children }) => {
115119
const router = useRouter();
116120
const [ open, setOpen ] = useState(router.pathname !== '/');
117121
const [ mappers, setMappers ] = useState({ loaded: false, mappers: {}});
122+
const [ links, setLinks ] = useState({});
118123
const searchRef = useRef(null);
119124

120125
useEffect(() => {
@@ -138,6 +143,10 @@ const Layout = ({ children }) => {
138143
}}}));
139144
}, []);
140145

146+
useEffect(() => {
147+
setLinks(findConnectedLinks(router.asPath, flatSchema) || {});
148+
}, [ router.asPath ]);
149+
141150
const handleDrawerOpen = () => {
142151
setOpen(true);
143152
setTimeout(() => searchRef.current.focus(), 500);
@@ -150,63 +159,66 @@ const Layout = ({ children }) => {
150159
const pathname = router.pathname;
151160
return (
152161
<MapperContext.Provider value={ mappers }>
153-
<div className={ classes.root }>
154-
<Toolbar
155-
className={ clsx(classes.appBar, classes.toolbarOverride, {
156-
[classes.appBarShift]: open,
157-
}) }>
162+
<MenuContext.Provider value={ links }>
163+
<div className={ classes.root }>
164+
<Toolbar
165+
className={ clsx(classes.appBar, classes.toolbarOverride, {
166+
[classes.appBarShift]: open,
167+
}) }>
158168

159-
<IconButton
160-
color="inherit"
161-
aria-label="open drawer"
162-
onClick={ handleDrawerOpen }
163-
edge="start"
164-
className={ clsx(classes.menuButton, open && classes.hide) }
169+
<IconButton
170+
color="inherit"
171+
aria-label="open drawer"
172+
onClick={ handleDrawerOpen }
173+
edge="start"
174+
className={ clsx(classes.menuButton, open && classes.hide) }
175+
>
176+
<MenuIcon className={ classes.menuIcons } />
177+
</IconButton>
178+
</Toolbar>
179+
<Drawer
180+
className={ classes.drawer }
181+
variant="persistent"
182+
anchor="left"
183+
open={ open }
184+
classes={{
185+
paper: classes.drawerPaper,
186+
}}
165187
>
166-
<MenuIcon className={ classes.menuIcons } />
167-
</IconButton>
168-
</Toolbar>
169-
<Drawer
170-
className={ classes.drawer }
171-
variant="persistent"
172-
anchor="left"
173-
open={ open }
174-
classes={{
175-
paper: classes.drawerPaper,
176-
}}
177-
>
178-
<Navigation searchRef={ searchRef } closeNav={ handleDrawerClose }/>
179-
<Divider />
180-
</Drawer>
188+
<Navigation searchRef={ searchRef } closeNav={ handleDrawerClose }/>
189+
<Divider />
190+
</Drawer>
181191

182-
<main
183-
className={ clsx(classes.content, {
184-
[classes.contentShift]: open,
185-
[classes.mainGradient]: pathname === '/',
186-
[classes.mainGradientShift]: pathname === '/' && open,
187-
}) }
188-
>
189-
<div className={ clsx(classes.drawerHeader, classes.appBar, classes.rightAppBar, {
190-
[classes.appBarShift]: open,
191-
}) }>
192-
<a href="https://github.com/data-driven-forms/react-forms" rel="noopener noreferrer" target="_blank">
193-
<IconButton
194-
color="inherit"
195-
aria-label="gh repository"
196-
edge="start"
197-
className={ clsx(classes.menuButton) }
198-
>
199-
<SvgIcon>
200-
<GhIcon className={ classes.menuIcons } />
201-
</SvgIcon>
202-
</IconButton>
203-
</a>
204-
</div>
205-
<div className={ classes.contentWrapper }>
206-
{ children }
207-
</div>
208-
</main>
209-
</div>
192+
<main
193+
className={ clsx(classes.content, {
194+
[classes.contentShift]: open,
195+
[classes.mainGradient]: pathname === '/',
196+
[classes.mainGradientShift]: pathname === '/' && open,
197+
}) }
198+
>
199+
<div className={ clsx(classes.drawerHeader, classes.appBar, classes.rightAppBar, {
200+
[classes.appBarShift]: open,
201+
}) }>
202+
<a href="https://github.com/data-driven-forms/react-forms" rel="noopener noreferrer" target="_blank">
203+
<IconButton
204+
color="inherit"
205+
aria-label="gh repository"
206+
edge="start"
207+
className={ clsx(classes.menuButton) }
208+
>
209+
<SvgIcon>
210+
<GhIcon className={ classes.menuIcons } />
211+
</SvgIcon>
212+
</IconButton>
213+
</a>
214+
</div>
215+
<div className={ classes.contentWrapper }>
216+
{ children }
217+
<ConnectedLinks />
218+
</div>
219+
</main>
220+
</div>
221+
</MenuContext.Provider>
210222

211223
</MapperContext.Provider>
212224
);

‎packages/react-renderer-demo/src/components/navigation/documentation-pages.js

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
export const docs = [{
22
component: 'installation',
33
linkText: 'Installation',
4-
prev: {
5-
link: '/live-editor',
6-
label: 'Live Form Editor',
7-
},
84
}, {
95
component: 'get-started',
106
linkText: 'Getting started',
@@ -35,8 +31,4 @@ export const docs = [{
3531
}, {
3632
component: 'form-controls',
3733
linkText: 'Form buttons',
38-
next: {
39-
link: '/component-example/checkbox',
40-
label: 'Checkbox',
41-
},
4234
}];

‎packages/react-renderer-demo/src/components/navigation/find-connected-links.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
const findConnectedLinks = (pathname, navSchema) => navSchema.find(({ link }) => pathname.replace(/^\//, '') === link);
2+
3+
export default findConnectedLinks;

‎packages/react-renderer-demo/src-bak/common/menu-renderer/menu-context.js renamed to ‎packages/react-renderer-demo/src/components/navigation/menu-context.js

File renamed without changes.

0 commit comments

Comments
 (0)