phx-react/dist/esm/components/TableVertical/useStickyLeft.js

PHX REACT

import { useEffect, useRef, useState } from 'react';
export const useStickyLefts = (count, dataTable) => {
    const refs = useRef([]);
    const [lefts, setLefts] = useState([]);
    useEffect(() => {
        const calculateLefts = () => {
            var _a;
            const newLefts = [];
            let acc = 0;
            for (let i = 0; i < count; i++) {
                const width = ((_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
                newLefts[i] = acc;
                acc += width;
            }
            setLefts(newLefts);
        };
        // Initial calculate
        calculateLefts();
        // ResizeObserver để lắng nghe thay đổi kích thước từng ref
        const observers = [];
        refs.current.slice(0, count).forEach((cell) => {
            if (!cell)
                return;
            const observer = new ResizeObserver(() => {
                calculateLefts();
            });
            observer.observe(cell);
            observers.push(observer);
        });
        return () => {
            observers.forEach((observer) => observer.disconnect());
        };
    }, [count, dataTable]);
    return { refs, lefts };
};
export const useStickyRights = (count, dataTable) => {
    const refs = useRef([]);
    const [rights, setRights] = useState([]);
    useEffect(() => {
        const calculateRights = () => {
            var _a;
            const newRights = [];
            let acc = 0;
            for (let i = 0; i < count; i++) {
                const width = ((_a = refs.current[i]) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 0;
                newRights[i] = acc;
                acc += width;
            }
            setRights(newRights);
        };
        calculateRights();
        const observers = [];
        refs.current.slice(-count).forEach((cell) => {
            if (!cell)
                return;
            const observer = new ResizeObserver(() => calculateRights());
            observer.observe(cell);
            observers.push(observer);
        });
        return () => {
            observers.forEach((observer) => observer.disconnect());
        };
    }, [count, dataTable]);
    return { refs, rights };
};
//# sourceMappingURL=useStickyLeft.js.map