1 | import { observable } from '@nx-js/observer-util'
|
2 | import { Dimensions } from 'react-native'
|
3 | import { batch } from 'startupjs'
|
4 | import debounce from 'lodash/debounce'
|
5 | import { media } from '../config/helpers'
|
6 |
|
7 | const { mobile, ...MEDIA } = media
|
8 | const DIMENSIONS_UPDATE_DELAY = 200
|
9 | const mediaFlags = observable({})
|
10 |
|
11 | const debouncedUpdateMedia = debounce(
|
12 | updateMediaFlags,
|
13 | DIMENSIONS_UPDATE_DELAY,
|
14 | { leading: false, trailing: true }
|
15 | )
|
16 |
|
17 | listenForMediaUpdates()
|
18 |
|
19 | export default function useMedia () {
|
20 | return mediaFlags
|
21 | }
|
22 |
|
23 | function updateMediaFlags ({ window }) {
|
24 | batch(() => {
|
25 | for (const breakpoint of Object.keys(MEDIA).reverse()) {
|
26 | if (window.width >= MEDIA[breakpoint]) {
|
27 | if (!mediaFlags[breakpoint]) mediaFlags[breakpoint] = true
|
28 | } else {
|
29 | if (mediaFlags[breakpoint]) mediaFlags[breakpoint] = false
|
30 | }
|
31 | }
|
32 | })
|
33 | }
|
34 |
|
35 | function listenForMediaUpdates () {
|
36 | updateMediaFlags({ window: Dimensions.get('window') })
|
37 | Dimensions.addEventListener('change', debouncedUpdateMedia)
|
38 | }
|