Sha256: cf226ff202dab3ccac56ec5812568c161613d1f05085193b8bb3371c316e77e4
Contents?: true
Size: 1.25 KB
Versions: 370
Compression:
Stored size: 1.25 KB
Contents
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
import React, { useEffect } from 'react'
import Slides from './Slides'
import Thumbnails from './Thumbnails'
type CarouselType = {
initialPhoto?: string,
onClose?: () => void,
icon?: string,
currentIndex: number,
photos: {
url: string,
thumbnail: string,
}[],
onChange: (index: number) => void,
onClick?: (index: number) => void,
setIndex?: (index: number)=> void,
}
export default function Carousel({
currentIndex,
photos,
onClick = ()=>{},
onChange = ()=>{},
setIndex,
}: CarouselType): React.ReactElement {
useEffect(() => {
document.body.style.overflow = 'hidden'
return () => {
document.body.style.overflow = 'initial'
}
}, [])
const handleChange = (index: number) => {
onChange(index)
}
return (
<div className="Lightbox">
<Slides
setIndex={setIndex}
current={currentIndex}
onChange={handleChange}
onClick={onClick}
urls={photos.map((photo) => photo.url)}
/>
{photos.length > 1 ? (
<Thumbnails
current={currentIndex}
onChange={handleChange}
urls={photos.map((photo) => photo.thumbnail)}
/>
) : null}
</div>
)
}
Version data entries
370 entries across 370 versions & 1 rubygems