Render text on first render based on mapper query

rvsia · rvsia · commit 0ccbb4bebca5 · 2020-01-16T09:41:30.000+01:00
diff --git a/packages/react-renderer-demo/src/app/pages/_app.js b/packages/react-renderer-demo/src/app/pages/_app.js
@@ -19,6 +19,15 @@ export default class MyApp extends App {
     }
   }
 
+  static async getInitialProps ({ Component, router, ctx }) {
+    let page = {};
+    if (Component.getInitialProps) {
+      page = await Component.getInitialProps(ctx);
+    }
+
+    return { page };
+  }
+
   render() {
     const { Component, pageProps } = this.props;
 
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.md b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Checkbox multiple
 
-<ComponentExample component="checkbox-multiple" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.md b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Checkbox
 
-<ComponentExample component="checkbox" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.md b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Date picker
 
-<ComponentExample component="date-picker" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/plain-text.md b/packages/react-renderer-demo/src/app/pages/component-example/plain-text.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Plain text
 
-<ComponentExample component="plain-text" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.md b/packages/react-renderer-demo/src/app/pages/component-example/radio.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Radio
 
-<ComponentExample component="radio" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/select-field.md b/packages/react-renderer-demo/src/app/pages/component-example/select-field.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Select
 
-<ComponentExample component="select-field" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/sub-form.md b/packages/react-renderer-demo/src/app/pages/component-example/sub-form.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Subform
 
-<ComponentExample component="sub-form" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch-field.md b/packages/react-renderer-demo/src/app/pages/component-example/switch-field.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Switch
 
-<ComponentExample component="switch-field" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.md b/packages/react-renderer-demo/src/app/pages/component-example/tabs.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Tabs
 
-<ComponentExample component="tabs" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/text-field.md b/packages/react-renderer-demo/src/app/pages/component-example/text-field.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Text field
 
-<ComponentExample component="text-field" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/textarea-field.md b/packages/react-renderer-demo/src/app/pages/component-example/textarea-field.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Text area
 
-<ComponentExample component="textarea-field" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.md b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Time picker
 
-<ComponentExample component="time-picker" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/wizard.md b/packages/react-renderer-demo/src/app/pages/component-example/wizard.md
@@ -1,5 +1,5 @@
-import ComponentExample from '../../src/components/component-example';
+import ComponentText from '@docs/components/component-example-text';
 
 # Wizard
 
-<ComponentExample component="wizard" />
+<ComponentText />
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example-text.js b/packages/react-renderer-demo/src/app/src/components/component-example-text.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { useRouter } from 'next/router';
+import { baseExamples } from '@docs/components/navigation/examples-definitions';
+import ComponentExample from '@docs/components/component-example';
+
+const ComponentExampleText = (props) => {
+  const router = useRouter();
+
+  const activeMapper = router.query.mapper || 'mui';
+
+  const pathname = router.pathname;
+  let component = pathname.split('/').pop();
+
+  const baseStructure = baseExamples.find(item => item.component === component);
+
+  return <React.Fragment>
+    <ComponentExample activeMapper={ activeMapper } component={ component }/>
+    <baseStructure.ContentText activeMapper={ activeMapper } component={ component }/>;
+  </React.Fragment>;
+};
+
+export default ComponentExampleText;
diff --git a/packages/react-renderer-demo/src/app/src/components/component-example.js b/packages/react-renderer-demo/src/app/src/components/component-example.js
@@ -26,6 +26,8 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 import MuiWizard from '@docs/components/missing-demo-fields/mui-wizard/mui-wizard';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
+import RouterLink from 'next/link';
+import Link from '@material-ui/core/Link';
 
 import dynamic from 'next/dynamic';
 
@@ -97,7 +99,10 @@ CopySnackbar.propTypes = {
 class ComponentExample extends Component {
   constructor(props) {
     super(props);
-    const baseStructure = baseExamples.find(item => item.component === props.component);
+
+    const { component } = this.props;
+
+    const baseStructure = baseExamples.find(item => item.component === component);
     if (!baseStructure) {
       this.state = {
         notFound: true,
@@ -119,7 +124,6 @@ class ComponentExample extends Component {
         ],
         value: JSON.stringify(baseStructure.value, null, 2),
         parsedSchema: baseStructure.value,
-        activeMapper: 'mui',
         frameHeight: 360,
         openTooltip: false,
       };
@@ -151,10 +155,6 @@ class ComponentExample extends Component {
     };
   }
 
-  handleMapperChange = (_event, value) => {
-    this.setState({ activeMapper: value });
-  }
-
   handleTooltipClose = () => {
     this.setState({ openTooltip: false });
   }
@@ -276,7 +276,8 @@ class ComponentExample extends Component {
 
   }
   render () {
-    const { value, parsedSchema, linkText, ContentText, activeMapper, component, openTooltip, variants } = this.state;
+    const { value, parsedSchema, component, openTooltip, variants } = this.state;
+    const { activeMapper } = this.props;
 
     const editedValue = value.replace(/^{\n {2}"fields": \[\n/, '')
     .replace(/ {2}\]\n}$/, '')
@@ -352,9 +353,9 @@ class ComponentExample extends Component {
                   onChange={ this.handleMapperChange }
                   style={{ flexDirection: 'row' }}
                 >
-                  <FormControlLabel value="mui" control={ <Radio /> } label="MUI" />
-                  <FormControlLabel value="pf3" control={ <Radio /> } label="PF3" />
-                  <FormControlLabel value="pf4" control={ <Radio /> } label="PF4" />
+                  <RouterLink href={ `${this.props.router.pathname}?mapper=mui` }><Link href={ `${this.props.router.pathname}?mapper=mui` }><FormControlLabel value="mui" control={ <Radio /> } label="MUI" /></Link></RouterLink>
+                  <RouterLink href={ `${this.props.router.pathname}?mapper=pf3` }><Link href={ `${this.props.router.pathname}?mapper=pf3` }><FormControlLabel value="pf3" control={ <Radio /> } label="PF3" /></Link></RouterLink>
+                  <RouterLink href={ `${this.props.router.pathname}?mapper=pf4` }><Link href={ `${this.props.router.pathname}?mapper=pf4` }><FormControlLabel value="pf4" control={ <Radio /> } label="PF4" /></Link></RouterLink>
                 </RadioGroup>
               </FormControl>
             </div>
@@ -377,9 +378,6 @@ class ComponentExample extends Component {
               Notes
           </Typography>
         </Grid>
-        <Grid item xs={ 12 } >
-          <ContentText activeMapper={ activeMapper } component={ component } />
-        </Grid>
       </Grid>
     );
   }
@@ -390,10 +388,13 @@ ComponentExample.propTypes = {
   router: PropTypes.shape({
     query: PropTypes.shape({
       component: PropTypes.string,
+      mapper: PropTypes.string,
     }),
     push: PropTypes.func.isRequired,
+    pathname: PropTypes.string,
   }),
   mappers: PropTypes.object,
+  activeMapper: PropTypes.string.isRequired,
 };
 
 export default (props) => {

Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,15 @@ export default class MyApp extends App {`
`19`	`19`	`}`
`20`	`20`	`}`
`21`	`21`
	`22`	`+ static async getInitialProps ({ Component, router, ctx }) {`
	`23`	`+ let page = {};`
	`24`	`+ if (Component.getInitialProps) {`
	`25`	`+ page = await Component.getInitialProps(ctx);`
	`26`	`+ }`
	`27`	`+`
	`28`	`+ return { page };`
	`29`	`+ }`
	`30`	`+`
`22`	`31`	`render() {`
`23`	`32`	`const { Component, pageProps } = this.props;`
`24`	`33`