@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
34 lines (33 loc) • 2.08 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { AnimatePresence, domMax, LazyMotion, m, } from 'framer-motion';
import { useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useUIDSeed } from 'react-uid';
import { OverlayProvider } from '../..';
import { isBrowser } from '../../utils/browser';
import * as styles from './overlay-container.module.css';
export const OverlayContainer = ({ children, root, overlayColor = 'dark', index = 4, obfuscate = true, onClose, }) => {
const seedID = useUIDSeed();
useEffect(() => {
if (root?.closest('[data-overlay-container]')) {
throw new Error('An OverlayContainer must not be inside another container. Please change the root prop.');
}
}, [root]);
const content = (_jsx(OverlayProvider, { onClose: onClose, children: _jsx(AnimatePresence, { exitBeforeEnter: true, children: children && (_jsx("div", { "data-overlay-container": true, "data-overlay-container-obfuscate": obfuscate, className: styles.OverlayContainer, style: { zIndex: index }, children: _jsxs(LazyMotion, { features: domMax, children: [obfuscate && (_jsx(m.span, { className: styles.Backdrop, "data-overlay-color": overlayColor, initial: { opacity: 0 }, animate: { opacity: 0.95 }, transition: { duration: 0.2 }, exit: { opacity: 0 } }, seedID('modal-backdrop'))), children] }) })) }) }));
return isBrowser() ? createPortal(content, root ?? document.body) : null;
};