react-native-worklets 0.0.1-alpha → 0.1.0

package/nodes/AnimatedInterpolation.js

@@ -1,338 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-
-import invariant from 'fbjs/lib/invariant';
-import normalizeColor from 'normalizeColor';
-
-const linear = t => t;
-
-/**
- * Very handy helper to map input ranges to output ranges with an easing
- * function and custom behavior outside of the ranges.
- */
-function createInterpolation(config) {
-  if (config.outputRange && typeof config.outputRange[0] === 'string') {
-    return createInterpolationFromStringOutputRange(config);
-  }
-
-  const outputRange = config.outputRange;
-  checkInfiniteRange('outputRange', outputRange);
-
-  const inputRange = config.inputRange;
-  checkInfiniteRange('inputRange', inputRange);
-  checkValidInputRange(inputRange);
-
-  invariant(
-    inputRange.length === outputRange.length,
-    'inputRange (' +
-      inputRange.length +
-      ') and outputRange (' +
-      outputRange.length +
-      ') must have the same length'
-  );
-
-  const easing = config.easing || linear;
-
-  let extrapolateLeft = 'extend';
-  if (config.extrapolateLeft !== undefined) {
-    extrapolateLeft = config.extrapolateLeft;
-  } else if (config.extrapolate !== undefined) {
-    extrapolateLeft = config.extrapolate;
-  }
-
-  let extrapolateRight = 'extend';
-  if (config.extrapolateRight !== undefined) {
-    extrapolateRight = config.extrapolateRight;
-  } else if (config.extrapolate !== undefined) {
-    extrapolateRight = config.extrapolate;
-  }
-
-  return input => {
-    invariant(
-      typeof input === 'number',
-      'Cannot interpolation an input which is not a number'
-    );
-
-    const range = findRange(input, inputRange);
-    return interpolate(
-      input,
-      inputRange[range],
-      inputRange[range + 1],
-      outputRange[range],
-      outputRange[range + 1],
-      easing,
-      extrapolateLeft,
-      extrapolateRight
-    );
-  };
-}
-
-function interpolate(
-  input,
-  inputMin,
-  inputMax,
-  outputMin,
-  outputMax,
-  easing,
-  extrapolateLeft,
-  extrapolateRight
-) {
-  let result = input;
-
-  // Extrapolate
-  if (result < inputMin) {
-    if (extrapolateLeft === 'identity') {
-      return result;
-    } else if (extrapolateLeft === 'clamp') {
-      result = inputMin;
-    } else if (extrapolateLeft === 'extend') {
-      // noop
-    }
-  }
-
-  if (result > inputMax) {
-    if (extrapolateRight === 'identity') {
-      return result;
-    } else if (extrapolateRight === 'clamp') {
-      result = inputMax;
-    } else if (extrapolateRight === 'extend') {
-      // noop
-    }
-  }
-
-  if (outputMin === outputMax) {
-    return outputMin;
-  }
-
-  if (inputMin === inputMax) {
-    if (input <= inputMin) {
-      return outputMin;
-    }
-    return outputMax;
-  }
-
-  // Input Range
-  if (inputMin === -Infinity) {
-    result = -result;
-  } else if (inputMax === Infinity) {
-    result = result - inputMin;
-  } else {
-    result = (result - inputMin) / (inputMax - inputMin);
-  }
-
-  // Easing
-  result = easing(result);
-
-  // Output Range
-  if (outputMin === -Infinity) {
-    result = -result;
-  } else if (outputMax === Infinity) {
-    result = result + outputMin;
-  } else {
-    result = result * (outputMax - outputMin) + outputMin;
-  }
-
-  return result;
-}
-
-function colorToRgba(input) {
-  let int32Color = normalizeColor(input);
-  if (int32Color === null) {
-    return input;
-  }
-
-  int32Color = int32Color || 0;
-
-  const r = (int32Color & 0xff000000) >>> 24;
-  const g = (int32Color & 0x00ff0000) >>> 16;
-  const b = (int32Color & 0x0000ff00) >>> 8;
-  const a = (int32Color & 0x000000ff) / 255;
-
-  return `rgba(${r}, ${g}, ${b}, ${a})`;
-}
-
-const stringShapeRegex = /[0-9\.-]+/g;
-
-/**
- * Supports string shapes by extracting numbers so new values can be computed,
- * and recombines those values into new strings of the same shape.  Supports
- * things like:
- *
- *   rgba(123, 42, 99, 0.36) // colors
- *   -45deg                  // values with units
- */
-function createInterpolationFromStringOutputRange(config) {
-  let outputRange = config.outputRange;
-  invariant(outputRange.length >= 2, 'Bad output range');
-  outputRange = outputRange.map(colorToRgba);
-  checkPattern(outputRange);
-
-  // ['rgba(0, 100, 200, 0)', 'rgba(50, 150, 250, 0.5)']
-  // ->
-  // [
-  //   [0, 50],
-  //   [100, 150],
-  //   [200, 250],
-  //   [0, 0.5],
-  // ]
-  /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
-   * guard against this possibility.
-   */
-  const outputRanges = outputRange[0].match(stringShapeRegex).map(() => []);
-  outputRange.forEach(value => {
-    /* $FlowFixMe(>=0.18.0): `value.match()` can return `null`. Need to guard
-     * against this possibility.
-     */
-    value.match(stringShapeRegex).forEach((number, i) => {
-      outputRanges[i].push(+number);
-    });
-  });
-
-  /* $FlowFixMe(>=0.18.0): `outputRange[0].match()` can return `null`. Need to
-   * guard against this possibility.
-   */
-  const interpolations = outputRange[0]
-    .match(stringShapeRegex)
-    .map((value, i) => {
-      return createInterpolation({
-        ...config,
-        outputRange: outputRanges[i],
-      });
-    });
-
-  // rgba requires that the r,g,b are integers.... so we want to round them, but we *dont* want to
-  // round the opacity (4th column).
-  const shouldRound = isRgbOrRgba(outputRange[0]);
-
-  return input => {
-    let i = 0;
-    // 'rgba(0, 100, 200, 0)'
-    // ->
-    // 'rgba(${interpolations[0](input)}, ${interpolations[1](input)}, ...'
-    return outputRange[0].replace(stringShapeRegex, () => {
-      const val = +interpolations[i++](input);
-      const rounded =
-        shouldRound && i < 4 ? Math.round(val) : Math.round(val * 1000) / 1000;
-      return String(rounded);
-    });
-  };
-}
-
-function isRgbOrRgba(range) {
-  return typeof range === 'string' && range.startsWith('rgb');
-}
-
-function checkPattern(arr) {
-  const pattern = arr[0].replace(stringShapeRegex, '');
-  for (let i = 1; i < arr.length; ++i) {
-    invariant(
-      pattern === arr[i].replace(stringShapeRegex, ''),
-      'invalid pattern ' + arr[0] + ' and ' + arr[i]
-    );
-  }
-}
-
-function findRange(input, inputRange) {
-  let i;
-  for (i = 1; i < inputRange.length - 1; ++i) {
-    if (inputRange[i] >= input) {
-      break;
-    }
-  }
-  return i - 1;
-}
-
-function checkValidInputRange(arr) {
-  invariant(arr.length >= 2, 'inputRange must have at least 2 elements');
-  for (let i = 1; i < arr.length; ++i) {
-    invariant(
-      arr[i] >= arr[i - 1],
-      /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-       * one or both of the operands may be something that doesn't cleanly
-       * convert to a string, like undefined, null, and object, etc. If you really
-       * mean this implicit string conversion, you can do something like
-       * String(myThing)
-       */
-      'inputRange must be monotonically increasing ' + arr
-    );
-  }
-}
-
-function checkInfiniteRange(name, arr) {
-  invariant(arr.length >= 2, name + ' must have at least 2 elements');
-  invariant(
-    arr.length !== 2 || arr[0] !== -Infinity || arr[1] !== Infinity,
-    /* $FlowFixMe(>=0.13.0) - In the addition expression below this comment,
-     * one or both of the operands may be something that doesn't cleanly convert
-     * to a string, like undefined, null, and object, etc. If you really mean
-     * this implicit string conversion, you can do something like
-     * String(myThing)
-     */
-    name + 'cannot be ]-infinity;+infinity[ ' + arr
-  );
-}
-
-export default class AnimatedInterpolation extends AnimatedWithInput {
-  // Export for testing.
-  static __createInterpolation = createInterpolation;
-
-  constructor(parent, config) {
-    super([parent]);
-    this._parent = parent;
-    this._config = config;
-    this._interpolation = createInterpolation(config);
-  }
-
-  __makeNative() {
-    this._parent.__makeNative();
-    super.__makeNative();
-  }
-
-  __onEvaluate() {
-    const parentValue = val(this._parent);
-    invariant(
-      typeof parentValue === 'number',
-      'Cannot interpolate an input which is not a number.'
-    );
-    return this._interpolation(parentValue);
-  }
-
-  interpolate(config) {
-    return new AnimatedInterpolation(this, config);
-  }
-
-  __transformDataType(range) {
-    // Change the string array type to number array
-    // So we can reuse the same logic in iOS and Android platform
-    return range.map(function(value) {
-      if (typeof value !== 'string') {
-        return value;
-      }
-      if (/deg$/.test(value)) {
-        const degrees = parseFloat(value) || 0;
-        const radians = degrees * Math.PI / 180.0;
-        return radians;
-      } else {
-        // Assume radians
-        return parseFloat(value) || 0;
-      }
-    });
-  }
-
-  __getNativeConfig() {
-    if (__DEV__) {
-      NativeAnimatedHelper.validateInterpolation(this._config);
-    }
-
-    return {
-      inputRange: this._config.inputRange,
-      // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here
-      outputRange: this.__transformDataType(this._config.outputRange),
-      extrapolateLeft:
-        this._config.extrapolateLeft || this._config.extrapolate || 'extend',
-      extrapolateRight:
-        this._config.extrapolateRight || this._config.extrapolate || 'extend',
-      type: 'interpolation',
-    };
-  }
-}

