Merge branch 'feat/article-area-renovation' into fix/3545-4237-fix-i18n-for-hackmd

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,
@@ -7,10 +7,15 @@ import {
 
 const CustomNavigation = (props) => {
   const { navTabMapping } = 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);
@@ -21,22 +26,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 };
@@ -48,21 +56,27 @@ const CustomNavigation = (props) => {
 
   }, [activeTab, navTabMapping]);
 
-
   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]) => {

src/client/js/components/Page/PageManagement.jsx

@@ -128,7 +128,7 @@ const PageManagement = (props) => {
           <i className="icon-fw icon-docs"></i> { t('Duplicate') }
         </button>
         <button className="dropdown-item" type="button" onClick={openPagePresentationModalHandler}>
-          <i className="icon-fw"><PresentationIcon /></i><span className="d-none d-sm-inline"> { t('Presentation Mode') }</span>
+          <i className="icon-fw"><PresentationIcon /></i> { t('Presentation Mode') }
         </button>
         <button type="button" className="dropdown-item" onClick={() => { exportPageHandler('md') }}>
           <i className="icon-fw icon-cloud-download"></i>{t('export_bulk.export_page_markdown')}