koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
43 lines (42 loc) • 1.48 kB
JavaScript
"use client";
import { useState as x, useMemo as v } from "react";
import { useEventListener as D } from "../hooks/useEventListener.js";
import { useIsFirstRender as E } from "../hooks/useIsFirstRender.js";
import { useSafeLayoutEffect as u } from "../hooks/useSafeLayoutEffect.js";
const I = ({
show: r = !1,
children: l,
exitClassName: i = "transition-exit",
exitDoneClassName: n = "transition-exit-done",
enterClassName: c = "transition-enter",
enterDoneClassName: a = "transition-enter-done",
nodeRef: t,
unmountNode: m,
onExit: L = () => {
},
onEnter: d = () => {
}
}) => {
const p = E(), [s, o] = x(r);
u(() => {
r && o(r);
}, [r]);
const e = v(
() => ({
enter: c.split(" "),
exit: i.split(" "),
exitDone: n.split(" "),
enterDone: a.split(" ")
}),
[c, a, i, n]
);
return u(() => {
r ? (t.current?.classList.add(...e.enter), t.current?.classList.remove(...e.exit), t.current?.classList.remove(...e.exitDone)) : (t.current?.classList.add(...e.exit), t.current?.classList.remove(...e.enter), t.current?.classList.remove(...e.enterDone));
}, [e, t, r, s, p]), D("animationend", () => {
r && s ? (d(), t.current?.classList.remove(...e.enter), t.current?.classList.add(...e.enterDone)) : s && (L(), t.current?.classList.remove(...e.exit), t.current?.classList.add(...e.exitDone), o(!1));
}, t.current), (s || !m) && l;
};
export {
I as Transition
};
//# sourceMappingURL=Transition.js.map