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

package/src/animation/useMountedValue.ts

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

package/src/gestures/controllers/DragGesture.ts

@@ -1,176 +1,177 @@
-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);
-  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 = Math.min(now - this.lastTimeStamp, 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._initEvents();
-    }
-  }
-}
+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);
+  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();
+    }
+  }
+}

package/src/gestures/controllers/Gesture.ts

@@ -1,54 +1,54 @@
-export class Gesture {
-  currentIndex?: number;
-  lastTimeStamp: number = Date.now();
-  isActive: boolean = false;
-  targetElement?: HTMLElement; // represents the bounded element
-  targetElements: Array<HTMLElement> = []; // represents the bounded elements
-  config?: any;
-  callback?: <T>(event: T) => void;
-  _subscribe?: (eventKeys?: Array<string>) => void;
-  static _VELOCITY_LIMIT: number = 20;
-
-  // it must be overridden by other child classes
-  _initEvents() {}
-
-  // cancel events
-  // we only canceled down and move events because mouse up
-  // will not be triggered
-  _cancelEvents() {
-    if (this._subscribe) {
-      this._subscribe();
-    }
-  }
-
-  // re-apply new callback
-  applyCallback(callback: <T>(event: T) => void) {
-    this.callback = callback;
-  }
-
-  // apply gesture
-  applyGesture({
-    targetElement,
-    targetElements,
-    callback,
-    config,
-  }: {
-    targetElement?: any;
-    targetElements?: any;
-    callback: <T>(event: T) => void;
-    config?: any;
-  }) {
-    this.targetElement = targetElement;
-    this.targetElements = targetElements.map(
-      (element: { current: any }) => element.current
-    );
-    this.callback = callback;
-    this.config = config;
-
-    // initialize events
-    this._initEvents();
-
-    // unbind
-    return () => this._subscribe && this._subscribe();
-  }
-}
+export class Gesture {
+  currentIndex?: number;
+  lastTimeStamp: number = Date.now();
+  isActive: boolean = false;
+  targetElement?: HTMLElement; // represents the bounded element
+  targetElements: Array<HTMLElement> = []; // represents the bounded elements
+  config?: any;
+  callback?: <T>(event: T) => void;
+  _subscribe?: (eventKeys?: Array<string>) => void;
+  static _VELOCITY_LIMIT: number = 20;
+
+  // it must be overridden by other child classes
+  _initEvents() {}
+
+  // cancel events
+  // we only canceled down and move events because mouse up
+  // will not be triggered
+  _cancelEvents() {
+    if (this._subscribe) {
+      this._subscribe();
+    }
+  }
+
+  // re-apply new callback
+  applyCallback(callback: <T>(event: T) => void) {
+    this.callback = callback;
+  }
+
+  // apply gesture
+  applyGesture({
+    targetElement,
+    targetElements,
+    callback,
+    config,
+  }: {
+    targetElement?: any;
+    targetElements?: any;
+    callback: <T>(event: T) => void;
+    config?: any;
+  }) {
+    this.targetElement = targetElement;
+    this.targetElements = targetElements.map(
+      (element: { current: any }) => element.current
+    );
+    this.callback = callback;
+    this.config = config;
+
+    // initialize events
+    this._initEvents();
+
+    // unbind
+    return () => this._subscribe && this._subscribe();
+  }
+}