@react-md/utils
Version:
General utils for react-md.
64 lines • 2.4 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";
/**
* An extremely simple "pollyfill" for the `window.screen.orientation` just for
* the `type` value that is required for the `useOrientation` hook.
*/
export var getOrientationType = function () {
var _a;
var screenOrientation = (_a = window.screen.orientation) === null || _a === void 0 ? void 0 : _a.type;
if (typeof screenOrientation === "string") {
return screenOrientation;
}
var _b = window.screen, availHeight = _b.availHeight, availWidth = _b.availWidth;
return availHeight > availWidth ? "portrait-primary" : "landscape-primary";
};
/**
* This media query is used to determine the current orientation of the app
* based on the `window.screen.orientation.type`. This will always be
* `"landscape-primary"` server side unless a default value is provided.
*
* @param defaultValue - an optional default value to use. When this is omitted,
* it will default to `"landscape-primary"` unless the `window` is defined. If
* the `window` is defined, it will immediately check the orientation type on
* mount.
* @returns the orientation type value.
*/
export function useOrientation(defaultValue) {
var _a = __read(useState(function () {
if (defaultValue) {
return defaultValue;
}
if (typeof window !== "undefined") {
return getOrientationType();
}
return "landscape-primary";
}), 2), value = _a[0], setValue = _a[1];
useEffect(function () {
if (typeof window === "undefined") {
return;
}
var handler = function () {
setValue(getOrientationType());
};
window.addEventListener("orientationchange", handler);
return function () { return window.removeEventListener("orientationchange", handler); };
}, []);
return value;
}
//# sourceMappingURL=useOrientation.js.map