Skip to content

Commit b60ad84

Browse files
rvsiarvsia
authored
Merge pull request #121 from data-driven-forms/add-next-prev-links
Added prev/next links to doc pages.
2 parents f6cee13 + f0c1d01 commit b60ad84

File tree

12 files changed

+232
-40
lines changed

12 files changed

+232
-40
lines changed

‎packages/react-renderer-demo/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,6 @@
8383
"react-ace": "^6.3.2",
8484
"react-copy-to-clipboard": "^5.0.1",
8585
"react-dom": "^16.8.6",
86-
"react-router-dom": "^4.3.1"
86+
"react-router-dom": "^5.0.1"
8787
}
8888
}

‎packages/react-renderer-demo/src/App.js

Lines changed: 42 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React, { lazy, Suspense } from 'react';
2-
import { Switch, Route } from 'react-router-dom';
1+
import React, { lazy, Suspense, useEffect, useState } from 'react';
2+
import PropTypes from 'prop-types';
3+
import { Switch, Route, withRouter } from 'react-router-dom';
34
import { MDXProvider } from '@mdx-js/react';
45
import { createMuiTheme } from '@material-ui/core/styles';
56
import { ThemeProvider } from '@material-ui/styles';
@@ -11,6 +12,9 @@ import Layout from './layout';
1112
import renderers from './common/md-helper/mdx-components';
1213
import NotFoundPage from './pages/not-found-page';
1314
import './app.scss';
15+
import MenuContext from './common/menu-renderer/menu-context';
16+
import navSchema from './common/menu-renderer/schema-demo';
17+
import findConnectedLinks from './common/menu-renderer/find-connected-links';
1418

1519
const FormRendererPage = lazy(() => import('./pages/form-renderer-page'));
1620
const LandingPage = lazy(() => import('./pages/landing-page'));
@@ -38,33 +42,46 @@ const PageLoadingIndicator = () => (
3842
</div>
3943
);
4044

41-
const App = () => {
45+
const App = ({ location: { pathname }}) => {
46+
const [ links, setLinks ] = useState({});
4247
const classes = useStyle();
48+
useEffect(() => {
49+
setLinks(findConnectedLinks(pathname, navSchema));
50+
}, [ pathname ]);
4351
return (
4452
<ThemeProvider theme={ theme }>
4553
<MDXProvider components={ renderers }>
46-
<Layout>
47-
<div className={ classes.containerFix }>
48-
<Suspense fallback={ <PageLoadingIndicator /> }>
49-
<Switch>
50-
<Route exact path="/" component={ LandingPage } />
51-
<div style={{ paddingTop: 86, paddingLeft: 32, paddingRight: 32 }}>
52-
<CssBaseline />
53-
<Switch>
54-
<Route exact path="/show-case" component={ ShowCase } />
55-
<Route exact path="/live-editor" component={ FormRendererPage } />
56-
<Route exact path="/component-example/:component" component={ ComponentExample } />
57-
<Route exact path="/renderer/:component" component={ RendererDocPage } />
58-
<Route exact path="/others/:component" component={ DocPage } />
59-
<Route component={ NotFoundPage } />
60-
</Switch>
61-
</div>
62-
</Switch>
63-
</Suspense>
64-
</div>
65-
</Layout>
54+
<MenuContext.Provider value={ links }>
55+
<Layout>
56+
<div className={ classes.containerFix }>
57+
<Suspense fallback={ <PageLoadingIndicator /> }>
58+
<Switch>
59+
<Route exact path="/" component={ LandingPage } />
60+
<div style={{ paddingTop: 86, paddingLeft: 32, paddingRight: 32 }}>
61+
<CssBaseline />
62+
<Switch>
63+
<Route exact path="/show-case" component={ ShowCase } />
64+
<Route exact path="/live-editor" component={ FormRendererPage } />
65+
<Route exact path={ [ '/component-example/:component', '/component-example' ] } component={ ComponentExample } />
66+
<Route exact path={ [ '/renderer/:component', '/renderer' ] } component={ RendererDocPage } />
67+
<Route exact path="/others/:component" component={ DocPage } />
68+
<Route component={ NotFoundPage } />
69+
</Switch>
70+
</div>
71+
</Switch>
72+
</Suspense>
73+
</div>
74+
</Layout>
75+
</MenuContext.Provider>
6676
</MDXProvider>
6777
</ThemeProvider>
68-
);};
78+
);
79+
};
6980

