Fix hover scrubber error in Firefox (#5243)

This commit is contained in:
WithoutPants
2024-09-11 11:50:40 +10:00
committed by GitHub
parent 5407596e0d
commit b897de3e5e

View File

@@ -1,6 +1,9 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import cx from "classnames"; import cx from "classnames";
// #5231: TouchEvent is not defined on all browsers
const touchEventDefined = window.TouchEvent !== undefined;
interface IHoverScrubber { interface IHoverScrubber {
totalSprites: number; totalSprites: number;
activeIndex: number | undefined; activeIndex: number | undefined;
@@ -24,7 +27,7 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
let x = 0; let x = 0;
if (e.nativeEvent instanceof MouseEvent) { if (e.nativeEvent instanceof MouseEvent) {
x = e.nativeEvent.offsetX; x = e.nativeEvent.offsetX;
} else if (e.nativeEvent instanceof TouchEvent) { } else if (touchEventDefined && e.nativeEvent instanceof TouchEvent) {
x = x =
e.nativeEvent.touches[0].clientX - e.nativeEvent.touches[0].clientX -
e.currentTarget.getBoundingClientRect().x; e.currentTarget.getBoundingClientRect().x;
@@ -47,7 +50,8 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
if ( if (
(e instanceof MouseEvent && relatedTarget !== e.target) || (e instanceof MouseEvent && relatedTarget !== e.target) ||
(e instanceof TouchEvent && (touchEventDefined &&
e instanceof TouchEvent &&
document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)) document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
) )
return; return;
@@ -70,7 +74,8 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
if ( if (
(e instanceof MouseEvent && relatedTarget !== e.target) || (e instanceof MouseEvent && relatedTarget !== e.target) ||
(e instanceof TouchEvent && (touchEventDefined &&
e instanceof TouchEvent &&
document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)) document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
) )
return; return;