package/nodes/AnimatedNode.js

@@ -1,97 +0,0 @@
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-import { evaluate } from '../CoreAnimated';
-
-import invariant from 'fbjs/lib/invariant';
-
-// Note(vjeux): this would be better as an interface but flow doesn't
-// support them yet
-export default class AnimatedNode {
-  __attach() {}
-  __detach() {
-    if (this.__isNative && this.__nativeTag != null) {
-      NativeAnimatedHelper.API.dropAnimatedNode(this.__nativeTag);
-      this.__nativeTag = undefined;
-    }
-  }
-  __getValue() {
-    return evaluate(this);
-  }
-  __onEvaluate() {
-    throw new Excaption('Missing implementation of onEvaluate');
-  }
-  __getProps() {
-    return this.__getValue();
-  }
-
-  __getChildren() {
-    return this.__children;
-  }
-
-  __addChild(child) {
-    if (this.__children.length === 0) {
-      this.__attach();
-    }
-    this.__children.push(child);
-    if (this.__isNative) {
-      // Only accept "native" animated nodes as children
-      child.__makeNative();
-      NativeAnimatedHelper.API.connectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag()
-      );
-    }
-  }
-
-  __removeChild(child) {
-    const index = this.__children.indexOf(child);
-    if (index === -1) {
-      console.warn("Trying to remove a child that doesn't exist");
-      return;
-    }
-    if (this.__isNative && child.__isNative) {
-      NativeAnimatedHelper.API.disconnectAnimatedNodes(
-        this.__getNativeTag(),
-        child.__getNativeTag()
-      );
-    }
-    this.__children.splice(index, 1);
-    if (this.__children.length === 0) {
-      this.__detach();
-    }
-  }
-
-  /* Methods and props used by native Animated impl */
-  __lastLoopID = 0;
-  __memoizedValue = null;
-
-  __children = [];
-  __makeNative() {
-    if (!this.__isNative) {
-      throw new Error('This node cannot be made a "native" animated node');
-    }
-  }
-  __getNativeTag() {
-    NativeAnimatedHelper.assertNativeAnimatedModule();
-    invariant(
-      this.__isNative,
-      'Attempt to get native tag from node not marked as "native"'
-    );
-    if (this.__nativeTag == null) {
-      const nativeTag = NativeAnimatedHelper.generateNewNodeTag();
-      NativeAnimatedHelper.API.createAnimatedNode(
-        nativeTag,
-        this.__getNativeConfig()
-      );
-      this.__nativeTag = nativeTag;
-    }
-    return this.__nativeTag;
-  }
-  __getNativeConfig() {
-    throw new Error(
-      'This JS animated node type cannot be used as native animated node'
-    );
-  }
-  toJSON() {
-    return this.__getValue();
-  }
-}

