Add mapper specific links to component example.

Hyperkid123 · Hyperkid123 · commit f63a7a180365 · 2020-05-07T09:27:04.000+02:00
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox-multiple.js
@@ -12,10 +12,10 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
+  const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       <CheckboxText />
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js b/packages/react-renderer-demo/src/app/pages/component-example/checkbox.js
@@ -4,7 +4,6 @@ import useComponentExample from '@docs/hooks/use-component-example';
 import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
 import MuiCheckbox from '@data-driven-forms/mui-component-mapper/dist/cjs/checkbox';
 import CheckboxText from '@docs/components/mui-definitions/checkbox-text.md';
-import A from '@material-ui/core/Checkbox/Checkbox';
 
 const mappers = {
   mui: {
@@ -16,7 +15,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <CheckboxText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/date-picker.js
@@ -15,7 +15,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <DatePickerText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js b/packages/react-renderer-demo/src/app/pages/component-example/dual-list-select.js
@@ -11,6 +11,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/field-array.js b/packages/react-renderer-demo/src/app/pages/component-example/field-array.js
@@ -13,6 +13,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js b/packages/react-renderer-demo/src/app/pages/component-example/plain-text.js
@@ -11,6 +11,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/radio.js b/packages/react-renderer-demo/src/app/pages/component-example/radio.js
@@ -15,7 +15,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <RadioText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/select.js b/packages/react-renderer-demo/src/app/pages/component-example/select.js
@@ -11,6 +11,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js b/packages/react-renderer-demo/src/app/pages/component-example/sub-form.js
@@ -13,6 +13,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/switch.js b/packages/react-renderer-demo/src/app/pages/component-example/switch.js
@@ -15,7 +15,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <SwitchText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/tabs.js b/packages/react-renderer-demo/src/app/pages/component-example/tabs.js
@@ -17,7 +17,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <TabsText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/text-field.js b/packages/react-renderer-demo/src/app/pages/component-example/text-field.js
@@ -11,6 +11,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/textarea.js b/packages/react-renderer-demo/src/app/pages/component-example/textarea.js
@@ -11,6 +11,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js b/packages/react-renderer-demo/src/app/pages/component-example/time-picker.js
@@ -15,7 +15,7 @@ export default () => {
   const [component, baseStructure, activeMapper] = useComponentExample();
   return (
     <Fragment>
-      <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />
+      <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />
       {activeMapper === 'mui' && <TimePickerText />}
     </Fragment>
   );
diff --git a/packages/react-renderer-demo/src/app/pages/component-example/wizard.js b/packages/react-renderer-demo/src/app/pages/component-example/wizard.js
@@ -24,6 +24,6 @@ const mappers = {
 };
 
 export default () => {
-  const [component, baseStructure] = useComponentExample();
-  return <ComponentText component={component} baseStructure={baseStructure} activeMapper="mui" componentMapper={mappers.mui} />;
+  const [component, baseStructure, activeMapper] = useComponentExample();
+  return <ComponentText component={component} baseStructure={baseStructure} activeMapper={activeMapper} componentMapper={mappers.mui} />;
 };
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
@@ -13,7 +13,12 @@ import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
 import CheckIcon from '@material-ui/icons/Check';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Box from '@material-ui/core/Box';
 import { muiCode, muiHtml, muiDependencies } from '../stackblitz-templates/mui-templates';
+import Link from 'next/link';
+import clsx from 'clsx';
 
 const project = {
   settings: {
@@ -27,13 +32,23 @@ const project = {
 };
 
 const useStyles = makeStyles((theme) => ({
-  close: {
-    padding: theme.spacing(0.5)
+  tab: {
+    minWidth: 'initial'
   },
-  radioLink: {
-    color: 'rgba(0, 0, 0, 0.87)',
-    '&:hover': {
-      textDecoration: 'none'
+  indicator: {
+    width: 4
+  },
+  tabLink: {
+    textDecoration: 'none',
+    color: 'inherit',
+    '&.active': {
+      color: theme.palette.background.default.contrastText
+    }
+  },
+  editorContainer: {
+    height: '100%',
+    '& iframe': {
+      border: 'none'
     }
   }
 }));
@@ -42,14 +57,33 @@ const blitzFiles = {
   mui: {
     'index.html': muiHtml,
     'index.js': muiCode
+  },
+  pf4: {
+    'index.html': muiHtml,
+    'index.js': muiCode
+  },
+  pf3: {
+    'index.html': muiHtml,
+    'index.js': muiCode
   }
 };
 
 const blitzDependencies = {
-  mui: muiDependencies
+  mui: muiDependencies,
+  pf4: muiDependencies,
+  pf3: muiDependencies
+};
+
+const mapperTab = {
+  mui: 0,
+  pf4: 1,
+  pf3: 2
 };
 
 const ComponentExample = ({ baseStructure, activeMapper, componentMapper, component }) => {
+  const activeTab = mapperTab[activeMapper];
+  const router = useRouter();
+  const classes = useStyles();
   useEffect(() => {
     sdk.embedProject(
       'code-target',
@@ -93,7 +127,33 @@ const ComponentExample = ({ baseStructure, activeMapper, componentMapper, compon
         </Card>
       </Grid>
       <Grid item xs={12} md={9}>
-        <div id="code-target"></div>
+        <Box display="flex" className={classes.editorContainer}>
+          <Tabs
+            value={activeTab}
+            orientation="vertical"
+            variant="scrollable"
+            classes={{
+              indicator: classes.indicator
+            }}
+          >
+            <Link href={`${router.pathname}?mapper=mui`}>
+              <a href={`${router.pathname}?mapper=mui`} className={clsx(classes.tabLink, { active: activeTab === 0 })}>
+                <Tab className={classes.tab} label="Mui" />
+              </a>
+            </Link>
+            <Link href={`${router.pathname}?mapper=pf4`}>
+              <a href={`${router.pathname}?mapper=pf4`} className={classes.tabLink}>
+                <Tab className={classes.tab} label="PF4" />
+              </a>
+            </Link>
+            <Link href={`${router.pathname}?mapper=pf3`}>
+              <a href={`${router.pathname}?mapper=pf3`} className={classes.tabLink}>
+                <Tab className={classes.tab} label="PF3" />
+              </a>
+            </Link>
+          </Tabs>
+          <div id="code-target"></div>
+        </Box>
       </Grid>
     </Grid>
   );
diff --git a/packages/react-renderer-demo/src/app/src/components/navigation/menu-renderer.js b/packages/react-renderer-demo/src/app/src/components/navigation/menu-renderer.js
@@ -38,7 +38,7 @@ const renderItems = (items, level = 0, previousLinks = [''], activeScope) => {
     );
   }
 
-  const href = getScopedLink(createLink(...previousLinks, link || component), activeScope);
+  const href = createLink(...previousLinks, link || component);
 
   return <Mapper.Item href={href} level={level} key={`${link || component}-${linkText}`} linkText={linkText} component={component} {...props} />;
 };
