zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Fixes the lightbox image index not being passed through to the web version (#306) (#324)

zio/stable
John Fawcett 2023-03-27 10:18:14 -05:00 committed by GitHub
parent 2789d5c056
commit def8be2137
1 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/view/com/lightbox/Lightbox.web.tsx
View File

@ -23,16 +23,20 @@ export const Lightbox = observer(function Lightbox() {
return null return null
} }
const activeLightbox = store.shell.activeLightbox
const initialIndex =
activeLightbox instanceof models.ImagesLightbox ? activeLightbox.index : 0
const onClose = () => store.shell.closeLightbox() const onClose = () => store.shell.closeLightbox()
let imgs: Img[] | undefined let imgs: Img[] | undefined
if (store.shell.activeLightbox?.name === 'profile-image') { if (activeLightbox instanceof models.ProfileImageLightbox) {
const opts = store.shell.activeLightbox as models.ProfileImageLightbox const opts = activeLightbox
if (opts.profileView.avatar) { if (opts.profileView.avatar) {
imgs = [{uri: opts.profileView.avatar}] imgs = [{uri: opts.profileView.avatar}]
} }
} else if (store.shell.activeLightbox?.name === 'images') { } else if (activeLightbox instanceof models.ImagesLightbox) {
const opts = store.shell.activeLightbox as models.ImagesLightbox const opts = activeLightbox
imgs = opts.uris.map(uri => ({uri})) imgs = opts.uris.map(uri => ({uri}))
} }
@ -40,11 +44,21 @@ export const Lightbox = observer(function Lightbox() {
return null return null
} }
return <LightboxInner imgs={imgs} onClose={onClose} /> return (
<LightboxInner imgs={imgs} initialIndex={initialIndex} onClose={onClose} />
)
}) })
function LightboxInner({imgs, onClose}: {imgs: Img[]; onClose: () => void}) { function LightboxInner({
const [index, setIndex] = React.useState<number>(0) imgs,
initialIndex = 0,
onClose,
}: {
imgs: Img[]
initialIndex: number
onClose: () => void
}) {
const [index, setIndex] = React.useState<number>(initialIndex)
const canGoLeft = index >= 1 const canGoLeft = index >= 1
const canGoRight = index < imgs.length - 1 const canGoRight = index < imgs.length - 1