@vimeo/iris/utils/hooks/useMeasure.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var ReactDOM = require('react-dom');
var utils_DOM_createPortalOutlet = require('../DOM/createPortalOutlet.js');
var utils_DOM_geometry = require('../DOM/geometry.js');
var utils_DOM_removeElementByID = require('../DOM/removeElementByID.js');
var utils_DOM_SSR = require('../DOM/SSR.js');
require('../DOM/createElement.js');

function useMeasure(Component, _a) {
    var _b = _a === void 0 ? {} : _a, _c = _b.depth, depth = _c === void 0 ? 0 : _c;
    var ref = React.useRef(null);
    var _d = tslib_es6.__read(React.useState(false), 2), measured = _d[0], measuredSet = _d[1];
    var ComponentWithRef = React.cloneElement(Component, { ref: ref });
    var outlet = !measured && utils_DOM_createPortalOutlet.createPortalOutlet('measure');
    var portal = !measured && ReactDOM.createPortal(ComponentWithRef, outlet);
    var measureElements = React.useCallback(function () {
        var _a, _b;
        if (measured)
            return;
        var rect = utils_DOM_geometry.geometry(ref.current);
        // TODO: write recursive children depth function for n depth
        if (depth > 0) {
            var children = (_b = (depth > 0 && ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.children))) !== null && _b !== void 0 ? _b : [];
            rect.children = tslib_es6.__spreadArray([], tslib_es6.__read(children), false).map(function (child) { return utils_DOM_geometry.geometry(child); });
        }
        // If measureElements() has been called but the elements
        // have not changed size or postion, return.
        if (!compareDOMRects(measured, rect))
            return;
        measuredSet(rect);
        utils_DOM_removeElementByID.removeElementByID('measure');
    }, [depth, measured, ref]);
    React.useLayoutEffect(function () {
        measureElements();
        function resize() {
            measuredSet(false);
            measureElements();
        }
        window.addEventListener('resize', resize);
        return function () { return window.removeEventListener('resize', resize); };
    }, [measureElements]);
    if (utils_DOM_SSR.SSR)
        return [Component, null];
    var render = measured ? Component : portal;
    return [render, measured];
}
function compareDOMRects(a, b) {
    return (a.width !== b.width ||
        a.height !== b.height ||
        a.left !== b.left ||
        a.top !== b.top ||
        a.bottom !== b.bottom ||
        a.right !== b.right ||
        a.x !== b.x ||
        a.y !== b.y);
}

exports.useMeasure = useMeasure;