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

An implementation of GitHub's Primer Design System using React

import { c } from 'react-compiler-runtime';
import { useState, useEffect } from 'react';
import styled, { keyframes, css } from 'styled-components';
import { jsx } from 'react/jsx-runtime';
import Box from '../../Box/Box.js';

const fadeIn = keyframes(["0%{opacity:0;transform:translateY(-100%);}100%{opacity:1;transform:translateY(0);}"]);
// using easeOutQuint easing fn https://easings.net/#easeOutQuint
const AnimatedElement = styled.div.withConfig({
  displayName: "ValidationAnimationContainer__AnimatedElement",
  componentId: "sc-8z5a3g-0"
})(["animation:", ";@media (prefers-reduced-motion){animation:none;}"], props => props.show && css(["170ms ", " cubic-bezier(0.44,0.74,0.36,1);"], fadeIn));
const ValidationAnimationContainer = t0 => {
  const $ = c(10);
  const {
    show,
    children
  } = t0;
  const [shouldRender, setRender] = 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];
  }
  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__*/jsx(Box, {
      height: show ? "auto" : 0,
      overflow: "hidden",
      children: /*#__PURE__*/jsx(AnimatedElement, {
        show: show,
        onAnimationEnd: onAnimationEnd,
        children: children
      })
    }) : null;
    $[5] = children;
    $[6] = onAnimationEnd;
    $[7] = shouldRender;
    $[8] = show;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  return t4;
};

export { ValidationAnimationContainer as default };