Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add mouseButton prop #2676

Merged
merged 44 commits into from
Jan 16, 2024
Merged
Show file tree
Hide file tree
Changes from 15 commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
cb67ac2
Remove context menu
m-bert Nov 17, 2023
bd3b6a9
Add prop
m-bert Nov 17, 2023
441c02c
Change enum order to match web
m-bert Nov 17, 2023
f82e08a
Change enum
m-bert Nov 17, 2023
6e1c651
Fix field in TouchEventManager
m-bert Nov 17, 2023
9731777
Implement logic on tap
m-bert Nov 17, 2023
edd5c2c
Add example
m-bert Nov 17, 2023
75f94b2
Merge branch 'main' into @mbert/web-right-click
m-bert Nov 20, 2023
eeb5ada
Change type
m-bert Nov 20, 2023
f414760
Another type change
m-bert Nov 20, 2023
fd7e0bb
Yet another type change
m-bert Nov 20, 2023
5373c13
change condition
m-bert Nov 20, 2023
0e2aaf8
Add check to other gestures
m-bert Nov 20, 2023
ecfcee2
Update example
m-bert Nov 20, 2023
6284ab3
Change View to ScrollView
m-bert Nov 20, 2023
64ff5d4
remove console.log
m-bert Nov 21, 2023
193e240
Change button names
m-bert Nov 21, 2023
0cbaebd
Change MouseButtons name in App
m-bert Nov 21, 2023
f77f453
Add MouseButton.ALL
m-bert Nov 21, 2023
09e11fd
Rename function
m-bert Nov 21, 2023
577724b
Merge branch 'main' into @mbert/web-right-click
m-bert Nov 21, 2023
7501737
Merge branch 'main' into @mbert/web-right-click
m-bert Nov 21, 2023
2d39d22
Merge branch 'main' into @mbert/web-right-click
m-bert Dec 6, 2023
ac10025
Merge branch 'main' into @mbert/web-right-click
m-bert Dec 14, 2023
7b660b4
Merge branch 'main' into @mbert/web-right-click
m-bert Dec 18, 2023
fbe82e2
Add enableContextMenu to builder
m-bert Dec 18, 2023
8f518b0
Merge branch 'main' into @mbert/web-right-click
m-bert Dec 19, 2023
0a1a18d
False now turns off context menu
m-bert Dec 19, 2023
1107e38
Move enableContextMenu to GestureDetector
m-bert Dec 19, 2023
6bd1c79
Add context menu example
m-bert Dec 20, 2023
19aa15b
Remove listeners on handler drop
m-bert Dec 20, 2023
063889e
Update example
m-bert Dec 20, 2023
5313243
Merge main
m-bert Jan 12, 2024
47e72e1
Merge branch 'main' into @mbert/web-right-click
m-bert Jan 15, 2024
60b8487
Change example
m-bert Jan 15, 2024
9ece9f9
Remove EnableContextMenu alias
m-bert Jan 15, 2024
2327174
Remove bounded listeners
m-bert Jan 15, 2024
1da7bfb
Remove finalize to onDestroy
m-bert Jan 15, 2024
26c4b3c
Restore default context menu blockade in LongPress
m-bert Jan 15, 2024
8279c90
Add destroy to WebDelegate
m-bert Jan 15, 2024
471002e
Restore bounded listeners
m-bert Jan 15, 2024
7432cdd
Revert "Restore bounded listeners"
m-bert Jan 15, 2024
c75fdb7
Change binding to this:void
m-bert Jan 15, 2024
f357411
Add destroy to delegate interface
m-bert Jan 16, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
import { TouchablesIndex, TouchableExample } from './release_tests/touchables';
import Rows from './release_tests/rows';
import Fling from './release_tests/fling';
import Buttons from './release_tests/mouseButtons';
m-bert marked this conversation as resolved.
Show resolved Hide resolved
import NestedTouchables from './release_tests/nestedTouchables';
import NestedButtons from './release_tests/nestedButtons';
import NestedGestureHandlerRootViewWithModal from './release_tests/nestedGHRootViewWithModal';
Expand Down Expand Up @@ -115,6 +116,7 @@
{ name: 'Fling', component: Fling },
{ name: 'Combo', component: ComboWithGHScroll },
{ name: 'Touchables', component: TouchablesIndex as React.ComponentType },
{ name: 'MouseButtons', component: Buttons },
],
},
{
Expand Down Expand Up @@ -197,7 +199,7 @@
renderSectionHeader={({ section: { sectionTitle } }) => (
<Text style={styles.sectionTitle}>{sectionTitle}</Text>
)}
ItemSeparatorComponent={() => <View style={styles.separator} />}

Check warning on line 202 in example/src/App.tsx

View workflow job for this annotation

GitHub Actions / check (example)

Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “MainScreen” and pass data as props. If you want to allow component creation in props, set allowAsProps option to true
/>
);
}
Expand Down
206 changes: 206 additions & 0 deletions example/src/release_tests/mouseButtons/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
import React from 'react';
import {
Gesture,
GestureDetector,
GestureType,
MouseButton,
Directions,
ScrollView,
} from 'react-native-gesture-handler';
import { StyleSheet, View, Text } from 'react-native';

