@atlaskit/motion/dist/cjs/entering/shrink-out.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.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _durations = require("../utils/durations");
var _isReducedMotion = require("../utils/is-reduced-motion");
var _useElementRef3 = require("../utils/use-element-ref");
var _useLayoutEffect = require("../utils/use-layout-effect");
var _useRequestAnimationFrame = require("../utils/use-request-animation-frame");
var _useSetTimeout = require("../utils/use-set-timeout");
var _exitingPersistence = require("./exiting-persistence");
/**
 * __ShrinkOut__
 *
 * Will shrink an element down to nothing when exiting.
 * Works best with flex children as collapsing margins can come with undesired behaviour.
 *
 * - [Examples](https://atlaskit.atlassian.com/packages/design-system/motion/docs/entering-motion)
 */
var ShrinkOut = function ShrinkOut(_ref) {
  var children = _ref.children,
    _ref$duration = _ref.duration,
    duration = _ref$duration === void 0 ? 'small' : _ref$duration,
    onFinish = _ref.onFinish;
  var _useElementRef = (0, _useElementRef3.useElementRef)(),
    _useElementRef2 = (0, _slicedToArray2.default)(_useElementRef, 2),
    element = _useElementRef2[0],
    setElementRef = _useElementRef2[1];
  var exiting = (0, _exitingPersistence.useExitingPersistence)();
  var requestAnimationFrame = (0, _useRequestAnimationFrame.useRequestAnimationFrame)();
  var setTimeout = (0, _useSetTimeout.useSetTimeout)();
  var direction = exiting.isExiting ? 'exiting' : 'entering';
  (0, _useLayoutEffect.useLayoutEffect)(function () {
    if (exiting.isExiting && element) {
      if ((0, _isReducedMotion.isReducedMotion)()) {
        exiting.onFinish && exiting.onFinish();
        onFinish && onFinish('exiting');
        return;
      }
      var newStyles = {
        // We fix both width and height because when changing box sizing to border-box.
        width: "".concat(element.offsetWidth, "px"),
        height: "".concat(element.offsetHeight, "px"),
        boxSizing: 'border-box',
        willChange: 'width,margin'
      };
      Object.assign(element.style, newStyles);
      requestAnimationFrame(function () {
        requestAnimationFrame(function () {
          var newStyles = {
            width: '0px',
            margin: '0px',
            // We animate margin down to zero so it doesn't take any space.
            transitionTimingFunction: 'cubic-bezier(0.8,0,0,0.8)',
            transitionDuration: _durations.durations[duration] + 'ms',
            transitionProperty: 'width,margin'
          };
          Object.assign(element.style, newStyles);
          setTimeout(function () {
            exiting.onFinish && exiting.onFinish();
            onFinish && onFinish('exiting');
          }, _durations.durations[duration]);
        });
      });
    }
  });
  return children({
    ref: setElementRef
  }, direction);
};
var _default = exports.default = ShrinkOut;