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

package/src/animation/useAnimatedValue.ts

@@ -1,55 +1,18 @@
-import * as React from "react";
-import {
-  useTransition,
-  TransitionValue,
-  ResultType,
-} from "@raidipesh78/re-motion";
-import { InitialConfigType, getInitialConfig } from "./getInitialConfig";
+import { useTransition, UseTransitionConfig } from '@raidipesh78/re-motion';
 
 // useAnimatedValue value type
 type AnimatedValueType = number | string;
+export interface UseAnimatedValueConfig extends UseTransitionConfig {}
 
-/**
- * getValue checks for type of initialValue and throws error
- * for type other than AnimatedValueType
- */
-const getValue = (value: AnimatedValueType) => {
-  if (typeof value === "number" || typeof value === "string") {
-    return value;
-  } else {
-    throw new Error(
-      "Invalid Value! Animated value only accepts string or number."
-    );
-  }
+type Length = number | string;
+type AssignValue = {
+  toValue: Length;
+  config?: UseAnimatedValueConfig;
 };
-
-// General config type
-export interface GenericAnimationConfig {
-  duration?: number;
-  mass?: number;
-  friction?: number;
-  tension?: number;
-  easing?: (t: number) => number;
-  delay?: number;
-}
-
-export interface UseAnimatedValueConfig extends GenericAnimationConfig {
-  animationType?: InitialConfigType;
-  onAnimationEnd?: (value: ResultType) => void;
-  listener?: (value: number) => void;
-  immediate?: boolean;
-}
-
-export type ValueReturnType =
-  | TransitionValue
-  | number
-  | string
-  | { toValue: number | string; immediate?: boolean };
-
-interface UseAnimatedValueReturn {
-  value: ValueReturnType;
-  currentValue: number | string;
-}
+export type ValueType =
+  | Length
+  | AssignValue
+  | ((update: (next: AssignValue) => Promise<any>) => void);
 
 /**
  * useAnimatedValue for animated transitions
@@ -57,72 +20,42 @@ interface UseAnimatedValueReturn {
 export function useAnimatedValue(
   initialValue: AnimatedValueType,
   config?: UseAnimatedValueConfig
-): UseAnimatedValueReturn {
-  const _isInitial = React.useRef(true);
-  const _initialValue: number | string = getValue(initialValue);
-
-  const animationType = config?.animationType ?? "ease"; // Defines default animation
-  const onAnimationEnd = config?.onAnimationEnd;
-  const listener = config?.listener;
-
-  const [animation, setAnimation] = useTransition(_initialValue, {
-    ...getInitialConfig(animationType),
-    ...config,
-    onRest: function (result: any) {
-      if (result.finished) {
-        onAnimationEnd && onAnimationEnd(result.value);
-      }
-    },
-    onChange: function (value: number) {
-      listener && listener(value);
-    },
-  });
-
-  // doesn't fire on initial render
-  React.useEffect(() => {
-    if (!_isInitial.current) {
-      setAnimation({ toValue: _initialValue });
-    }
-    _isInitial.current = false;
-  }, [_initialValue]);
+) {
+  const [animation, setAnimation] = useTransition(initialValue, config);
 
   const targetObject: {
     value: any;
-    currentValue: string | number;
+    currentValue: number | string;
   } = {
     value: animation,
     currentValue: animation.get(),
   };
 
   return new Proxy(targetObject, {
-    set: function (
-      _,
-      key,
-      value: number | string | { toValue: number | string; immediate?: boolean }
-    ) {
-      if (key === "value") {
-        if (typeof value === "number" || typeof value === "string") {
+    set: function (_, key, value: ValueType) {
+      if (key === 'value') {
+        if (typeof value === 'number' || typeof value === 'string') {
           setAnimation({ toValue: value });
-        } else if (typeof value === "object") {
-          setAnimation({ toValue: value.toValue, immediate: value?.immediate });
+        } else if (typeof value === 'object' || typeof value === 'function') {
+          setAnimation(value);
         }
 
         return true;
       }
 
-      throw new Error("You cannot set any other property to animation node.");
+      throw new Error('You cannot set any other property to animation node.');
     },
     get: function (_, key) {
-      if (key === "value") {
+      if (key === 'value') {
         return animation;
       }
 
-      if (key === "currentValue") {
+      if (key === 'currentValue') {
         return animation.get();
       }
 
       throw new Error(
-        "You cannot access any other property from animation node."
+        'You cannot access any other property from animation node.'
       );
     },
   });

package/src/animation/useMountedValue.ts

@@ -1,48 +1,41 @@
-import * as React from "react";
+import * as React from 'react';
 import {
   useTransition,
   TransitionValue,
-  UseTransitionConfig,
-} from "@raidipesh78/re-motion";
+  UseMountConfig,
+} from '@raidipesh78/re-motion';
 
-export interface InnerUseMountedValueConfig extends UseTransitionConfig {
-  enterDuration?: number;
-  exitDuration?: number;
-}
-
-interface UseMountedValueConfig {
-  from: number;
-  enter: number;
-  exit: number;
-  config?: InnerUseMountedValueConfig;
-}
+export interface UseMountedValueConfig extends UseMountConfig {}
 
 /**
  * useMountedValue handles mounting and unmounting of a component
  * @param state - boolean
  * @param config - useTransitionConfig
- * @returns mountedValueFunction with a callback with argument ( animationNode, mounted )
+ * @returns mountedValueFunction with a callback with argument ( { value: animationNode }, mounted )
  */
 export function useMountedValue(state: boolean, config: UseMountedValueConfig) {
-  const [initial, setInitial] = React.useState(true);
+  const initial = React.useRef(true);
   const [mounted, setMounted] = React.useState(state);
-  const { from, enter, exit, config: _config } = React.useRef(config).current;
-  const [animation, setAnimation] = useTransition(from, _config);
-
-  const enterDuration = config.config?.enterDuration ?? config.config?.duration;
-  const exitDuration =
-    config.config?.exitDuration ?? config.config?.exitDuration;
+  const {
+    from,
+    enter,
+    exit,
+    config: innerConfig,
+    enterConfig,
+    exitConfig,
+  } = React.useRef(config).current;
+  const [animation, setAnimation] = useTransition(from, innerConfig);
 
   React.useEffect(() => {
     if (state) {
-      setInitial(true);
+      initial.current = true;
       setMounted(true);
     } else {
-      setInitial(false);
+      initial.current = false;
       setAnimation(
         {
           toValue: exit,
-          duration: exitDuration,
+          config: exitConfig,
         },
         function ({ finished }) {
           if (finished) {
@@ -54,22 +47,17 @@ export function useMountedValue(state: boolean, config: UseMountedValueConfig) {
   }, [state]);
 
   React.useEffect(() => {
-    if (mounted && initial) {
-      setAnimation(
-        {
-          toValue: enter,
-          duration: enterDuration,
-        },
-        function () {
-          return;
-        }
-      );
+    if (mounted && initial.current) {
+      setAnimation({
+        toValue: enter,
+        config: enterConfig,
+      });
     }
-  }, [mounted, initial]);
+  }, [mounted, initial.current]);
 
   return function (
     callback: (
-      { value }: { value: TransitionValue },
+      { value: animation }: { value: TransitionValue },
       mounted: boolean
     ) => React.ReactNode
   ) {

package/src/gestures/controllers/DragGesture.ts

@@ -1,8 +1,8 @@
-import { attachEvents } from "../eventAttacher";
-import { Vector2 } from "../types";
-import { clamp } from "../math";
-import { withDefault } from "../withDefault";
-import { Gesture } from "./Gesture";
+import { attachEvents } from '../eventAttacher';
+import { Vector2 } from '../types';
+import { clamp } from '../math';
+import { withDefault } from '../withDefault';
+import { Gesture } from './Gesture';
 
 export class DragGesture extends Gesture {
   movementStart: Vector2 = withDefault(0, 0);
@@ -20,12 +20,12 @@ export class DragGesture extends Gesture {
       this._subscribe = attachEvents(
         [window],
         [
-          ["mousedown", this.pointerDown.bind(this)],
-          ["mousemove", this.pointerMove.bind(this)],
-          ["mouseup", this.pointerUp.bind(this)],
-          ["touchstart", this.pointerDown.bind(this), { passive: false }],
-          ["touchmove", this.pointerMove.bind(this), { passive: false }],
-          ["touchend", this.pointerUp.bind(this)],
+          ['mousedown', this.pointerDown.bind(this)],
+          ['mousemove', this.pointerMove.bind(this)],
+          ['mouseup', this.pointerUp.bind(this)],
+          ['touchstart', this.pointerDown.bind(this), { passive: false }],
+          ['touchmove', this.pointerMove.bind(this), { passive: false }],
+          ['touchend', this.pointerUp.bind(this)],
         ]
       );
     }
@@ -36,7 +36,7 @@ export class DragGesture extends Gesture {
   // will not be triggered
   _cancelEvents() {
     if (this._subscribe) {
-      this._subscribe(["mousedown", "mousemove", "touchstart", "touchmove"]);
+      this._subscribe(['mousedown', 'mousemove', 'touchstart', 'touchmove']);
     }
   }
 
@@ -63,7 +63,7 @@ export class DragGesture extends Gesture {
   }
 
   pointerDown(e: any) {
-    if (e.type === "touchstart") {
+    if (e.type === 'touchstart') {
       this.movementStart = {
         x: e.touches[0].clientX,
         y: e.touches[0].clientY,
@@ -118,12 +118,12 @@ export class DragGesture extends Gesture {
     if (this.isActive) {
       e.preventDefault();
       const now = Date.now();
-      const deltaTime = Math.min(now - this.lastTimeStamp, 64);
+      const deltaTime = clamp(now - this.lastTimeStamp, 0.1, 64);
       this.lastTimeStamp = now;
 
       const t = deltaTime / 1000;
 
-      if (e.type === "touchmove") {
+      if (e.type === 'touchmove') {
         this.movement = {
           x:
             this.initialMovement.x +
@@ -170,6 +170,7 @@ export class DragGesture extends Gesture {
     if (this.isActive) {
       this.isActive = false;
       this._handleCallback();
+      this._cancelEvents();
       this._initEvents();
     }
   }

package/src/utils/delay.ts

@@ -0,0 +1,9 @@
+/**
+ * @param { number } ms - number of milliseconds to delay code execution
+ * @returns Promise
+ */
+export function delay(ms: number) {
+  return new Promise((resolve) => {
+    setTimeout(() => resolve(null), ms);
+  });
+}

package/src/utils/index.ts

@@ -1 +1,2 @@
-export * from "./isDefined";
+export * from './isDefined';
+export * from './delay';