@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
53 lines • 2.15 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useLayoutEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { warnOnce } from '@awsui/component-toolkit/internal';
import { isDevelopment } from '../../is-development';
function manageDefaultContainer(setState) {
const newContainer = document.createElement('div');
document.body.appendChild(newContainer);
setState(newContainer);
return () => {
document.body.removeChild(newContainer);
};
}
function manageAsyncContainer(getContainer, removeContainer, setState) {
let newContainer;
getContainer().then(container => {
newContainer = container;
setState(container);
}, error => {
console.warn('[AwsUi] [portal]: failed to load portal root', error);
});
return () => {
removeContainer(newContainer);
};
}
/**
* A safe react portal component that renders to a provided node.
* If a node isn't provided, it creates one under document.body.
*/
export default function Portal({ container, getContainer, removeContainer, children }) {
const [activeContainer, setActiveContainer] = useState(container !== null && container !== void 0 ? container : null);
useLayoutEffect(() => {
if (container) {
setActiveContainer(container);
return;
}
if (isDevelopment) {
if (getContainer && !removeContainer) {
warnOnce('portal', '`removeContainer` is required when `getContainer` is provided');
}
if (!getContainer && removeContainer) {
warnOnce('portal', '`getContainer` is required when `removeContainer` is provided');
}
}
if (getContainer && removeContainer) {
return manageAsyncContainer(getContainer, removeContainer, setActiveContainer);
}
return manageDefaultContainer(setActiveContainer);
}, [container, getContainer, removeContainer]);
return activeContainer && createPortal(children, activeContainer);
}
//# sourceMappingURL=index.js.map