@primer/react/dist/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 classes from './ValidationAnimationContainer.module.css.js';
import { jsx } from 'react/jsx-runtime';

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("div", {
      style: {
        height: show ? "auto" : 0,
        overflow: "hidden"
      },
      children: /*#__PURE__*/jsx("div", {
        "data-show": show ? "" : undefined,
        onAnimationEnd: onAnimationEnd,
        className: classes.Animation,
        children: children
      })
    }) : null;
    $[5] = children;
    $[6] = onAnimationEnd;
    $[7] = shouldRender;
    $[8] = show;
    $[9] = t4;
  } else {
    t4 = $[9];
  }
  return t4;
};

export { ValidationAnimationContainer as default };