package/nodes/AnimatedOnChange.js

@@ -1,28 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import { val } from '../utils';
-
-export default class AnimatedOnChange extends AnimatedWithInput {
-  _value;
-  _what;
-  _lastValue = null;
-
-  constructor(value, what) {
-    super([value]);
-    this._value = value;
-    this._what = what;
-    this._lastValue = val(value);
-  }
-
-  update() {
-    // side effects
-    val(this);
-  }
-
-  __onEvaluate() {
-    const newValue = val(this._value);
-    if (newValue !== this._lastValue) {
-      val(this._what);
-      this._lastValue = newValue;
-    }
-  }
-}

package/nodes/AnimatedOp.js

@@ -1,17 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import { val } from '../utils';
-
-export default class AnimatedOp extends AnimatedWithInput {
-  _inputNodes;
-  _processor;
-
-  constructor(inputNodes, processor) {
-    super(inputNodes);
-    this._inputNodes = inputNodes;
-    this._processor = processor;
-  }
-
-  __onEvaluate() {
-    return this._processor(this._inputNodes.map(node => val(node)));
-  }
-}

package/nodes/AnimatedProps.js

@@ -1,154 +0,0 @@
-import { AnimatedEvent } from '../AnimatedEvent';
-import AnimatedNode from './AnimatedNode';
-import AnimatedStyle from './AnimatedStyle';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
-import ReactNative from 'ReactNative';
-
-import invariant from 'fbjs/lib/invariant';
-
-export default class AnimatedProps extends AnimatedNode {
-  constructor(props, callback) {
-    super();
-    if (props.style) {
-      props = {
-        ...props,
-        style: new AnimatedStyle(props.style),
-      };
-    }
-    this._props = props;
-    this._callback = callback;
-    this.__attach();
-  }
-
-  __getProps() {
-    const props = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        if (!value.__isNative || value instanceof AnimatedStyle) {
-          // We cannot use value of natively driven nodes this way as the value we have access from
-          // JS may not be up to date.
-          props[key] = value.__getProps();
-        }
-      } else if (value instanceof AnimatedEvent) {
-        props[key] = value.__getHandler();
-      } else {
-        props[key] = value;
-      }
-    }
-    return props;
-  }
-
-  __onEvaluate() {
-    const props = {};
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        props[key] = value.__getValue();
-      }
-    }
-    return props;
-  }
-
-  __attach() {
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__addChild(this);
-      }
-    }
-  }
-
-  __getParams() {
-    const params = [];
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        params.push(value);
-      }
-    }
-    return params;
-  }
-
-  __detach() {
-    if (this.__isNative && this._animatedView) {
-      this.__disconnectAnimatedView();
-    }
-    for (const key in this._props) {
-      const value = this._props[key];
-      if (value instanceof AnimatedNode) {
-        value.__removeChild(this);
-      }
-    }
-    super.__detach();
-  }
-
-  update() {
-    this._callback();
-  }
-
-  __makeNative() {
-    if (!this.__isNative) {
-      this.__isNative = true;
-      for (const key in this._props) {
-        const value = this._props[key];
-        if (value instanceof AnimatedNode) {
-          value.__makeNative();
-        }
-      }
-      if (this._animatedView) {
-        this.__connectAnimatedView();
-      }
-    }
-  }
-
-  setNativeView(animatedView) {
-    if (this._animatedView === animatedView) {
-      return;
-    }
-    this._animatedView = animatedView;
-    if (this.__isNative) {
-      this.__connectAnimatedView();
-    }
-  }
-
-  __connectAnimatedView() {
-    invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag = ReactNative.findNodeHandle(this._animatedView);
-    invariant(
-      nativeViewTag != null,
-      'Unable to locate attached view in the native tree'
-    );
-    NativeAnimatedHelper.API.connectAnimatedNodeToView(
-      this.__getNativeTag(),
-      nativeViewTag
-    );
-  }
-
-  __disconnectAnimatedView() {
-    invariant(this.__isNative, 'Expected node to be marked as "native"');
-    const nativeViewTag = ReactNative.findNodeHandle(this._animatedView);
-    invariant(
-      nativeViewTag != null,
-      'Unable to locate attached view in the native tree'
-    );
-    NativeAnimatedHelper.API.disconnectAnimatedNodeFromView(
-      this.__getNativeTag(),
-      nativeViewTag
-    );
-  }
-
-  __getNativeConfig() {
-    const propsConfig = {};
-    for (const propKey in this._props) {
-      const value = this._props[propKey];
-      if (value instanceof AnimatedNode) {
-        propsConfig[propKey] = value.__getNativeTag();
-      }
-    }
-    return {
-      type: 'props',
-      props: propsConfig,
-    };
-  }
-}

