diff --git a/src/hooks/useTouchMove.ts b/src/hooks/useTouchMove.ts index f8073ede..db27f877 100644 --- a/src/hooks/useTouchMove.ts +++ b/src/hooks/useTouchMove.ts @@ -1,5 +1,7 @@ import * as React from 'react'; -import { useRef, useState } from 'react'; +import { useState, useRef } from 'react'; +import { getWheelDeltaOfPx } from '../util'; + type TouchEventHandler = (e: TouchEvent) => void; type WheelEventHandler = (e: WheelEvent) => void; @@ -79,7 +81,7 @@ export default function useTouchMove( const lastWheelDirectionRef = useRef<'x' | 'y'>(); function onWheel(e: WheelEvent) { - const { deltaX, deltaY } = e; + const [deltaX, deltaY] = getWheelDeltaOfPx(e); // Convert both to x & y since wheel only happened on PC let mixed: number = 0; diff --git a/src/util.ts b/src/util.ts index 0bb62373..871992c5 100644 --- a/src/util.ts +++ b/src/util.ts @@ -1,5 +1,4 @@ -import type React from 'react'; -import type { ReactNode } from 'react'; +import type { ReactNode, default as React } from 'react'; import type { EditableConfig } from './interface'; /** @@ -27,6 +26,21 @@ export function genDataNodeKey(key: React.Key): string { return String(key).replace(/"/g, RC_TABS_DOUBLE_QUOTE); } +export function isLineMode(event: WheelEvent) { + return event.deltaMode === WheelEvent.DOM_DELTA_LINE +} + +export function getWheelDeltaOfPx(event: WheelEvent) { + const { deltaX, deltaY } = event + const deltaXOfPx = isLineMode(event) + ? deltaX * 100 / 3 + : deltaX; + const deltaYOfPx = isLineMode(event) + ? deltaY * 100 / 3 + : deltaY; + return [deltaXOfPx, deltaYOfPx] +} + export function getRemovable( closable?: boolean, closeIcon?: ReactNode,