@neo4j-ndl/react/lib/esm/text-overflow/use-ellipsis-observer.js

React implementation of Neo4j Design System

/**
 *
 *  Copyright (c) "Neo4j"
 *  Neo4j Sweden AB [http://neo4j.com]
 *
 *  This file is part of Neo4j.
 *
 *  Neo4j is free software: you can redistribute it and/or modify
 *  it under the terms of the GNU General Public License as published by
 *  the Free Software Foundation, either version 3 of the License, or
 *  (at your option) any later version.
 *
 *  This program is distributed in the hope that it will be useful,
 *  but WITHOUT ANY WARRANTY; without even the implied warranty of
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 *  GNU General Public License for more details.
 *
 *  You should have received a copy of the GNU General Public License
 *  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
import { useEffect, useRef, useState } from 'react';
import { debounce } from '../helpers/debounce';
export function useEllipsisObserver(options = {}) {
    const { lineClamp = 1, debounceMs = 100 } = options;
    const ref = useRef(null);
    const [isEllipsized, setIsEllipsized] = useState(false);
    useEffect(() => {
        const el = ref.current;
        if (!el) {
            return;
        }
        const checkEllipsis = () => {
            let hasEllipsis = false;
            if (lineClamp > 1) {
                // For multi-line ellipsis (line-clamp)
                // Check if scrollHeight is greater than clientHeight
                hasEllipsis = el.scrollHeight > el.clientHeight;
            }
            else {
                // For single-line ellipsis (text-overflow: ellipsis)
                // Check if scrollWidth is greater than clientWidth
                hasEllipsis = el.scrollWidth > el.clientWidth;
            }
            setIsEllipsized(hasEllipsis);
        };
        const debouncedCheck = debounce(checkEllipsis, debounceMs);
        // Initial check
        checkEllipsis();
        const resizeObserver = new ResizeObserver(debouncedCheck);
        resizeObserver.observe(el);
        // Also observe the parent element to catch container size changes
        if (el.parentElement) {
            resizeObserver.observe(el.parentElement);
        }
        window.addEventListener('resize', debouncedCheck);
        return () => {
            resizeObserver.disconnect();
            window.removeEventListener('resize', debouncedCheck);
        };
    }, [lineClamp, debounceMs]);
    return [ref, isEllipsized];
}
//# sourceMappingURL=use-ellipsis-observer.js.map