@eeacms/volto-clms-theme 1.0.63 → 1.0.67

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclCarouselView.jsx

@@ -11,21 +11,18 @@ import cx from 'classnames';
 import loadable from '@loadable/component';
 import { withRouter } from 'react-router';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
+
 const Slider = loadable(() => import('react-slick'));
 
 const View = (props) => {
   const slider = React.useRef(null);
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
   const {
     activeTab = null,
-    data = {},
-    hashlink = {},
     metadata = {},
     tabsList = [],
     tabs = {},
-    setActiveTab = () => {},
+    setActiveTab,
   } = props;
-  const activeTabIndex = tabsList.indexOf(activeTab);
 
   const settings = {
     dots: false,
@@ -35,25 +32,26 @@ const View = (props) => {
     cssEase: 'linear',
     autoplay: true,
     autoplaySpeed: 5000,
+    arrows: false,
     beforeChange: (oldIndex, index) => {
       setActiveTab(tabsList[index]);
     },
   };
 
-  const Dots = (props) => {
-    const { activeTab = null, tabsList = [], slider = {} } = props;
-    return tabsList.length > 1 ? (
-      <ul className={cx('slick-dots', props.uiContainer)} role={'tablist'}>
-        {tabsList.map((tab, index) => (
+  const Dots = (dotProps) => {
+    const { dotActiveTab = null, dotTabsList = [], dotSlider = {} } = dotProps;
+    return dotTabsList.length > 1 ? (
+      <ul className={cx('slick-dots', dotProps.uiContainer)} role={'tablist'}>
+        {dotTabsList.map((tab, index) => (
           <li
             key={`dot-${tab}`}
-            className={cx({ 'slick-active': activeTab === tab })}
+            className={cx({ 'slick-active': dotActiveTab === tab })}
             role={'presentation'}
           >
             <button
               onClick={() => {
-                if (slider.current) {
-                  slider.current.slickGoTo(index);
+                if (dotSlider.current) {
+                  dotSlider.current.slickGoTo(index);
                 }
               }}
             />
@@ -65,11 +63,7 @@ const View = (props) => {
     );
   };
 
-  const ArrowsGroup = (props) => {
-    // const { activeTab = null, tabsList = [], slider = {} } = props;
-    // const currentSlide = tabsList.indexOf(activeTab);
-    // const slideCount = tabsList.length;
-
+  const ArrowsGroup = (arrowProps) => {
     return (
       <div className={'slick-arrows'}>
         <button
@@ -94,35 +88,6 @@ const View = (props) => {
       </div>
     );
   };
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      // TODO: Find the best way to add offset relative to header
-      //       The header can be static on mobile and relative on > mobile
-      // const headerWrapper = document.querySelector('.header-wrapper');
-      // const offsetHeight = headerWrapper?.offsetHeight || 0;
-      const offsetHeight = 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          slider.current.slickGoTo(index);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-    /* eslint-disable-next-line */
-  }, [hashlink.counter]);
 
   const [showInfo, setShowInfo] = React.useState(false);
   const panes = tabsList.map((tab, index) => {
@@ -149,7 +114,11 @@ const View = (props) => {
         {panes.length ? panes.map((pane) => pane.renderItem) : ''}
       </Slider>
       <ArrowsGroup activeTab={activeTab} tabsList={tabsList} slider={slider} />
-      <Dots activeTab={activeTab} tabsList={tabsList} slider={slider} />
+      <Dots
+        dotActiveTab={activeTab}
+        dotTabsList={tabsList}
+        dotSlider={slider}
+      />
     </>
   );
 };

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclTabsView.jsx

@@ -9,50 +9,7 @@ import cx from 'classnames';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const CclTabsView = (props) => {
-  const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-  const {
-    metadata = {},
-    data = {},
-    tabsList = [],
-    activeTabIndex = 0,
-    hashlink = {},
-    setActiveTab = () => {},
-  } = props;
-
-  React.useEffect(() => {
-    const urlHash = props.location.hash.substring(1) || '';
-    if (
-      hashlink.counter > 0 ||
-      (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
-    ) {
-      const id = hashlink.hash || urlHash || '';
-      const index = tabsList.indexOf(id);
-      const parentId = data.id || props.id;
-      const parent = document.getElementById(parentId);
-      const headerWrapper = document.querySelector('.header-wrapper');
-      const offsetHeight = headerWrapper?.offsetHeight || 0;
-      if (id !== parentId && index > -1 && parent) {
-        if (activeTabIndex !== index) {
-          setActiveTab(id);
-        }
-        props.scrollToTarget(parent, offsetHeight);
-      } else if (id === parentId && parent) {
-        props.scrollToTarget(parent, offsetHeight);
-      }
-    }
-    if (!hashlinkOnMount) {
-      setHashlinkOnMount(true);
-    }
-  }, [
-    activeTabIndex,
-    data.id,
-    hashlink.counter,
-    hashlink.hash,
-    hashlinkOnMount,
-    props,
-    setActiveTab,
-    tabsList,
-  ]);
+  const { metadata = {}, tabsList = [], setActiveTab } = props;
 
   const PanelsComponent = () => {
     return (
@@ -78,15 +35,18 @@ const CclTabsView = (props) => {
       </div>
     );
   };
+
+  function handleAction(activeTab, tab) {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  }
+
   const TabsComponent = () => {
     return (
       <div className="tabs" role="tablist">
         {tabsList.map((tab, index) => {
-          const {
-            activeTab = null,
-            tabs = {},
-            setActiveTab = () => {},
-          } = props;
+          const { activeTab = null, tabs = {} } = props;
           const title = tabs[tab].title;
           const tabIndex = index + 1;
           const fa_icon = tabs[tab]?.icon?.fontAwesome || null;
@@ -102,14 +62,10 @@ const CclTabsView = (props) => {
               /* classname hontan estiloa aldatu behar bada "===" "!==" gatik aldatuz nahikoa da */
               className={cx('tab', tab === activeTab && 'tab-selected')}
               onClick={() => {
-                if (activeTab !== tab) {
-                  setActiveTab(tab);
-                }
+                handleAction(activeTab, tab);
               }}
               onKeyDown={() => {
-                if (activeTab !== tab) {
-                  setActiveTab(tab);
-                }
+                handleAction(activeTab, tab);
               }}
               tabIndex="0"
             >

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalFaqTabsView.jsx

@@ -1,13 +1,15 @@
+import './fontawesome';
+import './custom.less';
+
+import { NavLink, Route } from 'react-router-dom';
+
 import React from 'react';
-import { connect } from 'react-redux';
+import { RenderBlocks } from '@plone/volto/components';
 import { compose } from 'redux';
+import { connect } from 'react-redux';
+import cx from 'classnames';
 import { withRouter } from 'react-router';
-import { RenderBlocks } from '@plone/volto/components';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
-import './fontawesome';
-import cx from 'classnames';
-import './custom.less';
-import { Route, NavLink } from 'react-router-dom';
 
 const CclVerticalFaqTabsView = (props) => {
   const { metadata = {}, tabsList = [] } = props;
@@ -37,16 +39,18 @@ const CclVerticalFaqTabsView = (props) => {
       </div>
     );
   };
+
+  function handleActive(activeTab, tab, setActiveTab) {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  }
   const TabsComponent = () => {
     return (
       <div className="left-content cont-w-25">
         <nav className="left-menu">
           {tabsList.map((tab, index) => {
-            const {
-              activeTab = null,
-              tabs = {},
-              setActiveTab = () => {},
-            } = props;
+            const { activeTab = null, tabs = {}, setActiveTab } = props;
             const title = tabs[tab].title;
             const tabIndex = index + 1;
             const defaultTitle = `Tab ${tabIndex}`;
@@ -60,14 +64,10 @@ const CclVerticalFaqTabsView = (props) => {
                   to={'#tab' + tabIndex}
                   className="collapsed"
                   onClick={(e) => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
+                    handleActive(activeTab, tab, setActiveTab);
                   }}
                   onKeyDown={() => {
-                    if (activeTab !== tab) {
-                      setActiveTab(tab);
-                    }
+                    handleActive(activeTab, tab, setActiveTab);
                   }}
                 >
                   {title || defaultTitle}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/CclVerticalTabsView.jsx

@@ -11,7 +11,24 @@ import { withRouter } from 'react-router';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 const CclVerticalTabsView = (props) => {
-  const { metadata = {}, tabsList = [], ExtraComponent = null } = props;
+  const {
+    metadata = {},
+    tabsList = [],
+    ExtraComponent = () => {
+      return '';
+    },
+  } = props;
+
+  const handleClick = (e, tab, activeTab, setActiveTab) => {
+    if (activeTab !== tab) {
+      setActiveTab(tab);
+    }
+  };
+
+  function isSpan(subTab, nextSubTab) {
+    return subTab === false && nextSubTab !== false;
+  }
+
   const PanelsComponent = () => {
     const { activeTab = null, tabs = {} } = props;
     return (
@@ -39,14 +56,10 @@ const CclVerticalTabsView = (props) => {
   const TabsComponent = () => {
     return (
       <div className="left-content cont-w-25">
-        {ExtraComponent ? <ExtraComponent /> : ''}
+        {<ExtraComponent />}
         <nav className="left-menu">
           {tabsList.map((tab, index) => {
-            const {
-              activeTab = null,
-              tabs = {},
-              setActiveTab = () => {},
-            } = props;
+            const { activeTab = null, tabs = {}, setActiveTab } = props;
             const title = tabs[tab].title;
             const subTab = tabs[tab]?.subTab?.subtab || false;
             const tabIndex = index + 1;
@@ -63,21 +76,17 @@ const CclVerticalTabsView = (props) => {
                   subTab && 'subcard',
                 )}
               >
-                {subTab === false && nextSubTab !== false ? (
+                {isSpan(subTab, nextSubTab) ? (
                   <span>{title || defaultTitle}</span>
                 ) : (
                   <NavLink
                     to={'#tab' + tabIndex}
                     className="collapsed"
                     onClick={(e) => {
-                      if (activeTab !== tab) {
-                        setActiveTab(tab);
-                      }
+                      handleClick(e, tab, activeTab, setActiveTab);
                     }}
-                    onKeyDown={() => {
-                      if (activeTab !== tab) {
-                        setActiveTab(tab);
-                      }
+                    onKeyDown={(e) => {
+                      handleClick(e, tab, activeTab, setActiveTab);
                     }}
                   >
                     {title || defaultTitle}

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/RoutingHOC.jsx

@@ -2,60 +2,30 @@ import React from 'react';
 
 const RoutingHOC = (TabView) =>
   function Component(props) {
-    const [hashlinkOnMount, setHashlinkOnMount] = React.useState(false);
-    const {
-      data = {},
-      tabsList = [],
-      tabs,
-      activeTabIndex = 0,
-      hashlink = {},
-      setActiveTab = () => {},
-    } = props;
-    const parentId = data.id || props.id;
-    const scrollToTarget = props.scrollToTarget;
-    React.useEffect(() => {
-      const urlHash = window.location.hash.substring(1) || '';
+    const { tabsList = [], tabs, activeTabIndex = 0, setActiveTab } = props;
+    function reloadTab(window, rTabs, rTabsList) {
       if (
-        hashlink.counter > 0 ||
-        (hashlink.counter === 0 && urlHash && !hashlinkOnMount)
+        window.location.hash.length === 0 &&
+        rTabs[rTabsList[1]]?.subTab?.subtab &&
+        !rTabs[rTabsList[0]]?.subTab?.subtab
       ) {
-        const id = hashlink.hash || urlHash || '';
-        const index = tabsList.indexOf(id);
-        const parent = document.getElementById(parentId);
-        const headerWrapper = document.querySelector('.header-wrapper');
-        const offsetHeight = headerWrapper?.offsetHeight || 0;
-        if (id !== parentId && index > -1 && parent) {
-          if (activeTabIndex !== index) {
-            setActiveTab(id);
-          }
-          scrollToTarget(parent, offsetHeight);
-        } else if (id === parentId && parent) {
-          scrollToTarget(parent, offsetHeight);
-        }
-      }
-      if (!hashlinkOnMount) {
-        setHashlinkOnMount(true);
+        return rTabsList[1];
+      } else if (
+        window.location.hash.length === 0 &&
+        !rTabs[rTabsList[1]]?.subTab?.subtab
+      ) {
+        return rTabsList[0];
       }
-      if (
+      return rTabsList[window.location.hash.substring(4) - 1];
+    }
+    React.useEffect(() => {
+      const isReload =
         String(window.performance.getEntriesByType('navigation')[0].type) ===
           'navigate' ||
         String(window.performance.getEntriesByType('navigation')[0].type) ===
-          'reload'
-      ) {
-        if (
-          window.location.hash.length === 0 &&
-          tabs[tabsList[1]]?.subTab?.subtab &&
-          !tabs[tabsList[0]]?.subTab?.subtab
-        ) {
-          setActiveTab(tabsList[1]);
-        } else if (
-          window.location.hash.length === 0 &&
-          !tabs[tabsList[1]]?.subTab?.subtab
-        ) {
-          setActiveTab(tabsList[0]);
-        } else {
-          setActiveTab(tabsList[window.location.hash.substring(4) - 1]);
-        }
+          'reload';
+      if (isReload) {
+        setActiveTab(reloadTab(window, tabs, tabsList));
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [activeTabIndex]);

package/src/components/Blocks/CustomTemplates/VoltoTabsBlock/TabsWidget.jsx

@@ -1,15 +1,18 @@
 import './fontawesome';
 
-import { FormFieldWrapper, Icon } from '@plone/volto/components';
+import {
+  DragDropList,
+  FormFieldWrapper,
+  Icon,
+  SidebarPopup,
+} from '@plone/volto/components';
 import { Grid, Header } from 'semantic-ui-react';
 import { faExternalLinkAlt, faIcons } from '@fortawesome/free-solid-svg-icons';
 import { omit, without } from 'lodash';
 
-import { DragDropList } from '@plone/volto/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
 import React from 'react';
-import { SidebarPopup } from '@plone/volto/components';
 import { StyleWrapperEdit } from '@eeacms/volto-block-style/StyleWrapper';
 import clearSVG from '@plone/volto/icons/clear.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -45,9 +48,9 @@ const TabsWidget = (props) => {
 
   const { value = {}, id, onChange } = props;
   const { blocks = {} } = value;
-  const tabsList = (value.blocks_layout?.items || []).map((id) => [
-    id,
-    blocks[id],
+  const tabsList = (value.blocks_layout?.items || []).map((tabId) => [
+    tabId,
+    blocks[tabId],
   ]);
   const activeTabData = blocks[activeTabId] || {};
   return (
@@ -306,9 +309,9 @@ const TabsWidget = (props) => {
         {...props}
         selected={activeTabId}
         isVisible={blockStyleVisible}
-        setIsVisible={(value) => {
+        setIsVisible={(visibleValue) => {
           setActiveTabId(null);
-          setBlockStyleVisible(value);
+          setBlockStyleVisible(visibleValue);
         }}
         data={{
           ...activeTabData?.styles,