@progress/kendo-react-animation/AnimationChild.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 a from "react";
import t from "prop-types";
import { classNames as l, uAnimation as m, noop as c } from "@progress/kendo-react-common";
import { CSSTransition as J } from "react-transition-group";
const R = a.forwardRef(
  (E, O) => {
    const e = a.useRef(null), {
      mountOnEnter: N = n.mountOnEnter,
      unmountOnExit: h = n.unmountOnExit,
      onEnter: s = n.onEnter,
      onEntering: d = n.onEntering,
      onEntered: x = n.onEntered,
      onExit: g = n.onExit,
      onExiting: f = n.onExiting,
      onExited: y = n.onExited,
      onAfterExited: p = n.onAfterExited,
      animationEnteringStyle: D = n.animationEnteringStyle,
      animationEnteredStyle: C = n.animationEnteredStyle,
      animationExitingStyle: T = n.animationExitingStyle,
      animationExitedStyle: j = n.animationExitedStyle,
      children: q,
      style: P,
      appear: H,
      enter: I,
      exit: $,
      transitionName: u,
      transitionEnterDuration: S,
      transitionExitDuration: v,
      className: w,
      unstyled: A,
      ...K
    } = E, k = {
      transitionDelay: "0ms",
      ...P
    }, o = A && A.uAnimation, z = l(w, m.childContainer({ c: o })), r = a.useRef({
      element: e.current,
      props: E
    }), i = a.useRef(null);
    a.useImperativeHandle(i, () => ({
      element: e.current,
      props: E
    })), a.useImperativeHandle(
      O,
      () => i.current,
      []
    );
    const B = {
      entering: { transitionDuration: `${S}ms`, ...D },
      entered: { ...C },
      exiting: { transitionDuration: `${v}ms`, ...T },
      exited: { ...j }
    }, F = {
      in: E.in,
      appear: H,
      enter: I,
      exit: $,
      mountOnEnter: N,
      unmountOnExit: h,
      timeout: {
        enter: S,
        exit: v
      },
      onEnter: () => {
        s && s.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      onEntering: () => {
        d && d.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      onEntered: () => {
        x && x.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      onExit: () => {
        g && g.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      onExiting: () => {
        f && f.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      onExited: () => {
        p && p.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        }), y && y.call(void 0, {
          animatedElement: e.current,
          target: i.current || r.current
        });
      },
      classNames: {
        appear: l(m.appear({ c: o, transitionName: u })),
        appearActive: l(m.appearActive({ c: o, transitionName: u })),
        enter: l(m.enter({ c: o, transitionName: u })),
        enterActive: l(m.enterActive({ c: o, transitionName: u })),
        exit: l(m.exit({ c: o, transitionName: u })),
        exitActive: l(m.exitActive({ c: o, transitionName: u }))
      }
    };
    return /* @__PURE__ */ a.createElement(J, { ...F, ...K, nodeRef: e }, (G) => /* @__PURE__ */ a.createElement(
      "div",
      {
        style: {
          ...k,
          ...B[G]
        },
        className: z,
        ref: (b) => {
          e.current = b, r.current.element = b;
        }
      },
      q
    ));
  }
), n = {
  mountOnEnter: !0,
  unmountOnExit: !1,
  onEnter: c,
  onEntering: c,
  onEntered: c,
  onExit: c,
  onExiting: c,
  onExited: c,
  onAfterExited: c,
  animationEnteringStyle: {},
  animationEnteredStyle: {},
  animationExitingStyle: {},
  animationExitedStyle: {}
};
R.displayName = "KendoReactAnimationChild";
R.propTypes = {
  in: t.bool,
  children: t.oneOfType([t.arrayOf(t.node), t.node]),
  transitionName: t.string.isRequired,
  className: t.string,
  appear: t.bool,
  enter: t.bool,
  exit: t.bool,
  transitionEnterDuration: t.number.isRequired,
  transitionExitDuration: t.number.isRequired,
  mountOnEnter: t.bool,
  unmountOnExit: t.bool,
  animationEnteringStyle: t.object,
  animationEnteredStyle: t.object,
  animationExitingStyle: t.object,
  animationExitedStyle: t.object
};
export {
  R as AnimationChild
};