react-ui-animate 3.0.0-rc.0 → 3.0.0-rc.2

package/src/animation/core/types/animation.d.ts

@@ -1,56 +0,0 @@
-import type { Fn } from './common';
-
-/**
- * Base unit which is accepted by `FluidValue`
- */
-export type Length = number | string;
-
-/**
- * Object passed as an argument on `onRest` function
- */
-export type ResultType = { finished: boolean; value: number };
-
-/**
- * Function read by `animated` hoc to determine whether it
- * can be animated or not
- */
-export type SubscribeFn = (
-  onUpdate: OnUpdateFn,
-  property: string,
-  uuid: number
-) => void;
-
-/**
- * Configuration object for `FluidValue`
- */
-export interface FluidValueConfig {
-  mass?: number;
-  tension?: number;
-  friction?: number;
-  duration?: number;
-  easing?: Fn<number, number>;
-  immediate?: boolean;
-  delay?: number;
-  restDistance?: number;
-  onChange?: Fn<number, void>;
-  onRest?: Fn<ResultType, void>;
-  onStart?: Fn<number, void>;
-}
-
-/**
- * Object which can be assigned to animate
- */
-export type AssignValue =
-  | Length
-  | Fn<(next: Length, config?: FluidValueConfig) => Promise<any>, void>;
-
-export type OnUpdateCallback = Fn<ResultType, void>;
-
-/**
- * Function to start the animation (it starts the already subscribed animation)
- */
-export type OnUpdateFn = (
-  updatedValue: AssignValue,
-  config?: FluidValueConfig,
-  callback?: OnUpdateCallback
-) => void;

package/src/animation/core/types/common.d.ts

@@ -1,4 +0,0 @@
-/**
- * Generic function type argument of type T returns type U
- */
-export type Fn<T, U> = (value: T) => U;

package/src/animation/core/types/fluid.d.ts

@@ -1,38 +0,0 @@
-import {
-  CSSProperties,
-  HTMLAttributes,
-  SVGAttributes,
-  ComponentType,
-} from 'react';
-
-import { FluidValue } from '../controllers/FluidValue';
-import { styleTrasformKeys } from '../react/transforms';
-
-export type FluidTypes = 'spring' | 'timing';
-
-export type FluidCSSProperties = {
-  [key in keyof CSSProperties]: CSSProperties[key];
-} & {
-  [key in (typeof styleTrasformKeys)[number]]?: number | string | FluidValue;
-};
-
-export type FluidHTMLAttributes<T> = {
-  [property in keyof HTMLAttributes<T>]:
-    | HTMLAttributes<T>[property]
-    | FluidValue;
-};
-
-export type FluidSVGAttributes<T> = {
-  [property in keyof SVGAttributes<T>]: SVGAttributes<T>[property] | FluidValue;
-};
-
-export type FluidProps<T> = Omit<
-  FluidHTMLAttributes<T> & FluidSVGAttributes<T>,
-  'style'
-> & {
-  style?: FluidCSSProperties;
-};
-
-export type WrappedComponentOrTag =
-  | ComponentType<HTMLAttributes<HTMLElement>>
-  | keyof JSX.IntrinsicElements;

package/src/animation/lib/animationType.ts

@@ -1,17 +0,0 @@
-import { getInitialConfig } from './getInitialConfig';
-
-export const AnimationConfigUtils = {
-  ELASTIC: getInitialConfig('elastic'),
-  BOUNCE: getInitialConfig('bounce'),
-  EASE: getInitialConfig('ease'),
-  STIFF: getInitialConfig('stiff'),
-  WOOBLE: getInitialConfig('wooble'),
-  EASE_IN: getInitialConfig('easein'),
-  EASE_OUT: getInitialConfig('easeout'),
-  EASE_IN_OUT: getInitialConfig('easeinout'),
-  POWER1: getInitialConfig('power1'),
-  POWER2: getInitialConfig('power2'),
-  POWER3: getInitialConfig('power3'),
-  POWER4: getInitialConfig('power4'),
-  LINEAR: getInitialConfig('linear'),
-};

package/src/animation/lib/getInitialConfig.ts

