@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.6 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import { useContext, useLayoutEffect } from 'react';
import { useCallback, useRef } from 'react';
import { useResizeObserver } from '@awsui/component-toolkit/internal';
import { DynamicOverlapContext } from '../../context/dynamic-overlap-context';
/**
* Observes the height of an element referenced by the returning ref and sets the value as overlapping
* height for the surrounding AppLayout component.
* @param props.disabled disables hook if not applicable
* @returns ref to be measured as overlapping height
*/
export function useDynamicOverlap(props) {
var _a;
const disabled = (_a = props === null || props === void 0 ? void 0 : props.disabled) !== null && _a !== void 0 ? _a : false;
const setDynamicOverlapHeight = useContext(DynamicOverlapContext);
const overlapElementRef = useRef(null);
const getElement = useCallback(() => overlapElementRef.current, [overlapElementRef]);
const updateState = useCallback((entry) => {
if (!disabled) {
setDynamicOverlapHeight(entry.contentBoxHeight);
}
}, [disabled, setDynamicOverlapHeight]);
useResizeObserver(getElement, updateState);
useLayoutEffect(function handleDynamicOverlapHeight() {
// Set overlap height back to 0 when unmounting
return () => {
if (!disabled) {
setDynamicOverlapHeight(0);
}
};
}, [disabled, setDynamicOverlapHeight]);
return overlapElementRef;
}
//# sourceMappingURL=index.js.map