@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
41 lines • 1.76 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
/* istanbul ignore file - Tested with integration tests */
import { useEffect } from 'react';
import { useStableCallback } from '@awsui/component-toolkit/internal';
export default function usePositionObserver(getTrack, trackKey, callback) {
const stableCallback = useStableCallback(callback);
useEffect(() => {
const track = getTrack();
if (!track) {
return;
}
let lastTrackKey = trackKey;
let lastPosition = {
x: track.getBoundingClientRect().x,
y: track.getBoundingClientRect().y,
};
const observer = new MutationObserver(() => {
const track = getTrack();
if (!track) {
return;
}
const { x, y } = track.getBoundingClientRect();
// Only trigger the callback when the position changes or the track key changes
if (x !== lastPosition.x || y !== lastPosition.y || trackKey !== lastTrackKey) {
lastTrackKey = trackKey;
lastPosition = { x, y };
stableCallback();
}
});
// Observe the entire ownerDocument for DOM changes
observer.observe(track.ownerDocument, {
attributes: true,
subtree: true,
childList: true,
});
return () => observer.disconnect();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [getTrack, stableCallback]); // trackKey excluded to avoid the observer being recreated everytime the value changes, causing rendering issues for Tooltip
}
//# sourceMappingURL=use-position-observer.js.map