@@ -5,6 +5,7 @@ import ArrowRight from '@/svgs/arrow-right-line.svg'
5
5
import styles from './carousel.module.css'
6
6
import { useShowModal } from './modal'
7
7
import { Dropdown } from 'react-bootstrap'
8
+ import { useRouter } from 'next/router'
8
9
9
10
function useSwiping ( { moveLeft, moveRight } ) {
10
11
const [ touchStartX , setTouchStartX ] = useState ( null )
@@ -56,8 +57,16 @@ function useArrowKeys ({ moveLeft, moveRight }) {
56
57
export default function Carousel ( { close, mediaArr, src, originalSrc, setOptions } ) {
57
58
const [ index , setIndex ] = useState ( mediaArr . findIndex ( ( [ key ] ) => key === src ) )
58
59
const [ currentSrc , canGoLeft , canGoRight ] = useMemo ( ( ) => {
60
+ if ( index === - 1 ) return [ src , false , false ]
59
61
return [ mediaArr [ index ] [ 0 ] , index > 0 , index < mediaArr . length - 1 ]
60
- } , [ mediaArr , index ] )
62
+ } , [ mediaArr , index , src ] )
63
+
64
+ useEffect ( ( ) => {
65
+ if ( ! setOptions || ! mediaArr [ index ] ) return
66
+ setOptions ( {
67
+ overflow : < CarouselOverflow { ...mediaArr [ index ] [ 1 ] } />
68
+ } )
69
+ } , [ index , mediaArr , setOptions ] )
61
70
62
71
const moveLeft = useCallback ( ( ) => {
63
72
setIndex ( i => Math . max ( 0 , i - 1 ) )
@@ -106,15 +115,25 @@ function CarouselOverflow ({ originalSrc, rel }) {
106
115
export function CarouselProvider ( { children } ) {
107
116
const media = useRef ( new Map ( ) )
108
117
const showModal = useShowModal ( )
118
+ const router = useRouter ( )
109
119
110
120
const showCarousel = useCallback ( ( { src } ) => {
121
+ const url = router . asPath . split ( '#' ) [ 0 ]
122
+ if ( window . location . hash !== '#carousel' ) {
123
+ router . push ( url , url + '#carousel' , { shallow : true } )
124
+ }
111
125
showModal ( ( close , setOptions ) => {
112
126
return < Carousel close = { close } mediaArr = { Array . from ( media . current . entries ( ) ) } src = { src } setOptions = { setOptions } />
113
127
} , {
114
128
fullScreen : true ,
115
- overflow : < CarouselOverflow { ...media . current . get ( src ) } />
129
+ overflow : < CarouselOverflow { ...media . current . get ( src ) } /> ,
130
+ onClose : ( ) => {
131
+ if ( window . location . hash === '#carousel' ) {
132
+ router . back ( )
133
+ }
134
+ }
116
135
} )
117
- } , [ showModal , media . current ] )
136
+ } , [ showModal , media , router ] )
118
137
119
138
const addMedia = useCallback ( ( { src, originalSrc, rel } ) => {
120
139
media . current . set ( src , { src, originalSrc, rel } )
0 commit comments