@primer/react/lib/internal/components/ValidationAnimationContainer.js

An implementation of GitHub's Primer Design System using React

'use strict';

var reactCompilerRuntime = require('react-compiler-runtime');
var React = require('react');
var styled = require('styled-components');
var jsxRuntime = require('react/jsx-runtime');
var Box = require('../../Box/Box.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var styled__default = /*#__PURE__*/_interopDefault(styled);

const fadeIn = styled.keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]);
// using easeOutQuint easing fn https://easings.net/#easeOutQuint
const AnimatedElement = styled__default.default.div.withConfig({
  displayName: "ValidationAnimationContainer__AnimatedElement",
  componentId: "sc-8z5a3g-0"
})(["animation:", ";@media (prefers-reduced-motion){animation:none;}"], props => props.show && styled.css(["170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], fadeIn));
const ValidationAnimationContainer = t0 => {
  const $ = reactCompilerRuntime.c(10);
  const {
    show,
    children
  } = t0;
  const [shouldRender, setRender] = React.useState(show);
  let t1;
  let t2;
  if ($[0] !== show) {
    t1 = () => {
      if (show) {
        setRender(true);
      }
    };
    t2 = [show];
    $[0] = show;
    $[1] = t1;
    $[2] = t2;
  } else {
    t1 = $[1];
    t2 = $[2];
  }
  React.useEffect(t1, t2);
  let t3;
  if ($[3] !== show) {
    t3 = () => {
      if (!show) {
        setRender(false);
      }
    };
    $[3] = show;
    $[4] = t3;
  } else {
    t3 = $[4];
  }
  const onAnimationEnd = t3;
  let t4;
  if ($[5] !== children || $[6] !== onAnimationEnd || $[7] !== shouldRender || $[8] !== show) {
    t4 = shouldRender ? /*#__PURE__*/jsxRuntime.jsx(Box, {
      height: show ? "auto" : 0,
      overflow: "hidden",
      children: /*#__PURE__*/jsxRuntime.jsx(AnimatedElement, {
        show: show,
        onAnimationEnd: onAnimationEnd,
        children: children
      })
    }) : null;
    $[5] = children;
    $[6] = onAnimationEnd;
    $[7] = shouldRender;
    $[8] = show;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  return t4;
};

module.exports = ValidationAnimationContainer;