Move interpolation types to a separate file

Author: jacobrask

src/animated/AnimatedArray.ts

@@ -1,7 +1,7 @@
+import { InterpolationConfig, Interpolator } from '../types/interpolation'
 import { AnimatedArrayWithChildren } from './Animated'
 import AnimatedInterpolation from './AnimatedInterpolation'
 import AnimatedValue from './AnimatedValue'
-import { InterpolationConfig } from './createInterpolation'
 
 export default class AnimatedArray extends AnimatedArrayWithChildren {
   payload: AnimatedValue[]
@@ -21,6 +21,10 @@ export default class AnimatedArray extends AnimatedArrayWithChildren {
 
   getValue = () => this.payload.map(v => v.getValue())
 
-  interpolate = (config: InterpolationConfig, arg: any) =>
-    new AnimatedInterpolation(this, config, arg)
+  interpolate<In extends string | number, Out extends string | number>(
+    range: number[] | InterpolationConfig<Out> | Interpolator<In, Out>,
+    output?: Out[]
+  ) {
+    return new AnimatedInterpolation(this, range as number[], output!)
+  }
 }

src/animated/AnimatedInterpolation.ts

@@ -1,38 +1,57 @@
+import {
+  AnimatedValueFromInterpolation,
+  InterpolationConfig,
+  Interpolator,
+} from '../types/interpolation'
 import Animated, { AnimatedArrayWithChildren } from './Animated'
-import createInterpolation, { InterpolationConfig } from './createInterpolation'
+import createInterpolator from './createInterpolator'
 
-export default class AnimatedInterpolation extends AnimatedArrayWithChildren {
-  calc: any
+export default class AnimatedInterpolation<
+  Value extends number | string = number | string
+> extends AnimatedArrayWithChildren {
+  calc: Interpolator<number, Value>
 
   constructor(
     parents: Animated | Animated[],
-    config: InterpolationConfig,
-    arg: any
+    range: number[] | InterpolationConfig<Value> | Interpolator<Value>,
+    output?: Value[]
   ) {
     super()
     this.payload =
       // AnimatedArrays should unfold, except AnimatedInterpolation which is taken as is
       parents instanceof AnimatedArrayWithChildren &&
-      !(parents as AnimatedInterpolation).updateConfig
+      !('updateConfig' in parents)
         ? parents.payload
         : Array.isArray(parents)
         ? parents
         : [parents]
-    this.calc = createInterpolation(config as any, arg)
+    this.calc = createInterpolator(range as number[], output!)
   }
 
-  getValue = () => this.calc(...this.payload.map(value => value.getValue()))
+  getValue = (): Value =>
+    (this.calc as any)(...this.payload.map(value => value.getValue()))
 
-  updateConfig = (config: InterpolationConfig, arg: any) => {
-    this.calc = createInterpolation(config as any, arg)
+  updateConfig(
+    range: number[] | InterpolationConfig<Value> | Interpolator<Value>,
+    output?: Value[]
+  ) {
+    this.calc = createInterpolator<Value>(range as number[], output!)
   }
 
-  interpolate = (config: InterpolationConfig, arg: any) =>
-    new AnimatedInterpolation(this, config, arg)
+  interpolate<In extends string | number, Out extends string | number = In>(
+    range: number[] | InterpolationConfig<Out> | Interpolator<In, Out>,
+    output?: Out[]
+  ) {
+    return new AnimatedInterpolation(this, range as number[], output!)
+  }
 }
 
-export const interpolate = (
+export const interpolate: AnimatedValueFromInterpolation = <
+  In extends number | string,
+  Out extends number | string = In
+>(
   parents: Animated | Animated[],
-  config: InterpolationConfig,
-  arg: any
-) => parents && new AnimatedInterpolation(parents, config, arg)
+  range: number[] | InterpolationConfig<Out> | Interpolator<In, Out>,
+  output?: Out[]
+) =>
+  parents && new AnimatedInterpolation<Out>(parents, range as number[], output!)

src/animated/AnimatedValue.ts

@@ -1,6 +1,6 @@
+import { InterpolationConfig, Interpolator } from '../types/interpolation'
 import { AnimatedWithChildren } from './Animated'
 import AnimatedInterpolation from './AnimatedInterpolation'
-import { InterpolationConfig } from './createInterpolation'
 
 /**
  * Animated works by building a directed acyclic graph of dependencies
@@ -75,6 +75,10 @@ export default class AnimatedValue extends AnimatedWithChildren {
     this.setValue(value, true)
   }
 
-  interpolate = (config: InterpolationConfig, arg: any) =>
-    new AnimatedInterpolation(this, config, arg)
+  interpolate<In extends string | number, Out extends string | number>(
+    range: number[] | InterpolationConfig<Out> | Interpolator<In, Out>,
+    output?: Out[]
+  ) {
+    return new AnimatedInterpolation(this, range as number[], output!)
+  }
 }

src/animated/Globals.ts

@@ -1,5 +1,5 @@
 import { MutableRefObject, ReactType } from 'react'
-import createStringInterpolation from '../shared/stringInterpolation'
+import { InterpolatorFromConfig } from '../types/interpolation'
 import AnimatedStyle from './AnimatedStyle'
 
 type ApplyPropsFunction = (node?: any, props?: any) => undefined | false
@@ -30,8 +30,8 @@ export function injectFrame(raf: typeof requestFrame, caf: typeof cancelFrame) {
   cancelFrame = caf
 }
 
-export let interpolation: typeof createStringInterpolation
-export function injectStringInterpolation(fn: typeof interpolation) {
+export let interpolation: InterpolatorFromConfig<string>
+export function injectStringInterpolator(fn: typeof interpolation) {
   interpolation = fn
 }
 

src/animated/createInterpolation.ts

@@ -1,16 +1,16 @@
 import colorNames from '../shared/colors'
-import createStringInterpolation from '../shared/stringInterpolation'
-import createInterpolation from './createInterpolation'
+import createStringInterpolator from '../shared/stringInterpolation'
+import createInterpolator from './createInterpolator'
 import * as Globals from './Globals'
 
 beforeAll(() => {
   Globals.injectColorNames(colorNames)
-  Globals.injectStringInterpolation(createStringInterpolation)
+  Globals.injectStringInterpolator(createStringInterpolator)
 })
 
 describe('Interpolation', () => {
   it('should work with defaults', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: [0, 1],
     })
@@ -22,14 +22,14 @@ describe('Interpolation', () => {
   })
 
   it('should work with interpolation function as argument', () => {
-    const interpolation = createInterpolation(value => `scale(${value})`)
+    const interpolation = createInterpolator(value => `scale(${value})`)
 
     expect(interpolation(0)).toBe('scale(0)')
     expect(interpolation(10.5)).toBe('scale(10.5)')
   })
 
   it('should work with range arrays as arguments', () => {
-    const interpolation = createInterpolation([0, 1], [100, 200])
+    const interpolation = createInterpolator([0, 1], [100, 200])
 
     expect(interpolation(0)).toBe(100)
     expect(interpolation(0.5)).toBe(150)
@@ -38,7 +38,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with output range', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: [100, 200],
     })
@@ -50,7 +50,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with input range', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [100, 200],
       output: [0, 1],
     })
@@ -62,7 +62,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with keyframes without extrapolate', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1, 2],
       output: [0.2, 1, 0.2],
       extrapolate: 'clamp',
@@ -72,7 +72,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with output ranges as string', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.4)'],
     })
@@ -83,7 +83,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with output ranges as short hex string', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: ['#024', '#9BF'],
     })
@@ -94,7 +94,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with output ranges as long hex string', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: ['#FF9500', '#87FC70'],
     })
@@ -105,7 +105,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with output ranges with mixed hex and rgba strings', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: ['rgba(100, 120, 140, .4)', '#87FC70'],
     })
@@ -116,7 +116,7 @@ describe('Interpolation', () => {
   })
 
   it('should work with negative and decimal values in string ranges', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1],
       output: ['-100.5deg', '100deg'],
     })
@@ -127,7 +127,7 @@ describe('Interpolation', () => {
   })
 
   it('should support a mix of color patterns', () => {
-    const interpolation = createInterpolation({
+    const interpolation = createInterpolator({
       range: [0, 1, 2],
       output: ['rgba(0, 100, 200, 0)', 'rgb(50, 150, 250)', 'red'],
     })