@ozen-ui/kit
Version:
React component library
20 lines (19 loc) • 1.64 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Backdrop.css';
import React, { useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useMultiRef } from '../../hooks/useMultiRef';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
import { BACKDROP_DEFAULT_TAG } from './constants';
export var cnBackdrop = cn('Backdrop');
export var Backdrop = polymorphicComponentWithRef(function (inProps, ref) {
var props = useThemeProps({ props: inProps, name: 'Backdrop' });
var _a = props.as, Tag = _a === void 0 ? BACKDROP_DEFAULT_TAG : _a, open = props.open, onClose = props.onClose, isInvisible = props.isInvisible, className = props.className, children = props.children, zIndex = props.zIndex, transitionProps = props.transitionProps, styleProp = props.style, other = __rest(props, ["as", "open", "onClose", "isInvisible", "className", "children", "zIndex", "transitionProps", "style"]);
var rootRef = useRef(null);
var style = __assign({ '--backdrop-z-index': zIndex }, styleProp);
return (React.createElement(CSSTransition, __assign({ nodeRef: rootRef, classNames: cnBackdrop({ animation: true }), timeout: 300 }, transitionProps, { in: open, unmountOnExit: true, appear: true }),
React.createElement(Tag, __assign({ "aria-hidden": true, className: cnBackdrop({ isInvisible: isInvisible }, [className]), onClick: onClose, style: style }, other, { ref: useMultiRef([ref, rootRef]) }), children)));
});
Backdrop.displayName = 'Backdrop';