type TestProps = {
name: string;
gestureHandlers: GestureType[];
};

function Test({ name, gestureHandlers }: TestProps) {
return (
<View style={[{ height: 300 }, styles.center]}>
<Text> {name} </Text>
<View style={{ flexDirection: 'row' }}>
<GestureDetector gesture={gestureHandlers[0]}>
<View style={styles.boxLeft} />
</GestureDetector>
<GestureDetector gesture={gestureHandlers[1]}>
<View style={styles.boxMiddle} />
</GestureDetector>
<GestureDetector gesture={gestureHandlers[2]}>
<View style={styles.boxRight} />
</GestureDetector>
</View>
<View style={{ flexDirection: 'row' }}>
<GestureDetector gesture={gestureHandlers[3]}>
<View style={styles.boxLeftRight} />
</GestureDetector>
<GestureDetector gesture={gestureHandlers[4]}>
<View style={styles.boxAll} />
</GestureDetector>
</View>
j-piasecki marked this conversation as resolved.
Show resolved Hide resolved
</View>
);
}

function TapTests() {
const leftTap = Gesture.Tap()
.mouseButton(MouseButton.LEFT)
.onEnd(() => console.log('Tap with left'));

const rightTap = Gesture.Tap()
.mouseButton(MouseButton.RIGHT)
.onEnd(() => console.log('Tap with right'));

const middleTap = Gesture.Tap()
.mouseButton(MouseButton.MIDDLE)
.onEnd(() => console.log('Tap with middle'));

const leftRightTap = Gesture.Tap()
.mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
.onEnd(() => console.log('Tap with left | right'));

const allTap = Gesture.Tap()
m-bert marked this conversation as resolved.
Show resolved Hide resolved
.mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
.onEnd(() => console.log('Tap with left | middle | right'));

const gestureHandlers = [leftTap, middleTap, rightTap, leftRightTap, allTap];

return <Test name={'Tap'} gestureHandlers={gestureHandlers} />;
}

function PanTests() {
const leftPan = Gesture.Pan()
.mouseButton(MouseButton.LEFT)
.onChange(() => console.log('Panning with left'));

const rightPan = Gesture.Pan()
.mouseButton(MouseButton.RIGHT)
.onChange(() => console.log('Panning with right'));

const middlePan = Gesture.Pan()
.mouseButton(MouseButton.MIDDLE)
.onChange(() => console.log('Panning with middle'));

const leftRightPan = Gesture.Pan()
.mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
.onChange(() => console.log('Panning with left | right'));

const allPan = Gesture.Pan()
.mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
.onChange(() => console.log('Panning with left | middle | right'));

const gestureHandlers = [leftPan, middlePan, rightPan, leftRightPan, allPan];

return <Test name={'Pan'} gestureHandlers={gestureHandlers} />;
}