@@ -1,61 +0,0 @@
-import { Easing, FluidValueConfig } from '../core';
-export type InitialConfigType =
-  | 'linear'
-  | 'easein'
-  | 'easeout'
-  | 'easeinout'
-  | 'ease'
-  | 'power1'
-  | 'power2'
-  | 'power3'
-  | 'power4'
-  | 'elastic'
-  | 'stiff'
-  | 'wooble'
-  | 'bounce';
-
-export const getInitialConfig = (
-  animationType?: InitialConfigType
-): FluidValueConfig => {
-  switch (animationType) {
-    case 'elastic':
-      return { mass: 1, friction: 18, tension: 250 };
-
-    case 'stiff':
-      return { mass: 1, friction: 18, tension: 350 };
-
-    case 'wooble':
-      return { mass: 1, friction: 8, tension: 250 };
-
-    case 'bounce':
-      return { duration: 500, easing: Easing.bounce };
-
-    case 'power1':
-      return { duration: 500, easing: Easing.bezier(0.17, 0.42, 0.51, 0.97) };
-
-    case 'power2':
-      return { duration: 500, easing: Easing.bezier(0.07, 0.11, 0.13, 1) };
-
-    case 'power3':
-      return { duration: 500, easing: Easing.bezier(0.09, 0.7, 0.16, 1.04) };
-
-    case 'power4':
-      return { duration: 500, easing: Easing.bezier(0.05, 0.54, 0, 1.03) };
-
-    case 'linear':
-      return { duration: 500, easing: Easing.linear };
-
-    case 'easein':
-      return { duration: 500, easing: Easing.in(Easing.ease) };
-
-    case 'easeout':
-      return { duration: 500, easing: Easing.out(Easing.ease) };
-
-    case 'easeinout':
-      return { duration: 500, easing: Easing.inOut(Easing.ease) };
-
-    case 'ease':
-    default:
-      return { mass: 1, friction: 34, tension: 290 };
-  }
-};

package/src/animation/lib/index.ts

@@ -1,12 +0,0 @@
-export { interpolate, bInterpolate } from './interpolation';
-export {
-  AnimatedBlock,
-  AnimatedImage,
-  AnimatedInline,
-  MountedBlock,
-  ScrollableBlock,
-  TransitionBlock,
-} from './modules';
-export { useAnimatedValue, UseAnimatedValueConfig } from './useAnimatedValue';
-export { useMountedValue } from './useMountedValue';
-export { AnimationConfigUtils } from './animationType';

package/src/animation/lib/interpolation.ts

@@ -1,47 +0,0 @@
-import { ExtrapolateConfig, FluidValue } from '../core';
-import { interpolate as internalInterpolate } from '../core';
-
-/**
- * interpolate functions maps input range to given output range
- * @param value - number | TransitionValue
- * @param inputRange - Array<number>
- * @param outputRange - Array<number | string>
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export function interpolate(
-  value: number | FluidValue,
-  inputRange: Array<number>,
-  outputRange: Array<number | string>,
-  extrapolateConfig?: ExtrapolateConfig
-) {
-  return internalInterpolate(
-    value as any,
-    inputRange,
-    outputRange,
-    extrapolateConfig
-  );
-}
-
-/**
- * bInterpolate functions maps input range [0, 1] to given [minOutput, maxOutput]
- * sorthand function to interpolate input range [0, 1]
- * @param value - number | TransitionValue
- * @param minOutput - number | string
- * @param maxOutput - number | string
- * @param extrapolateConfig - "clamp" | "identity" | "extend"
- * @returns - number | TransitionValue
- */
-export function bInterpolate(
-  value: number | FluidValue,
-  minOutput: number | string,
-  maxOutput: number | string,
-  extrapolateConfig?: ExtrapolateConfig
-) {
-  return internalInterpolate(
-    value as any,
-    [0, 1],
-    [minOutput, maxOutput],
-    extrapolateConfig
-  );
-}

package/src/animation/lib/modules/AnimatedBlock.ts

@@ -1,8 +0,0 @@
-import { makeFluid } from '../../core';
-
-/**
- * AnimatedBlock - A higher order component built upon `div` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-export const AnimatedBlock = makeFluid('div');

package/src/animation/lib/modules/AnimatedImage.ts

@@ -1,8 +0,0 @@
-import { makeFluid } from '../../core';
-
-/**
- * AnimatedImage - A higher order component built upon `img` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-export const AnimatedImage = makeFluid('img');

package/src/animation/lib/modules/AnimatedInline.ts

@@ -1,8 +0,0 @@
-import { makeFluid } from '../../core';
-
-/**
- * AnimatedInline - A higher order component built upon `span` element
- * which can accept `AnimatedValue`. It also exposes some extra style properties like
- * translateX, translateY, rotateX, rotateY, scaleX, etc.
- */
-export const AnimatedInline = makeFluid('span');

