update empty tab logic

eea · Aug 26, 2024 · f859684 · f859684
1 parent d532df2
commit f859684
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 174 deletions.
diff --git a/src/components/View.jsx b/src/components/View.jsx
@@ -4,7 +4,10 @@ import { compose } from 'redux';
 import { withRouter } from 'react-router';
 import { StyleWrapperView } from '@eeacms/volto-block-style/StyleWrapper';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
+import {
+  isTabEmpty,
+  getParentTabFromHash,
+} from '@eeacms/volto-tabs-block/helpers';
 import { DefaultView } from './templates/default';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
@@ -19,8 +22,10 @@ const View = (props) => {
   const metadata = props.metadata || props.properties;
   const template = data.variation || 'default';
   const tabsData = data.data || {};
-  const tabsList = tabsData.blocks_layout?.items || [];
   const tabs = tabsData.blocks || {};
+  const tabsList = (tabsData.blocks_layout?.items || []).filter((tab) => {
+    return data.hideEmptyTabs ? !isTabEmpty(tabs[tab]) : true;
+  });
   const [activeTab, setActiveTab] = React.useState(tabsList?.[0]);
   const activeTabIndex = tabsList.indexOf(activeTab);
   const tabData = tabs[activeTab] || {};

diff --git a/src/components/templates/accordion/View.jsx b/src/components/templates/accordion/View.jsx
@@ -13,10 +13,7 @@ import config from '@plone/volto/registry';
 import Tabs from 'react-responsive-tabs';
 import { AssetTab } from '@eeacms/volto-tabs-block/components';
 import { TABS_BLOCK } from '@eeacms/volto-tabs-block/constants';
-import {
-  getParentTabFromHash,
-  isTabEmpty,
-} from '@eeacms/volto-tabs-block/helpers';
+import { getParentTabFromHash } from '@eeacms/volto-tabs-block/helpers';
 import { withScrollToTarget } from '@eeacms/volto-tabs-block/hocs';
 
 import '@eeacms/volto-tabs-block/less/menu.less';
@@ -60,63 +57,59 @@ const View = (props) => {
     tabs_width < initialWidth,
   );
 
-  const items = tabsList
-    .filter((tab) => {
-      return data.hideEmptyTabs ? isTabEmpty(tabs[tab]) : true;
-    })
-    .map((tab, index) => {
-      const defaultTitle = `Tab ${index + 1}`;
-      const active = activeTabIndex === index;
-      const tabSettings = tabs[tab];
-      const { title, assetType } = tabSettings;
-      const tabIndex = index + 1;
-      const tabTitle = title || defaultTitle;
-
-      return {
-        title: (
-          <>
-            {semanticIcon ? (
-              <Icon
-                className={active ? semanticIcon.opened : semanticIcon.closed}
-              />
-            ) : (
-              <VoltoIcon
-                name={active ? icons.opened : icons.closed}
-                size={icons.size}
-              />
-            )}
-            {assetType ? (
-              <AssetTab
-                props={tabSettings}
-                tabTitle={tabTitle}
-                tabIndex={tabIndex}
-              />
-            ) : (
-              <span className="menu-item-text">{title || defaultTitle}</span>
-            )}
-          </>
-        ),
-        content: (
-          <Tab
-            {...props}
-            tab={tab}
-            content={tabs[tab]}
-            aria-hidden={false}
-            title={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
-          />
-        ),
-        key: tab,
-        tabClassName: cx(
-          {
-            active,
-          },
-          isAccordion ? 'title accordion-title' : 'ui item title',
-        ),
-        panelClassName: cx('ui attached segment tab content', {
+  const items = tabsList.map((tab, index) => {
+    const defaultTitle = `Tab ${index + 1}`;
+    const active = activeTabIndex === index;
+    const tabSettings = tabs[tab];
+    const { title, assetType } = tabSettings;
+    const tabIndex = index + 1;
+    const tabTitle = title || defaultTitle;
+
+    return {
+      title: (
+        <>
+          {semanticIcon ? (
+            <Icon
+              className={active ? semanticIcon.opened : semanticIcon.closed}
+            />
+          ) : (
+            <VoltoIcon
+              name={active ? icons.opened : icons.closed}
+              size={icons.size}
+            />
+          )}
+          {assetType ? (
+            <AssetTab
+              props={tabSettings}
+              tabTitle={tabTitle}
+              tabIndex={tabIndex}
+            />
+          ) : (
+            <span className="menu-item-text">{title || defaultTitle}</span>
+          )}
+        </>
+      ),
+      content: (
+        <Tab
+          {...props}
+          tab={tab}
+          content={tabs[tab]}
+          aria-hidden={false}
+          title={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
+        />
+      ),
+      key: tab,
+      tabClassName: cx(
+        {
           active,
-        }),
-      };
-    });
+        },
+        isAccordion ? 'title accordion-title' : 'ui item title',
+      ),
+      panelClassName: cx('ui attached segment tab content', {
+        active,
+      }),
+    };
+  });
 
   React.useEffect(() => {
     setMounted(true);

diff --git a/src/components/templates/carousel/HorizontalView.jsx b/src/components/templates/carousel/HorizontalView.jsx
@@ -3,7 +3,6 @@ import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { Icon, RenderBlocks } from '@plone/volto/components';
-import { isTabEmpty } from '@eeacms/volto-tabs-block/helpers';
 
 import rightArrowSVG from '@eeacms/volto-tabs-block/icons/right-key.svg';
 import leftArrowSVG from '@eeacms/volto-tabs-block/icons/left-key.svg';
@@ -148,23 +147,19 @@ const View = (props) => {
         carouselDiv.setAttribute('tabindex', '0');
   }, []);
 
-  const panes = tabsList
-    .filter((tab) => {
-      return data.hideEmptyTabs ? isTabEmpty(tabs[tab]) : true;
-    })
-    .map((tab, _index) => {
-      return {
-        id: tab,
-        renderItem: (
-          <RenderBlocks
-            key={`slide-${tab}`}
-            {...props}
-            metadata={metadata}
-            content={tabs[tab]}
-          />
-        ),
-      };
-    });
+  const panes = tabsList.map((tab, _index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <RenderBlocks
+          key={`slide-${tab}`}
+          {...props}
+          metadata={metadata}
+          content={tabs[tab]}
+        />
+      ),
+    };
+  });
 
   return (
     <>

diff --git a/src/components/templates/carousel/VerticalView.jsx b/src/components/templates/carousel/VerticalView.jsx
@@ -3,7 +3,6 @@ import { withRouter } from 'react-router';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import { RenderBlocks } from '@plone/volto/components';
-import { isTabEmpty } from '@eeacms/volto-tabs-block/helpers';
 
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -30,23 +29,19 @@ const View = (props) => {
     verticalSwiping: true,
   };
 
-  const panes = tabsList
-    .filter((tab) => {
-      return data.hideEmptyTabs ? isTabEmpty(tabs[tab]) : true;
-    })
-    .map((tab, _index) => {
-      return {
-        id: tab,
-        renderItem: (
-          <RenderBlocks
-            {...props}
-            metadata={metadata}
-            content={tabs[tab]}
-            key={`slide-${tab}`}
-          />
-        ),
-      };
-    });
+  const panes = tabsList.map((tab, _index) => {
+    return {
+      id: tab,
+      renderItem: (
+        <RenderBlocks
+          {...props}
+          metadata={metadata}
+          content={tabs[tab]}
+          key={`slide-${tab}`}
+        />
+      ),
+    };
+  });
 
   return (
     <>

diff --git a/src/components/templates/default/View.jsx b/src/components/templates/default/View.jsx
@@ -9,7 +9,6 @@ import {
   SimpleMarkdown,
   getMenuPosition,
 } from '@eeacms/volto-tabs-block/utils';
-import { isTabEmpty } from '@eeacms/volto-tabs-block/helpers';
 
 import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
 
@@ -184,46 +183,39 @@ const View = (props) => {
     menuTabular,
     menuText,
     menuAlign,
-    hideEmptyTabs,
   } = data;
   const isContainer = align === 'full';
 
-  const panes = tabsList
-    .filter((tab) => {
-      return hideEmptyTabs ? isTabEmpty(tabs[tab]) : true;
-    })
-    .map((tab, index) => {
-      return {
-        id: tab,
-        menuItem: (
-          <MenuItem
-            {...props}
-            key={tab}
-            tab={tab}
-            index={index}
-            tabsTitle={title}
-            tabsDescription={description}
-            blockId={props?.id || ''}
-          />
-        ),
-        pane: (
-          <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
-            <div
-              id={tabs[tab]?.title || `Tab ${tabsList.indexOf(tab) + 1}`}
-              className="tab-name"
-            >
-              <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
-                <RenderBlocks
-                  {...props}
-                  metadata={metadata}
-                  content={tabs[tab]}
-                />
-              </div>
+  const panes = tabsList.map((tab, index) => {
+    return {
+      id: tab,
+      menuItem: (
+        <MenuItem
+          {...props}
+          key={tab}
+          tab={tab}
+          index={index}
+          tabsTitle={title}
+          tabsDescription={description}
+          blockId={props?.id || ''}
+        />
+      ),
+      pane: (
+        <Tab.Pane key={tab} as={isContainer ? Container : undefined}>
+          <div id={tabs[tab]?.title || `Tab ${index + 1}`} className="tab-name">
+            <div tabIndex={0} role="tabpanel" id={'tab-pane-' + tab}>
+              <RenderBlocks
+                {...props}
+                metadata={metadata}
+                content={tabs[tab]}
+              />
             </div>
-          </Tab.Pane>
-        ),
-      };
-    });
+          </div>
+        </Tab.Pane>
+      ),
+    };
+  });
+  console.log('HERE ==>', activeTabIndex);
 
   return (
     <>