ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix carousel dropdown (#2326)

Browse Source 
Co-authored-by: brymut <mutaiwork@gmail.com>
This commit is contained in:
ekzyis 2025-07-24 21:18:19 +02:00 committed by GitHub
parent 9e2c35c641
commit 0155946d74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/carousel.js
View File

@ -53,12 +53,19 @@ function useArrowKeys ({ moveLeft, moveRight }) {
}, [onKeyDown]) }, [onKeyDown])
} }
function Carousel ({ close, mediaArr, src }) { function Carousel ({ close, mediaArr, src, setOptions }) {
const [index, setIndex] = useState(mediaArr.findIndex(([key]) => key === src)) const [index, setIndex] = useState(mediaArr.findIndex(([key]) => key === src))
const [currentSrc, canGoLeft, canGoRight] = useMemo(() => { const [currentSrc, canGoLeft, canGoRight] = useMemo(() => {
return [mediaArr[index][0], index > 0, index < mediaArr.length - 1] return [mediaArr[index][0], index > 0, index < mediaArr.length - 1]
}, [mediaArr, index]) }, [mediaArr, index])
useEffect(() => {
if (index === -1) return
setOptions({
overflow: <CarouselOverflow {...mediaArr[index][1]} />
})
}, [index, mediaArr, setOptions])
const moveLeft = useCallback(() => { const moveLeft = useCallback(() => {
setIndex(i => Math.max(0, i - 1)) setIndex(i => Math.max(0, i - 1))
}, [setIndex]) }, [setIndex])
@ -108,8 +115,8 @@ export function CarouselProvider ({ children }) {
const showModal = useShowModal() const showModal = useShowModal()
const showCarousel = useCallback(({ src }) => { const showCarousel = useCallback(({ src }) => {
showModal((close) => { showModal((close, setOptions) => {
return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} /> return <Carousel close={close} mediaArr={Array.from(media.current.entries())} src={src} setOptions={setOptions} />
}, { }, {
fullScreen: true, fullScreen: true,
overflow: <CarouselOverflow {...media.current.get(src)} /> overflow: <CarouselOverflow {...media.current.get(src)} />