function LongPressTests() {
const leftLongPress = Gesture.LongPress()
.mouseButton(MouseButton.LEFT)
.onStart(() => console.log('LongPress with left'));

const rightLongPress = Gesture.LongPress()
.mouseButton(MouseButton.RIGHT)
.onStart(() => console.log('LongPress with right'));

const middleLongPress = Gesture.LongPress()
.mouseButton(MouseButton.MIDDLE)
.onStart(() => console.log('LongPress with middle'));

const leftRightLongPress = Gesture.LongPress()
.mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
.onStart(() => console.log('LongPress with left | right'));

const allLongPress = Gesture.LongPress()
.mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
.onStart(() => console.log('LongPress with left | middle | right'));

const gestureHandlers = [
leftLongPress,
middleLongPress,
rightLongPress,
leftRightLongPress,
allLongPress,
];

return <Test name={'LongPress'} gestureHandlers={gestureHandlers} />;
}

function FlingTests() {
const leftFling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.mouseButton(MouseButton.LEFT)
.onStart(() => console.log('Fling with left'));

const rightFling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.mouseButton(MouseButton.RIGHT)
.onStart(() => console.log('Fling with right'));

const middleFling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.mouseButton(MouseButton.MIDDLE)
.onStart(() => console.log('Fling with middle'));

const leftRightFling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.mouseButton(MouseButton.LEFT | MouseButton.RIGHT)
.onStart(() => console.log('Fling with left | right'));

const allFling = Gesture.Fling()
.direction(Directions.LEFT | Directions.RIGHT)
.mouseButton(MouseButton.LEFT | MouseButton.MIDDLE | MouseButton.RIGHT)
.onStart(() => console.log('Fling with left | middle | right'));

const gestureHandlers = [
leftFling,
middleFling,
rightFling,
leftRightFling,
allFling,
];

return <Test name={'Fling'} gestureHandlers={gestureHandlers} />;
}

export default function Buttons() {
return (
<ScrollView style={{ flex: 1 }}>
<TapTests />
<PanTests />
<LongPressTests />
<FlingTests />
</ScrollView>
);
}

const styles = StyleSheet.create({
center: {
alignItems: 'center',
justifyContent: 'space-around',
},
boxLeft: {
width: 100,
height: 100,
j-piasecki marked this conversation as resolved.
Show resolved Hide resolved
backgroundColor: 'darkmagenta',
},
boxRight: {
width: 100,
height: 100,
backgroundColor: 'darkblue',
},
boxMiddle: {
width: 100,
height: 100,
backgroundColor: 'darkgreen',
},
boxLeftRight: {
width: 100,
height: 100,
backgroundColor: 'crimson',
},
boxAll: {
width: 100,
height: 100,
backgroundColor: 'plum',
},
});
3 changes: 3 additions & 0 deletions src/handlers/gestureHandlerCommon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { handlerIDToTag } from './handlersRegistry';
import { toArray } from '../utils';
import RNGestureHandlerModule from '../RNGestureHandlerModule';
import { ghQueueMicrotask } from '../ghQueueMicrotask';
import { MouseButton } from '../web/interfaces';

const commonProps = [
'id',
Expand All @@ -21,6 +22,7 @@ const commonProps = [
'cancelsTouchesInView',
'userSelect',
'activeCursor',
'mouseButton',
] as const;

const componentInteractionProps = ['waitFor', 'simultaneousHandlers'] as const;
Expand Down Expand Up @@ -145,6 +147,7 @@ export type CommonGestureConfig = {
hitSlop?: HitSlop;
userSelect?: UserSelect;
activeCursor?: ActiveCursor;
mouseButton?: MouseButton;
};

// Events payloads are types instead of interfaces due to TS limitation.
Expand Down
6 changes: 6 additions & 0 deletions src/handlers/gestures/gesture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { RotationGestureHandlerEventPayload } from '../RotationGestureHandler';
import { TapGestureHandlerEventPayload } from '../TapGestureHandler';
import { NativeViewGestureHandlerPayload } from '../NativeViewGestureHandler';
import { isRemoteDebuggingEnabled } from '../../utils';
import { MouseButton } from '../../web/interfaces';

export type GestureType =
| BaseGesture<Record<string, unknown>>
Expand Down Expand Up @@ -256,6 +257,11 @@ export abstract class BaseGesture<
return this;
}

mouseButton(mouseButton: MouseButton) {
this.config.mouseButton = mouseButton;
return this;
}

