@progress/kendo-react-animation/Reveal.mjs

React Animation component assists with animating HTML elements. KendoReact Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import * as o from "react";
import n from "prop-types";
import { Animation as N } from "./Animation.mjs";
import p from "./util.mjs";
const P = (a) => {
  const [c, E] = o.useState(), [m, f] = o.useState(), [s, g] = o.useState({}), {
    appear: u = r.appear,
    enter: y = r.enter,
    exit: W = r.exit,
    transitionEnterDuration: H = r.transitionEnterDuration,
    transitionExitDuration: v = r.transitionExitDuration,
    direction: d = r.direction,
    children: D,
    childFactory: h,
    ...T
  } = a;
  let i;
  d === "vertical" ? i = { maxHeight: c ? `${c}px` : "" } : i = { maxWidth: m ? `${m}px` : "" };
  const O = {
    maxHeight: i.maxHeight,
    maxWidth: i.maxWidth
  };
  o.useEffect(() => {
    a && s.name && a[s.name] && a[s.name].call(void 0, s.event);
  }, [c, m, s]);
  const S = (t) => {
    const { onBeforeEnter: e } = a;
    e && e.call(void 0, t), l(t, "onEnter");
  }, F = (t) => {
    l(t, "onEntering");
  }, M = (t) => {
    l(t, "onExit");
  }, l = (t, e) => {
    const x = t.animatedElement.firstChild;
    if (x) {
      const w = p.outerHeight(x), C = p.outerWidth(x);
      E(w), f(C), g({
        name: e,
        event: t
      });
    }
  }, $ = (t) => {
    const e = h ? h(t) : t;
    return e.props.in ? e : o.cloneElement(e, {
      ...e.props,
      style: {
        ...e.props.style,
        maxHeight: i.maxHeight,
        maxWidth: i.maxWidth
      }
    });
  };
  return /* @__PURE__ */ o.createElement(
    N,
    {
      ...T,
      appear: u,
      enter: y,
      exit: W,
      transitionEnterDuration: H,
      transitionExitDuration: v,
      childFactory: $,
      onEnter: S,
      onEntering: F,
      onExit: M,
      animationEnteringStyle: O,
      transitionName: `reveal-${d}`
    },
    D
  );
}, r = {
  appear: !1,
  enter: !0,
  exit: !0,
  transitionEnterDuration: 300,
  transitionExitDuration: 300,
  direction: "vertical"
};
P.propTypes = {
  children: n.oneOfType([n.arrayOf(n.node), n.node]),
  childFactory: n.any,
  className: n.string,
  direction: n.oneOf(["horizontal", "vertical"]),
  component: n.string,
  id: n.string,
  style: n.any
};
export {
  P as Reveal
};