refactor CustomNavigation

src/client/js/components/CustomNavigation.jsx

@@ -5,25 +5,23 @@ import {
 } from 'reactstrap';
 
 
-const CustomNavigation = (props) => {
-  const { navTabMapping } = props;
-  const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[0]);
+const CustomNav = (props) => {
+  const navContainer = useRef();
   const [sliderWidth, setSliderWidth] = useState(0);
   const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
-  const navBar = useRef();
+
+  const { activeTab, navTabMapping } = props;
+
   const navTabs = {};
 
   Object.keys(props.navTabMapping).forEach((key) => {
     navTabs[key] = React.createRef();
   });
 
-  function switchActiveTab(activeTab) {
-    setActiveTab(activeTab);
-  }
-
-  // Might make this dynamic for px, %, pt, em
-  function getPercentage(min, max) {
-    return min / max * 100;
+  function navSelectedHandler(key) {
+    if (props.onNavSelected != null) {
+      props.onNavSelected(key);
+    }
   }
 
   function registerNavLink(key, elm) {
@@ -32,19 +30,25 @@ const CustomNavigation = (props) => {
     }
   }
 
+  // Might make this dynamic for px, %, pt, em
+  function getPercentage(min, max) {
+    return min / max * 100;
+  }
+
+
   useEffect(() => {
     if (activeTab === '') {
       return;
     }
 
-    if (navBar == null || navTabs == null) {
+    if (navContainer == null || navTabs == null) {
       return;
     }
 
     let tempML = 0;
 
     const styles = Object.entries(navTabs).map((el) => {
-      const width = getPercentage(el[1].offsetWidth, navBar.current.offsetWidth);
+      const width = getPercentage(el[1].offsetWidth, navContainer.current.offsetWidth);
       const marginLeft = tempML;
       tempML += width;
       return { width, marginLeft };
@@ -57,10 +61,10 @@ const CustomNavigation = (props) => {
   }, [activeTab, navTabs, navTabMapping]);
 
   return (
-    <React.Fragment>
-      <div ref={navBar}>
+    <>
+      <div ref={navContainer}>
         <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
-          {Object.entries(props.navTabMapping).map(([key, value]) => {
+          {Object.entries(navTabMapping).map(([key, value]) => {
             return (
               <NavItem
 
@@ -68,7 +72,7 @@ const CustomNavigation = (props) => {
                 type="button"
                 className={`p-0 grw-custom-navtab ${activeTab === key && 'active'}}`}
               >
-                <NavLink key={key} innerRef={elm => registerNavLink(key, elm)} onClick={() => { switchActiveTab(key) }}>
+                <NavLink key={key} innerRef={elm => registerNavLink(key, elm)} onClick={() => { navSelectedHandler(key) }}>
                   {value.icon}
                   {value.i18n}
                 </NavLink>
@@ -78,6 +82,30 @@ const CustomNavigation = (props) => {
         </Nav>
       </div>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
+    </>
+  );
+
+};
+
+CustomNav.propTypes = {
+  activeTab: PropTypes.string.isRequired,
+  navTabMapping: PropTypes.object.isRequired,
+  onNavSelected: PropTypes.func,
+};
+
+const CustomNavigation = (props) => {
+  const { navTabMapping } = props;
+  const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[0]);
+
+  function switchActiveTab(activeTab) {
+    setActiveTab(activeTab);
+  }
+
+  return (
+    <React.Fragment>
+
+      <CustomNav activeTab={activeTab} navTabMapping={navTabMapping} onNavSelected={switchActiveTab} />
+
       <TabContent activeTab={activeTab} className="p-4">
         {Object.entries(props.navTabMapping).map(([key, value]) => {
           return (