70-
export default App;
81+
App.propTypes = {
82+
location: PropTypes.shape({
83+
pathname: PropTypes.string.isRequired,
84+
}).isRequired,
85+
};
86+
87+
export default withRouter(App);

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

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React, { useContext } from 'react';
2+
import { Link, withRouter } from 'react-router-dom';
3+
import clsx from 'clsx';
4+
import Grid from '@material-ui/core/Grid';
5+
import Button from '@material-ui/core/Button';
6+
import makeStyles from '@material-ui/styles/makeStyles';
7+
import ChevronRight from '@material-ui/icons/ChevronRight';
8+
import ChevronLeft from '@material-ui/icons/ChevronLeft';
9+
import PropTypes from 'prop-types';
10+
11+
import MenuContext from '../menu-renderer/menu-context';
12+
13+
const useStyles = makeStyles(() => ({
14+
linksContainer: {
15+
paddingLeft: 32,
16+
paddingRight: 32,
17+
marginTop: 16,
18+
marginBottom: 16,
19+
},
20+
withSideNav: {
21+
width: 'calc(100% - 240px)',
22+
},
23+
link: {
24+
textDecoration: 'none',
25+
},
26+
}));
27+
28+
const ConnectedLinks = ({ location: { pathname }}) => {
29+
const { prev, next } = useContext(MenuContext);
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 && (
37+
<Link className={ classNames.link } to={ prev.link }>
38+
<Button>
39+
<ChevronLeft />
40+
{ prev.label }
41+
</Button>
42+
</Link>
43+
) }
44+
</Grid>
45+
<Grid item>
46+
{ next && (
47+
<Link className={ classNames.link } to={ next.link }>
48+
<Button>
49+
{ next.label }
50+
<ChevronRight />
51+
</Button>
52+
</Link>
53+
) }
54+
</Grid>
55+
</Grid>
56+
);
57+
};
58+
59+
ConnectedLinks.propTypes = {
60+
location: PropTypes.shape({
61+
pathname: PropTypes.string.isRequired,
62+
}).isRequired,
63+
};
64+
65+
export default withRouter(ConnectedLinks);

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

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, { useState, useEffect, lazy, Suspense } from 'react';
22
import PropTypes from 'prop-types';
3-
import { withRouter } from 'react-router-dom';
3+
import { withRouter, Redirect } from 'react-router-dom';
44
import makeStyles from '@material-ui/styles/makeStyles';
55
import CircularProgress from '@material-ui/core/CircularProgress';
66

