swipe gesture for next/prev
This commit is contained in:
parent
0b9d04eff2
commit
b1e73752da
|
@ -54,11 +54,12 @@
|
|||
"tailwind-override": "^0.6.1",
|
||||
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
|
||||
"typescript": "^4.5.5",
|
||||
"react-swipeable": "^6.1.0",
|
||||
"url-join": "^4.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "BROWSER=none PORT=1234 craco start",
|
||||
"build": "craco build",
|
||||
"build": "HOST_TYPE=dev craco build",
|
||||
"test": "npm run lint && npm run jest -- --watchAll=false",
|
||||
"test:ci": "npm run lint && npm run jest:ci",
|
||||
"lint": "npm run lint:types & npm run lint:eslint",
|
||||
|
|
|
@ -3,6 +3,8 @@ import styled from 'styled-components'
|
|||
import { debounce, DebouncedFn } from '../../../helpers/utils'
|
||||
import { closePresentModeAction, GalleryAction } from '../photoGalleryReducer'
|
||||
|
||||
import { useSwipeable } from 'react-swipeable';
|
||||
|
||||
import ExitIcon from './icons/Exit'
|
||||
import NextIcon from './icons/Next'
|
||||
import PrevIcon from './icons/Previous'
|
||||
|
@ -93,14 +95,24 @@ const PresentNavigationOverlay = ({
|
|||
}
|
||||
}, [])
|
||||
|
||||
const handlers = useSwipeable({
|
||||
onSwipedLeft: () => dispatchMedia({ type: 'nextImage' }),
|
||||
onSwipedRight: () => dispatchMedia({ type: 'previousImage' }),
|
||||
preventDefaultTouchmoveEvent: false,
|
||||
trackMouse: false
|
||||
});
|
||||
|
||||
return (
|
||||
|
||||
<StyledOverlayContainer
|
||||
data-testid="present-overlay"
|
||||
onMouseMove={() => {
|
||||
onMouseMove.current && onMouseMove.current()
|
||||
}}
|
||||
>
|
||||
<div {...handlers} >
|
||||
{children}
|
||||
|
||||
<NavigationButton
|
||||
aria-label="Previous image"
|
||||
className={hide ? 'hide' : undefined}
|
||||
|
@ -130,7 +142,9 @@ const PresentNavigationOverlay = ({
|
|||
>
|
||||
<ExitIcon />
|
||||
</ExitButton>
|
||||
</div>
|
||||
</StyledOverlayContainer>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue