From 79f31870b5f38d62ee56a5116dc0962381f86c61 Mon Sep 17 00:00:00 2001 From: Alan Kenyon Date: Mon, 24 Feb 2020 08:45:29 -0800 Subject: [PATCH] updates to reanimated mock (#605) * updates to reanimated mock * forgot transitioning component --- mock.js | 244 ++++++++++++++++++++++++++++++++++---------------------- 1 file changed, 150 insertions(+), 94 deletions(-) diff --git a/mock.js b/mock.js index 7af8f814d00..ce12c7e2d28 100644 --- a/mock.js +++ b/mock.js @@ -9,7 +9,7 @@ */ const React = require('react'); -const { View, Text, Image, Animated } = require('react-native'); +const { View, Text, Image, Animated, Platform } = require('react-native'); function NOOP() {} @@ -34,104 +34,146 @@ class AnimatedValue { setValue(val) { this[" __value"] = val; } + + interpolate() { + return this; + } } -module.exports = { - __esModule: true, +function createMockComponent(name) { + return class extends React.Component { + static displayName = name; + + render() { + return this.props.children; + } + }; +} + +function createTransitioningComponent(Component) { + return class extends React.Component { + static displayName = `Transitioning.${Component.displayName || Component.name || 'Component'}`; + + setNativeProps() {} + + animateNextTransition() {} + + render() { + return ; + } + }; +} + +const Reanimated = { + SpringUtils: { + makeDefaultConfig: NOOP, + makeConfigFromBouncinessAndSpeed: NOOP, + makeConfigFromOrigamiTensionAndFriction: NOOP, + }, + + View, + Text, + Image, + ScrollView: Animated.ScrollView, + Code, + + Clock: NOOP, + Node: NOOP, + Value: function() { + return { + setValue: NOOP, + }; + }, + + Extrapolate: { + EXTEND: 'extend', + CLAMP: 'clamp', + IDENTITY: 'identity', + }, - default: { - SpringUtils: { - makeDefaultConfig: NOOP, - makeConfigFromBouncinessAndSpeed: NOOP, - makeConfigFromOrigamiTensionAndFriction: NOOP, - }, - - View, - Text, - Image, - ScrollView: Animated.ScrollView, - Code, - - Clock: NOOP, - Node: NOOP, - Value: function() { - return { - setValue: NOOP, - }; - }, - - Extrapolate: { - EXTEND: 'extend', - CLAMP: 'clamp', - IDENTITY: 'identity', - }, - - add: (a, b) => new AnimatedValue(getValue(a) + getValue(b)), - sub: (a, b) => new AnimatedValue(getValue(a) - getValue(b)), - multiply: (a, b) => new AnimatedValue(getValue(a) * getValue(b)), - divide: (a, b) => new AnimatedValue(getValue(a) / getValue(b)), - pow: (a, b) => new AnimatedValue(getValue(a) ** getValue(b)), - modulo: (a, b) => new AnimatedValue(getValue(a) % getValue(b)), - sqrt: a => new AnimatedValue(Math.sqrt(getValue(a))), - log: a => new AnimatedValue(Math.log(getValue(a))), - sin: a => new AnimatedValue(Math.sin(getValue(a))), - cos: a => new AnimatedValue(Math.cos(getValue(a))), - tan: a => new AnimatedValue(Math.tan(getValue(a))), - acos: a => new AnimatedValue(Math.acos(getValue(a))), - asin: a => new AnimatedValue(Math.asin(getValue(a))), - atan: a => new AnimatedValue(Math.atan(getValue(a))), - exp: a => new AnimatedValue(Math.exp(getValue(a))), - round: a => new AnimatedValue(Math.round(getValue(a))), - floor: a => new AnimatedValue(Math.floor(getValue(a))), - ceil: a => new AnimatedValue(Math.ceil(getValue(a))), - lessThan: (a, b) => new AnimatedValue(getValue(a) < getValue(b)), - eq: (a, b) => new AnimatedValue(getValue(a) === getValue(b)), - greaterThan: (a, b) => new AnimatedValue(getValue(a) > getValue(b)), - lessOrEq: (a, b) => new AnimatedValue(getValue(a) <= getValue(b)), - greaterOrEq: (a, b) => new AnimatedValue(getValue(a) >= getValue(b)), - neq: (a, b) => new AnimatedValue(getValue(a) !== getValue(b)), - and: (a, b) => new AnimatedValue(getValue(a) && getValue(b)), - or: (a, b) => new AnimatedValue(getValue(a) || getValue(b)), - defined: (a) => new AnimatedValue(getValue(a) !== null && getValue(a) !== undefined), - not: (a) => new AnimatedValue(!getValue(a)), - set: (a, b) => { - a.setValue(getValue(b)); - return a; - }, - concat: (a, b) => `${a}${b}`, - cond: (a, b, c) => { - if (getValue(a)) { - return b; - } else { - return c; + add: (a, b) => new AnimatedValue(getValue(a) + getValue(b)), + sub: (a, b) => new AnimatedValue(getValue(a) - getValue(b)), + multiply: (a, b) => new AnimatedValue(getValue(a) * getValue(b)), + divide: (a, b) => new AnimatedValue(getValue(a) / getValue(b)), + pow: (a, b) => new AnimatedValue(getValue(a) ** getValue(b)), + modulo: (a, b) => new AnimatedValue(getValue(a) % getValue(b)), + sqrt: a => new AnimatedValue(Math.sqrt(getValue(a))), + log: a => new AnimatedValue(Math.log(getValue(a))), + sin: a => new AnimatedValue(Math.sin(getValue(a))), + cos: a => new AnimatedValue(Math.cos(getValue(a))), + tan: a => new AnimatedValue(Math.tan(getValue(a))), + acos: a => new AnimatedValue(Math.acos(getValue(a))), + asin: a => new AnimatedValue(Math.asin(getValue(a))), + atan: a => new AnimatedValue(Math.atan(getValue(a))), + exp: a => new AnimatedValue(Math.exp(getValue(a))), + round: a => new AnimatedValue(Math.round(getValue(a))), + floor: a => new AnimatedValue(Math.floor(getValue(a))), + ceil: a => new AnimatedValue(Math.ceil(getValue(a))), + lessThan: (a, b) => new AnimatedValue(getValue(a) < getValue(b)), + eq: (a, b) => new AnimatedValue(getValue(a) === getValue(b)), + greaterThan: (a, b) => new AnimatedValue(getValue(a) > getValue(b)), + lessOrEq: (a, b) => new AnimatedValue(getValue(a) <= getValue(b)), + greaterOrEq: (a, b) => new AnimatedValue(getValue(a) >= getValue(b)), + neq: (a, b) => new AnimatedValue(getValue(a) !== getValue(b)), + and: (a, b) => new AnimatedValue(getValue(a) && getValue(b)), + or: (a, b) => new AnimatedValue(getValue(a) || getValue(b)), + defined: (a) => new AnimatedValue(getValue(a) !== null && getValue(a) !== undefined), + not: (a) => new AnimatedValue(!getValue(a)), + set: (a, b) => { + a.setValue(getValue(b)); + return a; + }, + concat: (a, b) => `${a}${b}`, + cond: (a, b, c) => { + if (getValue(a)) { + return b; + } else { + return c; + } + }, + block: (a) => a[a.length - 1], + call: (a, b) => b(a), + debug: NOOP, + onChange: NOOP, + startClock: NOOP, + stopClock: NOOP, + clockRunning: NOOP, + event: NOOP, + abs: (a) => Math.abs(getValue(a)), + acc: NOOP, + color: (r, g, b, a = 1) => { + const color = 16777216 * Math.round(getValue(a) * 255) + 65536 * getValue(r) + 256 * getValue(g) + getValue(b); + if (Platform.OS === 'android') { + // on Android color is represented as signed 32 bit int + if (color < (1 << 31) >>> 0) { + return new AnimatedValue(color); } - }, - block: (a) => a[a.length - 1], - call: (a, b) => b(a), - debug: NOOP, - onChange: NOOP, - startClock: NOOP, - stopClock: NOOP, - clockRunning: NOOP, - event: NOOP, - abs: (a) => Math.abs(getValue(a)), - acc: NOOP, - color: NOOP, - diff: NOOP, - diffClamp: NOOP, - interpolate: NOOP, - max: (a, b) => Math.max(getValue(a), getValue(b)), - min: (a, b) => Math.min(getValue(a), getValue(b)), - - decay: NOOP, - timing: NOOP, - spring: NOOP, - - proc: cb => cb, - - useCode: NOOP, - createAnimatedComponent: Component => Component, + return new AnimatedValue(color - 2 ** 32); + } + return new AnimatedValue(color); }, + diff: NOOP, + diffClamp: NOOP, + interpolate: NOOP, + max: (a, b) => Math.max(getValue(a), getValue(b)), + min: (a, b) => Math.min(getValue(a), getValue(b)), + + decay: NOOP, + timing: NOOP, + spring: NOOP, + + proc: cb => cb, + + useCode: NOOP, + createAnimatedComponent: Component => Component, +} + +module.exports = { + __esModule: true, + + ...Reanimated, + + default: Reanimated, Easing: { linear: NOOP, @@ -150,4 +192,18 @@ module.exports = { out: () => NOOP, inOut: () => NOOP, }, + + Transitioning: { + View: createMockComponent('Transitioning.View') + }, + + Transition: { + Sequence: createMockComponent('Transition.Sequence'), + Together: createMockComponent('Transition.Together'), + In: createMockComponent('Transition.In'), + Out: createMockComponent('Transition.Out'), + Change: createMockComponent('Transition.Change') + }, + + createTransitioningComponent, };