Merged in feat/sw-3231-move-lightbox-to-design-system (pull request #2619)
feat(SW-3231): Move Lightbox to design-system * Move Lightbox to design-system * Fix self-referencing imports * Fix broken import Approved-by: Matilda Landström
This commit is contained in:
Anton Gunnarsson
@@ -0,0 +1,127 @@
|
||||
.fullViewContainer {
|
||||
background-color: var(--UI-Text-High-contrast);
|
||||
height: 100%;
|
||||
padding: var(--Space-x3) var(--Space-x2);
|
||||
position: relative;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
grid-template-columns: 1fr;
|
||||
place-content: center;
|
||||
gap: var(--Space-x5);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: var(--Space-x2);
|
||||
right: var(--Space-x2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imageCount {
|
||||
background-color: var(--Overlay-90);
|
||||
padding: var(--Space-x025) var(--Space-x05);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
color: var(--Text-Inverted);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 25rem;
|
||||
margin-top: var(--Space-x5);
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: var(--Corner-radius-Medium);
|
||||
}
|
||||
|
||||
.imageCaption {
|
||||
color: var(--Text-Inverted);
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--Space-x5));
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.navigationButton {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) and (max-width: 1366px) {
|
||||
.fullViewContainer {
|
||||
padding: var(--Space-x5);
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
height: 100%;
|
||||
max-height: 560px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: var(--Space-x15);
|
||||
right: var(--Space-x15);
|
||||
}
|
||||
|
||||
.fullViewContainer {
|
||||
margin-top: 0;
|
||||
padding: var(--Space-x5);
|
||||
grid-template-rows: auto 1fr auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.imageContainer {
|
||||
width: 70%;
|
||||
max-width: 1454px;
|
||||
max-height: 700px;
|
||||
}
|
||||
|
||||
.navigationButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--Component-Button-Inverted-Fill-Default);
|
||||
color: var(--Component-Button-Inverted-On-fill-Default);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-width: 0;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 8px 1px #0000001a;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Component-Button-Inverted-Fill-Hover);
|
||||
color: var(--Component-Button-Inverted-On-fill-Hover);
|
||||
}
|
||||
}
|
||||
|
||||
.fullViewNextButton {
|
||||
right: var(--Space-x5);
|
||||
}
|
||||
|
||||
.fullViewPrevButton {
|
||||
left: var(--Space-x5);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
'use client'
|
||||
|
||||
import { AnimatePresence, motion } from 'motion/react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useIntl } from 'react-intl'
|
||||
|
||||
import Image from '../../Image'
|
||||
|
||||
import { IconButton } from '../../IconButton'
|
||||
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
||||
import { Typography } from '../../Typography'
|
||||
|
||||
import styles from './fullView.module.css'
|
||||
import { LightboxImage } from '../index'
|
||||
|
||||
type FullViewProps = {
|
||||
image: LightboxImage
|
||||
onClose: () => void
|
||||
onNext: () => void
|
||||
onPrev: () => void
|
||||
currentIndex: number
|
||||
totalImages: number
|
||||
hideLabel?: boolean
|
||||
}
|
||||
|
||||
export default function FullView({
|
||||
image,
|
||||
onClose,
|
||||
onNext,
|
||||
onPrev,
|
||||
currentIndex,
|
||||
totalImages,
|
||||
hideLabel,
|
||||
}: FullViewProps) {
|
||||
const intl = useIntl()
|
||||
const [animateLeft, setAnimateLeft] = useState(true)
|
||||
|
||||
function handleSwipe(offset: number) {
|
||||
if (offset > 30) onPrev()
|
||||
if (offset < -30) onNext()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
setAnimateLeft(true)
|
||||
onNext()
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
setAnimateLeft(false)
|
||||
onPrev()
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
handlePrev()
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
handleNext()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
})
|
||||
|
||||
const variants = {
|
||||
initial: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? 300 : -300,
|
||||
}),
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? -300 : 300,
|
||||
}),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.fullViewContainer}>
|
||||
<IconButton
|
||||
theme="Inverted"
|
||||
style="Muted"
|
||||
className={styles.closeButton}
|
||||
onPress={onClose}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: 'Close',
|
||||
})}
|
||||
>
|
||||
<MaterialIcon icon="close" color="CurrentColor" size={24} />
|
||||
</IconButton>
|
||||
<div className={styles.header}>
|
||||
<Typography variant="Tag/sm">
|
||||
<span className={styles.imageCount}>
|
||||
{`${currentIndex + 1} / ${totalImages}`}
|
||||
</span>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.imageContainer}>
|
||||
<AnimatePresence initial={false} custom={animateLeft}>
|
||||
<motion.div
|
||||
key={image.src}
|
||||
custom={animateLeft}
|
||||
variants={variants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.3 }}
|
||||
className={styles.imageWrapper}
|
||||
drag="x"
|
||||
onDragEnd={(_e, info) => handleSwipe(info.offset.x)}
|
||||
>
|
||||
{image.caption && !hideLabel ? (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p className={styles.imageCaption}>{image.caption}</p>
|
||||
</Typography>
|
||||
) : null}
|
||||
<Image
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="(min-width: 1500px) 1500px, 100vw"
|
||||
src={image.src}
|
||||
className={styles.image}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewPrevButton}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<MaterialIcon
|
||||
icon="arrow_back"
|
||||
color="CurrentColor"
|
||||
className={styles.leftTransformIcon}
|
||||
/>
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.fullViewNextButton}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
|
||||
</motion.button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
.galleryContainer {
|
||||
display: grid;
|
||||
gap: var(--Space-x2);
|
||||
padding: var(--Space-x2);
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: var(--Background-Primary);
|
||||
}
|
||||
|
||||
.mobileGallery {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--Space-x1);
|
||||
padding-bottom: var(--Space-x3);
|
||||
}
|
||||
|
||||
.thumbnailContainer {
|
||||
position: relative;
|
||||
height: 242px;
|
||||
}
|
||||
|
||||
.fullWidthImage {
|
||||
grid-column: 1 / -1;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.imageButton {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border-width: 0;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
border-radius: var(--Corner-radius-md);
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
|
||||
&:focus-visible {
|
||||
outline-offset: -2px; /* Adjust the outline offset as wrappers uses overflow-hidden */
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
object-fit: cover;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.closeButton .desktopCloseIcon,
|
||||
.desktopGallery {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.galleryContainer {
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
justify-self: start;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.mobileGallery,
|
||||
.closeButton .mobileCloseIcon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.galleryContainer {
|
||||
padding: var(--Spacing-x5) var(--Spacing-x6);
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: absolute;
|
||||
top: var(--Space-x2);
|
||||
right: var(--Space-x2);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.desktopGallery {
|
||||
display: grid;
|
||||
grid-template-rows: 28px 1fr 7.8125rem;
|
||||
row-gap: var(--Spacing-x-one-and-half);
|
||||
background-color: var(--Background-Primary);
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.galleryHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imageCaption {
|
||||
background-color: var(--Base-Surface-Subtle-Normal);
|
||||
padding: var(--Spacing-x-half) var(--Spacing-x1);
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
color: var(--Text-Secondary);
|
||||
}
|
||||
|
||||
.mainImageWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mainImageContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
will-change: transform;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.desktopThumbnailGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: var(--Spacing-x1);
|
||||
max-height: 7.8125rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.thumbnailContainer {
|
||||
height: 125px;
|
||||
}
|
||||
|
||||
.fullWidthImage {
|
||||
grid-column: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.thumbnailContainer img {
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
}
|
||||
|
||||
.navigationButton {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: var(--Component-Button-Inverted-Fill-Default);
|
||||
color: var(--Component-Button-Inverted-On-fill-Default);
|
||||
border-radius: var(--Corner-radius-rounded);
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
border-width: 0;
|
||||
display: flex;
|
||||
z-index: 1;
|
||||
box-shadow: 0px 0px 8px 1px #0000001a;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--Component-Button-Inverted-Fill-Hover);
|
||||
color: var(--Component-Button-Inverted-On-fill-Hover);
|
||||
}
|
||||
}
|
||||
|
||||
.galleryPrevButton {
|
||||
left: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.galleryNextButton {
|
||||
right: var(--Spacing-x2);
|
||||
}
|
||||
}
|
||||
226
packages/design-system/lib/components/Lightbox/Gallery/index.tsx
Normal file
226
packages/design-system/lib/components/Lightbox/Gallery/index.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
'use client'
|
||||
import { AnimatePresence, motion } from 'motion/react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Button as ButtonRAC } from 'react-aria-components'
|
||||
import { useIntl } from 'react-intl'
|
||||
|
||||
import { IconButton } from '../../IconButton'
|
||||
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
||||
import { Typography } from '../../Typography'
|
||||
|
||||
import Image from '../../Image'
|
||||
|
||||
import styles from './gallery.module.css'
|
||||
import { LightboxImage } from '..'
|
||||
|
||||
type GalleryProps = {
|
||||
images: LightboxImage[]
|
||||
onClose: () => void
|
||||
onSelectImage: (image: LightboxImage) => void
|
||||
onImageClick: () => void
|
||||
selectedImage: LightboxImage | null
|
||||
hideLabel?: boolean
|
||||
}
|
||||
|
||||
export default function Gallery({
|
||||
images,
|
||||
onClose,
|
||||
onSelectImage,
|
||||
onImageClick,
|
||||
selectedImage,
|
||||
hideLabel,
|
||||
}: GalleryProps) {
|
||||
const intl = useIntl()
|
||||
const [animateLeft, setAnimateLeft] = useState(true)
|
||||
const mainImage = selectedImage || images[0]
|
||||
const mainImageIndex = images.findIndex((img) => img === mainImage)
|
||||
|
||||
function getThumbImages() {
|
||||
const thumbs = []
|
||||
for (let i = 1; i <= Math.min(5, images.length); i++) {
|
||||
const index = (mainImageIndex + i) % images.length
|
||||
thumbs.push(images[index])
|
||||
}
|
||||
return thumbs
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
setAnimateLeft(true)
|
||||
const nextIndex = (mainImageIndex + 1) % images.length
|
||||
onSelectImage(images[nextIndex])
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
setAnimateLeft(false)
|
||||
const prevIndex = (mainImageIndex - 1 + images.length) % images.length
|
||||
onSelectImage(images[prevIndex])
|
||||
}
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'ArrowLeft') {
|
||||
handlePrev()
|
||||
} else if (e.key === 'ArrowRight') {
|
||||
handleNext()
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('keydown', handleKeyDown)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
})
|
||||
|
||||
const variants = {
|
||||
initial: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? 300 : -300,
|
||||
}),
|
||||
animate: { opacity: 1, x: 0 },
|
||||
exit: (animateLeft: boolean) => ({
|
||||
opacity: 0,
|
||||
x: animateLeft ? -300 : 300,
|
||||
}),
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.galleryContainer}>
|
||||
<IconButton
|
||||
theme="Black"
|
||||
style="Muted"
|
||||
className={styles.closeButton}
|
||||
onPress={onClose}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: 'Close',
|
||||
})}
|
||||
>
|
||||
<MaterialIcon
|
||||
icon="chevron_left"
|
||||
color="CurrentColor"
|
||||
size={24}
|
||||
className={styles.mobileCloseIcon}
|
||||
/>
|
||||
<MaterialIcon
|
||||
icon="close"
|
||||
color="CurrentColor"
|
||||
size={24}
|
||||
className={styles.desktopCloseIcon}
|
||||
/>
|
||||
</IconButton>
|
||||
|
||||
{/* Desktop Gallery */}
|
||||
<div className={styles.desktopGallery}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<p className={styles.galleryHeader}>
|
||||
{mainImage.caption && !hideLabel && (
|
||||
<span className={styles.imageCaption}>{mainImage.caption}</span>
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
<div className={styles.mainImageWrapper}>
|
||||
<AnimatePresence initial={false} custom={animateLeft}>
|
||||
<motion.div
|
||||
key={mainImage.src}
|
||||
className={styles.mainImageContainer}
|
||||
custom={animateLeft}
|
||||
variants={variants}
|
||||
initial="initial"
|
||||
animate="animate"
|
||||
exit="exit"
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<ButtonRAC
|
||||
onPress={onImageClick}
|
||||
className={styles.imageButton}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: 'Open image',
|
||||
})}
|
||||
>
|
||||
<Image
|
||||
src={mainImage.src}
|
||||
alt={mainImage.alt}
|
||||
fill
|
||||
sizes="(min-width: 1000px) 1000px, 100vw"
|
||||
className={styles.image}
|
||||
/>
|
||||
</ButtonRAC>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.galleryPrevButton}`}
|
||||
onClick={handlePrev}
|
||||
>
|
||||
<MaterialIcon icon="arrow_back" color="CurrentColor" />
|
||||
</motion.button>
|
||||
<motion.button
|
||||
className={`${styles.navigationButton} ${styles.galleryNextButton}`}
|
||||
onClick={handleNext}
|
||||
>
|
||||
<MaterialIcon icon="arrow_forward" color="CurrentColor" />
|
||||
</motion.button>
|
||||
</div>
|
||||
<div className={styles.desktopThumbnailGrid}>
|
||||
<AnimatePresence initial={false}>
|
||||
{getThumbImages().map((image, index) => (
|
||||
<motion.div
|
||||
key={image.smallSrc || image.src}
|
||||
className={styles.thumbnailContainer}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
exit={{ opacity: 0, x: -50 }}
|
||||
transition={{ duration: 0.2, delay: index * 0.05 }}
|
||||
>
|
||||
<ButtonRAC
|
||||
className={styles.imageButton}
|
||||
onPress={() => onSelectImage(image)}
|
||||
aria-label={intl.formatMessage({
|
||||
defaultMessage: 'Open image',
|
||||
})}
|
||||
>
|
||||
<Image
|
||||
src={image.smallSrc || image.src}
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="200px"
|
||||
className={styles.image}
|
||||
/>
|
||||
</ButtonRAC>
|
||||
</motion.div>
|
||||
))}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Gallery */}
|
||||
<div className={styles.mobileGallery}>
|
||||
{images.map((image, index) => (
|
||||
<motion.div
|
||||
key={image.smallSrc || image.src}
|
||||
className={`${styles.thumbnailContainer} ${index % 3 === 0 ? styles.fullWidthImage : ''}`}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.3, delay: index * 0.05 }}
|
||||
>
|
||||
<ButtonRAC
|
||||
className={styles.imageButton}
|
||||
aria-label={intl.formatMessage({ defaultMessage: 'Open image' })}
|
||||
onPress={() => {
|
||||
onSelectImage(image)
|
||||
onImageClick()
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={image.smallSrc || image.src}
|
||||
alt={image.alt}
|
||||
fill
|
||||
sizes="100vw"
|
||||
className={styles.image}
|
||||
/>
|
||||
</ButtonRAC>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
118
packages/design-system/lib/components/Lightbox/index.tsx
Normal file
118
packages/design-system/lib/components/Lightbox/index.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
'use client'
|
||||
import { AnimatePresence, motion } from 'motion/react'
|
||||
import { useEffect, useState } from 'react'
|
||||
import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
|
||||
|
||||
import FullView from './FullView'
|
||||
import Gallery from './Gallery'
|
||||
|
||||
import styles from './lightbox.module.css'
|
||||
|
||||
export type LightboxImage = {
|
||||
src: string
|
||||
alt: string
|
||||
caption?: string | null
|
||||
smallSrc?: string | null
|
||||
}
|
||||
|
||||
type LightboxProps = {
|
||||
images: LightboxImage[]
|
||||
dialogTitle: string /* Accessible title for dialog screen readers */
|
||||
onClose: () => void
|
||||
activeIndex?: number
|
||||
hideLabel?: boolean
|
||||
}
|
||||
|
||||
export default function Lightbox({
|
||||
images,
|
||||
dialogTitle,
|
||||
onClose,
|
||||
activeIndex = 0,
|
||||
hideLabel,
|
||||
}: LightboxProps) {
|
||||
const [selectedImageIndex, setSelectedImageIndex] = useState(activeIndex)
|
||||
const [isFullView, setIsFullView] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
setSelectedImageIndex(activeIndex)
|
||||
}, [activeIndex])
|
||||
|
||||
function handleClose() {
|
||||
setSelectedImageIndex(0)
|
||||
onClose()
|
||||
}
|
||||
|
||||
function handleNext() {
|
||||
setSelectedImageIndex((prevIndex) => (prevIndex + 1) % images.length)
|
||||
}
|
||||
|
||||
function handlePrev() {
|
||||
setSelectedImageIndex(
|
||||
(prevIndex) => (prevIndex - 1 + images.length) % images.length
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
function handlePopState() {
|
||||
handleClose()
|
||||
}
|
||||
|
||||
window.history.pushState(null, '', window.location.href)
|
||||
window.addEventListener('popstate', handlePopState)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('popstate', handlePopState)
|
||||
}
|
||||
/* eslint-disable-next-line react-hooks/exhaustive-deps */
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ModalOverlay
|
||||
isOpen={true}
|
||||
onOpenChange={handleClose}
|
||||
className={styles.overlay}
|
||||
isDismissable
|
||||
>
|
||||
<Modal>
|
||||
<AnimatePresence>
|
||||
<Dialog aria-label={dialogTitle}>
|
||||
<motion.div
|
||||
className={`${styles.content} ${
|
||||
isFullView ? styles.fullViewContent : styles.galleryContent
|
||||
}`}
|
||||
initial={{ opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
exit={{ opacity: 0, scale: 0.95 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
{isFullView ? (
|
||||
<FullView
|
||||
image={images[selectedImageIndex]}
|
||||
onClose={() => setIsFullView(false)}
|
||||
onNext={handleNext}
|
||||
onPrev={handlePrev}
|
||||
currentIndex={selectedImageIndex}
|
||||
totalImages={images.length}
|
||||
hideLabel={hideLabel}
|
||||
/>
|
||||
) : (
|
||||
<Gallery
|
||||
images={images}
|
||||
onClose={handleClose}
|
||||
onSelectImage={(image) => {
|
||||
setSelectedImageIndex(
|
||||
images.findIndex((img) => img === image)
|
||||
)
|
||||
}}
|
||||
onImageClick={() => setIsFullView(true)}
|
||||
selectedImage={images[selectedImageIndex]}
|
||||
hideLabel={hideLabel}
|
||||
/>
|
||||
)}
|
||||
</motion.div>
|
||||
</Dialog>
|
||||
</AnimatePresence>
|
||||
</Modal>
|
||||
</ModalOverlay>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: var(--lightbox-z-index);
|
||||
|
||||
&[data-entering] {
|
||||
animation: darken-background 0.2s;
|
||||
}
|
||||
|
||||
&[data-exiting] {
|
||||
animation: darken-background 0.2s reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: var(--lightbox-z-index);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.content {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
overflow: hidden;
|
||||
|
||||
&:not(.fullViewContent) {
|
||||
border-radius: var(--Corner-radius-lg);
|
||||
}
|
||||
|
||||
&.fullViewContent {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
&.galleryContent {
|
||||
width: min(var(--max-width-page), 1090px);
|
||||
height: min(725px, 85dvh);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes darken-background {
|
||||
from {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -29,6 +29,7 @@
|
||||
"./ImageFallback": "./lib/components/ImageFallback/index.tsx",
|
||||
"./Input": "./lib/components/Input/index.tsx",
|
||||
"./Label": "./lib/components/Label/index.tsx",
|
||||
"./Lightbox": "./lib/components/Lightbox/index.tsx",
|
||||
"./Link": "./lib/components/Link/index.tsx",
|
||||
"./OldDSButton": "./lib/components/OldDSButton/index.tsx",
|
||||
"./OpeningHours": "./lib/components/OpeningHours/index.tsx",
|
||||
|
||||
Reference in New Issue
Block a user