react-ui-animate 2.0.0-rc.1 → 2.0.0-rc.2

package/src/gestures/hooks/useGesture.ts

@@ -1,38 +1,38 @@
-import * as React from "react";
-import {
-  DragGesture,
-  MouseMoveGesture,
-  ScrollGesture,
-  WheelGesture,
-} from "../controllers";
-import {
-  DragEventType,
-  WheelEventType,
-  ScrollEventType,
-  MouseMoveEventType,
-} from "../types";
-import { useRecognizer } from "./useRecognizer";
-
-export function useGesture({
-  onDrag,
-  onWheel,
-  onScroll,
-  onMouseMove,
-}: {
-  onDrag?: (event: DragEventType) => void;
-  onWheel?: (event: WheelEventType) => void;
-  onScroll?: (event: ScrollEventType) => void;
-  onMouseMove?: (event: MouseMoveEventType) => void;
-}) {
-  const dragGesture = React.useRef(new DragGesture()).current;
-  const wheelGesture = React.useRef(new WheelGesture()).current;
-  const scrollGesture = React.useRef(new ScrollGesture()).current;
-  const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
-
-  return useRecognizer([
-    ["drag", dragGesture, onDrag],
-    ["wheel", wheelGesture, onWheel],
-    ["scroll", scrollGesture, onScroll],
-    ["move", mouseMoveGesture, onMouseMove],
-  ]);
-}
+import * as React from "react";
+import {
+  DragGesture,
+  MouseMoveGesture,
+  ScrollGesture,
+  WheelGesture,
+} from "../controllers";
+import {
+  DragEventType,
+  WheelEventType,
+  ScrollEventType,
+  MouseMoveEventType,
+} from "../types";
+import { useRecognizer } from "./useRecognizer";
+
+export function useGesture({
+  onDrag,
+  onWheel,
+  onScroll,
+  onMouseMove,
+}: {
+  onDrag?: (event: DragEventType) => void;
+  onWheel?: (event: WheelEventType) => void;
+  onScroll?: (event: ScrollEventType) => void;
+  onMouseMove?: (event: MouseMoveEventType) => void;
+}) {
+  const dragGesture = React.useRef(new DragGesture()).current;
+  const wheelGesture = React.useRef(new WheelGesture()).current;
+  const scrollGesture = React.useRef(new ScrollGesture()).current;
+  const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
+
+  return useRecognizer([
+    ["drag", dragGesture, onDrag],
+    ["wheel", wheelGesture, onWheel],
+    ["scroll", scrollGesture, onScroll],
+    ["move", mouseMoveGesture, onMouseMove],
+  ]);
+}

