fix: fix Transition warnings

coingaming · Dec 29, 2020 · 3feb30d · 3feb30d
1 parent 3cd4dfc
commit 3feb30d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/packages/charts/src/TableChart.tsx b/packages/charts/src/TableChart.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { Transition } from 'react-transition-group';
 
@@ -57,6 +57,7 @@ const TableChart: React.FC<Props> = ({
   loaderText = 'No data',
 }) => {
   const isLoading = !data.length;
+  const rowRef = useRef(null);
 
   return (
     <Panel
@@ -82,9 +83,12 @@ const TableChart: React.FC<Props> = ({
               <tbody>
                 {data.map((item, index) => (
                   // eslint-disable-next-line
-                  <Transition key={index} in={true} appear timeout={100 * index}>
+                  <Transition nodeRef={rowRef} key={index} in={true} appear timeout={100 * index}>
                     {state => (
-                      <Row style={{ opacity: state === 'entered' ? 1 : 0 }}>
+                      <Row
+                        ref={rowRef}
+                        style={{ opacity: state === 'entered' ? 1 : 0 }}
+                      >
                         <Cell>
                           <Count>{index + 1}</Count>
                         </Cell>

diff --git a/packages/charts/src/private/VerticalBar.tsx b/packages/charts/src/private/VerticalBar.tsx
@@ -1,5 +1,5 @@
 import { rem } from '@heathmont/moon-utils';
-import React from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 import { Transition } from 'react-transition-group';
 
@@ -70,6 +70,8 @@ type Props = {
 };
 
 export const VerticalBar: React.FC<Props> = ({ data, axisPosition }) => {
+  const lineRef = useRef(null);
+
   return (
     <Container>
       <Table isAutoSize={data.length < 5}>
@@ -90,9 +92,10 @@ export const VerticalBar: React.FC<Props> = ({ data, axisPosition }) => {
                 <Cell wide>
                   {axisPosition === 'center' && <Center />}
                   <Bar isNegative={isNegative} axisPosition={axisPosition}>
-                    <Transition in appear timeout={0}>
+                    <Transition nodeRef={lineRef} in appear timeout={0}>
                       {state => (
                         <Line
+                          ref={lineRef}
                           style={{
                             width: `${state === 'entered' ? percent : 0}%`,
                             opacity,