package/nodes/AnimatedSet.js

@@ -1,19 +0,0 @@
-import AnimatedWithInput from './AnimatedWithInput';
-import { val } from '../utils';
-
-export default class AnimatedSet extends AnimatedWithInput {
-  _what;
-  _value;
-
-  constructor(what, value) {
-    super([value]);
-    this._what = what;
-    this._value = value;
-  }
-
-  __onEvaluate() {
-    const newValue = val(this._value);
-    this._what._updateValue(newValue);
-    return newValue;
-  }
-}

package/nodes/AnimatedStartClock.js

@@ -1,21 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-import AnimatedClock from './AnimatedClock';
-import invariant from 'fbjs/lib/invariant';
-
-export default class AnimatedStartClock extends AnimatedNode {
-  _clockNode;
-
-  constructor(clockNode) {
-    super();
-    invariant(
-      clockNode instanceof AnimatedClock,
-      'Node is not of an AnimatedClock type'
-    );
-    this._clockNode = clockNode;
-  }
-
-  __onEvaluate() {
-    this._clockNode.start();
-    return 0;
-  }
-}

package/nodes/AnimatedStopClock.js

@@ -1,21 +0,0 @@
-import AnimatedNode from './AnimatedNode';
-import AnimatedClock from './AnimatedClock';
-import invariant from 'fbjs/lib/invariant';
-
-export default class AnimatedStopClock extends AnimatedNode {
-  _clockNode;
-
-  constructor(clockNode) {
-    super();
-    invariant(
-      clockNode instanceof AnimatedClock,
-      'Node is not of an AnimatedClock type'
-    );
-    this._clockNode = clockNode;
-  }
-
-  __onEvaluate() {
-    this._clockNode.stop();
-    return 0;
-  }
-}