analytica-frontend-lib
Version:
Repositório público dos componentes utilizados nas plataformas da Analytica Ensino
84 lines • 2.6 kB
JavaScript
// src/hooks/useMobile.ts
import { useState, useEffect } from "react";
var MOBILE_WIDTH = 500;
var TABLET_WIDTH = 931;
var SMALL_MOBILE_WIDTH = 425;
var EXTRA_SMALL_MOBILE_WIDTH = 375;
var ULTRA_SMALL_MOBILE_WIDTH = 375;
var TINY_MOBILE_WIDTH = 320;
var DEFAULT_WIDTH = 1200;
var getWindowWidth = () => {
if (typeof window === "undefined") {
return DEFAULT_WIDTH;
}
return window.innerWidth;
};
var getDeviceType = () => {
const width = getWindowWidth();
return width < TABLET_WIDTH ? "responsive" : "desktop";
};
var useMobile = () => {
const [isMobile, setIsMobile] = useState(false);
const [isTablet, setIsTablet] = useState(false);
const [isSmallMobile, setIsSmallMobile] = useState(false);
const [isExtraSmallMobile, setIsExtraSmallMobile] = useState(false);
const [isUltraSmallMobile, setIsUltraSmallMobile] = useState(false);
const [isTinyMobile, setIsTinyMobile] = useState(false);
useEffect(() => {
const checkScreenSize = () => {
const width = getWindowWidth();
setIsMobile(width < MOBILE_WIDTH);
setIsTablet(width < TABLET_WIDTH);
setIsSmallMobile(width < SMALL_MOBILE_WIDTH);
setIsExtraSmallMobile(width < EXTRA_SMALL_MOBILE_WIDTH);
setIsUltraSmallMobile(width < ULTRA_SMALL_MOBILE_WIDTH);
setIsTinyMobile(width < TINY_MOBILE_WIDTH);
};
checkScreenSize();
window.addEventListener("resize", checkScreenSize);
return () => window.removeEventListener("resize", checkScreenSize);
}, []);
const getFormContainerClasses = () => {
if (isMobile) {
return "w-full px-4";
}
if (isTablet) {
return "w-full px-6";
}
return "w-full max-w-[992px] mx-auto px-0";
};
const getMobileHeaderClasses = () => {
return "flex flex-col items-start gap-4 mb-6";
};
const getDesktopHeaderClasses = () => {
return "flex flex-row justify-between items-center gap-6 mb-8";
};
const getHeaderClasses = () => {
return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();
};
const getVideoContainerClasses = () => {
if (isTinyMobile) return "aspect-square";
if (isExtraSmallMobile) return "aspect-[4/3]";
if (isSmallMobile) return "aspect-[16/12]";
return "aspect-video";
};
return {
isMobile,
isTablet,
isSmallMobile,
isExtraSmallMobile,
isUltraSmallMobile,
isTinyMobile,
getFormContainerClasses,
getHeaderClasses,
getMobileHeaderClasses,
getDesktopHeaderClasses,
getVideoContainerClasses,
getDeviceType
};
};
export {
getDeviceType,
useMobile
};
//# sourceMappingURL=index.mjs.map