12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- 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
|