@mantine/hooks/cjs/use-orientation/use-orientation.cjs.map

A collection of 50+ hooks for state and UI management

{"version":3,"file":"use-orientation.cjs","names":[],"sources":["../../src/use-orientation/use-orientation.ts"],"sourcesContent":["import { useState } from 'react';\nimport { useIsomorphicEffect } from '../use-isomorphic-effect/use-isomorphic-effect';\n\nexport interface UseOrientationOptions {\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `0`\n   * */\n  defaultAngle?: number;\n\n  /** Default angle value, used until the real can be retrieved\n   * (during server side rendering and before js executes on the page)\n   * If not provided, the default value is `'landscape-primary'`\n   * */\n  defaultType?: OrientationType;\n\n  /** If true, the initial value will be resolved in useEffect (ssr safe)\n   *  If false, the initial value will be resolved in useLayoutEffect (ssr unsafe)\n   *  True by default.\n   */\n  getInitialValueInEffect?: boolean;\n}\n\nexport interface UseOrientationReturnType {\n  angle: number;\n  type: OrientationType;\n}\n\nfunction getInitialValue(\n  initialValue: UseOrientationReturnType,\n  getInitialValueInEffect: boolean\n): UseOrientationReturnType {\n  if (getInitialValueInEffect) {\n    return initialValue;\n  }\n\n  if (typeof window !== 'undefined' && 'screen' in window) {\n    return {\n      angle: window.screen.orientation?.angle ?? initialValue.angle,\n      type: window.screen.orientation?.type ?? initialValue.type,\n    };\n  }\n\n  return initialValue;\n}\n\nexport function useOrientation({\n  defaultAngle = 0,\n  defaultType = 'landscape-primary',\n  getInitialValueInEffect = true,\n}: UseOrientationOptions = {}): UseOrientationReturnType {\n  const [orientation, setOrientation] = useState<UseOrientationReturnType>(\n    getInitialValue(\n      {\n        angle: defaultAngle,\n        type: defaultType,\n      },\n      getInitialValueInEffect\n    )\n  );\n\n  const handleOrientationChange = (event: Event) => {\n    const target = event.currentTarget as ScreenOrientation;\n    setOrientation({ angle: target?.angle || 0, type: target?.type || 'landscape-primary' });\n  };\n\n  useIsomorphicEffect(() => {\n    if (window.screen.orientation) {\n      setOrientation({\n        angle: window.screen.orientation.angle,\n        type: window.screen.orientation.type,\n      });\n      window.screen.orientation.addEventListener('change', handleOrientationChange);\n      return () =>\n        window.screen.orientation?.removeEventListener('change', handleOrientationChange);\n    }\n\n    return undefined;\n  }, []);\n\n  return orientation;\n}\n\nexport namespace useOrientation {\n  export type Options = UseOrientationOptions;\n  export type ReturnType = UseOrientationReturnType;\n}\n"],"mappings":";;;;AA4BA,SAAS,gBACP,cACA,yBAC0B;CAC1B,IAAI,yBACF,OAAO;CAGT,IAAI,OAAO,WAAW,eAAe,YAAY,QAC/C,OAAO;EACL,OAAO,OAAO,OAAO,aAAa,SAAS,aAAa;EACxD,MAAM,OAAO,OAAO,aAAa,QAAQ,aAAa;CACxD;CAGF,OAAO;AACT;AAEA,SAAgB,eAAe,EAC7B,eAAe,GACf,cAAc,qBACd,0BAA0B,SACD,CAAC,GAA6B;CACvD,MAAM,CAAC,aAAa,mBAAA,GAAA,MAAA,UAClB,gBACE;EACE,OAAO;EACP,MAAM;CACR,GACA,uBACF,CACF;CAEA,MAAM,2BAA2B,UAAiB;EAChD,MAAM,SAAS,MAAM;EACrB,eAAe;GAAE,OAAO,QAAQ,SAAS;GAAG,MAAM,QAAQ,QAAQ;EAAoB,CAAC;CACzF;CAEA,8BAAA,0BAA0B;EACxB,IAAI,OAAO,OAAO,aAAa;GAC7B,eAAe;IACb,OAAO,OAAO,OAAO,YAAY;IACjC,MAAM,OAAO,OAAO,YAAY;GAClC,CAAC;GACD,OAAO,OAAO,YAAY,iBAAiB,UAAU,uBAAuB;GAC5E,aACE,OAAO,OAAO,aAAa,oBAAoB,UAAU,uBAAuB;EACpF;CAGF,GAAG,CAAC,CAAC;CAEL,OAAO;AACT"}