62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
var $ksDzM$react = require("react");
|
|
var $ksDzM$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
|
|
|
|
function $parcel$export(e, n, v, s) {
|
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
}
|
|
|
|
$parcel$export(module.exports, "useSize", () => $d2c1d285af17635b$export$1ab7ae714698c4b8);
|
|
|
|
|
|
function $d2c1d285af17635b$export$1ab7ae714698c4b8(element) {
|
|
const [size, setSize] = $ksDzM$react.useState(undefined);
|
|
$ksDzM$radixuireactuselayouteffect.useLayoutEffect(()=>{
|
|
if (element) {
|
|
// provide size as early as possible
|
|
setSize({
|
|
width: element.offsetWidth,
|
|
height: element.offsetHeight
|
|
});
|
|
const resizeObserver = new ResizeObserver((entries)=>{
|
|
if (!Array.isArray(entries)) return;
|
|
// Since we only observe the one element, we don't need to loop over the
|
|
// array
|
|
if (!entries.length) return;
|
|
const entry = entries[0];
|
|
let width;
|
|
let height;
|
|
if ('borderBoxSize' in entry) {
|
|
const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers
|
|
const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
|
|
width = borderSize['inlineSize'];
|
|
height = borderSize['blockSize'];
|
|
} else {
|
|
// for browsers that don't support `borderBoxSize`
|
|
// we calculate it ourselves to get the correct border box.
|
|
width = element.offsetWidth;
|
|
height = element.offsetHeight;
|
|
}
|
|
setSize({
|
|
width: width,
|
|
height: height
|
|
});
|
|
});
|
|
resizeObserver.observe(element, {
|
|
box: 'border-box'
|
|
});
|
|
return ()=>resizeObserver.unobserve(element)
|
|
;
|
|
} else // We only want to reset to `undefined` when the element becomes `null`,
|
|
// not if it changes to another element.
|
|
setSize(undefined);
|
|
}, [
|
|
element
|
|
]);
|
|
return size;
|
|
}
|
|
|
|
|
|
|
|
|
|
//# sourceMappingURL=index.js.map
|