@helpscout/hsds-react/hooks/useAnimatedRender.js

React component library for Help Scout's Design System

"use strict";

exports.__esModule = true;
exports.default = useAnimatedRender;
exports.defaultAnimation = void 0;

var _react = require("react");

var _focus = require("../utilities/focus");

/**
 *
 * @param {boolean} show Whether the target component should be shown or not
 * @param {Object} toAnimateRef The ref to the node to animate out
 * @param {Object} toFocusRef If provided, the ref to the node to focus
 *
 * @returns {Array} whether to render and onAnimationEnd callback
 */
function useAnimatedRender(show, toAnimateRef, toFocusRef) {
  var _useState = (0, _react.useState)(show),
      shouldRender = _useState[0],
      setRender = _useState[1];

  (0, _react.useEffect)(function () {
    if (show) {
      setRender(true);
    }
  }, [show]);

  function onAnimationEnd(e) {
    if (e.target === toAnimateRef.current) {
      if (!show) {
        setRender(false);
        var focusableParent = (0, _focus.getClosestFocusableParent)(toAnimateRef.current);
        focusableParent.focus();
      } else {
        toFocusRef.current && toFocusRef.current.focus();
      }
    }
  }

  return [shouldRender, onAnimationEnd];
}

var defaultAnimation = "\nanimation: fadeOut 0.3s;\n\n&.element-in {\n  animation: fadeIn 0.3s;\n}\n\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n";
exports.defaultAnimation = defaultAnimation;