reuse crossfade configuration

Recidiviz · Feb 5, 2021 · 04afe64 · 04afe64
1 parent f1cd390
commit 04afe64
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 49 deletions.
diff --git a/spotlight-client/src/Statistic/Statistic.tsx b/spotlight-client/src/Statistic/Statistic.tsx
@@ -19,9 +19,16 @@ import { rem } from "polished";
 import React from "react";
 import { animated, useTransition } from "react-spring/web.cjs";
 import styled from "styled-components/macro";
-import { colors, fluidFontSizeStyles, typefaces } from "../UiLibrary";
+import {
+  animation,
+  colors,
+  fluidFontSizeStyles,
+  typefaces,
+} from "../UiLibrary";
 
-const StatisticsWrapper = styled.figure``;
+const StatisticsWrapper = styled.figure`
+  position: relative;
+`;
 
 const Value = styled.div<{ minSize: number; maxSize: number }>`
   color: ${colors.text};
@@ -54,12 +61,7 @@ const Statistic: React.FC<StatisticProps> = ({
   minSize,
   value = "No data",
 }) => {
-  const transitions = useTransition(value, null, {
-    initial: { opacity: 1 },
-    from: { opacity: 0 },
-    enter: { opacity: 1 },
-    leave: { opacity: 0, position: "absolute" },
-  });
+  const transitions = useTransition(value, null, animation.crossFade);
   return (
     // figcaption does not seem to get consistently picked up as the accessible name,
     // so including it as a label here too for insurance

diff --git a/spotlight-client/src/UiLibrary/animation.ts b/spotlight-client/src/UiLibrary/animation.ts
@@ -16,7 +16,15 @@
 // =============================================================================
 
 const defaultDuration = 500;
+const crossFade = {
+  initial: { opacity: 1, top: 0 },
+  from: { opacity: 0 },
+  enter: { opacity: 1 },
+  leave: { opacity: 0, position: "absolute" },
+  config: { friction: 40, tension: 280 },
+} as const;
 
 export default {
   defaultDuration,
+  crossFade,
 };
diff --git a/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx b/spotlight-client/src/VizDemographicsByCategory/VizDemographicsByCategory.tsx
@@ -27,7 +27,7 @@ import DemographicsByCategoryMetric from "../contentModels/DemographicsByCategor
 import DemographicFilterSelect from "../DemographicFilterSelect";
 import FiltersWrapper from "../FiltersWrapper";
 import NoMetricData from "../NoMetricData";
-import { zIndex } from "../UiLibrary";
+import { animation, zIndex } from "../UiLibrary";
 
 const bubbleChartHeight = 325;
 
@@ -64,13 +64,7 @@ const VizDemographicsByCategory: React.FC<VizDemographicsByCategoryProps> = ({
   const chartTransitions = useTransition(
     { demographicView, dataSeries },
     (item) => item.demographicView,
-    {
-      initial: { opacity: 1 },
-      from: { opacity: 0 },
-      enter: { opacity: 1 },
-      leave: { opacity: 0, position: "absolute" },
-      config: { friction: 40, tension: 280 },
-    }
+    animation.crossFade
   );
 
   if (demographicView === "nofilter")
@@ -94,7 +88,7 @@ const VizDemographicsByCategory: React.FC<VizDemographicsByCategoryProps> = ({
             <animated.div style={chartContainerStyles}>
               {chartTransitions.map(({ item, key, props }) => (
                 <ChartWrapper key={key} ref={measureRef}>
-                  <animated.div style={{ ...props, top: 0 }}>
+                  <animated.div style={props}>
                     {
                       // for type safety we have to check this again
                       // but it should always be defined if we've gotten this far

diff --git a/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx b/spotlight-client/src/VizPrisonStayLengths/VizPrisonStayLengths.tsx
@@ -31,6 +31,7 @@ import DemographicFilterSelect from "../DemographicFilterSelect";
 import FiltersWrapper from "../FiltersWrapper";
 import { prisonStayLengthFields } from "../metricsApi";
 import NoMetricData from "../NoMetricData";
+import { animation } from "../UiLibrary";
 
 const ChartsWrapper = styled.div`
   position: relative;
@@ -81,13 +82,7 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
   const chartTransitions = useTransition(
     { demographicView, dataSeries },
     (item) => item.demographicView,
-    {
-      initial: { opacity: 1 },
-      from: { opacity: 0 },
-      enter: { opacity: 1 },
-      leave: { opacity: 0, position: "absolute" },
-      config: { friction: 40, tension: 280 },
-    }
+    animation.crossFade
   );
 
   if (demographicView === "nofilter")