package/src/animation/lib/modules/MountedBlock.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import { FluidValue, FluidValueConfig } from '../../core';
-import { useMountedValue } from '../useMountedValue';
-
-interface MountedValueConfig extends FluidValueConfig {}
-
-interface MountedBlockProps {
-  state: boolean;
-  children: (animation: { value: FluidValue }) => React.ReactNode;
-  from?: number;
-  enter?: number;
-  exit?: number;
-  config?: MountedValueConfig;
-  enterConfig?: MountedValueConfig;
-  exitConfig?: MountedValueConfig;
-}
-
-/**
- * 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 { number } from - Number that dictates the beginning state for animation.
- * @prop { number } enter - Number that dictates the entry state for animation.
- * @prop { number } exit - Number that dictates the exit state for animation.
- * @prop { MountedValueConfig } config - Animation configuration for overall animation.
- * @prop { MountedValueConfig } enterConfig - Animation configuration for the entering state of animation.
- * @prop { MountedValueConfig } exitConfig - Animation configuration for the entering state of animation.
- */
-export const MountedBlock = ({
-  state,
-  children,
-  from = 0,
-  enter = 1,
-  exit = 0,
-  config,
-  enterConfig,
-  exitConfig,
-}: MountedBlockProps) => {
-  const open = useMountedValue(state, {
-    from,
-    enter,
-    exit,
-    config,
-    enterConfig,
-    exitConfig,
-  });
-
-  return (
-    <>{open((animation, mounted) => mounted && children(animation as any))}</>
-  );
-};

package/src/animation/lib/modules/ScrollableBlock.tsx

@@ -1,68 +0,0 @@
-import * as React from 'react';
-import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
-import { FluidValue } from '../../core';
-
-interface ScrollableBlockProps {
-  children?: (animation: {
-    value?: FluidValue | string | number;
-  }) => 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({ value: animation.value })}
-    </div>
-  );
-};

package/src/animation/lib/modules/TransitionBlock.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { bin } from '../../../gestures/helpers/math';
-import { useAnimatedValue, UseAnimatedValueConfig } from '../useAnimatedValue';
-import { FluidValue } from '../../core';
-
-interface TransitionBlockProps {
-  state: boolean;
-  children: (animation: {
-    value?: FluidValue | string | number;
-  }) => 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({ value: amv.value })}</>;
-};

package/src/animation/lib/modules/index.ts

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

package/src/animation/lib/useAnimatedValue.ts

