@atlaskit/motion/dist/cjs/entering/use-motion.js

A set of utilities to apply motion in your application.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useMotion = useMotion;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
var _getComputedAnimationDurationMs = require("../utils/get-computed-animation-duration-ms");
var _getDurationMs = require("../utils/get-duration-ms");
var _isReducedMotion = require("../utils/is-reduced-motion");
var _useLayoutEffect = require("../utils/use-layout-effect");
var _resolveMotionToken = require("../utils/resolve-motion-token");
var _reanimate = require("./reanimate");
var _useExitingPersistence = require("./use-exiting-persistence");
var _useStaggeredEntrance = require("./use-staggered-entrance");
// Exposes start and finish callbacks while useMotion coordinates the animation lifecycle.

/**
 * __useMotion__
 *
 * A hook form of the `Motion` primitive. It manages the entering/exiting animation
 * lifecycle and returns `{ ref, reanimate, state }` so that motion can be applied to
 * an existing element __without__ introducing an extra wrapper element. The consumer
 * drives the animation styling from `state` (e.g. via a `cssMap`) and applies the
 * animation to their own element.
 *
 * The returned `ref` __must__ be attached to the animated element, otherwise exit
 * timing, `onFinish`, and `ExitingPersistence` removal will not work.
 */
function useMotion() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    onFinishMotion = _ref.onFinish,
    onStartMotion = _ref.onStart,
    initialState = _ref.initialState;
  var reducedMotion = (0, _isReducedMotion.isReducedMotion)();
  var staggered = (0, _useStaggeredEntrance.useStaggeredEntrance)();
  var _useExitingPersistenc = (0, _useExitingPersistence.useExitingPersistence)(),
    isExiting = _useExitingPersistenc.isExiting,
    onExitFinished = _useExitingPersistenc.onFinish,
    appear = _useExitingPersistenc.appear;
  var staggeredDelay = isExiting ? 0 : staggered.delay;
  var staggeredIsReady = staggered.isReady;
  var _useState = (0, _react.useState)(initialState !== null && initialState !== void 0 ? initialState : appear ? staggeredIsReady && !staggeredDelay ? 'entering' : 'init' : 'visible'),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    state = _useState2[0],
    setState = _useState2[1];
  // ExitingPersistence must win during render so consumers apply exit styles before layout effects.
  // The lifecycle effect below uses the same value to measure and finish that exit.
  var motionState = isExiting ? 'exiting' : state;
  var elementRef = (0, _react.useRef)(null);
  var onStartMotionRef = (0, _react.useRef)(onStartMotion);
  onStartMotionRef.current = onStartMotion;
  var reanimateRef = (0, _react.useRef)();
  var animationRef = (0, _react.useRef)();
  var staggeredEntryRef = (0, _react.useRef)();
  (0, _useLayoutEffect.useLayoutEffect)(function () {
    if (motionState === 'exiting') {
      var _onStartMotionRef$cur;
      (_onStartMotionRef$cur = onStartMotionRef.current) === null || _onStartMotionRef$cur === void 0 || _onStartMotionRef$cur.call(onStartMotionRef, 'exiting');
    }
    if (motionState === 'entering') {
      var _onStartMotionRef$cur2;
      (_onStartMotionRef$cur2 = onStartMotionRef.current) === null || _onStartMotionRef$cur2 === void 0 || _onStartMotionRef$cur2.call(onStartMotionRef, 'entering');
    }
  }, [motionState]);

  /**
   * Updates relevant state.
   * Called when the animation is finished, or immediately with reduced motion.
   */
  var onAnimationEnd = (0, _react.useCallback)(function (currentState, cancelled) {
    // We are done animating, so we set the state to visible
    var newState = 'visible';
    if (currentState === 'exiting') {
      if (!reanimateRef.current) {
        // Updates the `ExitingPersistence` to remove this child
        onExitFinished === null || onExitFinished === void 0 || onExitFinished();
      }
      onFinishMotion === null || onFinishMotion === void 0 || onFinishMotion('exiting');
    }
    if (currentState === 'entering') {
      onFinishMotion === null || onFinishMotion === void 0 || onFinishMotion('entering');
    }
    if (reanimateRef.current === _reanimate.Reanimate.exit_then_enter) {
      // We are done exiting, so we set the state to entering
      reanimateRef.current = _reanimate.Reanimate.enter;
      newState = 'entering';
    } else if (reanimateRef.current === _reanimate.Reanimate.enter) {
      // We are done reanimating, so we clear the reanimate state
      reanimateRef.current = undefined;
    } else if (reanimateRef.current === _reanimate.Reanimate.exit) {
      // We are done reanimating, so we clear the reanimate state
      reanimateRef.current = undefined;
      newState = 'hidden';
    }
    if (!cancelled) {
      setState(newState);
    }

    // We ignore this for onFinishMotion as consumers could potentially inline the function
    // which would then trigger this effect every re-render.
    // We want to make it easier for consumers so we go down this path unfortunately.
  },
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [onExitFinished]);

  // Handles staggered entry
  (0, _react.useEffect)(function () {
    if (state !== 'init') {
      return;
    }
    if (reducedMotion) {
      onAnimationEnd('entering', false);
      return;
    }

    // We delay the entry animation by the stagger delay
    staggeredEntryRef.current = setTimeout(function () {
      setState('entering');
    }, staggeredDelay);
    return function () {
      if (staggeredEntryRef.current) {
        clearTimeout(staggeredEntryRef.current);
      }
    };
  }, [onAnimationEnd, state, staggeredIsReady, staggeredDelay, reducedMotion]);
  (0, _react.useEffect)(function () {
    // Tracking this to prevent changing state on an unmounted component
    var isCancelled = false;
    if (!staggeredIsReady) {
      return;
    }
    // On initial mount if elements aren't set to animate on appear, we return early and callback
    // This only occurs on initial mount, as appear will be true once the component is mounted
    if (!appear) {
      onFinishMotion && onFinishMotion('entering');
      return;
    }

    // If the state is visible, hidden or init, we don't need to do anything
    if (motionState === 'visible' || motionState === 'init' || motionState === 'hidden') {
      return;
    }

    // If there is reduced motion or no exit animation, we call the onAnimationEnd function immediately
    if (reducedMotion) {
      onAnimationEnd(motionState, isCancelled);
      return;
    }
    var animationDuration = 0;
    if (motionState === 'entering' || motionState === 'exiting') {
      if (elementRef.current) {
        if (elementRef.current.style.animation) {
          // Motion token
          var animationTimings = (0, _getDurationMs.getDurationMs)((0, _resolveMotionToken.resolveMotionToken)(elementRef.current.style.animation));
          animationDuration = animationTimings.duration;
          animationDuration += animationTimings.delay;
        } else {
          // Custom motion
          var computedStyles = window.getComputedStyle(elementRef.current);
          animationDuration = (0, _getComputedAnimationDurationMs.getComputedAnimationDurationMs)(computedStyles.animationName, computedStyles.animationDuration, computedStyles.animationDelay);
        }
      }
    }

    // Queue `onAnimationEnd` for after the animation has finished
    if (motionState === 'exiting') {
      animationRef.current = setTimeout(function () {
        return onAnimationEnd(motionState, isCancelled);
      }, animationDuration);
    } else if (motionState === 'entering') {
      animationRef.current = setTimeout(function () {
        return onAnimationEnd(motionState, isCancelled);
      }, animationDuration);
    }
    return function () {
      isCancelled = true;
      if (animationRef.current) {
        clearTimeout(animationRef.current);
      }
    };
    // We ignore this for onFinishMotion as consumers could potentially inline the function
    // which would then trigger this effect every re-render.
    // We want to make it easier for consumers so we go down this path unfortunately.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [onAnimationEnd, motionState, appear, staggeredDelay, staggeredIsReady, reducedMotion]);
  var reanimate = (0, _react.useCallback)(function (value) {
    animationRef.current && clearTimeout(animationRef.current);
    reanimateRef.current = value;
    if (value === _reanimate.Reanimate.exit_then_enter) {
      setState('exiting');
    } else if (value === _reanimate.Reanimate.enter) {
      setState('entering');
    } else if (value === _reanimate.Reanimate.exit) {
      setState('exiting');
    }
  }, []);
  var ref = (0, _react.useMemo)(function () {
    return (0, _mergeRefs.default)([staggered.ref, elementRef]);
  }, [staggered.ref]);
  return {
    ref: ref,
    reanimate: reanimate,
    state: motionState
  };
}