@@ -109,9 +104,9 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
               filters={[<DemographicFilterSelect metric={metric} />]}
             />
             <animated.div style={chartContainerStyles}>
-              {chartTransitions.map(({ item, key, props }) => (
-                <ChartsWrapper key={key} ref={measureRef}>
-                  <animated.div style={{ ...props, top: 0 }}>
+              <ChartsWrapper ref={measureRef}>
+                {chartTransitions.map(({ item, key, props }) => (
+                  <animated.div key={key} style={props}>
                     {
                       // for type safety we have to check this again
                       // but it should always be defined if we've gotten this far
@@ -123,8 +118,8 @@ const VizPrisonStayLengths: React.FC<VizPrisonStayLengthsProps> = ({
                       )
                     }
                   </animated.div>
-                </ChartsWrapper>
-              ))}
+                ))}
+              </ChartsWrapper>
             </animated.div>
           </>
         )}

diff --git a/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx b/spotlight-client/src/VizRecidivismRateSingleFollowup/VizRecidivismRateSingleFollowup.tsx
@@ -30,6 +30,7 @@ import RecidivismRateMetric from "../contentModels/RecidivismRateMetric";
 import DemographicFilterSelect from "../DemographicFilterSelect";
 import FiltersWrapper from "../FiltersWrapper";
 import NoMetricData from "../NoMetricData";
+import { animation } from "../UiLibrary";
 import FollowupPeriodFilterSelect from "./FollowupPeriodFilterSelect";
 
 const ChartsWrapper = styled.div`
@@ -79,13 +80,7 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
   const chartTransitions = useTransition(
     { demographicView, singleFollowupDemographics },
     (item) => item.demographicView,
-    {
-      initial: { opacity: 1 },
-      from: { opacity: 0 },
-      enter: { opacity: 1 },
-      leave: { opacity: 0, position: "absolute" },
-      config: { friction: 40, tension: 280 },
-    }
+    animation.crossFade
   );
 
   if (demographicView === "nofilter")
@@ -110,9 +105,9 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
               ]}
             />
             <animated.div style={chartContainerStyles}>
-              {chartTransitions.map(({ item, key, props }) => (
-                <ChartsWrapper key={key} ref={measureRef}>
-                  <animated.div style={{ ...props, top: 0 }}>
+              <ChartsWrapper ref={measureRef}>
+                {chartTransitions.map(({ item, key, props }) => (
+                  <animated.div key={key} style={props}>
                     {
                       // for type safety we have to check this again
                       // but it should always be defined if we've gotten this far
@@ -125,8 +120,8 @@ const VizRecidivismRateSingleFollowup: React.FC<VizRecidivismRateSingleFollowupP
                       )
                     }
                   </animated.div>
-                </ChartsWrapper>
-              ))}
+                ))}
+              </ChartsWrapper>
             </animated.div>
           </>
         )}

diff --git a/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx b/spotlight-client/src/VizSentenceTypeByLocation/VizSentenceTypeByLocation.tsx
@@ -24,6 +24,7 @@ import DemographicFilterSelect from "../DemographicFilterSelect";
 import FiltersWrapper from "../FiltersWrapper";
 import LocalityFilterSelect from "../LocalityFilterSelect";
 import NoMetricData from "../NoMetricData";
+import { animation } from "../UiLibrary";
 import SentenceTypeChart, {
   CHART_BOTTOM_PADDING,
   CHART_HEIGHT,
@@ -52,13 +53,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
   const chartTransitions = useTransition(
     { demographicView, dataGraph, localityId },
     (item) => `${item.demographicView} ${item.localityId}`,
-    {
-      initial: { opacity: 1 },
-      from: { opacity: 0 },
-      enter: { opacity: 1 },
-      leave: { opacity: 0, position: "absolute" },
-      config: { friction: 40, tension: 280 },
-    }
+    animation.crossFade
   );
 
   if (metric.dataGraph) {
@@ -74,7 +69,7 @@ const VizSentenceTypeByLocation: React.FC<VizSentenceTypeByLocationProps> = ({
           {chartTransitions.map(
             ({ item, key, props }) =>
               item.dataGraph && (
-                <animated.div key={key} style={{ ...props, top: 0 }}>
+                <animated.div key={key} style={props}>
                   <SentenceTypeChart {...item.dataGraph} />
                 </animated.div>
               )