analytica-frontend-lib/dist/hooks/useMobile/index.mjs.map

Repositório público dos componentes utilizados nas plataformas da Analytica Ensino

{"version":3,"sources":["../../../src/hooks/useMobile.ts"],"sourcesContent":["import { useState, useEffect } from 'react';\n\n// Mobile width in pixels\nconst MOBILE_WIDTH = 500;\n// Tablet width in pixels\nconst TABLET_WIDTH = 931;\n// Video responsive breakpoints\nconst SMALL_MOBILE_WIDTH = 425;\nconst EXTRA_SMALL_MOBILE_WIDTH = 375;\nconst ULTRA_SMALL_MOBILE_WIDTH = 375; // For video controls\nconst TINY_MOBILE_WIDTH = 320;\n// Default desktop width for SSR\nconst DEFAULT_WIDTH = 1200;\n\n/**\n * Device type based on screen width\n */\nexport type DeviceType = 'responsive' | 'desktop';\n\n/**\n * Gets the window width safely (SSR compatible)\n * @returns {number} window width or default value for SSR\n */\nconst getWindowWidth = (): number => {\n  if (typeof window === 'undefined') {\n    return DEFAULT_WIDTH;\n  }\n  return window.innerWidth;\n};\n\n/**\n * Gets the current device type based on screen width\n * @returns {DeviceType} 'responsive' for mobile/tablet (width < 931px), 'desktop' for larger screens\n */\nexport const getDeviceType = (): DeviceType => {\n  const width = getWindowWidth();\n  return width < TABLET_WIDTH ? 'responsive' : 'desktop';\n};\n\n/**\n * Hook to detect screen size and get responsive classes\n * @returns object with isMobile, isTablet, responsive class functions and getDeviceType\n */\nexport const useMobile = () => {\n  const [isMobile, setIsMobile] = useState(false);\n  const [isTablet, setIsTablet] = useState(false);\n  const [isSmallMobile, setIsSmallMobile] = useState(false);\n  const [isExtraSmallMobile, setIsExtraSmallMobile] = useState(false);\n  const [isUltraSmallMobile, setIsUltraSmallMobile] = useState(false);\n  const [isTinyMobile, setIsTinyMobile] = useState(false);\n\n  useEffect(() => {\n    const checkScreenSize = () => {\n      const width = getWindowWidth();\n      setIsMobile(width < MOBILE_WIDTH);\n      setIsTablet(width < TABLET_WIDTH);\n      setIsSmallMobile(width < SMALL_MOBILE_WIDTH);\n      setIsExtraSmallMobile(width < EXTRA_SMALL_MOBILE_WIDTH);\n      setIsUltraSmallMobile(width < ULTRA_SMALL_MOBILE_WIDTH);\n      setIsTinyMobile(width < TINY_MOBILE_WIDTH);\n    };\n\n    checkScreenSize();\n\n    window.addEventListener('resize', checkScreenSize);\n\n    return () => window.removeEventListener('resize', checkScreenSize);\n  }, []);\n\n  /**\n   * Get responsive classes for the form container\n   * @returns className string for form container based on screen size\n   */\n  const getFormContainerClasses = (): string => {\n    if (isMobile) {\n      return 'w-full px-4';\n    }\n    if (isTablet) {\n      return 'w-full px-6';\n    }\n    return 'w-full max-w-[992px] mx-auto px-0';\n  };\n\n  /**\n   * Get mobile-specific classes for the header\n   * @returns className string for mobile header layout\n   */\n  const getMobileHeaderClasses = (): string => {\n    return 'flex flex-col items-start gap-4 mb-6';\n  };\n\n  /**\n   * Get desktop-specific classes for the header\n   * @returns className string for desktop header layout\n   */\n  const getDesktopHeaderClasses = (): string => {\n    return 'flex flex-row justify-between items-center gap-6 mb-8';\n  };\n\n  /**\n   * Get responsive classes for the header\n   * @returns className string for header based on screen size\n   */\n  const getHeaderClasses = (): string => {\n    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();\n  };\n\n  /**\n   * Get responsive classes for video container\n   * @returns className string for video container aspect ratio based on screen size\n   */\n  const getVideoContainerClasses = (): string => {\n    if (isTinyMobile) return 'aspect-square'; // 1:1 ratio for screens < 320px\n    if (isExtraSmallMobile) return 'aspect-[4/3]'; // 4:3 ratio for screens < 375px\n    if (isSmallMobile) return 'aspect-[16/12]'; // 16:12 ratio for screens < 425px\n    return 'aspect-video'; // 16:9 ratio for larger screens\n  };\n\n  return {\n    isMobile,\n    isTablet,\n    isSmallMobile,\n    isExtraSmallMobile,\n    isUltraSmallMobile,\n    isTinyMobile,\n    getFormContainerClasses,\n    getHeaderClasses,\n    getMobileHeaderClasses,\n    getDesktopHeaderClasses,\n    getVideoContainerClasses,\n    getDeviceType,\n  };\n};\n"],"mappings":";AAAA,SAAS,UAAU,iBAAiB;AAGpC,IAAM,eAAe;AAErB,IAAM,eAAe;AAErB,IAAM,qBAAqB;AAC3B,IAAM,2BAA2B;AACjC,IAAM,2BAA2B;AACjC,IAAM,oBAAoB;AAE1B,IAAM,gBAAgB;AAWtB,IAAM,iBAAiB,MAAc;AACnC,MAAI,OAAO,WAAW,aAAa;AACjC,WAAO;AAAA,EACT;AACA,SAAO,OAAO;AAChB;AAMO,IAAM,gBAAgB,MAAkB;AAC7C,QAAM,QAAQ,eAAe;AAC7B,SAAO,QAAQ,eAAe,eAAe;AAC/C;AAMO,IAAM,YAAY,MAAM;AAC7B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,KAAK;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,YAAU,MAAM;AACd,UAAM,kBAAkB,MAAM;AAC5B,YAAM,QAAQ,eAAe;AAC7B,kBAAY,QAAQ,YAAY;AAChC,kBAAY,QAAQ,YAAY;AAChC,uBAAiB,QAAQ,kBAAkB;AAC3C,4BAAsB,QAAQ,wBAAwB;AACtD,4BAAsB,QAAQ,wBAAwB;AACtD,sBAAgB,QAAQ,iBAAiB;AAAA,IAC3C;AAEA,oBAAgB;AAEhB,WAAO,iBAAiB,UAAU,eAAe;AAEjD,WAAO,MAAM,OAAO,oBAAoB,UAAU,eAAe;AAAA,EACnE,GAAG,CAAC,CAAC;AAML,QAAM,0BAA0B,MAAc;AAC5C,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,QAAI,UAAU;AACZ,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAMA,QAAM,yBAAyB,MAAc;AAC3C,WAAO;AAAA,EACT;AAMA,QAAM,0BAA0B,MAAc;AAC5C,WAAO;AAAA,EACT;AAMA,QAAM,mBAAmB,MAAc;AACrC,WAAO,WAAW,uBAAuB,IAAI,wBAAwB;AAAA,EACvE;AAMA,QAAM,2BAA2B,MAAc;AAC7C,QAAI,aAAc,QAAO;AACzB,QAAI,mBAAoB,QAAO;AAC/B,QAAI,cAAe,QAAO;AAC1B,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;","names":[]}