Sha256: 972d529fe04d51ceb1531309c572fb24e9da38d44af3efc6a55616e2f9d6b409
Contents?: true
Size: 1.22 KB
Versions: 25
Compression:
Stored size: 1.22 KB
Contents
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
import { noop } from 'lodash'
import React, { useEffect } from 'react'
import Slides from './Slides'
import Thumbnails from './Thumbnails'
type CarouselType = {
initialPhoto?: string,
onClose?: () => void,
icon?: string,
iconSize?: number,
currentIndex: number,
photos: {
url: string,
thumbnail: string,
}[],
onChange: (index: number) => void,
onClick?: (index: number) => void,
}
export default function Carousel({
currentIndex,
photos,
onClick = noop,
onChange = noop,
}: 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
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
25 entries across 25 versions & 1 rubygems