Stefan Hacker
32 lines
1.8 KiB
JavaScript
32 lines
1.8 KiB
JavaScript
import * as React from 'react';
|
|
import { getWindow } from '@fluentui/utilities';
|
|
import { useOnEvent } from '@fluentui/react-hooks';
|
|
import { getResponsiveMode, getInitialResponsiveMode } from '../decorators/withResponsiveMode';
|
|
import { useWindow } from '../../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.
|
|
*/
|
|
export var useResponsiveMode = function (elementRef, overrideResponsiveMode) {
|
|
var _a = React.useState(getInitialResponsiveMode()), lastResponsiveMode = _a[0], setLastResponsiveMode = _a[1];
|
|
var onResize = React.useCallback(function () {
|
|
var newResponsiveMode = getResponsiveMode(getWindow(elementRef.current));
|
|
// Setting the same value should not cause a re-render.
|
|
if (lastResponsiveMode !== newResponsiveMode) {
|
|
setLastResponsiveMode(newResponsiveMode);
|
|
}
|
|
}, [elementRef, lastResponsiveMode]);
|
|
var win = useWindow();
|
|
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;
|
|
};
|
|
//# sourceMappingURL=useResponsiveMode.js.map
|