@platform/react/lib/hooks/useResizeObserver.js

React refs and helpers.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResizeObserver = void 0;
var react_1 = require("react");
var rxjs_1 = require("rxjs");
var operators_1 = require("rxjs/operators");
var ResizeObserver_1 = require("../resize/ResizeObserver");
function useResizeObserver(options) {
    var _a, _b;
    if (options === void 0) { options = {}; }
    var _c = (0, react_1.useState)(ResizeObserver_1.DEFAULT.RECT), rect = _c[0], setRect = _c[1];
    var _ref = (0, react_1.useRef)(null);
    var targetRef = (_a = options.ref) !== null && _a !== void 0 ? _a : _ref;
    var rootRef = (0, react_1.useRef)((_b = wrangleObserver(options.root)) !== null && _b !== void 0 ? _b : (0, ResizeObserver_1.ResizeObserver)());
    var change$ = (0, react_1.useRef)(new rxjs_1.Subject());
    var refresh$ = (0, react_1.useRef)(new rxjs_1.Subject());
    (0, react_1.useEffect)(function () {
        var root = rootRef.current;
        var element = root.watch(targetRef.current);
        element.$.pipe((0, operators_1.takeUntil)(element.dispose$), (0, operators_1.filter)(function (e) { return e.payload.rect.x > -1; })).subscribe(function (e) {
            var _a;
            var size = e.payload.rect;
            setRect(size);
            change$.current.next(size);
            (_a = options.onSize) === null || _a === void 0 ? void 0 : _a.call(options, size);
        });
        refresh$.current.pipe((0, operators_1.takeUntil)(element.dispose$)).subscribe(function () { return element.refresh(); });
        return function () { return element === null || element === void 0 ? void 0 : element.dispose(); };
    }, [targetRef]);
    return {
        ref: targetRef,
        $: change$.current.asObservable(),
        rect: rect,
        get root() {
            return rootRef.current;
        },
        get ready() {
            return rect.width > -1 && rect.height > -1;
        },
        refresh: function () {
            refresh$.current.next();
        },
    };
}
exports.useResizeObserver = useResizeObserver;
var wrangleObserver = function (input) {
    var _a;
    return !input ? undefined : (_a = input.root) !== null && _a !== void 0 ? _a : input;
};