@lunit/oui/dist/components/ResizeObserver/ResizeObserverContext.js

Lunit Oncology UI components

import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, useEffect, useRef } from 'react';
import { v4 as uuidV4 } from 'uuid';
import { cloneDeep as _cloneDeep, throttle as _throttle } from 'lodash';
const ResizeObserverContext = createContext({});
const { Provider } = ResizeObserverContext;
const ResizeObserverProvider = ({ children }) => {
    const observerRef = useRef(null);
    const handlersRef = useRef({});
    function getObserver() {
        let current = _cloneDeep(observerRef.current);
        if (current === null) {
            current = new ResizeObserver(_throttle((entries) => {
                entries.forEach((entry) => {
                    const resizeHandlers = handlersRef.current;
                    const observerKey = entry.target.attributes.getNamedItem('data-resizeobkey');
                    if (resizeHandlers[observerKey.value]) {
                        resizeHandlers[observerKey.value](entry.target);
                    }
                });
            }));
        }
        return current;
    }
    const addResizeHandler = (target, handler) => {
        let observerKey = target.attributes.getNamedItem('data-resizeobkey');
        if (observerKey === null) {
            target.setAttribute('data-resizeobkey', uuidV4());
            observerKey = target.attributes.getNamedItem('data-resizeobkey');
        }
        handlersRef.current[observerKey.value] = handler;
        getObserver().observe(target);
    };
    const removeResizeHandler = (target) => {
        const observerKey = target.attributes.getNamedItem('data-resizeobkey');
        if (observerKey !== null) {
            delete handlersRef.current[observerKey.value];
        }
        getObserver().unobserve(target);
    };
    useEffect(() => {
        return () => {
            if (observerRef.current) {
                observerRef.current.disconnect();
            }
        };
    }, []);
    return (_jsx(Provider, { value: {
            addResizeHandler,
            removeResizeHandler,
        }, children: children }));
};
export { ResizeObserverContext, ResizeObserverProvider };