feat: Use the new @eeacms/countup library refs - #254634

eea · Jul 25, 2023 · 95f2e82 · 95f2e82
1 parent d6cd362
commit 95f2e82
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 34 deletions.
diff --git a/package.json b/package.json
@@ -17,12 +17,8 @@
     "url": "git@github.com:eea/volto-statistic-block.git"
   },
   "addons": [],
-  "resolutions": {
-    "react-countup/countup.js": "2.5.0"
-  },
   "dependencies": {
-    "react-countup": "6.3.1",
-    "react-visibility-sensor": "5.1.1"
+    "@eeacms/countup": "*"
   },
   "devDependencies": {
     "@cypress/code-coverage": "^3.10.0",

diff --git a/src/StatisticBlock/View.jsx b/src/StatisticBlock/View.jsx
@@ -2,8 +2,7 @@ import React from 'react';
 import isNumber from 'lodash/isNumber';
 import isNaN from 'lodash/isNaN';
 import cx from 'classnames';
-import CountUp from 'react-countup';
-import VisibilitySensor from 'react-visibility-sensor';
+import { CountUp } from '@eeacms/countup';
 import { Statistic } from 'semantic-ui-react';
 import { UniversalLink } from '@plone/volto/components';
 import {
@@ -18,25 +17,6 @@ import {
 
 import './styles.less';
 
-const CountUpWrapper = ({ countUpRef, start }) => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <VisibilitySensor
-      onChange={(isVisible) => {
-        start();
-        if (isVisible && !visible) {
-          setVisible(true);
-        }
-      }}
-      active={!visible}
-      delayedCall
-    >
-      <span ref={countUpRef} />
-    </VisibilitySensor>
-  );
-};
-
 const View = ({ data, mode }) => {
   const {
     horizontal = false,
@@ -93,13 +73,21 @@ const View = ({ data, mode }) => {
                 {animation.enabled && isNumber(valueNo) && !isNaN(valueNo) ? (
                   <CountUp
                     end={valueNo}
-                    duration={animation.duration > 0 ? animation.duration : 2}
-                    decimals={animation.decimals > 0 ? animation.decimals : 0}
-                    prefix={animation.prefix || ''}
-                    suffix={animation.suffix || ''}
-                  >
-                    {(props) => <CountUpWrapper {...props} />}
-                  </CountUp>
+                    isCounting
+                    duration={parseInt(
+                      animation.duration > 0 ? animation.duration : 2,
+                    )}
+                    decimalPlaces={
+                      animation.decimals > 0 ? animation.decimals : 0
+                    }
+                    formatter={(value) => {
+                      let prefix = animation.prefix || '';
+                      let suffix = animation.suffix || '';
+                      return (
+                        prefix + value.toFixed(animation.decimals) + suffix
+                      );
+                    }}
+                  />
                 ) : (
                   _serializeNodes(valueNodes)
                 )}

diff --git a/src/StatisticBlock/View.test.jsx b/src/StatisticBlock/View.test.jsx
@@ -7,7 +7,11 @@ import '@testing-library/jest-dom/extend-expect';
 jest.mock('lodash/isNumber', () => jest.fn(() => true));
 jest.mock('lodash/isNaN', () => jest.fn(() => false));
 
-jest.mock('react-countup', () => () => <div>Mocked CountUp</div>);
+jest.mock('@eeacms/countup', () => ({
+  CountUp: () => {
+    return <div>Mocked CountUp</div>;
+  },
+}));
 
 jest.mock('@plone/volto/components', () => ({
   UniversalLink: ({ children }) => <div>{children}</div>,