Auto-expand and auto-scroll explorer

Author: ShukantPal

packages/webdoc-default-template/src/app/components/Explorer/ExplorerItem.js

@@ -1,8 +1,9 @@
-import {useExplorerCategoryStyles, useExplorerStyles} from "./useExplorerStyles";
+import {useExplorerCategoryStyles, useExplorerPrimaryItemStyles, useExplorerStyles} from "./useExplorerStyles";
 import ExplorerCategoryItem from "./ExplorerCategoryItem";
 import Link from "@material-ui/core/Link";
 import React from "react";
 import TreeItem from "@material-ui/lab/TreeItem";
+import {isSamePage} from "./helpers";
 
 export default function ExplorerItem(props) {
   if (!props.data.$nodeId) {
@@ -11,6 +12,7 @@ export default function ExplorerItem(props) {
 
   const classesItem = useExplorerStyles();
   const classesCategory = useExplorerCategoryStyles();
+  const classesPrimaryItem = useExplorerPrimaryItemStyles();
   const targetChildren = [];
 
   let i = 0;
@@ -24,6 +26,11 @@ export default function ExplorerItem(props) {
 
   const classes = i > 0 ? classesCategory : classesItem;
   const nodeId = props.data.$nodeId;
+  const primary = props.data.page && isSamePage(props.data);
+
+  if (primary) {
+    console.log(props.data);
+  }
 
   const toggle = React.useCallback(
     () => props.toggle(nodeId),
@@ -36,6 +43,7 @@ export default function ExplorerItem(props) {
 
   return (
     <TreeItem
+      id={props.data.$nodeId}
       className="explorer-tree__target"
       classes={{
         label: classes.label,
@@ -47,7 +55,7 @@ export default function ExplorerItem(props) {
       label={
         props.data.page ?
           (
-            <Link classes={{root: classes.labelLinks}}
+            <Link classes={{root: primary ? classesPrimaryItem.labelLinks : classes.labelLinks}}
               href={props.data.page}
               underline="hover"
             >

packages/webdoc-default-template/src/app/components/Explorer/helpers.js

@@ -0,0 +1,11 @@
+export function isSamePage(data) {
+  const path = `${window.location.pathname}.html`;
+
+  if (data.page.startsWith("/") && data.page === path) {
+    return true;
+  } else if (!data.page.startsWith("/") && path.includes(`/${data.page}`)) {
+    return true;
+  }
+
+  return false;
+}

packages/webdoc-default-template/src/app/components/Explorer/index.js

@@ -8,19 +8,36 @@ import React from "react";
 import TreeView from "@material-ui/lab/TreeView";
 import {connect} from "react-redux";
 import cuid from "cuid";
+import {isSamePage} from "./helpers";
 import store from "../../store";
 import {useExplorerStyles} from "./useExplorerStyles";
 
 let fetched = false;
 
-function makeIds(data) {
+function makeIds(data, collector) {
   data.$nodeId = cuid();
 
+  let shouldBeExpanded = false;
+
+  if (data.page) {
+    shouldBeExpanded = isSamePage(data);
+  }
+
   if (data.children) {
     for (const [, value] of Object.entries(data.children)) {
-      makeIds(value);
+      const childExpanded = makeIds(value, collector);
+
+      if (childExpanded) {
+        collector.add(data.$nodeId);
+        shouldBeExpanded = true;
+      }
     }
   }
+  if (shouldBeExpanded) {
+    collector.add(data.$nodeId);
+  }
+
+  return shouldBeExpanded;
 }
 
 export default connect(({
@@ -35,6 +52,14 @@ export default connect(({
     value: isOpen,
   }),
   expandedItems: Array.from(expandedItems),
+  setAutoScrollTo: (value) => store.dispatch({
+    type: "setAutoScrollTo",
+    value,
+  }),
+  setExpandedItems: (value) => store.dispatch({
+    type: "setExpandedItems",
+    value,
+  }),
   toggleItem: (nodeId, optValue) => store.dispatch({
     type: "toggleItem",
     nodeId,
@@ -44,9 +69,12 @@ export default connect(({
   isOpen,
   setOpen,
   expandedItems,
+  setExpandedItems,
   toggleItem,
+  rootRef,
 }) {
   const [data, setData] = React.useState(null);
+  const [autoScrollTo, setAutoScrollTo] = React.useState(null);
   const {root} = useExplorerStyles();
   const toggleOpen = React.useCallback(() => setOpen(!isOpen), [isOpen]);
   const children = [];
@@ -57,8 +85,12 @@ export default connect(({
       .then((response) => {
         if (response.ok) {
           response.json().then((idata) => {
-            makeIds(idata);
+            const defaultExpanded = new Set();
+
+            makeIds(idata, defaultExpanded);
             setData(idata || {});
+            setAutoScrollTo(defaultExpanded.values().next().value);
+            setExpandedItems(defaultExpanded);
           });
         } else {
           throw new Error("Can't fetch reference.json");
@@ -87,6 +119,29 @@ export default connect(({
     children.push(<span key={++i}>Loading...</span>);
   }
 
+  React.useEffect(
+    () => {
+      setTimeout(
+        () => {
+          const scrollEl = rootRef.current.querySelector(".MuiTreeView-root");
+          const toEl = document.getElementById(autoScrollTo);
+
+          if (scrollEl && toEl) {
+            const rect = toEl.getBoundingClientRect();
+
+            scrollEl.scrollTo({
+              left: rect.left,
+              top: rect.top - 124,
+              behavior: "smooth",
+            });
+          }
+        },
+        400,
+      );
+    },
+    [autoScrollTo],
+  );
+
   return (
     <div className="explorer" style={{
       transition: "margin-left 200ms, width 200ms",

packages/webdoc-default-template/src/app/components/Explorer/useExplorerStyles.js

@@ -34,3 +34,10 @@ export const useExplorerCategoryStyles = makeStyles({
     fontWeight: "bold !important",
   },
 });
+
+export const useExplorerPrimaryItemStyles = makeStyles({
+  labelLinks: {
+    ...itemStyle.labelLinks,
+    color: "#0066CD !important",
+  },
+});

packages/webdoc-default-template/src/app/index.js

@@ -24,7 +24,7 @@ window.onload = function() {
   ReactDOM.render(
     (
       <Provider store={store}>
-        <Explorer />
+        <Explorer rootRef={{current: explorerRoot}} />
       </Provider>
     ),
     explorerRoot,
@@ -44,7 +44,6 @@ function wakeAccordions() {
       const btn = accordion.querySelector(".accordion__toggle");
 
       btn.onclick = () => {
-        console.log("WTF");
         accordion.classList.toggle("accordion-active");
       };
     },

packages/webdoc-default-template/src/app/store.js

@@ -26,6 +26,11 @@ function globalReducer(state = {}, action) {
         query: action.value,
       };
     }
+  case "setExpandedItems":
+    return {
+      ...state,
+      expandedItems: new Set(action.value),
+    };
   case "toggleItem": {
     const expandedItems = new Set(state.expandedItems);