src/view/com/lightbox/Lightbox.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

import React from 'react'
import {View} from 'react-native'
import {observer} from 'mobx-react-lite'
import ImageView from 'react-native-image-viewing'
import {useStores} from '../../../state'

import * as models from '../../../state/models/shell-ui'

export const Lightbox = observer(function Lightbox() {
  const store = useStores()
  const onClose = () => {
    console.log('hit')
    store.shell.closeLightbox()
  }

  if (!store.shell.isLightboxActive) {
    return <View />
  }

  if (store.shell.activeLightbox?.name === 'profile-image') {
    const opts = store.shell.activeLightbox as models.ProfileImageLightbox
    return (
      <ImageView
        images={[{uri: opts.profileView.avatar}]}
        imageIndex={0}
        visible
        onRequestClose={onClose}
      />
    )
  } else if (store.shell.activeLightbox?.name === 'images') {
    const opts = store.shell.activeLightbox as models.ImagesLightbox
    return (
      <ImageView
        images={opts.uris.map(uri => ({uri}))}
        imageIndex={opts.index}
        visible
        onRequestClose={onClose}
      />
    )
  } else {
    return <View />
  }
})