@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
35 lines • 1.88 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useCallback, useState } from 'react';
import customCssProps from '../../internal/generated/custom-css-properties';
export default function useBackgroundOverlap({ contentHeader, disableContentHeaderOverlap, layoutElement, }) {
const hasContentHeader = !!contentHeader;
const [hasBackgroundOverlap, setHasBackgroundOverlap] = useState(hasContentHeader);
const updateBackgroundOverlapHeight = useCallback((height) => {
const hasOverlap = hasContentHeader || height > 0;
setHasBackgroundOverlap(hasOverlap);
/**
* React 18 will trigger a paint before the state is correctly updated
* (see https://github.com/facebook/react/issues/24331).
* To work around this, we bypass React state updates and imperatively update the custom property on the DOM.
* An alternative would be to use `queueMicrotask` and `flushSync` in the ResizeObserver callback,
* but that would have some performance impact as it would delay the render.
*/
// Layout component uses RefObject, we don't expect a RefCallback
const element = typeof layoutElement !== 'function' && (layoutElement === null || layoutElement === void 0 ? void 0 : layoutElement.current);
if (!element) {
return;
}
if (disableContentHeaderOverlap || !hasOverlap || height <= 0) {
element.style.removeProperty(customCssProps.overlapHeight);
}
else {
element.style.setProperty(customCssProps.overlapHeight, `${height}px`);
}
}, [hasContentHeader, layoutElement, disableContentHeaderOverlap]);
return {
hasBackgroundOverlap,
updateBackgroundOverlapHeight,
};
}
//# sourceMappingURL=use-background-overlap.js.map