package/src/gestures/hooks/useMouseMove.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-
-import { MouseMoveEventType } from "../types";
-import { MouseMoveGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
-
-export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
-  const gesture = React.useRef(new MouseMoveGesture()).current;
-
-  return useRecognizer([["move", gesture, callback]]);
-}
+import * as React from "react";
+
+import { MouseMoveEventType } from "../types";
+import { MouseMoveGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useMouseMove(callback: (event: MouseMoveEventType) => void) {
+  const gesture = React.useRef(new MouseMoveGesture()).current;
+
+  return useRecognizer([["move", gesture, callback]]);
+}

package/src/gestures/hooks/useRecognizer.ts

@@ -1,59 +1,59 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import * as React from "react";
-
-type UseRecognizerHandlerType = Array<
-  [
-    key: "drag" | "wheel" | "move" | "scroll",
-    gesture: any,
-    callback: any,
-    config?: any
-  ]
->;
-
-export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
-  const ref = React.useRef<any>();
-  const elementRefs = React.useRef<Array<any>>([]);
-  const subscribers = React.useRef<
-    Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
-  >(new Map()).current;
-
-  // re-initiate callback on change
-  React.useEffect(() => {
-    for (let [, { keyIndex, gesture }] of subscribers.entries()) {
-      const [, , callback] = handlers[keyIndex];
-      gesture.applyCallback(callback);
-    }
-  }, [handlers]);
-
-  React.useEffect(() => {
-    handlers.forEach(([key, gesture, callback, config], keyIndex) => {
-      subscribers.set(key, {
-        keyIndex,
-        gesture,
-        unsubscribe: gesture.applyGesture({
-          targetElement: ref.current,
-          targetElements: elementRefs.current,
-          callback,
-          config,
-        }),
-      });
-    });
-
-    return () => {
-      for (let [, { unsubscribe }] of subscribers.entries()) {
-        unsubscribe && unsubscribe();
-      }
-    };
-  }, []);
-
-  return (index?: number) => {
-    if (index === null || index === undefined) {
-      return { ref };
-    } else {
-      elementRefs.current[index] =
-        elementRefs.current[index] || React.createRef();
-
-      return { ref: elementRefs.current[index] };
-    }
-  };
-};
+/* eslint-disable react-hooks/exhaustive-deps */
+import * as React from "react";
+
+type UseRecognizerHandlerType = Array<
+  [
+    key: "drag" | "wheel" | "move" | "scroll",
+    gesture: any,
+    callback: any,
+    config?: any
+  ]
+>;
+
+export const useRecognizer = (handlers: UseRecognizerHandlerType) => {
+  const ref = React.useRef<any>();
+  const elementRefs = React.useRef<Array<any>>([]);
+  const subscribers = React.useRef<
+    Map<string, { keyIndex: number; gesture: any; unsubscribe: any }>
+  >(new Map()).current;
+
+  // re-initiate callback on change
+  React.useEffect(() => {
+    for (let [, { keyIndex, gesture }] of subscribers.entries()) {
+      const [, , callback] = handlers[keyIndex];
+      gesture.applyCallback(callback);
+    }
+  }, [handlers]);
+
+  React.useEffect(() => {
+    handlers.forEach(([key, gesture, callback, config], keyIndex) => {
+      subscribers.set(key, {
+        keyIndex,
+        gesture,
+        unsubscribe: gesture.applyGesture({
+          targetElement: ref.current,
+          targetElements: elementRefs.current,
+          callback,
+          config,
+        }),
+      });
+    });
+
+    return () => {
+      for (let [, { unsubscribe }] of subscribers.entries()) {
+        unsubscribe && unsubscribe();
+      }
+    };
+  }, []);
+
+  return (index?: number) => {
+    if (index === null || index === undefined) {
+      return { ref };
+    } else {
+      elementRefs.current[index] =
+        elementRefs.current[index] || React.createRef();
+
+      return { ref: elementRefs.current[index] };
+    }
+  };
+};

