@fluentui/react/lib-commonjs/utilities/hooks/useResponsiveMode.js

Reusable React components for building web experiences.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResponsiveMode = void 0;
var React = require("react");
var utilities_1 = require("@fluentui/utilities");
var react_hooks_1 = require("@fluentui/react-hooks");
var withResponsiveMode_1 = require("../decorators/withResponsiveMode");
var WindowProvider_1 = require("../../WindowProvider");
/**
 * Hook to get the current responsive mode (window size category).
 * @param elementRef - Use this element's parent window when determining the responsive mode.
 * @param overrideResponsiveMode - Override the responsive mode. If this param is present, it's always returned.
 */
var useResponsiveMode = function (elementRef, overrideResponsiveMode) {
    var _a = React.useState((0, withResponsiveMode_1.getInitialResponsiveMode)()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];
    var onResize = React.useCallback(function () {
        var newResponsiveMode = (0, withResponsiveMode_1.getResponsiveMode)((0, utilities_1.getWindow)(elementRef.current));
        // Setting the same value should not cause a re-render.
        if (lastResponsiveMode !== newResponsiveMode) {
            setLastResponsiveMode(newResponsiveMode);
        }
    }, [elementRef, lastResponsiveMode]);
    var win = (0, WindowProvider_1.useWindow)();
    (0, react_hooks_1.useOnEvent)(win, 'resize', onResize);
    // Call resize function initially on mount, or if the override changes from defined to undefined
    // (the effect will run on all override changes, but onResize will only be called if it changed to undefined)
    React.useEffect(function () {
        if (overrideResponsiveMode === undefined) {
            onResize();
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps -- only meant to run on mount or when override changes
    }, [overrideResponsiveMode]);
    return overrideResponsiveMode !== null && overrideResponsiveMode !== void 0 ? overrideResponsiveMode : lastResponsiveMode;
};
exports.useResponsiveMode = useResponsiveMode;
//# sourceMappingURL=useResponsiveMode.js.map