Merge pull request #2935 from weseek/imprv/4079-set-default-ative-tab

Imprv/4079 set default ative tab

src/client/js/components/CustomNavigation.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import {
   Nav, NavItem, NavLink, TabContent, TabPane,
@@ -6,10 +6,15 @@ import {
 
 
 const CustomNavigation = (props) => {
-  const [activeTab, setActiveTab] = useState('');
-  // [TODO: set default active tab by gw4079]
-  const [sliderWidth, setSliderWidth] = useState(null);
-  const [sliderMarginLeft, setSliderMarginLeft] = useState(null);
+  const [activeTab, setActiveTab] = useState(Object.keys(props.navTabMapping)[0]);
+  const [sliderWidth, setSliderWidth] = useState(0);
+  const [sliderMarginLeft, setSliderMarginLeft] = useState(0);
+  const navBar = useRef();
+  const navTabs = {};
+
+  Object.keys(props.navTabMapping).forEach((key) => {
+    navTabs[key] = React.createRef();
+  });
 
   function switchActiveTab(activeTab) {
     setActiveTab(activeTab);
@@ -20,22 +25,25 @@ const CustomNavigation = (props) => {
     return min / max * 100;
   }
 
+  function registerNavLink(key, elm) {
+    if (elm != null) {
+      navTabs[key] = elm;
+    }
+  }
+
   useEffect(() => {
     if (activeTab === '') {
       return;
     }
 
-    const navBar = document.getElementById('grw-custom-navbar');
-    const navTabs = document.querySelectorAll('ul.grw-custom-navbar > li.grw-custom-navtab');
-
     if (navBar == null || navTabs == null) {
       return;
     }
 
     let tempML = 0;
 
-    const styles = [].map.call(navTabs, (el) => {
-      const width = getPercentage(el.offsetWidth, navBar.offsetWidth);
+    const styles = Object.entries(navTabs).map((el) => {
+      const width = getPercentage(el[1].offsetWidth, navBar.current.offsetWidth);
       const marginLeft = tempML;
       tempML += width;
       return { width, marginLeft };
@@ -47,21 +55,27 @@ const CustomNavigation = (props) => {
 
   }, [activeTab]);
 
-
   return (
     <React.Fragment>
-      <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
-        {Object.entries(props.navTabMapping).map(([key, value]) => {
-          return (
-            <NavItem key={key} type="button" className={`p-0 grw-custom-navtab ${activeTab === key && 'active'}`}>
-              <NavLink onClick={() => { switchActiveTab(key) }}>
-                {value.icon}
-                {value.i18n}
-              </NavLink>
-            </NavItem>
-          );
-        })}
-      </Nav>
+      <div ref={navBar}>
+        <Nav className="nav-title grw-custom-navbar" id="grw-custom-navbar">
+          {Object.entries(props.navTabMapping).map(([key, value]) => {
+            return (
+              <NavItem
+
+                key={key}
+                type="button"
+                className={`p-0 grw-custom-navtab ${activeTab === key && 'active'}}`}
+              >
+                <NavLink key={key} innerRef={elm => registerNavLink(key, elm)} onClick={() => { switchActiveTab(key) }}>
+                  {value.icon}
+                  {value.i18n}
+                </NavLink>
+              </NavItem>
+            );
+          })}
+        </Nav>
+      </div>
       <hr className="my-0 grw-nav-slide-hr border-none" style={{ width: `${sliderWidth}%`, marginLeft: `${sliderMarginLeft}%` }} />
       <TabContent activeTab={activeTab} className="p-4">
         {Object.entries(props.navTabMapping).map(([key, value]) => {