From 3933f50465504bcf892cc74af09aa65a9ad119a0 Mon Sep 17 00:00:00 2001 From: William Candillon Date: Tue, 8 Sep 2020 14:47:37 +0200 Subject: [PATCH] =?UTF-8?q?fix(=F0=9F=90=9B):=20fix=20v15=20release?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +++++ src/index.d.ts | 1 + src/index.ts | 2 + src/v1/AnimationRunners.ts | 10 +-- src/v1/Colors.ts | 10 +-- src/v1/SVG.ts | 6 +- src/v1/Transitions.ts | 4 +- src/v1/__tests__/Colors.test.ts | 105 -------------------------------- src/v1/__tests__/index.ts | 1 - 9 files changed, 28 insertions(+), 125 deletions(-) delete mode 100644 src/v1/__tests__/Colors.test.ts diff --git a/README.md b/README.md index 80fbad05..997afd0d 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,20 @@ The React Native Reanimated and Gesture Handler Toolbelt. As seen on the [“Can yarn add react-native-redash ``` +## ⚠️ v1 Users ⚠️ + +To access functions that work with Reanimated v1 nodes, use the following import: + +```ts +import {mix} from "react-native-redash/lib/module/v1"; +``` + +To add TypeScript support for the v1 functions, add the following type to your `tsconfig`: + +```json + "include": ["node_modules/react-native-redash/lib/typescript/v1/index.d.ts"] +``` + ## Documentation [https://wcandillon.gitbook.io/redash/](https://wcandillon.gitbook.io/redash/) diff --git a/src/index.d.ts b/src/index.d.ts index 6af3c7ae..0e8b504d 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -1,3 +1,4 @@ declare module "parse-svg-path"; declare module "abs-svg-path"; declare module "normalize-svg-path"; +declare module "react-native-reanimated/src/derived/interpolate"; diff --git a/src/index.ts b/src/index.ts index 4566d57f..78cdb196 100644 --- a/src/index.ts +++ b/src/index.ts @@ -2,4 +2,6 @@ export * from "./Animations"; export * from "./Coordinates"; export * from "./Transitions"; export * from "./Math"; +export * from "./Vector"; export { default as ReText } from "./ReText"; +export * as v1 from "./v1"; diff --git a/src/v1/AnimationRunners.ts b/src/v1/AnimationRunners.ts index f84d3845..75769470 100644 --- a/src/v1/AnimationRunners.ts +++ b/src/v1/AnimationRunners.ts @@ -1,4 +1,4 @@ -import Animated, { Easing } from "react-native-reanimated"; +import Animated, { add } from "react-native-reanimated"; import { SpringConfig } from "./Animations"; @@ -74,16 +74,16 @@ export interface TimingParams { from?: Animated.Adaptable; to?: Animated.Adaptable; duration?: Animated.Adaptable; - easing?: Animated.EasingFunction; + easing?: (v: Animated.Adaptable) => Animated.Node; } export const timing = (params: TimingParams) => { const { clock, easing, duration, from, to } = { clock: new Clock(), - easing: Easing.linear, duration: 250, from: 0, to: 1, + easing: (v: Animated.Adaptable) => add(v, 0), ...params, }; @@ -208,7 +208,7 @@ export const delay = (node: Animated.Node, duration: number) => { export interface LoopProps { clock?: Animated.Clock; - easing?: Animated.EasingFunction; + easing?: (v: Animated.Adaptable) => Animated.Node; duration?: number; boomerang?: boolean; autoStart?: boolean; @@ -217,10 +217,10 @@ export interface LoopProps { export const loop = (loopConfig: LoopProps) => { const { clock, easing, duration, boomerang, autoStart } = { clock: new Clock(), - easing: Easing.linear, duration: 250, boomerang: false, autoStart: true, + easing: (v: Animated.Adaptable) => add(v, 0), ...loopConfig, }; const state = { diff --git a/src/v1/Colors.ts b/src/v1/Colors.ts index d6ab6e3e..7934d391 100644 --- a/src/v1/Colors.ts +++ b/src/v1/Colors.ts @@ -1,5 +1,6 @@ import Animated from "react-native-reanimated"; import { processColor } from "react-native"; +import interpolateNode from "react-native-reanimated/src/derived/interpolate"; import { mix } from "./Animations"; import { clamp, fract } from "./Math"; @@ -9,11 +10,9 @@ const { multiply, abs, round, - interpolateNode, sub, proc, color, - Extrapolate, greaterThan, cond, } = Animated; @@ -119,17 +118,14 @@ const interpolateColorsHSV = ( const h = interpolateNode(animationValue, { inputRange, outputRange: colorsAsHSV.map((c) => c.h), - extrapolate: Extrapolate.CLAMP, }); const s = interpolateNode(animationValue, { inputRange, outputRange: colorsAsHSV.map((c) => c.s), - extrapolate: Extrapolate.CLAMP, }); const v = interpolateNode(animationValue, { inputRange, outputRange: colorsAsHSV.map((c) => c.v), - extrapolate: Extrapolate.CLAMP, }); return hsv2color(h, s, v); }; @@ -143,27 +139,23 @@ const interpolateColorsRGB = ( interpolateNode(animationValue, { inputRange, outputRange: colors.map((c) => red(c)), - extrapolate: Extrapolate.CLAMP, }) ); const g = round( interpolateNode(animationValue, { inputRange, outputRange: colors.map((c) => green(c)), - extrapolate: Extrapolate.CLAMP, }) ); const b = round( interpolateNode(animationValue, { inputRange, outputRange: colors.map((c) => blue(c)), - extrapolate: Extrapolate.CLAMP, }) ); const a = interpolateNode(animationValue, { inputRange, outputRange: colors.map((c) => opacity(c)), - extrapolate: Extrapolate.CLAMP, }); return color(r, g, b, a); diff --git a/src/v1/SVG.ts b/src/v1/SVG.ts index 34c2f45f..cead07cf 100644 --- a/src/v1/SVG.ts +++ b/src/v1/SVG.ts @@ -2,6 +2,7 @@ import Animated from "react-native-reanimated"; import parseSVG from "parse-svg-path"; import absSVG from "abs-svg-path"; import normalizeSVG from "normalize-svg-path"; +import interpolateNode from "react-native-reanimated/src/derived/interpolate"; import { get } from "./Array"; import { string } from "./String"; @@ -15,7 +16,6 @@ const { greaterOrEq, and, cond, - interpolate, multiply, lessThan, concat, @@ -153,7 +153,7 @@ export const getPointAtLength = ( const p1y = get(path.p1y, index); const p2y = get(path.p2y, index); const p3y = get(path.p3y, index); - const t = interpolate(length, { + const t = interpolateNode(length, { inputRange: [start, end], outputRange: [0, 1], }); @@ -173,7 +173,7 @@ export const interpolatePath = ( const [path] = paths; const commands = path.segments.map((_, index) => { const interpolatePoint = (point: BezierPoint) => - interpolate(value, { + interpolateNode(value, { inputRange, outputRange: paths.map((p) => p[point][index]), ...config, diff --git a/src/v1/Transitions.ts b/src/v1/Transitions.ts index 01e62c53..80f2aae7 100644 --- a/src/v1/Transitions.ts +++ b/src/v1/Transitions.ts @@ -1,6 +1,6 @@ /* eslint-disable no-nested-ternary */ import { useEffect } from "react"; -import Animated, { Easing, not } from "react-native-reanimated"; +import Animated, { not, add } from "react-native-reanimated"; import { SpringConfig, TimingConfig } from "./Animations"; import { useConst } from "./Hooks"; @@ -36,7 +36,7 @@ export const withTransition = ( const config = { toValue: new Value(0), duration: 150, - easing: Easing.linear, + easing: (v: Animated.Adaptable) => add(v, 0), ...timingConfig, }; return block([ diff --git a/src/v1/__tests__/Colors.test.ts b/src/v1/__tests__/Colors.test.ts deleted file mode 100644 index 58e44ba8..00000000 --- a/src/v1/__tests__/Colors.test.ts +++ /dev/null @@ -1,105 +0,0 @@ -import { processColor } from "react-native"; -import Animated from "react-native-reanimated"; - -import { blue, green, hsv2rgb, mixColor, opacity, red } from "../Colors"; - -const { color, Value } = Animated; -jest.mock("react-native-reanimated"); - -test("white", () => { - expect(color(255, 255, 255, 1)[" __value"]).toBe(processColor("#ffffff")); -}); - -test("black", () => { - expect(color(0, 0, 0)[" __value"]).toBe(processColor("black")); -}); - -test("blue 1", () => { - expect(color(0, 255, 255, 1)[" __value"]).toBe(processColor("#00ffffff")); -}); - -test("blue 2", () => { - expect(color(0, 255, 255)[" __value"]).toBe(processColor("#00ffff")); -}); - -test("green 1", () => { - expect(color(0, 255, 128)[" __value"]).toBe(processColor("#00ff80")); -}); - -test("opacity", () => { - expect(color(0, 0, 0, 0.5)[" __value"]).toBe( - processColor("rgba(0, 0, 0, 0.5)") - ); -}); - -test("blue", () => { - expect(blue(processColor("#0000ff"))).toBe(255); - expect(blue(processColor("#ffffff"))).toBe(255); - expect(blue(processColor("#ffff0000"))).toBe(0); -}); - -test("green", () => { - expect(green(processColor("#00ffff"))).toBe(255); - expect(green(processColor("#ffffff"))).toBe(255); - expect(green(processColor("#ffff0000"))).toBe(255); - expect(green(processColor("#ff000000"))).toBe(0); - expect(green(processColor("#008000"))).toBe(128); -}); - -test("red", () => { - expect(red(processColor("#00ffff"))).toBe(0); - expect(red(processColor("#ffffff"))).toBe(255); - expect(red(processColor("#ffff0000"))).toBe(255); - expect(red(processColor("#00ff0000"))).toBe(0); -}); - -test("opacity 2", () => { - const round = (v: number) => Math.round(v * 10) / 10; - expect(opacity(0xff000000)).toBe(1); - expect(opacity(0x00000000)).toBe(0); - expect(opacity(processColor("#00ffff"))).toBe(1); - expect(opacity(processColor("#ffffffff"))).toBe(1); - expect(round(opacity(processColor("#ffff0000")))).toBe(0); - expect(round(opacity(processColor("#00ff0000")))).toBe(0); - expect(round(opacity(processColor("#00ff0080")))).toBe(0.5); - expect(round(opacity(processColor("rgba(0, 0, 0, 0.5)")))).toBe(0.5); -}); - -test("simple interpolation 1", () => { - expect(mixColor(new Value(0), "white", "black")[" __value"]).toBe( - processColor("#ffffff") - ); -}); - -test("simple interpolation 2", () => { - expect(mixColor(new Value(1), "white", "black")[" __value"]).toBe( - processColor("#000000") - ); -}); - -test("simple interpolation 3", () => { - expect(mixColor(new Value(0.5), 0x00ff00, 0x0000ff)[" __value"]).toBe( - 0x008080 - ); -}); - -test("hsv2rgb 1", () => { - const { r, g, b } = hsv2rgb(0, 0, 1); - expect(r[" __value"]).toBe(255); - expect(g[" __value"]).toBe(255); - expect(b[" __value"]).toBe(255); -}); - -test("hsv2rgb 2", () => { - const { r, g, b } = hsv2rgb(0.5, 0.5, 0.5); - expect(r[" __value"]).toBe(64); - expect(g[" __value"]).toBe(128); - expect(b[" __value"]).toBe(128); -}); - -test("hsv2rgb 3", () => { - const { r, g, b } = hsv2rgb(0.5, 0.5, 1); - expect(r[" __value"]).toBe(128); - expect(g[" __value"]).toBe(255); - expect(b[" __value"]).toBe(255); -}); diff --git a/src/v1/__tests__/index.ts b/src/v1/__tests__/index.ts index 8e385774..edb308ee 100644 --- a/src/v1/__tests__/index.ts +++ b/src/v1/__tests__/index.ts @@ -1,6 +1,5 @@ import "./Coordinates.test"; import "./Math.test"; -import "./Colors.test"; import "./Vectors.test"; import "./Matrix.test"; import "./Animations.test";