Updated docs links to work with scoped mapper.

Author: Hyperkid123

packages/react-renderer-demo/src/app/src/components/common/connected-links.js

@@ -7,6 +7,8 @@ import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import Link from 'next/link';
 
 import MenuContext from '../navigation/menu-context';
+import { useRouter } from 'next/router';
+import { getScopedLink, getPrefix } from '../../helpers/scoped-links';
 
 const useStyles = makeStyles(() => ({
   linksContainer: {
@@ -22,13 +24,15 @@ const useStyles = makeStyles(() => ({
 
 const ConnectedLinks = () => {
   const { prev, next } = useContext(MenuContext);
+  const { pathname } = useRouter();
+  const activeScope = getPrefix(pathname);
   const classNames = useStyles();
   return (
     <Grid container justify="space-between" className={classNames.linksContainer}>
       <Grid item>
         {prev && prev.link && (
-          <Link href={`/${prev.link}`}>
-            <a className={classNames.link} href={`/${prev.link}`}>
+          <Link href={getScopedLink(`/${prev.link}`, activeScope)}>
+            <a className={classNames.link} href={getScopedLink(`/${prev.link}`, activeScope)}>
               <Button>
                 <ChevronLeft />
                 {prev.label}
@@ -39,8 +43,8 @@ const ConnectedLinks = () => {
       </Grid>
       <Grid item>
         {next && next.link && (
-          <Link href={`/${next.link}`}>
-            <a className={classNames.link} href={`/${next.link}`}>
+          <Link href={getScopedLink(`/${next.link}`, activeScope)}>
+            <a className={classNames.link} href={getScopedLink(`/${next.link}`, activeScope)}>
               <Button>
                 {next.label}
                 <ChevronRight />

packages/react-renderer-demo/src/app/src/components/layout.js

@@ -23,6 +23,8 @@ import Footer from './footer';
 
 import dynamic from 'next/dynamic';
 import NotificationPanel from './notification-panel';
+import MapperMenu from './mapper-menu';
+import { getPrefix, getScopedLink } from '../helpers/scoped-links';
 const DocSearch = dynamic(import('./docsearch'), {
   ssr: false
 });
@@ -140,10 +142,11 @@ const Layout = ({ children }) => {
   const [newMessages, setNewMessages] = useState(0);
 
   useEffect(() => {
-    setLinks(findConnectedLinks(router.asPath, flatSchema) || {});
     if (window && window.innerWidth > 960 && router.pathname !== '/') {
       setOpen(true);
     }
+
+    setLinks(findConnectedLinks(getScopedLink(router.asPath, 'mui'), flatSchema) || {});
   }, [router.asPath]);
 
   const handleDrawerOpen = () => {
@@ -215,6 +218,7 @@ const Layout = ({ children }) => {
           })}
         >
           <DocSearch />
+          <MapperMenu />
           <IconButton aria-label="show new notifications" onClick={handleToggle} color="inherit" ref={anchorRef} className={clsx(classes.menuButton)}>
             <Badge badgeContent={newMessages} color="secondary">
               <NotificationsIcon className={classes.menuIcons} />

packages/react-renderer-demo/src/app/src/components/mapper-menu.js

@@ -0,0 +1,67 @@
+import React, { useState, Fragment } from 'react';
+import Button from '@material-ui/core/Button';
+import Checkbox from '@material-ui/core/Checkbox';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
+import { makeStyles } from '@material-ui/core/styles';
+import { getScopedLink, getPrefix } from '../helpers/scoped-links';
+
+const useStyles = makeStyles((theme) => ({
+  menuTrigger: {
+    color: '#fff'
+  },
+  menuItem: {
+    paddingRight: 24
+  },
+  scopeLink: {
+    textDecoration: 'none',
+    color: theme.palette.text.primary
+  }
+}));
+
+const MapperMenu = () => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const router = useRouter();
+  const classes = useStyles();
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const muiLink = getScopedLink(router.pathname, 'mui');
+  const pf4Link = getScopedLink(router.pathname, 'pf4');
+  const activeScope = getPrefix(router.pathname);
+
+  return (
+    <div>
+      <Button aria-controls="simple-menu" aria-haspopup="true" className={classes.menuTrigger} onClick={handleClick}>
+        Mapper: {activeScope}
+      </Button>
+      <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+        <MenuItem className={classes.menuItem} onClick={handleClose} selected={activeScope === 'mui'}>
+          <Link href={muiLink}>
+            <a href={muiLink} className={classes.scopeLink}>
+              <Checkbox checked={activeScope === 'mui'} />
+              Material UI
+            </a>
+          </Link>
+        </MenuItem>
+        <MenuItem className={classes.menuItem} onClick={handleClose} selected={activeScope === 'pf4'}>
+          <Link href={pf4Link}>
+            <a href={pf4Link} className={classes.scopeLink}>
+              <Checkbox checked={activeScope === 'pf4'} />
+              Patternfly 4
+            </a>
+          </Link>
+        </MenuItem>
+      </Menu>
+    </div>
+  );
+};
+
+export default MapperMenu;

packages/react-renderer-demo/src/app/src/components/navigation/menu-renderer.js

@@ -1,22 +1,23 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import TextField from '@material-ui/core/TextField';
 import { useRouter } from 'next/router';
 import Mapper from './mapper';
 import { makeStyles } from '@material-ui/core/styles';
 import { navStyles } from './nav-styles';
+import { getPrefix, getScopedLink } from '../../helpers/scoped-links';
 
 const useStyles = makeStyles(navStyles);
 
 const createLink = (...args) => args.join('/');
 
-const renderItems = (items, level = 0, previousLinks = ['']) => {
+const renderItems = (items, level = 0, previousLinks = [''], activeScope) => {
   if (!items) {
     return null;
   }
 
   if (Array.isArray(items)) {
-    return items.map((item) => renderItems(item, level, previousLinks));
+    return items.map((item) => renderItems(item, level, previousLinks, activeScope));
   }
 
   const { fields, title, link, linkText, component, open, ...props } = items;
@@ -31,26 +32,21 @@ const renderItems = (items, level = 0, previousLinks = ['']) => {
         link={link}
         level={level}
         previousLinks={previousLinks}
-        renderItems={renderItems}
+        renderItems={(...args) => renderItems(...args, activeScope)}
         {...props}
       />
     );
   }
 
-  return (
-    <Mapper.Item
-      href={createLink(...previousLinks, link || component)}
-      level={level}
-      key={`${link || component}-${linkText}`}
-      linkText={linkText}
-      component={component}
-      {...props}
-    />
-  );
+  const href = getScopedLink(createLink(...previousLinks, link || component), activeScope);
+
+  return <Mapper.Item href={href} level={level} key={`${link || component}-${linkText}`} linkText={linkText} component={component} {...props} />;
 };
 
 const MenuRenderer = ({ schema }) => {
-  return <React.Fragment>{renderItems(schema)}</React.Fragment>;
+  const { pathname } = useRouter();
+  const activeScope = getPrefix(pathname);
+  return <React.Fragment>{renderItems(schema, undefined, undefined, activeScope)}</React.Fragment>;
 };
 
 const searchFunction = (linkText, value) =>
@@ -98,24 +94,25 @@ const memoizeSearch = () => {
   };
 };
 
-const findSelected = (schema, currentLocation, level = 1) => {
+const findSelected = (schema, currentLocation, level = 1, activeScope) => {
   if (schema.fields) {
+    console.log({ link: schema.link, activeScope, currentLocation: currentLocation[level] });
     return {
       ...schema,
       open: schema.link === currentLocation[level],
       level,
-      fields: findSelected(schema.fields, currentLocation, level + 1)
+      fields: findSelected(schema.fields, currentLocation, level + 1, activeScope)
     };
   }
 
   if (Array.isArray(schema)) {
-    return schema.map((field) => findSelected(field, currentLocation, level));
+    return schema.map((field) => findSelected(field, currentLocation, level, activeScope));
   }
 
   return schema;
 };
 
-const memoizeCurrent = () => {
+const memoizeCurrent = (activeScope) => {
   const cache = {};
 
   return (schema, currentLocation) => {
@@ -125,19 +122,20 @@ const memoizeCurrent = () => {
       return cache[value];
     }
 
-    cache[value] = findSelected(schema, currentLocation);
+    cache[value] = findSelected(schema, currentLocation, undefined, activeScope);
     return cache[value];
   };
 };
 
 const search = memoizeSearch();
-const current = memoizeCurrent();
 
 const Menu = ({ schema, searchRef }) => {
   const router = useRouter();
   const [value, setValue] = useState('');
   const classes = useStyles();
-  const currentLocation = router.pathname.split('/');
+  const currentLocation = getScopedLink(router.pathname, 'mui').split('/');
+  const activeScope = getPrefix(router.pathname);
+  const { current } = useRef(memoizeCurrent(activeScope));
 
   const schemaFiltered = value !== '' ? search(schema, value) : current(schema, currentLocation);
 

packages/react-renderer-demo/src/app/src/helpers/scoped-links.js

@@ -0,0 +1,26 @@
+export const getScopedLink = (pathname, scope) => {
+  if (scope === 'mui') {
+    return pathname.replace(/^\/(pf4|pf3)/, '');
+  }
+
+  if (pathname.match(new RegExp(`^/${scope}/`))) {
+    return pathname;
+  }
+
+  if (!pathname.match(/^\/(pf4|pf3)/, '/')) {
+    return `/${scope}${pathname}`;
+  }
+
+  return pathname.replace(/^\/(pf4|pf3)/, `/${scope}`);
+};
+
+export const getPrefix = (pathname) => {
+  if (!pathname.match(/^\/(pf4|pf3)/, '/')) {
+    return 'mui';
+  }
+
+  return pathname
+    .match(/^\/[a-z0-9]+\//)
+    .pop()
+    .replace(/\//g, '');
+};