Remove portal for animated value. Use counter directly

eea · Sep 19, 2022 · 496d3a6 · 496d3a6
1 parent 2ec5c8d
commit 496d3a6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 46 deletions.
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/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';