@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
68 lines (67 loc) • 1.95 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef } from 'react';
import classnames from 'classnames';
import { useHeightAnimation } from "./useHeightAnimation.js";
import Space from "../space/Space.js";
function HeightAnimation({
open = true,
animate = true,
keepInDOM = false,
showOverflow = false,
element,
duration,
delay,
className,
innerRef,
children,
compensateForGap,
onInit = null,
onOpen = null,
onAnimationStart = null,
onAnimationEnd = null,
...rest
}) {
const elementRef = useRef();
const targetRef = innerRef || elementRef;
const {
isInDOM,
isVisible,
isVisibleParallax,
isAnimating,
firstPaintStyle
} = useHeightAnimation(targetRef, {
open,
animate,
children,
compensateForGap,
onInit,
onOpen,
onAnimationStart,
onAnimationEnd
});
if (!keepInDOM && !isInDOM && !isAnimating) {
return null;
}
if (duration) {
firstPaintStyle['--duration'] = `${duration}ms`;
}
if (delay) {
firstPaintStyle['--delay'] = `${delay}ms`;
}
return React.createElement(Space, _extends({
innerRef: targetRef,
element: element || 'div',
className: classnames('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), compensateForGap ? React.createElement("div", {
className: "compensateForGap"
}, children) : children);
}
HeightAnimation._supportsSpacingProps = 'children';
export default HeightAnimation;
//# sourceMappingURL=HeightAnimation.js.map