Merge remote-tracking branch 'origin/develop' into slate-migration

eea · Oct 25, 2022 · 0055336 · 0055336
2 parents efd8d7f + 423cd37
commit 0055336
Show file tree

Hide file tree

Showing 8 changed files with 637 additions and 703 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/Jenkinsfile b/Jenkinsfile
@@ -4,7 +4,7 @@ pipeline {
   environment {
         GIT_NAME = "volto-datablocks"
         NAMESPACE = "@eeacms"
-        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater"
+        SONARQUBE_TAGS = "volto.eea.europa.eu,climate-energy.eea.europa.eu,forest.eea.europa.eu,biodiversity.europa.eu,water.europa.eu-freshwater,water.europa.eu-marine"
         DEPENDENCIES = "@eeacms/volto-embed"
         VOLTO = "alpha"
     }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-datablocks",
-  "version": "3.0.16",
+  "version": "3.0.19",
   "description": "(EEA) Provides primitives for data connectivity to volto-plotlycharts and other blocks",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",
@@ -35,7 +35,8 @@
     "@cypress/code-coverage": "^3.9.5",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "postcss-overrides": "3.1.4",
-    "webpack-cli": "^3.3.10"
+    "webpack-cli": "^3.3.10",
+    "md5": "^2.3.0"
   },
   "repository": {
     "type": "git",

diff --git a/src/Utils/FormattedValue.jsx b/src/Utils/FormattedValue.jsx
@@ -2,39 +2,33 @@ import React, { useRef } from 'react';
 import loadable from '@loadable/component';
 import cx from 'classnames';
 import sanitizeHtml from 'sanitize-html';
-import { Portal } from 'react-portal';
 import CountUp from 'react-countup';
 
 import { useOnScreen } from '../helpers';
 
 const D3 = loadable.lib(() => import('d3'));
 
-const AnimatedCounterPortal = ({ originalValue }) => {
-  const portalNode = document.getElementById(
-    `animated-counter-${originalValue}`,
-  );
+const AnimatedCounter = ({ originalValue }) => {
   const ref = useRef();
   const { entryCount, isIntersecting } = useOnScreen(ref);
 
   return (
     <span ref={ref}>
-      <Portal node={portalNode}>
-        {isIntersecting && entryCount === 1 && (
-          <CountUp
-            start={0}
-            formattingFn={(num) => num.toLocaleString()}
-            duration={3}
-            end={originalValue}
-          />
-        )}
-        {isIntersecting && entryCount > 1 && (
-          <span>
-            {originalValue.toLocaleString(undefined, {
-              maximumFractionDigits: 0,
-            })}
-          </span>
-        )}
-      </Portal>
+      {isIntersecting && entryCount === 1 && (
+        <CountUp
+          start={0}
+          formattingFn={(num) => num.toLocaleString()}
+          duration={3}
+          end={originalValue}
+        />
+      )}
+      {isIntersecting && entryCount > 1 && (
+        <span>
+          {originalValue.toLocaleString(undefined, {
+            maximumFractionDigits: 0,
+          })}
+        </span>
+      )}
     </span>
   );
 };
@@ -49,8 +43,6 @@ const FormattedValue = ({
 }) => {
   const originalValue = value;
   const animateValue = typeof value === 'number' && animatedCounter;
-  const uid = animateValue ? `animated-counter-${originalValue}` : '';
-
   return (
     <React.Fragment>
       <D3 fallback={null}>
@@ -61,30 +53,44 @@ const FormattedValue = ({
               value = formatter(value);
             } catch {}
           }
-          if (textTemplate) {
+          if (textTemplate && !animateValue) {
             value = textTemplate.replace('{}', value);
           }
-          if (textTemplate && animateValue) {
-            value = textTemplate.replace(
-              '{}',
-              animateValue ? `<span id="${uid}"></span>` : value,
-            );
-          }
-          if (animateValue && !textTemplate) {
-            value = `<span id="${uid}"></span>`;
-          }
+
           return wrapped ? (
-            <span
-              className={cx('formatted-value', collapsed ? 'collapsed' : null)}
-              dangerouslySetInnerHTML={{
-                __html:
-                  sanitizeHtml(value, {
-                    allowedAttributes: {
-                      span: ['id'],
-                    },
-                  }) || '',
-              }}
-            />
+            <>
+              {animateValue ? (
+                <span
+                  className={cx(
+                    'formatted-value',
+                    collapsed ? 'collapsed' : null,
+                  )}
+                >
+                  {textTemplate && textTemplate.split('{}').length > 0
+                    ? textTemplate.split('{}')[0]
+                    : ''}
+                  <AnimatedCounter originalValue={originalValue} />
+                  {textTemplate && textTemplate.split('{}').length > 0
+                    ? textTemplate.split('{}')[1]
+                    : ''}
+                </span>
+              ) : (
+                <span
+                  className={cx(
+                    'formatted-value',
+                    collapsed ? 'collapsed' : null,
+                  )}
+                  dangerouslySetInnerHTML={{
+                    __html:
+                      sanitizeHtml(value, {
+                        allowedAttributes: {
+                          span: ['id'],
+                        },
+                      }) || '',
+                  }}
+                />
+              )}
+            </>
           ) : (
             sanitizeHtml(value, {
               allowedAttributes: {
@@ -94,7 +100,6 @@ const FormattedValue = ({
           );
         }}
       </D3>
-      {animateValue && <AnimatedCounterPortal originalValue={originalValue} />}
     </React.Fragment>
   );
 };

diff --git a/src/Utils/Sources/Sources.jsx b/src/Utils/Sources/Sources.jsx
@@ -25,7 +25,10 @@ function getData(array) {
     for (let key in array[i]) {
       const column = array[i][key];
       if (row !== '') row += ',';
-      if (column.includes(',')) {
+      if (
+        (typeof column === 'number' && column.toString().includes(',')) ||
+        (typeof column === 'string' && column.includes(','))
+      ) {
         row += `"${column}"`;
       } else {
         row += column;

diff --git a/src/Utils/Sources/styles.css b/src/Utils/Sources/styles.css
@@ -9,3 +9,9 @@
   width: 20px !important;
   cursor: pointer;
 }
+
+@media print {
+  .download-button {
+    display: none;
+  }
+}
diff --git a/src/hocs/connectToMultipleProviders.js b/src/hocs/connectToMultipleProviders.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { withRouter } from 'react-router';

diff --git a/src/hocs/connectToMultipleProvidersUnfiltered.js b/src/hocs/connectToMultipleProvidersUnfiltered.js
@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useEffect, useMemo, useState } from 'react';
 import { withRouter } from 'react-router';
 import { connect, useDispatch } from 'react-redux';