@@ -1,60 +0,0 @@
-import { useFluidValue, FluidValueConfig, FluidValue } from '../core';
-import { AnimationConfigUtils } from './animationType';
-
-// useAnimatedValue value type
-type Length = number | string;
-
-export interface UseAnimatedValueConfig extends FluidValueConfig {}
-
-/**
- * `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: Length,
-  config?: UseAnimatedValueConfig
-) {
-  const [animation, setAnimation] = useFluidValue(initialValue, {
-    ...AnimationConfigUtils.EASE,
-    ...config,
-  });
-
-  const targetObject: {
-    value: FluidValue | string | number | undefined;
-    currentValue: number | string;
-  } = {
-    value: animation,
-    currentValue: animation.get(),
-  };
-
-  return new Proxy(targetObject, {
-    set: function (_, key, value: any) {
-      if (key === 'value') {
-        if (typeof value === 'number' || typeof value === 'string') {
-          setAnimation(value);
-        }
-
-        return true;
-      }
-
-      throw new Error('You cannot set any other property to animation node.');
-    },
-    get: function (_, key) {
-      if (key === 'value') {
-        return animation;
-      }
-
-      if (key === 'currentValue') {
-        return animation.get();
-      }
-
-      throw new Error(
-        'You cannot access any other property from animation node.'
-      );
-    },
-  });
-}

package/src/animation/lib/useMountedValue.ts

@@ -1,18 +0,0 @@
-import { useMount, UseMountConfig, FluidValue } from '../core';
-
-export interface UseMountedValueConfig extends UseMountConfig {}
-
-/**
- * `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 mv = useMount(state, config);
-  return (
-    cb: (value: { value: FluidValue }, mounted: boolean) => React.ReactNode
-  ) => mv((a, m) => cb({ value: a }, m));
-}

package/src/gestures/controllers/DragGesture.ts

@@ -1,178 +0,0 @@
-import { attachEvents } from '../helpers/eventAttacher';
-import { clamp } from '../helpers/math';
-import { withDefault } from '../helpers/withDefault';
-import { Gesture } from './Gesture';
-
-import type { Vector2 } from '../types';
-
-export class DragGesture extends Gesture {
-  movementStart: Vector2 = withDefault(0, 0);
-  initialMovement: Vector2 = withDefault(0, 0);
-  movement: Vector2 = withDefault(0, 0);
-  previousMovement: Vector2 = withDefault(0, 0);
-  translation: Vector2 = withDefault(0, 0);
-  offset: Vector2 = withDefault(0, 0);
-  velocity: Vector2 = withDefault(0, 0);
-
-  // @override
-  // initialize the events
-  _initEvents() {
-    if (this.targetElement || this.targetElements.length > 0) {
-      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)],
-        ]
-      );
-    }
-  }
-
-  // @override - cancel events
-  // we only canceled down and move events because mouse up
-  // will not be triggered
-  _cancelEvents() {
-    if (this._subscribe) {
-      this._subscribe(['mousedown', 'mousemove', 'touchstart', 'touchmove']);
-    }
-  }
-
-  _handleCallback() {
-    if (this.callback) {
-      this.callback({
-        args: [this.currentIndex],
-        down: this.isActive,
-        movementX: this.movement.x,
-        movementY: this.movement.y,
-        offsetX: this.translation.x,
-        offsetY: this.translation.y,
-        velocityX: this.velocity.x,
-        velocityY: this.velocity.y,
-        distanceX: Math.abs(this.movement.x),
-        distanceY: Math.abs(this.movement.y),
-        directionX: Math.sign(this.movement.x),
-        directionY: Math.sign(this.movement.y),
-        cancel: () => {
-          this._cancelEvents();
-        },
-      });
-    }
-  }
-
-  pointerDown(e: any) {
-    if (e.type === 'touchstart') {
-      this.movementStart = {
-        x: e.touches[0].clientX,
-        y: e.touches[0].clientY,
-      };
-    } else {
-      this.movementStart = { x: e.clientX, y: e.clientY };
-    }
-
-    this.movement = { x: 0, y: 0 };
-    this.offset = { x: this.translation.x, y: this.translation.y };
-    this.previousMovement = { x: 0, y: 0 };
-    this.velocity = { x: 0, y: 0 };
-
-    // find current selected element
-    const currElem = this.targetElements.find((elem: any) => elem === e.target);
-
-    if (e.target === this.targetElement || currElem) {
-      this.isActive = true;
-      e.preventDefault();
-
-      // set args
-      if (currElem) {
-        this.currentIndex = this.targetElements.indexOf(currElem);
-      }
-
-      // if initial function is defined then call it to get initial movementX and movementY
-      // if only select to bounded draggable element
-      const initial = this.config?.initial && this.config.initial();
-      const initialMovementX = initial?.movementX;
-      const initialMovementY = initial?.movementY;
-
-      this.initialMovement = {
-        x: initialMovementX ?? 0,
-        y: initialMovementY ?? 0,
-      };
-
-      this.movement = {
-        x: this.initialMovement.x,
-        y: this.initialMovement.y,
-      };
-
-      this.previousMovement = {
-        x: this.initialMovement.x,
-        y: this.initialMovement.y,
-      };
-
-      this._handleCallback();
-    }
-  }
-
-  pointerMove(e: any) {
-    if (this.isActive) {
-      e.preventDefault();
-      const now = Date.now();
-      const deltaTime = clamp(now - this.lastTimeStamp, 0.1, 64);
-      this.lastTimeStamp = now;
-
-      const t = deltaTime / 1000;
-
-      if (e.type === 'touchmove') {
-        this.movement = {
-          x:
-            this.initialMovement.x +
-            (e.touches[0].clientX - this.movementStart.x),
-          y:
-            this.initialMovement.y +
-            (e.touches[0].clientY - this.movementStart.y),
-        };
-      } else {
-        this.movement = {
-          x: this.initialMovement.x + (e.clientX - this.movementStart.x),
-          y: this.initialMovement.y + (e.clientY - this.movementStart.y),
-        };
-      }
-
-      this.translation = {
-        x: this.offset.x + this.movement.x,
-        y: this.offset.y + this.movement.y,
-      };
-
-      this.velocity = {
-        x: clamp(
-          (this.movement.x - this.previousMovement.x) / t / 1000,
-          -1 * Gesture._VELOCITY_LIMIT,
-          Gesture._VELOCITY_LIMIT
-        ),
-        y: clamp(
-          (this.movement.y - this.previousMovement.y) / t / 1000,
-          -1 * Gesture._VELOCITY_LIMIT,
-          Gesture._VELOCITY_LIMIT
-        ),
-      };
-
-      this.previousMovement = {
-        x: this.movement.x,
-        y: this.movement.y,
-      };
-
-      this._handleCallback();
-    }
-  }
-
-  pointerUp() {
-    if (this.isActive) {
-      this.isActive = false;
-      this._handleCallback();
-      this._cancelEvents();
-      this._initEvents();
-    }
-  }
-}