@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
71 lines (70 loc) • 3.2 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
const _excluded = ["open", "animate", "keepInDOM", "showOverflow", "element", "duration", "delay", "className", "innerRef", "children", "compensateForGap", "onInit", "onOpen", "onAnimationStart", "onAnimationEnd"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useRef } from 'react';
import classnames from 'classnames';
import { useHeightAnimation } from './useHeightAnimation';
import Space from '../space/Space';
function HeightAnimation(_ref) {
let {
open = true,
animate = true,
keepInDOM = false,
showOverflow = false,
element,
duration,
delay,
className,
innerRef,
children,
compensateForGap,
onInit = null,
onOpen = null,
onAnimationStart = null,
onAnimationEnd = null
} = _ref,
rest = _objectWithoutProperties(_ref, _excluded);
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: _objectSpread(_objectSpread({}, firstPaintStyle), rest === null || rest === void 0 ? void 0 : 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