@kwiz/fluentui/dist/helpers/hooks-events.js

KWIZ common controls for FluentUI

import { isDebug, isFunction } from "@kwiz/common";
import { useEffect, useRef, useState } from "react";
import { KnownClassNames } from "../styles/styles";
import { useEffectOnlyOnMount } from "./hooks";
export function useTrackFocus(props) {
    const wrapperDiv = props.ref || useRef(null);
    useEffect(() => {
        function focusIn(e) {
            let elm = e.target; //document.activeElement;
            if (wrapperDiv.current) {
                while (elm && elm !== wrapperDiv.current) {
                    elm = elm.parentElement;
                }
            }
            else
                elm = null;
            if (wrapperDiv.current && elm === wrapperDiv.current)
                props.onFocus();
            else
                props.onLoseFocus();
        }
        if (wrapperDiv.current) {
            if (wrapperDiv.current)
                wrapperDiv.current.tabIndex = 1;
            window.addEventListener("focusin", focusIn);
            // Remove event listener on cleanup
            return () => window.removeEventListener("focusin", focusIn);
        }
    }, [wrapperDiv.current]);
    return wrapperDiv;
}
export function useWindowSize() {
    // Initialize state with undefined width/height so server and client renders match
    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    const [windowSize, setWindowSize] = useState({
        width: undefined,
        height: undefined
    });
    useEffect(() => {
        // Handler to call on window resize
        function handleResize() {
            // Set window width/height to state
            setWindowSize({
                width: window.innerWidth,
                height: window.innerHeight
            });
        }
        // Add event listener
        window.addEventListener("resize", handleResize);
        // Call handler right away so state gets updated with initial window size
        handleResize();
        // Remove event listener on cleanup
        return () => window.removeEventListener("resize", handleResize);
    }, useEffectOnlyOnMount);
    return windowSize;
}
export function useElementSize(elm) {
    // Initialize state with undefined width/height so server and client renders match
    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
    const [elmSize, setELmSize] = useState({
        width: undefined,
        height: undefined
    });
    useEffect(() => {
        if (elm) {
            // Handler to call on elm resize
            function handleResize() {
                // Set elm width/height to state
                setELmSize({
                    width: (elm instanceof Window) ? elm.innerWidth : elm.clientWidth,
                    height: (elm instanceof Window) ? elm.innerHeight : elm.clientHeight,
                });
            }
            // Add event listener
            const observer = new ResizeObserver(handleResize);
            observer.observe(elm);
            // Call handler right away so state gets updated with initial elm size
            handleResize();
            // Remove event listener on cleanup
            return () => observer.disconnect();
        }
    }, [elm]);
    return elmSize;
}
export function useIsInPrint() {
    // Initialize state with media query
    const [printMode, setPrintMode] = useState(window.matchMedia ? window.matchMedia('print').matches : false);
    useEffect(() => {
        if (printMode)
            document.body.classList.add(KnownClassNames.print);
        else
            document.body.classList.remove(KnownClassNames.print);
    }, [printMode]);
    useEffect(() => {
        const forcePrintOn = () => setPrintMode(true);
        const forcePrintOff = () => setPrintMode(false);
        function printDebugHelper(e) {
            if (e.ctrlKey && e.shiftKey && e.altKey) {
                if (e.key.toLocaleLowerCase() === "q") {
                    forcePrintOff();
                }
                else {
                    console.warn('forced print mode - to exit refresh to ctrl+shift+alt+q');
                    forcePrintOn();
                }
            }
        }
        // Add event listener
        window.addEventListener("beforeprint", forcePrintOn);
        window.addEventListener("afterprint", forcePrintOff);
        if (isDebug())
            window.addEventListener("keydown", printDebugHelper);
        // Remove event listener on cleanup
        return () => {
            window.removeEventListener("beforeprint", forcePrintOn);
            window.removeEventListener("afterprint", forcePrintOff);
            if (isDebug())
                window.removeEventListener("keydown", printDebugHelper);
        };
    }, useEffectOnlyOnMount);
    return printMode;
}
export function useKeyDown(options) {
    let elm = options.elm || document;
    useEffect(() => {
        let handler = (e) => {
            if (e.key === "Enter" && isFunction(options.onEnter))
                options.onEnter(e);
            else if (e.key === "Escape" && isFunction(options.onEscape))
                options.onEscape(e);
            if (isFunction(options.onKeyDown))
                options.onKeyDown(e);
        };
        elm.addEventListener("keydown", handler);
        return () => elm.removeEventListener("keydown", handler);
    }, [elm, options.onEnter, options.onEscape, options.onKeyDown]);
}
//# sourceMappingURL=hooks-events.js.map