@ozen-ui/kit
Version:
React component library
23 lines (22 loc) • 2 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Backdrop = exports.cnBackdrop = void 0;
var tslib_1 = require("tslib");
require("./Backdrop.css");
var react_1 = tslib_1.__importStar(require("react"));
var react_transition_group_1 = require("react-transition-group");
var useMultiRef_1 = require("../../hooks/useMultiRef");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
var constants_1 = require("./constants");
exports.cnBackdrop = (0, classname_1.cn)('Backdrop');
exports.Backdrop = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Backdrop' });
var _a = props.as, Tag = _a === void 0 ? constants_1.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 = tslib_1.__rest(props, ["as", "open", "onClose", "isInvisible", "className", "children", "zIndex", "transitionProps", "style"]);
var rootRef = (0, react_1.useRef)(null);
var style = tslib_1.__assign({ '--backdrop-z-index': zIndex }, styleProp);
return (react_1.default.createElement(react_transition_group_1.CSSTransition, tslib_1.__assign({ nodeRef: rootRef, classNames: (0, exports.cnBackdrop)({ animation: true }), timeout: 300 }, transitionProps, { in: open, unmountOnExit: true, appear: true }),
react_1.default.createElement(Tag, tslib_1.__assign({ "aria-hidden": true, className: (0, exports.cnBackdrop)({ isInvisible: isInvisible }, [className]), onClick: onClose, style: style }, other, { ref: (0, useMultiRef_1.useMultiRef)([ref, rootRef]) }), children)));
});
exports.Backdrop.displayName = 'Backdrop';