@elastic/eui
Version:
Elastic UI Component Library
49 lines (47 loc) • 1.78 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/
import { useEffect, useRef } from 'react';
import { hasResizeObserver } from '../observer/resize_observer/resize_observer';
var SUPER_NARROW_WIDTH = 400;
var WIDE_BREAKPOINTS = {
s: 800,
m: 1000
};
/**
* Observes the rendered width and sets `data-layout` on the root
* element so that CSS can respond to size changes.
*
* This is an alternative to native CSS container queries. Its purpose is to handle cases where
* container queries would collapse if the element is placed inside a container without a defined size.
*/
export var useLayoutObserver = function useLayoutObserver(size) {
var elementRef = useRef(null);
useEffect(function () {
var element = elementRef.current;
if (!element || !hasResizeObserver) return;
var wide = WIDE_BREAKPOINTS[size];
var observer = new ResizeObserver(function (_ref) {
var _ref2 = _slicedToArray(_ref, 1),
entry = _ref2[0];
var width = entry.borderBoxSize[0].inlineSize;
if (width <= SUPER_NARROW_WIDTH) {
element.setAttribute('data-layout', 'superNarrow');
} else if (width >= wide) {
element.setAttribute('data-layout', 'wide');
} else {
element.removeAttribute('data-layout');
}
});
observer.observe(element);
return function () {
return observer.disconnect();
};
}, [size]);
return elementRef;
};