Merge pull request #282 from rvsia/fixComponentExamples

Hyperkid123 · web-flow · commit 4af70fe46ae0 · 2020-01-16T11:24:13.000+01:00
ComponentExample cleanup
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/common/examples-texts/select.js b/packages/react-renderer-demo/src/app/src/common/examples-texts/select.js
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 = () => {
+  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,9 @@ 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 CircularProgress from '@material-ui/core/CircularProgress';
 
 import dynamic from 'next/dynamic';
 
@@ -60,6 +63,12 @@ const useStyles = makeStyles(theme => ({
   close: {
     padding: theme.spacing(0.5),
   },
+  radioLink: {
+    color: 'rgba(0, 0, 0, 0.87)',
+    '&:hover': {
+      textDecoration: 'none',
+    },
+  },
 }));
 
 const CopySnackbar = ({ open, handleClose }) => {
@@ -97,7 +106,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 +131,6 @@ class ComponentExample extends Component {
         ],
         value: JSON.stringify(baseStructure.value, null, 2),
         parsedSchema: baseStructure.value,
-        activeMapper: 'mui',
         frameHeight: 360,
         openTooltip: false,
       };
@@ -151,10 +162,6 @@ class ComponentExample extends Component {
     };
   }
 
-  handleMapperChange = (_event, value) => {
-    this.setState({ activeMapper: value });
-  }
-
   handleTooltipClose = () => {
     this.setState({ openTooltip: false });
   }
@@ -273,10 +280,11 @@ class ComponentExample extends Component {
     } finally {
       this.setState({ value });
     }
-
   }
+
   render () {
-    const { value, parsedSchema, linkText, ContentText, activeMapper, component, openTooltip, variants } = this.state;
+    const { value, parsedSchema, component, openTooltip, variants } = this.state;
+    const { activeMapper, classes } = this.props;
 
     const editedValue = value.replace(/^{\n {2}"fields": \[\n/, '')
     .replace(/ {2}\]\n}$/, '')
@@ -290,22 +298,12 @@ class ComponentExample extends Component {
         direction="row"
         spacing={ 4 }
       >
-        <Grid item xs={ 4 } >
-          <Typography variant="h5" gutterBottom>
+        <Grid item xs={ 12 } md={ 4 } >
+          <Grid item xs={ 12 }>
+            <Typography variant="h5" gutterBottom>
               Schema
-          </Typography>
-        </Grid>
-        <Grid item xs={ 3 } >
-          <Typography variant="h5" gutterBottom>
-              Props
-          </Typography>
-        </Grid>
-        <Grid item xs={ 5 } >
-          <Typography variant="h5" gutterBottom>
-              Preview
-          </Typography>
-        </Grid>
-        <Grid item xs={ 4 } >
+            </Typography>
+          </Grid>
           <div style={{ background: '#1d1f21', position: 'relative' }}>
             <Grid item xs={ 12 } container={ true } justify='flex-end' style={{ position: 'absolute', zIndex: 100 }}>
               <CopyToClipboard text={ editedValue } onCopy={ this.handleTooltipOpen }>
@@ -333,14 +331,24 @@ class ComponentExample extends Component {
             />
           </div>
         </Grid>
-        <Grid item xs={ 3 }>
+        <Grid item xs={ 12 } md={ 3 }>
+          <Grid item xs={ 12 }>
+            <Typography variant="h5" gutterBottom>
+              Props
+            </Typography>
+          </Grid>
           <Card square>
             <CardContent>
               { this.renderActions(variants) }
             </CardContent>
           </Card>
         </Grid>
-        <Grid item xs={ 5 } >
+        <Grid item xs={ 12 } md={ 5 } >
+          <Grid item xs={ 12 }>
+            <Typography variant="h5" gutterBottom>
+              Preview
+            </Typography>
+          </Grid>
           <Card square style={{ overflow: 'initial' }}>
             <div style={{ padding: 8 }}>
               <FormControl component="fieldset">
@@ -352,9 +360,21 @@ 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` } className={ classes.radioLink }>
+                      <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` } className={ classes.radioLink }>
+                      <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` } className={ classes.radioLink }>
+                      <FormControlLabel value="pf4" control={ <Radio /> } label="PF4"/>
+                    </Link>
+                  </RouterLink>
                 </RadioGroup>
               </FormControl>
             </div>
@@ -377,9 +397,6 @@ class ComponentExample extends Component {
               Notes
           </Typography>
         </Grid>
-        <Grid item xs={ 12 } >
-          <ContentText activeMapper={ activeMapper } component={ component } />
-        </Grid>
       </Grid>
     );
   }
@@ -390,18 +407,35 @@ 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,
+  classes: PropTypes.shape({
+    radioLink: PropTypes.string.isRequired,
+  }).isRequired,
 };
 
 export default (props) => {
   const router = useRouter();
+  const classes = useStyles();
+
   return (
     <MapperContext.Consumer>
       { ({ loaded, mappers }) =>
-        loaded && <ComponentExample { ...props } router={ router } mappers={ mappers } /> }
+        loaded ?
+          <ComponentExample { ...props } router={ router } mappers={ mappers } classes={ classes }/> :
+          <Grid
+            container
+            direction="row"
+            justify="center"
+            alignItems="center"
+          >
+            <CircularProgress disableShrink />
+          </Grid> }
     </MapperContext.Consumer>
   );
 };

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`