@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
27 lines • 1.71 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
// Applies its position to the dropdown element when expandToViewport is set to true.
export function applyDropdownPositionRelativeToViewport({ position, dropdownElement, triggerRect, isMobile, }) {
// Fixed positions are not respected in iOS when the virtual keyboard is being displayed.
// For this reason we use absolute positioning in mobile.
const useAbsolutePositioning = isMobile;
// Since when using expandToViewport=true the dropdown is attached to the root of the body,
// the same coordinates can be used for fixed or absolute position,
// except when using absolute position we need to take into account the scroll position of the body itself.
const verticalScrollOffset = useAbsolutePositioning ? document.documentElement.scrollTop : 0;
const horizontalScrollOffset = useAbsolutePositioning ? document.documentElement.scrollLeft : 0;
dropdownElement.style.position = useAbsolutePositioning ? 'absolute' : 'fixed';
if (position.dropBlockStart) {
dropdownElement.style.insetBlockEnd = `calc(100% - ${verticalScrollOffset + triggerRect.insetBlockStart}px)`;
}
else {
dropdownElement.style.insetBlockStart = `${verticalScrollOffset + triggerRect.insetBlockEnd}px`;
}
if (position.dropInlineStart) {
dropdownElement.style.insetInlineStart = `calc(${horizontalScrollOffset + triggerRect.insetInlineEnd}px - ${position.inlineSize})`;
}
else {
dropdownElement.style.insetInlineStart = `${horizontalScrollOffset + triggerRect.insetInlineStart}px`;
}
}
//# sourceMappingURL=dropdown-position.js.map