runOnJS(runOnJS: boolean) {
this.config.runOnJS = runOnJS;
return this;
Expand Down
1 change: 1 addition & 0 deletions src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { initialize } from './init';

export { Directions } from './Directions';
export { State } from './State';
export { MouseButton } from './web/interfaces';
export { default as gestureHandlerRootHOC } from './components/gestureHandlerRootHOC';
export { default as GestureHandlerRootView } from './components/GestureHandlerRootView';
export type {
Expand Down
8 changes: 7 additions & 1 deletion src/web/handlers/FlingGestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { AdaptedEvent, Config } from '../interfaces';
import GestureHandler from './GestureHandler';

const DEFAULT_MAX_DURATION_MS = 800;
const DEFAULT_MIN_ACCEPTABLE_DELTA = 160;
const DEFAULT_MIN_ACCEPTABLE_DELTA = 35;
const DEFAULT_DIRECTION = Direction.RIGHT;
const DEFAULT_NUMBER_OF_TOUCHES_REQUIRED = 1;

Expand Down Expand Up @@ -51,6 +51,8 @@ export default class FlingGestureHandler extends GestureHandler {
}

private tryEndFling(): boolean {
console.log(this.tracker.getLastAvgX(), this.startX);
m-bert marked this conversation as resolved.
Show resolved Hide resolved

if (
this.maxNumberOfPointersSimultaneously ===
this.numberOfPointersRequired &&
Expand Down Expand Up @@ -83,6 +85,10 @@ export default class FlingGestureHandler extends GestureHandler {
}

protected onPointerDown(event: AdaptedEvent): void {
if (!this.wasPressedButtonCorrect(event.button)) {
return;
}

this.tracker.addToTracker(event);
this.keyPointer = event.pointerId;

Expand Down
9 changes: 9 additions & 0 deletions src/web/handlers/GestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
PointerType,
TouchEventType,
EventTypes,
MouseButton,
} from '../interfaces';
import EventManager from '../tools/EventManager';
import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
Expand Down Expand Up @@ -736,6 +737,14 @@ export default abstract class GestureHandler {
return false;
}

protected wasPressedButtonCorrect(mouseButton: MouseButton | undefined) {
m-bert marked this conversation as resolved.
Show resolved Hide resolved
return (
!mouseButton ||
m-bert marked this conversation as resolved.
Show resolved Hide resolved
(!this.config.mouseButton && mouseButton === MouseButton.LEFT) ||
(this.config.mouseButton && mouseButton & this.config.mouseButton)
);
}

protected resetConfig(): void {}

//
Expand Down
9 changes: 4 additions & 5 deletions src/web/handlers/LongPressGestureHandler.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { Platform } from 'react-native';
import { State } from '../../State';
import { AdaptedEvent, Config } from '../interfaces';

Expand All @@ -23,10 +22,6 @@ export default class LongPressGestureHandler extends GestureHandler {

public init(ref: number, propsRef: React.RefObject<unknown>) {
super.init(ref, propsRef);

if (Platform.OS === 'web') {
(this.delegate.getView() as HTMLElement).oncontextmenu = () => false;
}
}
j-piasecki marked this conversation as resolved.
Show resolved Hide resolved

protected transformNativeEvent() {
Expand Down Expand Up @@ -59,6 +54,10 @@ export default class LongPressGestureHandler extends GestureHandler {
}

protected onPointerDown(event: AdaptedEvent): void {
if (!this.wasPressedButtonCorrect(event.button)) {
return;
}

this.tracker.addToTracker(event);
super.onPointerDown(event);
this.tryBegin(event);
Expand Down
4 changes: 4 additions & 0 deletions src/web/handlers/PanGestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,10 @@ export default class PanGestureHandler extends GestureHandler {

//EventsHandling
protected onPointerDown(event: AdaptedEvent): void {
if (!this.wasPressedButtonCorrect(event.button)) {
return;
}

this.tracker.addToTracker(event);
super.onPointerDown(event);

Expand Down
4 changes: 4 additions & 0 deletions src/web/handlers/TapGestureHandler.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,10 @@ export default class TapGestureHandler extends GestureHandler {

//Handling Events
protected onPointerDown(event: AdaptedEvent): void {
if (!this.wasPressedButtonCorrect(event.button)) {
return;
}

this.tracker.addToTracker(event);
super.onPointerDown(event);

Expand Down
Loading
Loading