Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import React, { type JSX, useEffect, useState } from 'react';
import Button from '../Button/Button';
import DialogBox from '../DialogBox/DialogBox';
import PhotosCarousel, { PhotoItem } from '../PhotosCarousel';
export interface ViewPhotosDialogProps {
open: boolean;
onClose: () => void;
photos: PhotoItem[];
initialSelectedSlide: number;
nextButtonLabel: string;
prevButtonLabel: string;
title: string;
numbered?: boolean;
dots?: boolean;
}
export default function ViewPhotosDialog(props: ViewPhotosDialogProps): JSX.Element {
const { onClose, open, photos, initialSelectedSlide, nextButtonLabel, prevButtonLabel, title, numbered, dots } =
props;
const [selectedSlide, setSelectedSlide] = useState(initialSelectedSlide);
useEffect(() => {
setSelectedSlide(initialSelectedSlide);
}, [initialSelectedSlide, open]);
const isPreviousDisabled = selectedSlide <= 0;
const isNextDisabled = selectedSlide >= photos.length - 1;
return (
<DialogBox
onClose={onClose}
open={open}
title={title}
size='large'
scrolled={true}
middleButtons={[
<Button
label={prevButtonLabel}
priority='secondary'
onClick={() => setSelectedSlide((slide) => Math.max(0, slide - 1))}
key='button-1'
disabled={isPreviousDisabled}
icon='caretLeft'
/>,
<Button
label={nextButtonLabel}
onClick={() => setSelectedSlide((slide) => Math.min(photos.length - 1, slide + 1))}
key='button-2'
disabled={isNextDisabled}
rightIcon='caretRight'
/>,
]}
>
<PhotosCarousel
photos={photos}
selectedSlide={selectedSlide}
onSlideChange={setSelectedSlide}
numbered={numbered}
dots={dots}
/>
</DialogBox>
);
}
|