Skip to content

Commit c5b0ae9

Browse files
rvsiarvsia
authored
Merge pull request #119 from data-driven-forms/fix-invalid-link
Fixed invalida textarea link.
2 parents a4d362a + a47a14c commit c5b0ae9

File tree

4 files changed

+75
-35
lines changed

4 files changed

+75
-35
lines changed

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import CircularProgress from '@material-ui/core/CircularProgress';
99

1010
import Layout from './layout';
1111
import renderers from './common/md-helper/mdx-components';
12+
import NotFoundPage from './pages/not-found-page';
1213
import './app.scss';
1314

1415
const FormRendererPage = lazy(() => import('./pages/form-renderer-page'));
@@ -49,11 +50,14 @@ const App = () => {
4950
<Route exact path="/" component={ LandingPage } />
5051
<div style={{ paddingTop: 86, paddingLeft: 32, paddingRight: 32 }}>
5152
<CssBaseline />
52-
<Route exact path="/show-case" component={ ShowCase } />
53-
<Route exact path="/live-editor" component={ FormRendererPage } />
54-
<Route exact path="/component-example/:component" component={ ComponentExample } />
55-
<Route exact path="/renderer/:component" component={ RendererDocPage } />
56-
<Route exact path="/others/:component" component={ DocPage } />
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>
5761
</div>
5862
</Switch>
5963
</Suspense>

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

Lines changed: 46 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Component } from 'react';
2-
import { withRouter } from 'react-router-dom';
2+
import { withRouter, Redirect } from 'react-router-dom';
33
import Grid from '@material-ui/core/Grid';
44
import FormRenderer, { componentTypes } from '@data-driven-forms/react-form-renderer';
55
import { formFieldsMapper, layoutMapper } from '@data-driven-forms/mui-component-mapper';
@@ -103,31 +103,13 @@ class ComponentExample extends Component {
103103
constructor(props) {
104104
super(props);
105105
const baseStructure = baseExamples.find(item => item.component === props.match.params.component);
106-
this.state = {
107-
...baseStructure,
108-
variants: [
109-
...baseStructure.variants,
110-
{ name: 'name', title: 'Name', value: baseStructure.value.fields[0].name, component: 'input' },
111-
...(baseStructure.canBeRequired ? [{
112-
name: 'isRequired',
113-
title: 'Required',
114-
validate: [{
115-
type: validatorTypes.REQUIRED,
116-
}],
117-
}] : []),
118-
],
119-
value: JSON.stringify(baseStructure.value, null, 2),
120-
parsedSchema: baseStructure.value,
121-
activeMapper: 'mui',
122-
frameHeight: 360,
123-
openTooltip: false,
124-
};
125-
}
126-
127-
componentDidUpdate({ match: { params: { component }}}){
128-
if (component !== this.props.match.params.component) {
129-
const baseStructure = baseExamples.find(item => item.component === this.props.match.params.component);
130-
this.setState({
106+
if (!baseStructure) {
107+
this.state = {
108+
notFound: true,
109+
component: props.match.params.component,
110+
};
111+
} else {
112+
this.state = {
131113
...baseStructure,
132114
variants: [
133115
...baseStructure.variants,
@@ -142,7 +124,39 @@ class ComponentExample extends Component {
142124
],
143125
value: JSON.stringify(baseStructure.value, null, 2),
144126
parsedSchema: baseStructure.value,
145-
});
127+
activeMapper: 'mui',
128+
frameHeight: 360,
129+
openTooltip: false,
130+
};
131+
}
132+
}
133+
134+
componentDidUpdate({ match: { params: { component }}}){
135+
if (component !== this.props.match.params.component) {
136+
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
137+
const baseStructure = baseExamples.find(item => item.component === this.props.match.params.component);
138+
if (baseStructure) {
139+
this.setState({
140+
component: undefined,
141+
notFound: undefined,
142+
...baseStructure,
143+
variants: [
144+
...baseStructure.variants,
145+
{ name: 'name', title: 'Name', value: baseStructure.value.fields[0].name, component: 'input' },
146+
...(baseStructure.canBeRequired ? [{
147+
name: 'isRequired',
148+
title: 'Required',
149+
validate: [{
150+
type: validatorTypes.REQUIRED,
151+
}],
152+
}] : []),
153+
],
154+
value: JSON.stringify(baseStructure.value, null, 2),
155+
parsedSchema: baseStructure.value,
156+
});
157+
} else {
158+
this.setState({ notFound: true, component: this.props.match.params.component });
159+
}
146160
}
147161
}
148162

@@ -254,7 +268,10 @@ class ComponentExample extends Component {
254268

255269
}
256270
render () {
257-
const { value, parsedSchema, linkText, ContentText, activeMapper, component, openTooltip, variants } = this.state;
271+
const { value, parsedSchema, linkText, ContentText, activeMapper, component, openTooltip, variants, notFound } = this.state;
272+
if (notFound || parsedSchema === undefined) {
273+
return <Redirect to="/not-found" />;
274+
}
258275

259276
const editedValue = value.replace(/^{\n {2}"fields": \[\n/, '')
260277
.replace(/ {2}\]\n}$/, '')
@@ -266,7 +283,7 @@ class ComponentExample extends Component {
266283
<Grid
267284
container
268285
direction="row"
269-
spacing={4}
286+
spacing={ 4 }
270287
>
271288
<Grid item xs={ 12 } >
272289
<Typography variant="h4" gutterBottom>

‎packages/react-renderer-demo/src/docs-components/component-api.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ All those components provides a shared group of props:
5050
|----|:--:|----------:|
5151
|placeholder|node/string|A placeholder|
5252

53-
<ExampleLink to='text-area' />
53+
<ExampleLink to='textarea-field' />
5454

5555
#### Select
5656

‎packages/react-renderer-demo/src/pages/not-found-page.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
3+
const NotFoundPage = () => (
4+
<div style={{
5+
minHeight: 'calc(100vh - 96px)',
6+
display: 'flex',
7+
}}>
8+
<a
9+
style={{ display: 'block', marginLeft: 'auto', marginRight: 'auto' }}
10+
href="https://giphy.com/gifs/404-NTXqH1bUCfHBS"
11+
rel="noopener noreferrer"
12+
target="_blank"
13+
>
14+
<img src="https://media.giphy.com/media/NTXqH1bUCfHBS/source.gif" />
15+
</a>
16+
</div>
17+
);
18+
19+
export default NotFoundPage;

0 commit comments

Comments
 (0)