@garage-panda/use-await-dom-render/lib/useAwaitDomRender.js

React hook that is used to await all DOM elements inside a node to be rendered

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));
var DomObserver_1 = __importDefault(require("./DomObserver"));
exports.default = (function (waitTimeMs) {
    if (waitTimeMs === void 0) { waitTimeMs = 150; }
    var _a = react_1.default.useState(0), updatesCount = _a[0], setUpdatesCount = _a[1];
    var receiveDomUpdate = react_1.default.useCallback(function () {
        setUpdatesCount(function (prevCount) { return prevCount + 1; });
    }, []);
    var setLoaded = react_1.default.useCallback(function () {
        observer.call("load");
        observer.disconnect();
    }, []);
    var observer = react_1.default.useMemo(function () {
        return new DomObserver_1.default(function () {
            receiveDomUpdate();
            observer.call("dom-update");
        });
    }, [receiveDomUpdate]);
    react_1.default.useEffect(function () {
        var timeout = setTimeout(function () {
            setLoaded();
        }, waitTimeMs);
        return function () {
            clearTimeout(timeout);
        };
    }, [updatesCount]);
    var startWait = react_1.default.useCallback(function (targetNode) {
        setUpdatesCount(0);
        observer.call("start");
        observer.startDomWait(targetNode);
    }, [observer]);
    return [observer, startWait];
});