Sha256: 0568ae533cd6ce4996b45036b7be3e46eb0a8a41332ea61fcc12087b2eb1e7eb
Contents?: true
Size: 1.19 KB
Versions: 544
Compression:
Stored size: 1.19 KB
Contents
/* @flow */
import React from 'react'
import { noop } from 'lodash'
import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
import Image from '../../pb_image/_image'
type SlideType = {
alt?: string,
current?: number,
onClick: () => void,
onChange?: (index: number) => void,
onZoom: (zoom: boolean) => void,
zooming: boolean,
url: string,
}
export default function Slide({
alt,
onClick = noop,
onZoom = noop,
url,
zooming = false,
}: SlideType): React.ReactElement {
const handlePinchingStop = ({state}: {state: any}) => {
const isZooming = state.scale > 1
onZoom(isZooming)
}
return (
<TransformWrapper
doubleClick={{ mode: 'reset' }}
initialScale={1}
onPinchingStop={handlePinchingStop}
panning={{ disabled: !zooming }}
>
<button
className="Slide"
onClick={onClick}
onDoubleClick={() => onZoom(false)}
tabIndex={-1}
>
<TransformComponent wrapperClass="TransformComponent">
<Image
alt={alt}
url={url}
zIndex={3}
/>
</TransformComponent>
</button>
</TransformWrapper>
)
}
Version data entries
544 entries across 544 versions & 1 rubygems