Add layout for primary/detail view

imports/client/ui/components/Sidebar/Sidebar.js

@@ -20,12 +20,10 @@ import { Translation } from "/imports/plugins/core/ui/client/components";
 import useIsAppLoading from "/imports/client/ui/hooks/useIsAppLoading.js";
 import useCurrentShopId from "../../hooks/useCurrentShopId";
 import ShopLogoWithData from "../ShopLogoWithData";
+import useOperatorRoutes from "../../hooks/useOperatorRoutes";
 
 const activeClassName = "nav-item-active";
 
-// Route sorting by priority. Items without a priority get pushed the bottom.
-const routeSort = (routeA, routeB) => (routeA.priority || Number.MAX_SAFE_INTEGER) - (routeB.priority || Number.MAX_SAFE_INTEGER);
-
 const styles = (theme) => ({
   closeButton: {
     "color": theme.palette.colors.white,
@@ -104,15 +102,13 @@ function Sidebar(props) {
     isSidebarOpen,
     onDrawerClose,
     isSettingsOpen,
-    setIsSettingsOpen,
-    routes
+    setIsSettingsOpen
   } = props;
 
   const [isAppLoading] = useIsAppLoading();
   const [currentShopId] = useCurrentShopId();
-
-  const primaryRoutes = routes.filter(({ isNavigationLink, isSetting }) => isNavigationLink && !isSetting).sort(routeSort);
-  const settingRoutes = routes.filter(({ isNavigationLink, isSetting }) => isNavigationLink && isSetting).sort(routeSort);
+  const primaryRoutes = useOperatorRoutes({ groups: ["navigation"] });
+  const settingRoutes = useOperatorRoutes({ groups: ["settings"] });
 
   let drawerProps = {
     classes: {
@@ -245,7 +241,6 @@ Sidebar.propTypes = {
   isSettingsOpen: PropTypes.bool,
   isSidebarOpen: PropTypes.bool.isRequired,
   onDrawerClose: PropTypes.func.isRequired,
-  routes: PropTypes.array,
   setIsSettingsOpen: PropTypes.func.isRequired
 };
 

imports/client/ui/context/UIContext.js

@@ -7,5 +7,7 @@ export const UIContext = createContext({
   onCloseDetailDrawer: () => { },
   onClosePrimarySidebar: () => { },
   onToggleDetailDrawer: () => { },
-  onTogglePrimarySidebar: () => { }
+  onTogglePrimarySidebar: () => { },
+  setDetailDrawerOpen: () => { },
+  setPrimarySidebarOpen: () => { }
 });

imports/client/ui/hooks/useMediaQuery.js

@@ -0,0 +1,20 @@
+import { useMediaQuery as useMediaQueryMui } from "@material-ui/core";
+
+/**
+ * Media query hook. Wraps the mui hook `useMediaQuery` with some additional options.
+ * @param {String} breakpoint Breakpoint name. `mobile|tablet|desktop|xs|sm|md|lg`
+ * @param {Options} options Options
+ * @returns {Boolean} Whether the breakpoint is active
+ */
+export default function useMediaQuery(breakpoint = "mobile", options) {
+  return useMediaQueryMui((theme) => {
+    if (breakpoint === "mobile") {
+      return theme.breakpoints.down("sm", options);
+    } else if (breakpoint === "tablet") {
+      return theme.breakpoints.down("md", options);
+    } else if (breakpoint === "desktop") {
+      return theme.breakpoints.up("md", options);
+    }
+    return theme.breakpoints.up(breakpoint, options);
+  });
+}

imports/client/ui/hooks/useOperatorRoutes.js

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+import { operatorRoutes } from "../index";
+
+export const defaultRouteSort = (routeA, routeB) => (
+  (routeA.priority || Number.MAX_SAFE_INTEGER) - (routeB.priority || Number.MAX_SAFE_INTEGER)
+);
+
+/**
+ * Operator routes hook
+ * @param {Object} options Options
+ * @param {Object} [options.LayoutComponent] LayoutComponent override
+ * @param {Object} [options.group] Filter routes by group name
+ * @param {Object} [options.filter] Custom filter
+ * @param {Object} [options.sort] Route sort function
+ * @returns {Array} An array containing filtered routes
+ */
+export default function useOperatorRoutes(options = {}) {
+  const {
+    groups,
+    filter,
+    sort = defaultRouteSort
+  } = options;
+
+  const routes = useMemo(() => {
+    let filteredRoutes;
+    if (Array.isArray(groups)) {
+      filteredRoutes = operatorRoutes.filter(({ group: routeGroup }) => groups.includes(routeGroup));
+    } else if (filter) {
+      filteredRoutes = operatorRoutes.filter(filter);
+    } else {
+      filteredRoutes = operatorRoutes;
+    }
+
+    if (sort) {
+      filteredRoutes = filteredRoutes.sort(sort);
+    }
+
+    return filteredRoutes;
+  }, [filter, groups, sort]);
+
+  return routes;
+}

imports/client/ui/index.js

@@ -5,6 +5,10 @@ import "./appComponents";
 
 export const operatorRoutes = [];
 export const routes = [];
+export const defaultRouteGroups = {
+  navigation: "navigation",
+  settings: "settings"
+};
 
 /**
  * @name registerOperatorRoute
@@ -19,16 +23,48 @@ export const routes = [];
  * @returns {undefined}
  */
 export function registerOperatorRoute(route) {
-  const { mainComponent, hocs = [] } = route;
-  let component = mainComponent;
+  const { isNavigationLink, isSetting, layoutComponent, mainComponent, MainComponent, hocs = [] } = route;
+  const additionalProps = {};
 
-  if (typeof mainComponent === "string") {
-    component = () => getReactComponentOrBlazeTemplate(mainComponent);
+  if (isNavigationLink) {
+    // eslint-disable-next-line no-console
+    console.warn("Option `isNavigationLink` is deprecated. Set `group: \"main\"` in your route configuration");
+    additionalProps.group = defaultRouteGroups.main;
+  }
+
+  if (isSetting) {
+    // eslint-disable-next-line no-console
+    console.warn("Option `isSetting` is deprecated. Set `group: \"settings\"` in your route configuration");
+    additionalProps.group = defaultRouteGroups.settings;
+  }
+
+  if (layoutComponent) {
+    // eslint-disable-next-line no-console
+    console.warn("Option `layoutComponent` is deprecated. Use `LayoutComponent` instead");
+    additionalProps.LayoutComponent = layoutComponent;
+  }
+
+  if (mainComponent) {
+    // eslint-disable-next-line no-console
+    console.warn("Option `mainComponent` is deprecated. Use `MainComponent` instead");
+  }
+
+  const resolvedMainComponent = MainComponent || mainComponent;
+  let component;
+
+  if (typeof resolvedMainComponent === "string") {
+    component = () => getReactComponentOrBlazeTemplate(resolvedMainComponent);
+  } else {
+    component = resolvedMainComponent;
   }
 
   component = compose(...hocs, setDisplayName(`Reaction(${name})`))(component);
 
-  operatorRoutes.push({ ...route, mainComponent: component });
+  operatorRoutes.push({
+    ...route,
+    ...additionalProps,
+    MainComponent: component
+  });
 }
 
 /**
@@ -56,6 +92,6 @@ export function registerRoute(route) {
   routes.push({
     exact: true,
     ...route,
-    mainComponent: component
+    MainComponent: component
   });
 }

imports/client/ui/layouts/ContentViewPrimaryDetailLayout.js

@@ -0,0 +1,178 @@
+/**
+ * Component provides a regions for a primary (sidebar) and detail view
+ */
+import React, { useContext, useState } from "react";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import Button from "@reactioncommerce/catalyst/Button";
+import { Blocks } from "@reactioncommerce/reaction-components";
+import {
+  AppBar,
+  Box,
+  Drawer,
+  Toolbar,
+  IconButton,
+  makeStyles
+} from "@material-ui/core";
+import ChevronDownIcon from "mdi-material-ui/ChevronDown";
+import useMediaQuery from "../hooks/useMediaQuery";
+import { UIContext } from "../context/UIContext";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    width: "100vw",
+    height: "100vh",
+    paddingTop: theme.mixins.toolbar.minHeight,
+    flexGrow: 1,
+    transition: "padding 225ms cubic-bezier(0, 0, 0.2, 1) 0ms",
+    overflow: "hidden",
+    [`${theme.breakpoints.up("xs")} and (orientation: landscape)`]: {
+      paddingTop: 54
+    },
+    [`${theme.breakpoints.up("xs")} and (orientation: portrait)`]: {
+      paddingTop: 54
+    },
+    [theme.breakpoints.up("sm")]: {
+      paddingTop: theme.mixins.toolbar.minHeight
+    }
+  },
+  block: {
+    marginBottom: theme.spacing(3)
+  },
+  drawerButton: {
+    borderRadius: 0
+  },
+  sidebar: {
+    flex: "1 1 auto",
+    maxWidth: 330,
+    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
+    overflowY: "auto",
+    borderRight: `1px solid ${theme.palette.divider}`
+  },
+  content: {
+    flex: "1 1 auto",
+    height: `calc(100vh - ${theme.mixins.toolbar.minHeight}px)`,
+    overflowY: "auto",
+    paddingTop: theme.spacing(5)
+  },
+  title: {
+    flex: 1
+  },
+  leadingDrawerOpen: {
+    paddingLeft: theme.dimensions.drawerWidth
+  },
+  trailingDrawerOpen: {
+    paddingRight: theme.dimensions.detailDrawerWidth
+  },
+  drawerPaperAnchorBottom: {
+    width: "100%",
+    height: "80%"
+  }
+}));
+
+/**
+ * Primary/Detail layout
+ * @param {Object} props ComponentProps
+ * @returns {React.ReactElement} A react element representing the primary/detail layout
+ */
+function ContentViewPrimaryDetailLayout(props) {
+  const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const {
+    AppBarComponent,
+    DetailComponent,
+    PrimaryComponent,
+    children,
+    detailBlockRegionName,
+    drawerButtonTitle,
+    primaryBlockRegionName,
+    ...blockProps
+  } = props;
+
+  const classes = useStyles();
+  const { isPrimarySidebarOpen, isDetailDrawerOpen } = useContext(UIContext);
+  const isMobile = useMediaQuery("mobile");
+
+  const closeDrawer = () => {
+    setDrawerOpen(false);
+  };
+
+  return (
+    <div
+      className={
+        classNames(classes.root, {
+          [classes.leadingDrawerOpen]: isPrimarySidebarOpen && !isMobile,
+          [classes.trailingDrawerOpen]: isDetailDrawerOpen && !isMobile
+        })
+      }
+    >
+      {AppBarComponent}
+      {isMobile &&
+        <>
+          <Button
+            color="default"
+            disableElevation={true}
+            className={classes.drawerButton}
+            fullWidth
+            onClick={() => setDrawerOpen(true)}
+            variant="contained"
+          >
+            <ChevronDownIcon /> {drawerButtonTitle}
+          </Button>
+
+          <Drawer
+            anchor="bottom"
+            classes={{
+              paperAnchorBottom: classes.drawerPaperAnchorBottom
+            }}
+            open={isDrawerOpen}
+            onClose={closeDrawer}
+          >
+            <AppBar
+              color="default"
+              elevation={0}
+              position="sticky"
+            >
+              <Toolbar>
+                <Box display="flex" justifyContent="center" width="100%">
+                  <IconButton onClick={closeDrawer}>
+                    <ChevronDownIcon />
+                  </IconButton>
+                </Box>
+              </Toolbar>
+            </AppBar>
+            {PrimaryComponent || <Blocks region={primaryBlockRegionName} blockProps={blockProps} />}
+          </Drawer>
+        </>
+      }
+      <Box display="flex">
+        {!isMobile &&
+          <div className={classes.sidebar}>
+            {PrimaryComponent || <Blocks region={primaryBlockRegionName} blockProps={blockProps} />}
+          </div>
+        }
+
+        <div className={classes.content}>
+          {DetailComponent || <Blocks region={detailBlockRegionName} blockProps={blockProps} />}
+        </div>
+      </Box>
+    </div>
+  );
+}
+
+ContentViewPrimaryDetailLayout.propTypes = {
+  AppBarComponent: PropTypes.node,
+  DetailComponent: PropTypes.node,
+  DetailContainerProps: PropTypes.object,
+  PrimaryComponent: PropTypes.node,
+  children: PropTypes.node,
+  detailBlockRegionName: PropTypes.string,
+  drawerButtonTitle: PropTypes.string,
+  isMobile: PropTypes.bool,
+  primaryBlockRegionName: PropTypes.string
+};
+
+ContentViewPrimaryDetailLayout.defaultProps = {
+  drawerButtonTitle: "More"
+};
+
+export default ContentViewPrimaryDetailLayout;