@react-md/utils
Version:
General utils for react-md.
76 lines • 3.8 kB
JavaScript
var __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
import { useEffect, useState } from "react";
import { DEFAULT_DESKTOP_LARGE_MIN_WIDTH, DEFAULT_DESKTOP_MIN_WIDTH, DEFAULT_PHONE_MAX_WIDTH, DEFAULT_TABLET_MAX_WIDTH, DEFAULT_TABLET_MIN_WIDTH, } from "./constants";
import { useOrientation } from "./useOrientation";
import { useWidthMediaQuery } from "./useWidthMediaQuery";
export var DEFAULT_APP_SIZE = {
isPhone: false,
isTablet: false,
isDesktop: true,
isLargeDesktop: false,
isLandscape: true,
};
/**
* This hook is used to determine the current application size based on the
* provided query sizes. When you want to render your app server side, you will
* need to provide a custom `defaultSize` that implements your logic to
* determine the type of device requesting a page. Once the app has been
* rendered in the DOM, this hook will attach event listeners to automatically
* update the app size when the page is resized.
*
* @internal
*/
export function useAppSizeMedia(_a) {
var _b = _a === void 0 ? {} : _a, _c = _b.phoneMaxWidth, phoneMaxWidth = _c === void 0 ? DEFAULT_PHONE_MAX_WIDTH : _c, _d = _b.tabletMinWidth, tabletMinWidth = _d === void 0 ? DEFAULT_TABLET_MIN_WIDTH : _d, _e = _b.tabletMaxWidth, tabletMaxWidth = _e === void 0 ? DEFAULT_TABLET_MAX_WIDTH : _e, _f = _b.desktopMinWidth, desktopMinWidth = _f === void 0 ? DEFAULT_DESKTOP_MIN_WIDTH : _f, _g = _b.desktopLargeMinWidth, desktopLargeMinWidth = _g === void 0 ? DEFAULT_DESKTOP_LARGE_MIN_WIDTH : _g, _h = _b.defaultSize, defaultSize = _h === void 0 ? DEFAULT_APP_SIZE : _h;
/* eslint-disable react-hooks/rules-of-hooks */
// disabled since this is conditionally applied for SSR
if (typeof window === "undefined") {
return defaultSize;
}
var matchesDesktop = useWidthMediaQuery({ min: desktopMinWidth });
var matchesLargeDesktop = useWidthMediaQuery({ min: desktopLargeMinWidth });
var matchesTablet = useWidthMediaQuery({
min: tabletMinWidth,
max: tabletMaxWidth,
});
var matchesPhone = useWidthMediaQuery({ max: phoneMaxWidth });
var isDesktop = matchesDesktop;
var isTablet = !matchesDesktop && matchesTablet;
var isPhone = !isTablet && !isDesktop && matchesPhone;
var isLandscape = useOrientation().includes("landscape");
var isLargeDesktop = matchesLargeDesktop;
var _j = __read(useState(defaultSize), 2), appSize = _j[0], setAppSize = _j[1];
useEffect(function () {
if (appSize.isPhone === isPhone &&
appSize.isTablet === isTablet &&
appSize.isDesktop === isDesktop &&
appSize.isLargeDesktop === isLargeDesktop &&
appSize.isLandscape === isLandscape) {
return;
}
// for some reason, it's sometimes possible to fail every single matchMedia
// value when you are resizing the browser a lot. this is an "invalid" event
// so skip it. It normally happens between 760px-768px
if (!isPhone && !isTablet && !isDesktop && !isLargeDesktop) {
return;
}
setAppSize({ isPhone: isPhone, isTablet: isTablet, isDesktop: isDesktop, isLargeDesktop: isLargeDesktop, isLandscape: isLandscape });
}, [isPhone, isTablet, isDesktop, isLargeDesktop, isLandscape, appSize]);
return appSize;
}
//# sourceMappingURL=useAppSizeMedia.js.map