@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
84 lines (83 loc) • 2.32 kB
JavaScript
"use client";
import withComponentMarkers from "../../shared/helpers/withComponentMarkers.js";
import { useEffect, useRef } from 'react';
import clsx from 'clsx';
import { useHeightAnimation } from "./useHeightAnimation.js";
import Space from "../space/Space.js";
import { jsx as _jsx } from "react/jsx-runtime";
function HeightAnimation({
open = true,
animate = true,
keepInDOM = false,
showOverflow = false,
element,
duration,
delay,
className,
ref,
children,
compensateForGap,
onInit = null,
onOpen = null,
onAnimationStart = null,
onAnimationEnd = null,
...rest
}) {
const elementRef = useRef(undefined);
const targetRef = ref || elementRef;
const {
isInDOM,
isVisible,
isVisibleParallax,
isAnimating,
firstPaintStyle
} = useHeightAnimation(targetRef, {
open,
animate,
children,
compensateForGap,
onInit,
onOpen,
onAnimationStart,
onAnimationEnd
});
useEffect(() => {
const el = targetRef.current;
if (!el) {
return;
}
if (duration) {
el.style.setProperty('--duration', `${duration}ms`);
} else {
el.style.removeProperty('--duration');
}
if (delay) {
el.style.setProperty('--delay', `${delay}ms`);
} else {
el.style.removeProperty('--delay');
}
}, [duration, delay, targetRef, isInDOM]);
if (!keepInDOM && !isInDOM && !isAnimating) {
return null;
}
return _jsx(Space, {
ref: targetRef,
element: element || 'div',
className: clsx('dnb-height-animation', className, isVisible ? 'dnb-height-animation--is-visible' : !isAnimating && !open && 'dnb-height-animation--hidden', isInDOM && 'dnb-height-animation--is-in-dom', animate && isVisibleParallax && 'dnb-height-animation--parallax', isAnimating && 'dnb-height-animation--animating', showOverflow && 'dnb-height-animation--show-overflow'),
style: {
...firstPaintStyle,
...rest?.style
},
"aria-hidden": keepInDOM ? !open : undefined,
...rest,
children: compensateForGap ? _jsx("div", {
className: "dnb-height-animation__compensate-for-gap",
children: children
}) : children
});
}
withComponentMarkers(HeightAnimation, {
_supportsSpacingProps: 'children'
});
export default HeightAnimation;
//# sourceMappingURL=HeightAnimation.js.map