Skip to content

Commit

Permalink
refactor: RM opt of preventDefault logic (#338)
Browse files Browse the repository at this point in the history
* chore: Clean up prevent default

* chore: Rm alignInRange
  • Loading branch information
zombieJ authored Nov 25, 2020
1 parent 0eddc7a commit bbcd2fb
Show file tree
Hide file tree
Showing 2 changed files with 13 additions and 28 deletions.
26 changes: 11 additions & 15 deletions src/TabNavList/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import {
OnTabScroll,
TabBarExtraPosition,
TabBarExtraContent,
TabBarExtraMap
TabBarExtraMap,
} from '../interface';
import useOffsets from '../hooks/useOffsets';
import useVisibleRange from '../hooks/useVisibleRange';
Expand Down Expand Up @@ -48,7 +48,6 @@ export interface TabNavListProps {
children?: (node: React.ReactElement) => React.ReactElement;
}


interface ExtraContentProps {
position: TabBarExtraPosition;
prefixCls: string;
Expand Down Expand Up @@ -139,14 +138,14 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
transformMax = 0;
}

function alignInRange(value: number): [number, boolean] {
function alignInRange(value: number): number {
if (value < transformMin) {
return [transformMin, false];
return transformMin;
}
if (value > transformMax) {
return [transformMax, false];
return transformMax;
}
return [value, true];
return value;
}

// ========================= Mobile ========================
Expand All @@ -162,27 +161,24 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
}

useTouchMove(tabsWrapperRef, (offsetX, offsetY) => {
let preventDefault = false;

function doMove(setState: React.Dispatch<React.SetStateAction<number>>, offset: number) {
setState(value => {
const [newValue, needPrevent] = alignInRange(value + offset);
const newValue = alignInRange(value + offset);

preventDefault = needPrevent;
return newValue;
});
}

if (tabPositionTopOrBottom) {
// Skip scroll if place is enough
if (wrapperWidth >= wrapperScrollWidth) {
return preventDefault;
return false;
}

doMove(setTransformLeft, offsetX);
} else {
if (wrapperHeight >= wrapperScrollHeight) {
return preventDefault;
return false;
}

doMove(setTransformTop, offsetY);
Expand All @@ -191,7 +187,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
clearTouchMoving();
doLockAnimation();

return preventDefault;
return true;
});

useEffect(() => {
Expand Down Expand Up @@ -235,7 +231,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
}

setTransformTop(0);
setTransformLeft(alignInRange(newTransform)[0]);
setTransformLeft(alignInRange(newTransform));
} else {
// ============ Align with left & right ============
let newTransform = transformTop;
Expand All @@ -247,7 +243,7 @@ function TabNavList(props: TabNavListProps, ref: React.Ref<HTMLDivElement>) {
}

setTransformLeft(0);
setTransformTop(alignInRange(newTransform)[0]);
setTransformTop(alignInRange(newTransform));
}
}

Expand Down
15 changes: 2 additions & 13 deletions src/hooks/useTouchMove.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,12 +76,11 @@ export default function useTouchMove(
}

// >>> Wheel event
const lastWheelTimestampRef = useRef(0);
const lastWheelPreventRef = useRef(false);
const lastWheelDirectionRef = useRef<'x' | 'y'>();

function onWheel(e: WheelEvent) {
const { deltaX, deltaY } = e;

// Convert both to x & y since wheel only happened on PC
let mixed: number = 0;
const absX = Math.abs(deltaX);
Expand All @@ -96,19 +95,9 @@ export default function useTouchMove(
lastWheelDirectionRef.current = 'y';
}

// Optimize mac touch scroll
const now = Date.now();

if (now - lastWheelTimestampRef.current > 100) {
lastWheelPreventRef.current = false;
}

if (onOffset(-mixed, -mixed) || lastWheelPreventRef.current) {
if (onOffset(-mixed, -mixed)) {
e.preventDefault();
lastWheelPreventRef.current = true;
}

lastWheelTimestampRef.current = now;
}

// ========================= Effect =========================
Expand Down

1 comment on commit bbcd2fb

@vercel
Copy link

@vercel vercel bot commented on bbcd2fb Nov 25, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.