Merge pull request #768 from rvsia/fixMappersComponentDemo

Fix links for components examples

Author: Hyperkid123

packages/react-renderer-demo/src/components/common/example-link.js

@@ -15,8 +15,8 @@ const ExampleLink = ({ to, text = 'To example' }) => {
   return (
     <React.Fragment>
       <div style={{ float: 'right' }}>
-        <RouterLink href={`/mappers/${to}`}>
-          <a className={classes.toExampleLink} href={`/mappers/${to}`}>
+        <RouterLink href={`/mappers/${to}?mapper=mui`}>
+          <a className={classes.toExampleLink} href={`/mappers/${to}?mapper=mui`}>
             <Button color="primary">{text}</Button>
           </a>
         </RouterLink>

packages/react-renderer-demo/src/components/navigation/examples-definitions.js

@@ -81,4 +81,7 @@ export const baseExamples = [
     link: componentTypes.WIZARD,
     linkText: 'Wizard'
   }
-];
+].map((component) => ({
+  ...component,
+  link: `${component.link}?mapper=mui`
+}));

packages/react-renderer-demo/src/components/navigation/find-connected-links.js

@@ -1,5 +1,6 @@
 export const query = /\?.*/;
 
-const findConnectedLinks = (pathname, navSchema) => navSchema.find(({ link }) => pathname.replace(/^\//, '').replace(query, '') === link);
+const findConnectedLinks = (pathname, navSchema) =>
+  navSchema.find(({ link }) => pathname.replace(/^\//, '').replace(query, '') === link.replace(query, ''));
 
 export default findConnectedLinks;

packages/react-renderer-demo/src/components/navigation/mapper.js

@@ -25,18 +25,22 @@ const Item = ({ href, linkText, component, divider, level }) => {
   const classes = useStyles();
   const router = useRouter();
   const link = useMapperLink(href.replace('/?', '?'));
+
+  const queryMapper = router.query.mapper ? `?mapper=${router.query.mapper}` : '';
+  const finalHref = queryMapper && link.match(query) ? `${link.replace(query, '')}${queryMapper}` : link;
+
   return (
     <ListItem
       divider={divider}
       button
-      selected={href.replace('/?', '?') === router.asPath.replace(query, '')}
+      selected={href.replace(query, '') === router.asPath.replace(query, '')}
       key={href || linkText}
       className={clsx(classes.item, {
         [classes.nested]: level > 0
       })}
       component={forwardRef((props, ref) => (
-        <RouterNavLink ref={ref} key={component} href={link}>
-          <Link style={{ color: 'rgba(0, 0, 0, 0.87)' }} {...props} href={link} />
+        <RouterNavLink ref={ref} key={component} href={finalHref}>
+          <Link style={{ color: 'rgba(0, 0, 0, 0.87)' }} {...props} href={finalHref} />
         </RouterNavLink>
       ))}
     >

packages/react-renderer-demo/src/doc-components/dual-list-select.js

@@ -3,9 +3,15 @@ import PropTypes from 'prop-types';
 import MuiDualListSelect from './examples-texts/mui/mui-dual-list-select.md';
 import SuirDualListSelect from './examples-texts/suir/suir-dual-list-select.md';
 import BlueprintDualListSelect from './examples-texts/blueprint/blueprint-dual-list-select.md';
+import PF4DualListSelect from './examples-texts/pf4/pf4-dual-list.md';
+
 import GenericMuiComponent from '../helpers/generic-mui-component';
 
 const DualListSelect = ({ activeMapper }) => {
+  if (activeMapper === 'pf4') {
+    return <PF4DualListSelect />;
+  }
+
   if (activeMapper === 'mui') {
     return <MuiDualListSelect />;
   }

packages/react-renderer-demo/src/hooks/use-mapper-link.js

@@ -1,12 +1,13 @@
 import useQueryParam from './use-query-param';
+import { query } from '../components/navigation/find-connected-links';
 
 /**
  * Appends current query mapper value to URL
  * @param {string} link url string to be appended with current mapper query param
  */
 const useMapperLink = (link = '') => {
   const mapperQuery = useQueryParam('mapper');
-  return link.includes('component-example/') ? `${link}${mapperQuery}` : link;
+  return link.match(query) && mapperQuery ? `${link.replace(query, '')}${mapperQuery}` : link;
 };
 
 export default useMapperLink;

packages/react-renderer-demo/src/pages/mappers/component-api.md

@@ -205,7 +205,7 @@ Wizard step <br/>
 |----|:--:|----------:|
 |title|node/string|Step title|
 |name|string, number|Uniq name of the step|
-|nextStep|object/name of next step|See [wizard documentation](/mappers/wizard)|
+|nextStep|object/name of next step|See [wizard documentation](/mappers/wizard?mapper=mui)|
 |fields|array|An array of form fields|
 
 <ExampleLink to='wizard' />

packages/react-renderer-demo/src/pages/typescript.md

@@ -14,6 +14,6 @@ React form renderer and component mappers include Typescript typings. Each expor
 
 You can learn more about Renderer and its prop types [here](/components/renderer).
 
-Mapper component prop types are listed in the mappers section of the documentation. You can start with [checkbox](/mappers/checkbox).
+Mapper component prop types are listed in the mappers section of the documentation. You can start with [checkbox](/mappers/checkbox?mapper=mui).
 
 </DocPage>