Extend swipe functionality.
This commit is contained in:
parent
1a05b353e6
commit
6ca16fae77
|
@ -96,10 +96,17 @@ const PresentNavigationOverlay = ({
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const handlers = useSwipeable({
|
const handlers = useSwipeable({
|
||||||
|
onSwipedDown: () => {
|
||||||
|
if (disableSaveCloseInHistory === true) {
|
||||||
|
dispatchMedia({ type: 'closePresentMode' })
|
||||||
|
} else {
|
||||||
|
closePresentModeAction({ dispatchMedia })
|
||||||
|
}
|
||||||
|
},
|
||||||
onSwipedLeft: () => dispatchMedia({ type: 'nextImage' }),
|
onSwipedLeft: () => dispatchMedia({ type: 'nextImage' }),
|
||||||
onSwipedRight: () => dispatchMedia({ type: 'previousImage' }),
|
onSwipedRight: () => dispatchMedia({ type: 'previousImage' }),
|
||||||
preventScrollOnSwipe: false,
|
preventScrollOnSwipe: false,
|
||||||
trackMouse: false,
|
trackMouse: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -109,38 +116,38 @@ const PresentNavigationOverlay = ({
|
||||||
onMouseMove.current && onMouseMove.current()
|
onMouseMove.current && onMouseMove.current()
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div {...handlers}>
|
<div {...handlers} data-testid="swipe-component">
|
||||||
{children}
|
{children}
|
||||||
<NavigationButton
|
<NavigationButton
|
||||||
aria-label="Previous image"
|
aria-label="Previous image"
|
||||||
className={hide ? 'hide' : undefined}
|
className={hide ? 'hide' : undefined}
|
||||||
align="left"
|
align="left"
|
||||||
onClick={() => dispatchMedia({ type: 'previousImage' })}
|
onClick={() => dispatchMedia({ type: 'previousImage' })}
|
||||||
>
|
>
|
||||||
<PrevIcon />
|
<PrevIcon />
|
||||||
</NavigationButton>
|
</NavigationButton>
|
||||||
<NavigationButton
|
<NavigationButton
|
||||||
aria-label="Next image"
|
aria-label="Next image"
|
||||||
className={hide ? 'hide' : undefined}
|
className={hide ? 'hide' : undefined}
|
||||||
align="right"
|
align="right"
|
||||||
onClick={() => dispatchMedia({ type: 'nextImage' })}
|
onClick={() => dispatchMedia({ type: 'nextImage' })}
|
||||||
>
|
>
|
||||||
<NextIcon />
|
<NextIcon />
|
||||||
</NavigationButton>
|
</NavigationButton>
|
||||||
<ExitButton
|
<ExitButton
|
||||||
aria-label="Exit presentation mode"
|
aria-label="Exit presentation mode"
|
||||||
className={hide ? 'hide' : undefined}
|
className={hide ? 'hide' : undefined}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
if (disableSaveCloseInHistory === true) {
|
if (disableSaveCloseInHistory === true) {
|
||||||
dispatchMedia({ type: 'closePresentMode' })
|
dispatchMedia({ type: 'closePresentMode' })
|
||||||
} else {
|
} else {
|
||||||
closePresentModeAction({ dispatchMedia })
|
closePresentModeAction({ dispatchMedia })
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<ExitIcon />
|
<ExitIcon />
|
||||||
</ExitButton>
|
</ExitButton>
|
||||||
</div>
|
</div>
|
||||||
</StyledOverlayContainer>
|
</StyledOverlayContainer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue