react-ui-animate 1.4.6 → 2.0.0-rc.3

package/src/animation/modules/MountedBlock.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { TransitionValue } from '@raidipesh78/re-motion';
+import { useMountedValue, UseMountedValueConfig } from '../useMountedValue';
+
+interface MountedBlockProps {
+  state: boolean;
+  children: (animation: { value: TransitionValue }) => React.ReactNode;
+  config: UseMountedValueConfig;
+}
+
+/**
+ * MountedBlock - Higher order component which handles mounting and unmounting of a component.
+ * @prop { boolean } state - Boolean indicating the component should mount or unmount.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseMountedValueConfig } config - Animation configuration.
+ */
+export const MountedBlock = ({
+  state,
+  children,
+  config,
+}: MountedBlockProps) => {
+  const open = useMountedValue(state, config);
+
+  return <>{open((animation, mounted) => mounted && children(animation))}</>;
+};

package/src/animation/modules/ScrollableBlock.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { TransitionValue } from '@raidipesh78/re-motion';
+import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
+
+interface ScrollableBlockProps {
+  children?: (animation: { value: TransitionValue }) => React.ReactNode;
+  direction?: 'single' | 'both';
+  threshold?: number;
+  animationConfig?: UseAnimatedValueConfig;
+}
+
+/**
+ * ScrollableBlock - Higher order component to handle the entrance or exit animation
+ * of a component when it enters or exit the viewport. Accepts child as a function with
+ * `AnimatedValue` as its first argument which can be interpolated on input range [0, 1]
+ * @prop { function } children - child as a function with `AnimatedValue` as its first argument.
+ * @prop { 'single' | 'both' } direction - single applies animation on enter once, both applies on enter and exit.
+ * @prop { number } threshold - should be in range 0 to 1 which equivalent to `IntersectionObserver` threshold.
+ * @prop { UseAnimatedValueConfig } animationConfig - Animation config
+ */
+export const ScrollableBlock = (props: ScrollableBlockProps) => {
+  const {
+    children,
+    direction = 'single',
+    animationConfig,
+    threshold = 0.2,
+  } = props;
+  const scrollableBlockRef = React.useRef<HTMLDivElement>(null);
+  const animation = useAnimatedValue(0, animationConfig); // 0: not intersecting | 1: intersecting
+
+  React.useEffect(() => {
+    const _scrollableBlock = scrollableBlockRef.current;
+
+    const observer = new IntersectionObserver(
+      function ([entry]) {
+        const { isIntersecting } = entry;
+
+        if (isIntersecting) {
+          animation.value = 1;
+        } else {
+          if (direction === 'both') animation.value = 0;
+        }
+      },
+      {
+        root: null, // FOR VIEWPORT ONLY
+        threshold,
+      }
+    );
+
+    if (_scrollableBlock) {
+      observer.observe(_scrollableBlock);
+    }
+
+    return () => {
+      if (_scrollableBlock) {
+        observer.unobserve(_scrollableBlock);
+      }
+    };
+  }, []);
+
+  return <div ref={scrollableBlockRef}>{children && children(animation)}</div>;
+};

package/src/animation/modules/TransitionBlock.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { TransitionValue } from '@raidipesh78/re-motion';
+import { bin } from '../../gestures/math';
+import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
+
+interface TransitionBlockProps {
+  state: boolean;
+  children: (animation: { value: TransitionValue }) => React.ReactNode;
+  config?: UseAnimatedValueConfig;
+}
+
+/**
+ * TransitionBlock - Higher order component which animates on state change.
+ * @prop { boolean } state - Boolean indicating the current state of animation, usually `false = 0 and true = 1`.
+ * @prop { function } children - Child as a function with `AnimatedValue` on `.value` property.
+ * @prop { UseAnimatedValueConfig } config - Animation configuration.
+ */
+export const TransitionBlock = ({
+  state,
+  children,
+  config,
+}: TransitionBlockProps) => {
+  const amv = useAnimatedValue(bin(state), config);
+
+  return <>{children(amv)}</>;
+};

package/src/animation/modules/index.ts

@@ -0,0 +1,6 @@
+export * from './AnimatedBlock';
+export * from './AnimatedInline';
+export * from './AnimatedImage';
+export * from './MountedBlock';
+export * from './ScrollableBlock';
+export * from './TransitionBlock';

package/src/animation/useAnimatedValue.ts

@@ -1,131 +1,70 @@
-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';
+import { AnimationConfigUtils } from './animationType';
 
 // useAnimatedValue value type
-type AnimatedValueType = number | string;
+type Length = number | string;
+type AnimatedValueType = Length;
 
-/**
- * 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."
-    );
-  }
-};
-
-// 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 };
+export interface UseAnimatedValueConfig extends UseTransitionConfig {}
 
-interface UseAnimatedValueReturn {
-  value: ValueReturnType;
-  currentValue: number | string;
-}
+type AssignValue = {
+  toValue: Length;
+  config?: UseAnimatedValueConfig;
+};
+export type ValueType =
+  | Length
+  | AssignValue
+  | ((update: (next: AssignValue) => Promise<any>) => void);
 
 /**
- * useAnimatedValue for animated transitions
+ * `useAnimatedValue` returns an animation value with `.value` and `.currentValue` property which is
+ * initialized when passed to argument (`initialValue`). The retured value persist until the lifetime of
+ * a component. It doesnot cast any re-renders which can is very good for performance optimization.
+ * @param { string | number } initialValue - Initial value
+ * @param { UseAnimatedValueConfig } config - Animation configuration object.
  */
 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),
+) {
+  const [animation, setAnimation] = useTransition(initialValue, {
+    ...AnimationConfigUtils.EASE,
     ...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 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,
-            config: { 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,50 +1,42 @@
-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 )
+ * `useMountedValue` handles mounting and unmounting of a component which captures current state
+ * passed as an arugment (`state`) and exposes the shadow state which handles the mount and unmount
+ * of a component.
+ * @param { boolean } state - Boolean indicating the component should mount or unmount.
+ * @param { UseMountedValueConfig } config - Animation configuration.
  */
 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,
-          config: {
-            duration: exitDuration,
-          },
+          config: exitConfig,
         },
         function ({ finished }) {
           if (finished) {
@@ -56,24 +48,17 @@ export function useMountedValue(state: boolean, config: UseMountedValueConfig) {
   }, [state]);
 
   React.useEffect(() => {
-    if (mounted && initial) {
-      setAnimation(
-        {
-          toValue: enter,
-          config: {
-            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/MouseMoveGesture.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 MouseMoveGesture extends Gesture {
   event?: MouseEvent;
@@ -18,16 +18,16 @@ export class MouseMoveGesture extends Gesture {
     if (this.targetElement) {
       this._subscribe = attachEvents(
         [this.targetElement],
-        [["mousemove", this.onMouseMove.bind(this)]]
+        [['mousemove', this.onMouseMove.bind(this)]]
       );
     } else if (this.targetElements.length > 0) {
       this._subscribe = attachEvents(this.targetElements, [
-        ["mousemove", this.onMouseMove.bind(this)],
+        ['mousemove', this.onMouseMove.bind(this)],
       ]);
     } else {
       this._subscribe = attachEvents(
         [window],
-        [["mousemove", this.onMouseMove.bind(this)]]
+        [['mousemove', this.onMouseMove.bind(this)]]
       );
     }
   }

package/src/gestures/controllers/ScrollGesture.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 ScrollGesture extends Gesture {
   isActiveID?: any;
@@ -17,12 +17,12 @@ export class ScrollGesture extends Gesture {
     if (this.targetElement) {
       this._subscribe = attachEvents(
         [this.targetElement],
-        [["scroll", this.scrollElementListener.bind(this)]]
+        [['scroll', this.scrollElementListener.bind(this)]]
       );
     } else {
       this._subscribe = attachEvents(
         [window],
-        [["scroll", this.scrollListener.bind(this)]]
+        [['scroll', this.scrollListener.bind(this)]]
       );
     }
   }

package/src/gestures/controllers/WheelGesture.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';
 
 const LINE_HEIGHT = 40;
 const PAGE_HEIGHT = 800;
@@ -25,7 +25,7 @@ export class WheelGesture extends Gesture {
     if (this.targetElement) {
       this._subscribe = attachEvents(
         [this.targetElement],
-        [["wheel", this.onWheel.bind(this)]]
+        [['wheel', this.onWheel.bind(this)]]
       );
     }
   }

package/src/gestures/controllers/index.ts

@@ -1,4 +1,4 @@
-export * from "./DragGesture";
-export * from "./MouseMoveGesture";
-export * from "./ScrollGesture";
-export * from "./WheelGesture";
+export * from './DragGesture';
+export * from './MouseMoveGesture';
+export * from './ScrollGesture';
+export * from './WheelGesture';

package/src/gestures/eventAttacher.ts

@@ -1,19 +1,19 @@
 type MouseEventType =
-  | "click"
-  | "dblclick"
-  | "mousedown"
-  | "mousemove"
-  | "mouseup"
-  | "touchstart"
-  | "touchmove"
-  | "touchend"
-  | "mouseenter"
-  | "mouseleave"
-  | "mouseout"
-  | "mouseover"
-  | "scroll"
-  | "wheel"
-  | "contextmenu";
+  | 'click'
+  | 'dblclick'
+  | 'mousedown'
+  | 'mousemove'
+  | 'mouseup'
+  | 'touchstart'
+  | 'touchmove'
+  | 'touchend'
+  | 'mouseenter'
+  | 'mouseleave'
+  | 'mouseout'
+  | 'mouseover'
+  | 'scroll'
+  | 'wheel'
+  | 'contextmenu';
 
 type DomTargetTypes = Array<Window | Document | HTMLElement>;
 

package/src/gestures/hooks/index.ts

@@ -1,5 +1,5 @@
-export * from "./useDrag";
-export * from "./useMouseMove";
-export * from "./useScroll";
-export * from "./useWheel";
-export * from "./useGesture";
+export * from './useDrag';
+export * from './useMouseMove';
+export * from './useScroll';
+export * from './useWheel';
+export * from './useGesture';

package/src/gestures/hooks/useDrag.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { DragEventType, UseDragConfig } from "../types";
-import { DragGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
+import { DragEventType, UseDragConfig } from '../types';
+import { DragGesture } from '../controllers';
+import { useRecognizer } from './useRecognizer';
 
 export function useDrag(
   callback: (event: DragEventType) => void,
@@ -10,5 +10,5 @@ export function useDrag(
 ) {
   const gesture = React.useRef(new DragGesture()).current;
 
-  return useRecognizer([["drag", gesture, callback, config]]);
+  return useRecognizer([['drag', gesture, callback, config]]);
 }

package/src/gestures/hooks/useGesture.ts

@@ -1,17 +1,17 @@
-import * as React from "react";
+import * as React from 'react';
 import {
   DragGesture,
   MouseMoveGesture,
   ScrollGesture,
   WheelGesture,
-} from "../controllers";
+} from '../controllers';
 import {
   DragEventType,
   WheelEventType,
   ScrollEventType,
   MouseMoveEventType,
-} from "../types";
-import { useRecognizer } from "./useRecognizer";
+} from '../types';
+import { useRecognizer } from './useRecognizer';
 
 export function useGesture({
   onDrag,
@@ -30,9 +30,9 @@ export function useGesture({
   const mouseMoveGesture = React.useRef(new MouseMoveGesture()).current;
 
   return useRecognizer([
-    ["drag", dragGesture, onDrag],
-    ["wheel", wheelGesture, onWheel],
-    ["scroll", scrollGesture, onScroll],
-    ["move", mouseMoveGesture, onMouseMove],
+    ['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 * as React from 'react';
 
-import { MouseMoveEventType } from "../types";
-import { MouseMoveGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
+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]]);
+  return useRecognizer([['move', gesture, callback]]);
 }

package/src/gestures/hooks/useRecognizer.ts

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-import * as React from "react";
+import * as React from 'react';
 
 type UseRecognizerHandlerType = Array<
   [
-    key: "drag" | "wheel" | "move" | "scroll",
+    key: 'drag' | 'wheel' | 'move' | 'scroll',
     gesture: any,
     callback: any,
     config?: any

package/src/gestures/hooks/useScroll.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { ScrollEventType } from "../types";
-import { ScrollGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
+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]]);
+  return useRecognizer([['scroll', gesture, callback]]);
 }

package/src/gestures/hooks/useWheel.ts

@@ -1,11 +1,11 @@
-import * as React from "react";
+import * as React from 'react';
 
-import { WheelEventType } from "../types";
-import { WheelGesture } from "../controllers";
-import { useRecognizer } from "./useRecognizer";
+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]]);
+  return useRecognizer([['wheel', gesture, callback]]);
 }