@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
62 lines • 3.12 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { getIsRtl, getLogicalBoundingClientRect, getScrollInlineStart, Portal, } from '@awsui/component-toolkit/internal';
import styles from './styles.css.js';
export default function PortalOverlay({ track, isDisabled, children, }) {
const ref = useRef(null);
const [container, setContainer] = useState(null);
useLayoutEffect(() => {
if (track.current) {
const newContainer = track.current.ownerDocument.createElement('div');
track.current.ownerDocument.body.appendChild(newContainer);
setContainer(newContainer);
return () => newContainer.remove();
}
}, [track]);
useEffect(() => {
if (track.current === null || isDisabled) {
return;
}
let cleanedUp = false;
let lastX;
let lastY;
let lastInlineSize;
let lastBlockSize;
const updateElement = () => {
// It could be that the portal hasn't been attached to the DOM yet - ensure the ref exists and is attached DOM tree.
if (track.current && ref.current && document.body.contains(ref.current)) {
const isRtl = getIsRtl(ref.current);
const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track.current);
// For simplicity, we just make all our calculations independent of
// the browser's scrolling edge. When it comes to applying the changes,
// translate is independent of writing direction, so we need to invert
// the X coordinate ourselves just before applying the values.
const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);
const newY = insetBlockStart + document.documentElement.scrollTop;
if (lastX !== newX || lastY !== newY) {
ref.current.style.translate = `${newX}px ${newY}px`;
lastX = newX;
lastY = newY;
}
if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {
ref.current.style.width = `${inlineSize}px`;
ref.current.style.height = `${blockSize}px`;
lastInlineSize = inlineSize;
lastBlockSize = blockSize;
}
}
if (!cleanedUp) {
requestAnimationFrame(updateElement);
}
};
updateElement();
return () => {
cleanedUp = true;
};
}, [isDisabled, track]);
return (React.createElement(Portal, { container: container },
React.createElement("span", { ref: ref, className: styles['portal-overlay'] },
React.createElement("span", { className: styles['portal-overlay-contents'] }, children))));
}
//# sourceMappingURL=portal-overlay.js.map