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

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 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 P } from "./Animation.mjs";
import E from "./util.mjs";
const R = (a) => {
  const [c, f] = o.useState(), [m, u] = o.useState(), [s, g] = o.useState({}), {
    appear: y = r.appear,
    enter: W = r.enter,
    exit: H = r.exit,
    transitionEnterDuration: v = r.transitionEnterDuration,
    transitionExitDuration: D = r.transitionExitDuration,
    direction: x = r.direction,
    children: T,
    childFactory: h,
    ...O
  } = a;
  let i;
  x === "vertical" ? i = { maxHeight: c ? `${c}px` : "" } : i = { maxWidth: m ? `${m}px` : "" };
  const S = {
    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 F = (t) => {
    const { onBeforeEnter: e } = a;
    e && e.call(void 0, t), l(t, "onEnter");
  }, M = (t) => {
    l(t, "onEntering");
  }, $ = (t) => {
    l(t, "onExit");
  }, l = (t, e) => {
    var p;
    const d = (p = t.animatedElement) == null ? void 0 : p.firstChild;
    if (d) {
      const C = E.outerHeight(d), N = E.outerWidth(d);
      f(C), u(N), g({
        name: e,
        event: t
      });
    }
  }, w = (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(
    P,
    {
      ...O,
      appear: y,
      enter: W,
      exit: H,
      transitionEnterDuration: v,
      transitionExitDuration: D,
      childFactory: w,
      onEnter: F,
      onEntering: M,
      onExit: $,
      animationEnteringStyle: S,
      transitionName: `reveal-${x}`
    },
    T
  );
}, r = {
  appear: !1,
  enter: !0,
  exit: !0,
  transitionEnterDuration: 300,
  transitionExitDuration: 300,
  direction: "vertical"
};
R.propTypes = {
  children: n.oneOfType([n.arrayOf(n.node), n.node]),
  childFactory: n.any,
  className: n.string,
  direction: n.oneOf(["horizontal", "vertical"]),
  component: n.node,
  id: n.string,
  style: n.any
};
export {
  R as Reveal
};