@eeacms/volto-tabs-block 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -4,8 +4,15 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [1.3.1](https://github.com/eea/volto-tabs-block/compare/1.3.0...1.3.1)
+
+- Style fix + missing key [`0d2b097`](https://github.com/eea/volto-tabs-block/commit/0d2b097850bc89d8a525ce8a4564a348975d33b9)
+
 #### [1.3.0](https://github.com/eea/volto-tabs-block/compare/1.2.12...1.3.0)
 
+> 6 April 2022
+
+- Refactor tabs block [`#19`](https://github.com/eea/volto-tabs-block/pull/19)
 - Refactor tabs block [`#18`](https://github.com/eea/volto-tabs-block/pull/18)
 - Fix tests [`fdc74d9`](https://github.com/eea/volto-tabs-block/commit/fdc74d9f5f1c851de9ca3a9576cf2dbcd1495968)
 - Bump version [`acfef41`](https://github.com/eea/volto-tabs-block/commit/acfef413eb9f923f7a7283d12417e23c81192633)

package/Jenkinsfile

@@ -184,10 +184,10 @@ pipeline {
             unstash "xunit-reports"
             unstash "cypress-coverage"
             def scannerHome = tool 'SonarQubeScanner';
-            def nodeJS = tool 'NodeJS11';
+            def nodeJS = tool 'NodeJS';
             withSonarQubeEnv('Sonarqube') {
               sh '''sed -i "s#/opt/frontend/my-volto-project/src/addons/${GIT_NAME}/##g" xunit-reports/coverage/lcov.info'''
-              sh "export PATH=$PATH:${scannerHome}/bin:${nodeJS}/bin; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
+              sh "export PATH=${scannerHome}/bin:${nodeJS}/bin:$PATH; sonar-scanner -Dsonar.javascript.lcov.reportPaths=./xunit-reports/coverage/lcov.info,./cypress-coverage/coverage/lcov.info -Dsonar.sources=./src -Dsonar.projectKey=$GIT_NAME-$BRANCH_NAME -Dsonar.projectVersion=$BRANCH_NAME-$BUILD_NUMBER"
               sh '''try=2; while [ \$try -gt 0 ]; do curl -s -XPOST -u "${SONAR_AUTH_TOKEN}:" "${SONAR_HOST_URL}api/project_tags/set?project=${GIT_NAME}-${BRANCH_NAME}&tags=${SONARQUBE_TAGS},${BRANCH_NAME}" > set_tags_result; if [ \$(grep -ic error set_tags_result ) -eq 0 ]; then try=0; else cat set_tags_result; echo "... Will retry"; sleep 60; try=\$(( \$try - 1 )); fi; done'''
             }
           }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-tabs-block",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "volto-tabs-block: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/components/templates/default/View.jsx

@@ -121,6 +121,7 @@ const View = (props) => {
       menuItem: (
         <MenuItem
           {...props}
+          key={tab}
           tab={tab}
           index={index}
           tabsTitle={tabsTitle}

package/src/components/templates/horizontal-responsive/View.jsx

@@ -61,15 +61,16 @@ const MenuWrapper = (props) => {
     tabsList = [],
     setActiveTab = () => {},
   } = props;
+  const [open, setOpen] = React.useState(false);
 
   React.useEffect(() => {
     if (!true || !node?.current) return;
     const items = node.current.querySelectorAll(
       '.ui.menu > .menu-wrapper > .item:not(.menu-title)',
     );
-    const underlineMenu = node.current.querySelector('.ui.dropdown');
-    if (!underlineMenu) return;
-    const overflowOffset = positionedOffset(underlineMenu, node.current);
+    const underlineDropdown = node.current.querySelector('.ui.dropdown');
+    if (!underlineDropdown) return;
+    const overflowOffset = positionedOffset(underlineDropdown, node.current);
     if (!overflowOffset) {
       return;
     }
@@ -83,8 +84,11 @@ const MenuWrapper = (props) => {
         anyHidden = anyHidden || hidden;
       }
     }
-    underlineMenu.style.visibility = anyHidden ? '' : 'hidden';
-  }, [screen, node, data.isResponsive]);
+    underlineDropdown.style.visibility = anyHidden ? '' : 'hidden';
+    if (!anyHidden && open) {
+      setOpen(false);
+    }
+  }, [screen, node, open, data.isResponsive]);
 
   return (
     <React.Fragment>
@@ -95,39 +99,38 @@ const MenuWrapper = (props) => {
           </React.Fragment>
         ))}
       </div>
-      {true && (
-        <Dropdown
-          icon="ellipsis horizontal"
-          className="item"
-          pointing="top right"
-        >
-          <Dropdown.Menu>
-            {tabsList.map((underlineTab, underlineIndex) => {
-              const title = tabs[underlineTab].title;
-              const defaultTitle = `Tab ${underlineIndex + 1}`;
+      <Dropdown
+        icon="ellipsis horizontal"
+        className="item"
+        pointing="top right"
+        open={open}
+        onOpen={() => setOpen(true)}
+        onClose={() => setOpen(false)}
+      >
+        <Dropdown.Menu>
+          {tabsList.map((underlineTab, underlineIndex) => {
+            const title = tabs[underlineTab].title;
+            const defaultTitle = `Tab ${underlineIndex + 1}`;
 
-              return (
-                <Dropdown.Item
-                  hidden
-                  key={`underline-tab-${underlineIndex}-${underlineTab}`}
-                  underline-item-data={underlineTab}
-                  active={underlineTab === activeTab}
-                  onClick={() => {
-                    if (activeTab !== underlineTab) {
-                      setActiveTab(underlineTab);
-                    }
-                  }}
-                >
-                  <span className={'menu-item-count'}>
-                    {underlineIndex + 1}
-                  </span>
-                  <p className={'menu-item-text'}>{title || defaultTitle}</p>
-                </Dropdown.Item>
-              );
-            })}
-          </Dropdown.Menu>
-        </Dropdown>
-      )}
+            return (
+              <Dropdown.Item
+                hidden
+                key={`underline-tab-${underlineIndex}-${underlineTab}`}
+                underline-item-data={underlineTab}
+                active={underlineTab === activeTab}
+                onClick={() => {
+                  if (activeTab !== underlineTab) {
+                    setActiveTab(underlineTab);
+                  }
+                }}
+              >
+                <span className={'menu-item-count'}>{underlineIndex + 1}</span>
+                <p className={'menu-item-text'}>{title || defaultTitle}</p>
+              </Dropdown.Item>
+            );
+          })}
+        </Dropdown.Menu>
+      </Dropdown>
     </React.Fragment>
   );
 };
@@ -201,6 +204,7 @@ const View = (props) => {
       menuItem: (
         <MenuItem
           {...props}
+          key={tab}
           tab={tab}
           tabsList={tabsList}
           index={index}
@@ -245,7 +249,6 @@ const View = (props) => {
           text: getDataValue('menuText'),
           vertical: menuPosition.vertical,
           className: cx(data.menuAlign, { container: isContainer }),
-          items: undefined,
           children: (
             <MenuWrapper
               {...props}

package/src/less/menu.less

@@ -86,6 +86,7 @@
 
   &.horizontal-responsive {
     .horizontal-responsive.tabs > .ui.menu {
+      overflow: visible;
       justify-content: space-between;
 
       .menu-wrapper {