@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
90 lines (89 loc) • 2.77 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _withComponentMarkers = _interopRequireDefault(require("../../shared/helpers/withComponentMarkers.js"));
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _useHeightAnimation = require("./useHeightAnimation.js");
var _Space = _interopRequireDefault(require("../space/Space.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 = (0, _react.useRef)(undefined);
const targetRef = ref || elementRef;
const {
isInDOM,
isVisible,
isVisibleParallax,
isAnimating,
firstPaintStyle
} = (0, _useHeightAnimation.useHeightAnimation)(targetRef, {
open,
animate,
children,
compensateForGap,
onInit,
onOpen,
onAnimationStart,
onAnimationEnd
});
(0, _react.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 (0, _jsxRuntime.jsx)(_Space.default, {
ref: targetRef,
element: element || 'div',
className: (0, _clsx.default)('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 === null || rest === void 0 ? void 0 : rest.style)
},
"aria-hidden": keepInDOM ? !open : undefined,
...rest,
children: compensateForGap ? (0, _jsxRuntime.jsx)("div", {
className: "dnb-height-animation__compensate-for-gap",
children: children
}) : children
});
}
(0, _withComponentMarkers.default)(HeightAnimation, {
_supportsSpacingProps: 'children'
});
var _default = exports.default = HeightAnimation;
//# sourceMappingURL=HeightAnimation.js.map