chore(axes): changes to support react-spring v9.1.2

plouc · Apr 30, 2021 · dfd3ef0 · dfd3ef0
1 parent f7fcc75
commit dfd3ef0
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 38 deletions.
diff --git a/packages/axes/src/components/Axis.tsx b/packages/axes/src/components/Axis.tsx
@@ -94,8 +94,11 @@ export const Axis = <Value extends string | number | Date>({
         immediate: !animate,
     })
 
-    const transition = useTransition(ticks, {
-        key: tick => tick.key,
+    const transition = useTransition<
+        typeof ticks[0],
+        { opacity: number; transform: string; textTransform: string }
+    >(ticks, {
+        keys: tick => tick.key,
         initial: tick => ({
             opacity: 1,
             transform: `translate(${tick.x},${tick.y})`,

diff --git a/packages/axes/src/components/GridLines.tsx b/packages/axes/src/components/GridLines.tsx
@@ -7,42 +7,45 @@ import { Line } from '../types'
 export const GridLines = ({ lines }: { lines: Line[] }) => {
     const { animate, config: springConfig } = useMotionConfig()
 
-    const transition = useTransition(lines, {
-        key: line => line.key,
-        initial: line => ({
-            opacity: 1,
-            x1: line.x1,
-            x2: line.x2,
-            y1: line.y1,
-            y2: line.y2,
-        }),
-        from: line => ({
-            opacity: 0,
-            x1: line.x1,
-            x2: line.x2,
-            y1: line.y1,
-            y2: line.y2,
-        }),
-        enter: line => ({
-            opacity: 1,
-            x1: line.x1,
-            x2: line.x2,
-            y1: line.y1,
-            y2: line.y2,
-        }),
-        update: line => ({
-            opacity: 1,
-            x1: line.x1,
-            x2: line.x2,
-            y1: line.y1,
-            y2: line.y2,
-        }),
-        leave: {
-            opacity: 0,
-        },
-        config: springConfig,
-        immediate: !animate,
-    })
+    const transition = useTransition<Line, Record<'opacity' | 'x1' | 'x2' | 'y1' | 'y2', number>>(
+        lines,
+        {
+            keys: line => line.key,
+            initial: line => ({
+                opacity: 1,
+                x1: line.x1,
+                x2: line.x2,
+                y1: line.y1,
+                y2: line.y2,
+            }),
+            from: line => ({
+                opacity: 0,
+                x1: line.x1,
+                x2: line.x2,
+                y1: line.y1,
+                y2: line.y2,
+            }),
+            enter: line => ({
+                opacity: 1,
+                x1: line.x1,
+                x2: line.x2,
+                y1: line.y1,
+                y2: line.y2,
+            }),
+            update: line => ({
+                opacity: 1,
+                x1: line.x1,
+                x2: line.x2,
+                y1: line.y1,
+                y2: line.y2,
+            }),
+            leave: {
+                opacity: 0,
+            },
+            config: springConfig,
+            immediate: !animate,
+        }
+    )
 
     return (
         <g>