All files / utils interpolate.ts

100% Statements 63/63
97.44% Branches 38/39
100% Functions 10/10
100% Lines 54/54

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154                                          188x     42x 31x 11x 9x 5x   4x   2x 1x 1x 1x                 43x   43x 43x   43x 53x   53x 27x 27x     53x     43x     33x 203x       10x 10x   10x 41x 41x   41x 8x 33x 6x 6x     41x 27x 27x 42x 27x     27x     41x         41x                                             43x   43x   43x         43x           43x 1x 1x 1x 1x     43x     43x       43x 214x      
import { Easing } from '../easing/types';
import { progress } from './progress';
import { mix } from './mix';
import { mixColor } from './mix-color';
import { mixComplex, mixArray, mixObject } from './mix-complex';
import { color } from 'style-value-types';
import { clamp } from './clamp';
import { pipe } from './pipe';
import { invariant } from 'hey-listen';
 
type MixEasing = Easing | Easing[];
 
type InterpolateOptions<T> = {
  clamp?: boolean;
  ease?: MixEasing;
  mixer?: MixerFactory<T>;
};
 
type Mix<T> = (v: number) => T;
export type MixerFactory<T> = (from: T, to: T) => Mix<T>;
 
const mixNumber = (from: number, to: number) => (p: number) => mix(from, to, p);
 
function detectMixerFactory<T>(v: T): MixerFactory<any> {
  if (typeof v === 'number') {
    return mixNumber;
  } else if (typeof v === 'string') {
    if (color.test(v)) {
      return mixColor;
    } else {
      return mixComplex;
    }
  } else if (Array.isArray(v)) {
    return mixArray;
  } else Eif (typeof v === 'object') {
    return mixObject;
  }
}
 
function createMixers<T>(
  output: T[],
  ease?: MixEasing,
  customMixer?: MixerFactory<T>
) {
  const mixers: Array<Mix<T>> = [];
  const mixerFactory: MixerFactory<T> =
    customMixer || detectMixerFactory(output[0]);
  const numMixers = output.length - 1;
 
  for (let i = 0; i < numMixers; i++) {
    let mixer = mixerFactory(output[i], output[i + 1]);
 
    if (ease) {
      const easingFunction = Array.isArray(ease) ? ease[i] : ease;
      mixer = pipe(easingFunction, mixer) as Mix<T>;
    }
 
    mixers.push(mixer);
  }
 
  return mixers;
}
 
function fastInterpolate<T>([from, to]: number[], [mixer]: Array<Mix<T>>) {
  return (v: number) => mixer(progress(from, to, v));
}
 
function slowInterpolate<T>(input: number[], mixers: Array<Mix<T>>) {
  const inputLength = input.length;
  const lastInputIndex = inputLength - 1;
 
  return (v: number) => {
    let mixerIndex = 0;
    let foundMixerIndex = false;
 
    if (v <= input[0]) {
      foundMixerIndex = true;
    } else if (v >= input[lastInputIndex]) {
      mixerIndex = lastInputIndex - 1;
      foundMixerIndex = true;
    }
 
    if (!foundMixerIndex) {
      let i = 1;
      for (; i < inputLength; i++) {
        if (input[i] > v || i === lastInputIndex) {
          break;
        }
      }
      mixerIndex = i - 1;
    }
 
    const progressInRange = progress(
      input[mixerIndex],
      input[mixerIndex + 1],
      v
    );
    return mixers[mixerIndex](progressInRange);
  };
}
 
/**
 * Create a function that maps from a numerical input array to a generic output array.
 *
 * Accepts:
 *   - Numbers
 *   - Colors (hex, hsl, hsla, rgb, rgba)
 *   - Complex (combinations of one or more numbers or strings)
 *
 * ```jsx
 * const mixColor = interpolate([0, 1], ['#fff', '#000'])
 *
 * mixColor(0.5) // 'rgba(128, 128, 128, 1)'
 * ```
 *
 * @public
 */
export function interpolate<T>(
  input: number[],
  output: T[],
  { clamp: isClamp = true, ease, mixer }: InterpolateOptions<T> = {}
) {
  const inputLength = input.length;
 
  invariant(
    inputLength === output.length,
    'Both input and output ranges must be the same length'
  );
 
  invariant(
    !ease || !Array.isArray(ease) || ease.length === inputLength - 1,
    'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.'
  );
 
  // If input runs highest -> lowest, reverse both arrays
  if (input[0] > input[inputLength - 1]) {
    input = [].concat(input);
    output = [].concat(output);
    input.reverse();
    output.reverse();
  }
 
  const mixers = createMixers(output, ease, mixer);
 
  const interpolator =
    inputLength === 2
      ? fastInterpolate(input, mixers)
      : slowInterpolate(input, mixers);
 
  return isClamp
    ? (v: number) => interpolator(clamp(input[0], input[inputLength - 1], v))
    : interpolator;
}