File size: 2,164 Bytes
d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import React, { FC, ReactNode, useState } from "react"
export const LEFT_MOUSE_CLICK = 0
interface Props {
tooltip?: string
className?: string
prevent?: boolean
onClick?: (
e: React.TouchEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
touch: boolean
) => void
onMove?: (
e: React.TouchEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>,
touch: boolean
) => void
tabIndex?: number
onKey?: (key: string) => void
children?: ReactNode
}
const InteractionHandler: FC<Props> = ({
tooltip,
className,
prevent = true,
onClick,
onMove,
onKey,
tabIndex,
children,
}) => {
const [touched, setTouched] = useState(false)
const [touchedTime, setTouchedTime] = useState(0)
const touch = () => {
setTouched(true)
setTouchedTime(new Date().getTime())
setTimeout(() => {
if (new Date().getTime() - touchedTime > 150) {
setTouched(false)
}
}, 200)
}
return (
<div
data-tooltip-content={tooltip}
className={className}
tabIndex={tabIndex}
onTouchStart={(e) => {
touch()
if (onClick) {
if (prevent) {
console.log("Prevent default touch start")
e.preventDefault()
e.stopPropagation()
}
}
}}
onTouchEnd={(e) => {
touch()
if (onClick) {
if (prevent) {
console.log("Prevent default touch end")
e.preventDefault()
e.stopPropagation()
}
onClick(e, true)
}
}}
onTouchMove={(e) => {
if (onMove) {
onMove(e, true)
}
}}
onMouseDown={(_) => {
// ignored
}}
onMouseUp={(e) => {
if (e.button !== LEFT_MOUSE_CLICK || touched) {
return
}
if (onClick) {
onClick(e, false)
}
}}
onMouseMove={(e) => {
if (onMove) {
onMove(e, false)
}
}}
onKeyDownCapture={(e) => {
if (onKey) {
onKey(e.key)
}
}}
>
{children}
</div>
)
}
export default InteractionHandler
|