2190

2190.ts

/*const defaultProps: Props = {
    myRef: { current: {} }
}*/

const Lightbox = function ({ myRef }:Props ) {
    //const Lightbox: React.FC<Props> = (props: Props) => {
        //const { myRef } = props
        const [opened, setOpened] = useState(false)
        const [currentImage, setCurrentImage] = useState(0)
        const [photos, setPhotos] = useState([])
    
        const showLightbox = useCallback((photos, index) => {
            setOpened(true)
            setCurrentImage(index)
            setPhotos(photos)
        }, [])
    
        if (!myRef?.current) {
            myRef.current = {}
        } else {
            myRef.current.showLightbox = showLightbox
        }
    
        const handleCloseLightbox = useCallback(() => {
            setOpened(false)
            setCurrentImage(0)
            setPhotos([])
        }, [])

        return (
            <ModalGateway key="modal">
                {opened && photos.length > 0 && (
                    <ModalImage onClose={handleCloseLightbox}>
                        <Carousel
                            views={photos}
                            currentIndex={currentImage}
                            formatters={{
                                getAltText: ({ data, index }: any) => data.caption || `Изображение ${index + 1}`,
                                getNextLabel: ({ currentIndex, views }: any) =>
                                    `Показать слайд ${currentIndex + 2} из ${views.length}`,
                                getPrevLabel: ({ currentIndex, views }: any) =>
                                    `Показать слайд ${currentIndex} из ${views.length}`,
                                getNextTitle: () => 'Вперед (стрелка вправо)',
                                getPrevTitle: () => 'Назад (стрелка влево)',
                                getCloseLabel: () => 'Закрыть (esc)',
                                getFullscreenLabel: ({ isFullscreen }) =>
                                    isFullscreen ? 'Выйти из полноэкранного режима (f)' : 'Открыть на весь экран (f)'
                            }}
                            components={{
                                FooterCount: FooterCount
                            }}
                        />
                    </ModalImage>
                )}
            </ModalGateway>
        )
    }
    //Lightbox.defaultProps = defaultProps