@@ -38,18 +38,26 @@ const PageLoadingIndicator = () => (
3838
const RendererDocPage = ({ match: { params: { component }}}) => {
3939
const [ Component, setComponent ] = useState();
4040
const classes = useStyles();
41+
4142
useEffect(() => {
42-
const OtherComponent = lazy(() => import(`docs/components/${component}.md`).then((m) => {
43-
setImmediate(() => {
44-
const h = window.location.hash;
45-
window.location.hash = '';
46-
window.location.hash = h.replace('#', '');
47-
});
48-
return m;
49-
}));
50-
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
51-
setComponent(OtherComponent);
43+
if (component) {
44+
const OtherComponent = lazy(() => import(`docs/components/${component}.md`).then((m) => {
45+
setImmediate(() => {
46+
const h = window.location.hash;
47+
window.location.hash = '';
48+
window.location.hash = h.replace('#', '');
49+
});
50+
return m;
51+
}));
52+
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
53+
setComponent(OtherComponent);
54+
}
5255
}, [ component ]);
56+
57+
if (!component) {
58+
return <Redirect to="/renderer/installation" />;
59+
}
60+
5361
return (
5462
<Suspense fallback={ <PageLoadingIndicator/> }>
5563
<div className={ classes.demoWrapper }>

‎packages/react-renderer-demo/src/common/documenation-pages.js

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

‎packages/react-renderer-demo/src/common/example-common.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ class ComponentExample extends Component {
154154
value: JSON.stringify(baseStructure.value, null, 2),
155155
parsedSchema: baseStructure.value,
156156
});
157-
} else {
157+
} else if (!baseStructure && !!component) {
158158
this.setState({ notFound: true, component: this.props.match.params.component });
159159
}
160160
}
@@ -269,7 +269,11 @@ class ComponentExample extends Component {
269269
}
270270
render () {
271271
const { value, parsedSchema, linkText, ContentText, activeMapper, component, openTooltip, variants, notFound } = this.state;
272-
if (notFound || parsedSchema === undefined) {
272+
if (!this.props.match.params.component) {
273+
return <Redirect to="/component-example/checkbox" />;
274+
}
275+
276+
if (notFound) {
273277
return <Redirect to="/not-found" />;
274278
}
275279

‎packages/react-renderer-demo/src/common/examples-definitions.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@ export const baseExamples = [{
7171
},
7272
{
7373
component: componentTypes.CHECKBOX,
74+
prev: {
75+
link: '/renderer/form-controls',
76+
label: 'Form Controls',
77+
},
7478
linkText: 'Checkbox',
7579
ContentText: GenericComponentText,
7680
value: { fields: [{
@@ -418,4 +422,12 @@ export const baseExamples = [{
418422
}],
419423
},
420424
variants: [],
425+
next: {
426+
link: '/others/miq-components',
427+
label: 'ManageIQ components',
428+
},
429+
prev: {
430+
link: '/component-example/time-picker',
431+
label: 'Time Picker',
432+
},
421433
}];

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const findConnectedLinks = (pathname, navSchema) => {
2+
const partials = pathname.split('/').filter(partial => partial !== '');
3+
let links = {};
4+
partials.forEach(partial => {
5+
let field = navSchema.reduce((acc, curr) => {
6+
let data = [ ...acc, curr ];
7+
if (curr.fields) {
8+
data = [ ...data, ...curr.fields ];
9+
}
10+
11+
return data;
12+
}, []).find(({ link, component }) => link === partial || component === partial);
13+
if (field) {
14+
links = {
15+
prev: field.prev,
16+
next: field.next,
17+
};
18+
}
19+
});
20+
return links;
21+
};
22+
23+
export default findConnectedLinks;

‎packages/react-renderer-demo/src/common/menu-renderer/menu-context.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createContext } from 'react';
2+
3+
const MenuContext = createContext({});
4+
5+
export default MenuContext;

‎packages/react-renderer-demo/src/common/menu-renderer/schema-demo.js

Lines changed: 45 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,48 @@ const schema = [
3434
},
3535
];
3636

37-
export default schema;
37+
const generateLinks = (data, prevLink, prefix = '', escapeLink) => data.map((item, index) => {
38+
let result = { ...item };
39+
if (result.fields) {
40+
result.fields = generateLinks(
41+
result.fields,
42+
{
43+
link: `/${result.link || result.component}`,
44+
label: result.linkText || result.title,
45+
},
46+
`/${result.link || result.component}`,
47+
data[index + 1] ? {
48+
link: `${prefix}/${data[index + 1].link || data[index + 1].component}`,
49+
label: data[index + 1].linkText || data[index + 1].title,
50+
} : undefined
51+
);
52+
}
53+
54+
if (index > 0 && !result.prev) {
55+
result.prev = {
56+
link: `${prefix}/${data[index - 1].link || data[index - 1].component}`,
57+
label: data[index - 1].linkText || data[index - 1].title,
58+
};
59+
}
60+
61+
if (!result.prev) {
62+
result.prev = prevLink;
63+
}
64+
65+
if (data[index + 1] && !result.next) {
66+
result.next = {
67+
link: `${prefix}/${data[index + 1].link || data[index + 1].component}`,
68+
label: data[index + 1].linkText || data[index + 1].title,
69+
};
70+
}
71+
72+
if (index === data.length - 1 && escapeLink && !result.next) {
73+
result.next = escapeLink;
74+
}
75+
76+
return result;
77+
});
78+
79+
const links = generateLinks(schema);
80+
81+
export default links;

0 commit comments

Comments
 (0)