package/src/gestures/hooks/useScroll.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-
-import { ScrollEventType } from "../types";
-import { ScrollGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
-
-export function useScroll(callback: (event: ScrollEventType) => void) {
-  const gesture = React.useRef(new ScrollGesture()).current;
-
-  return useRecognizer([["scroll", gesture, callback]]);
-}
+import * as React from "react";
+
+import { ScrollEventType } from "../types";
+import { ScrollGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useScroll(callback: (event: ScrollEventType) => void) {
+  const gesture = React.useRef(new ScrollGesture()).current;
+
+  return useRecognizer([["scroll", gesture, callback]]);
+}

package/src/gestures/hooks/useWheel.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
-
-import { WheelEventType } from "../types";
-import { WheelGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
-
-export function useWheel(callback: (event: WheelEventType) => void) {
-  const gesture = React.useRef(new WheelGesture()).current;
-
-  return useRecognizer([["wheel", gesture, callback]]);
-}
+import * as React from "react";
+
+import { WheelEventType } from "../types";
+import { WheelGesture } from "../controllers";
+import { useRecognizer } from "./useRecognizer";
+
+export function useWheel(callback: (event: WheelEventType) => void) {
+  const gesture = React.useRef(new WheelGesture()).current;
+
+  return useRecognizer([["wheel", gesture, callback]]);
+}

package/src/gestures/index.ts

@@ -1,2 +1,2 @@
-export * from "./hooks";
-export * from "./math";
+export * from "./hooks";
+export * from "./math";

package/src/gestures/math.ts

@@ -1,120 +1,120 @@
-/**
- * bin(booleanValue)
- * returns 1 if booleanValue == true and 0 if booleanValue == false
- */
-export function bin(bool: boolean) {
-  return bool ? 1 : 0;
-}
-
-/**
- * mix(progress, a, b)
- * linear interpolation between a and b
- */
-export function mix(perc: number, val1: number, val2: number) {
-  return val1 * (1 - perc) + val2 * perc;
-}
-
-/**
- * clamp(value, min, max)
- * clamps value for min and max bounds
- */
-export function clamp(value: number, lowerbound: number, upperbound: number) {
-  return Math.min(Math.max(value, lowerbound), upperbound);
-}
-
-function rubber2(distanceFromEdge: number, constant: number) {
-  return Math.pow(distanceFromEdge, constant * 5);
-}
-
-function rubber(distanceFromEdge: number, dimension: number, constant: number) {
-  if (dimension === 0 || Math.abs(dimension) === Infinity)
-    return rubber2(distanceFromEdge, constant);
-  return (
-    (distanceFromEdge * dimension * constant) /
-    (dimension + constant * distanceFromEdge)
-  );
-}
-
-/**
- * rubberClamp(value, min, max, constant?)
- * constant is optional : default 0.15
- * clamps the value for min and max value and
- * extends beyond min and max values with constant
- * factor to create elastic rubber band effect
- */
-export function rubberClamp(
-  value: number,
-  lowerbound: number,
-  upperbound: number,
-  constant: number = 0.15
-) {
-  if (constant === 0) return clamp(value, lowerbound, upperbound);
-
-  if (value < lowerbound) {
-    return (
-      -rubber(lowerbound - value, upperbound - lowerbound, constant) +
-      lowerbound
-    );
-  }
-
-  if (value > upperbound) {
-    return (
-      +rubber(value - upperbound, upperbound - lowerbound, constant) +
-      upperbound
-    );
-  }
-
-  return value;
-}
-
-/**
- * snapTo(value, velocity, snapPoints[])
- * Calculates the final snapPoint according to given current value,
- * velocity and snapPoints array
- */
-export function snapTo(
-  value: number,
-  velocity: number,
-  snapPoints: Array<number>
-): number {
-  const finalValue = value + velocity * 0.2;
-  const getDiff = (point: number) => Math.abs(point - finalValue);
-  const deltas = snapPoints.map(getDiff);
-  const minDelta = Math.min(...deltas);
-
-  return snapPoints.reduce(function (acc, point) {
-    if (getDiff(point) === minDelta) {
-      return point;
-    } else {
-      return acc;
-    }
-  });
-}
-
-/**
- * move(array, moveIndex, toIndex)
- * move array item from moveIndex to toIndex without array modification
- */
-export function move(array: Array<any>, moveIndex: number, toIndex: number) {
-  const item = array[moveIndex];
-  const length = array.length;
-  const diff = moveIndex - toIndex;
-
-  if (diff > 0) {
-    return [
-      ...array.slice(0, toIndex),
-      item,
-      ...array.slice(toIndex, moveIndex),
-      ...array.slice(moveIndex + 1, length),
-    ];
-  } else if (diff < 0) {
-    const targetIndex = toIndex + 1;
-    return [
-      ...array.slice(0, moveIndex),
-      ...array.slice(moveIndex + 1, targetIndex),
-      item,
-      ...array.slice(targetIndex, length),
-    ];
-  }
-  return array;
-}
+/**
+ * bin(booleanValue)
+ * returns 1 if booleanValue == true and 0 if booleanValue == false
+ */
+export function bin(bool: boolean) {
+  return bool ? 1 : 0;
+}
+
+/**
+ * mix(progress, a, b)
+ * linear interpolation between a and b
+ */
+export function mix(perc: number, val1: number, val2: number) {
+  return val1 * (1 - perc) + val2 * perc;
+}
+
+/**
+ * clamp(value, min, max)
+ * clamps value for min and max bounds
+ */
+export function clamp(value: number, lowerbound: number, upperbound: number) {
+  return Math.min(Math.max(value, lowerbound), upperbound);
+}
+
+function rubber2(distanceFromEdge: number, constant: number) {
+  return Math.pow(distanceFromEdge, constant * 5);
+}
+
+function rubber(distanceFromEdge: number, dimension: number, constant: number) {
+  if (dimension === 0 || Math.abs(dimension) === Infinity)
+    return rubber2(distanceFromEdge, constant);
+  return (
+    (distanceFromEdge * dimension * constant) /
+    (dimension + constant * distanceFromEdge)
+  );
+}
+
+/**
+ * rubberClamp(value, min, max, constant?)
+ * constant is optional : default 0.15
+ * clamps the value for min and max value and
+ * extends beyond min and max values with constant
+ * factor to create elastic rubber band effect
+ */
+export function rubberClamp(
+  value: number,
+  lowerbound: number,
+  upperbound: number,
+  constant: number = 0.15
+) {
+  if (constant === 0) return clamp(value, lowerbound, upperbound);
+
+  if (value < lowerbound) {
+    return (
+      -rubber(lowerbound - value, upperbound - lowerbound, constant) +
+      lowerbound
+    );
+  }
+
+  if (value > upperbound) {
+    return (
+      +rubber(value - upperbound, upperbound - lowerbound, constant) +
+      upperbound
+    );
+  }
+
+  return value;
+}
+
+/**
+ * snapTo(value, velocity, snapPoints[])
+ * Calculates the final snapPoint according to given current value,
+ * velocity and snapPoints array
+ */
+export function snapTo(
+  value: number,
+  velocity: number,
+  snapPoints: Array<number>
+): number {
+  const finalValue = value + velocity * 0.2;
+  const getDiff = (point: number) => Math.abs(point - finalValue);
+  const deltas = snapPoints.map(getDiff);
+  const minDelta = Math.min(...deltas);
+
+  return snapPoints.reduce(function (acc, point) {
+    if (getDiff(point) === minDelta) {
+      return point;
+    } else {
+      return acc;
+    }
+  });
+}
+
+/**
+ * move(array, moveIndex, toIndex)
+ * move array item from moveIndex to toIndex without array modification
+ */
+export function move(array: Array<any>, moveIndex: number, toIndex: number) {
+  const item = array[moveIndex];
+  const length = array.length;
+  const diff = moveIndex - toIndex;
+
+  if (diff > 0) {
+    return [
+      ...array.slice(0, toIndex),
+      item,
+      ...array.slice(toIndex, moveIndex),
+      ...array.slice(moveIndex + 1, length),
+    ];
+  } else if (diff < 0) {
+    const targetIndex = toIndex + 1;
+    return [
+      ...array.slice(0, moveIndex),
+      ...array.slice(moveIndex + 1, targetIndex),
+      item,
+      ...array.slice(targetIndex, length),
+    ];
+  }
+  return array;
+}

package/src/gestures/types.ts

@@ -1,49 +1,49 @@
-type GenericEventType = {
-  velocityX: number;
-  velocityY: number;
-  directionX: number;
-  directionY: number;
-};
-
-export type DragEventType = {
-  args: Array<number | undefined>;
-  down: boolean;
-  movementX: number;
-  movementY: number;
-  offsetX: number;
-  offsetY: number;
-  distanceX: number;
-  distanceY: number;
-  cancel: () => void;
-} & GenericEventType;
-
-export type MouseMoveEventType = {
-  args: Array<number | undefined>;
-  event: MouseEvent;
-  target: EventTarget | undefined | null;
-  isMoving: boolean;
-  mouseX: number;
-  mouseY: number;
-} & GenericEventType;
-
-export type ScrollEventType = {
-  isScrolling: boolean;
-  scrollX: number;
-  scrollY: number;
-} & GenericEventType;
-
-export type WheelEventType = {
-  target: HTMLElement | undefined | null;
-  isWheeling: boolean;
-  movementX: number;
-  movementY: number;
-  offsetX: number;
-  offsetY: number;
-  deltaX: number;
-  deltaY: number;
-} & GenericEventType;
-
-export type UseDragConfig = {
-  initial?: () => { movementX: number; movementY: number };
-};
-export type Vector2 = { x: number; y: number };
+type GenericEventType = {
+  velocityX: number;
+  velocityY: number;
+  directionX: number;
+  directionY: number;
+};
+
+export type DragEventType = {
+  args: Array<number | undefined>;
+  down: boolean;
+  movementX: number;
+  movementY: number;
+  offsetX: number;
+  offsetY: number;
+  distanceX: number;
+  distanceY: number;
+  cancel: () => void;
+} & GenericEventType;
+
+export type MouseMoveEventType = {
+  args: Array<number | undefined>;
+  event: MouseEvent;
+  target: EventTarget | undefined | null;
+  isMoving: boolean;
+  mouseX: number;
+  mouseY: number;
+} & GenericEventType;
+
+export type ScrollEventType = {
+  isScrolling: boolean;
+  scrollX: number;
+  scrollY: number;
+} & GenericEventType;
+
+export type WheelEventType = {
+  target: HTMLElement | undefined | null;
+  isWheeling: boolean;
+  movementX: number;
+  movementY: number;
+  offsetX: number;
+  offsetY: number;
+  deltaX: number;
+  deltaY: number;
+} & GenericEventType;
+
+export type UseDragConfig = {
+  initial?: () => { movementX: number; movementY: number };
+};
+export type Vector2 = { x: number; y: number };

package/src/gestures/withDefault.ts

@@ -1,3 +1,3 @@
-export const withDefault = (x: number, y: number) => {
-  return { x, y };
-};
+export const withDefault = (x: number, y: number) => {
+  return { x, y };
+};

package/src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from "./useOutsideClick";
-export * from "./useMeasure";
-export * from "./useWindowDimension";
+export * from "./useOutsideClick";
+export * from "./useMeasure";
+export * from "./useWindowDimension";