Skip to content

[Flare] Press includes button type #16100

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.

Sign up for GitHub

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

Merged
merged 1 commit into from
Jul 10, 2019
Merged

[Flare] Press includes button type #16100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
17 changes: 13 additions & 4 deletions packages/react-events/src/dom/Press.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ type PressEventType =
| 'contextmenu';

type PressEvent = {|
button: 'primary' | 'auxillary',
defaultPrevented: boolean,
target: Element | Document,
type: PressEventType,
Expand Down Expand Up @@ -165,6 +166,7 @@ function createPressEvent(
defaultPrevented: boolean,
): PressEvent {
const timeStamp = context.getTimeStamp();
let button = 'primary';
let clientX = null;
let clientY = null;
let pageX = null;
Expand All @@ -186,8 +188,12 @@ function createPressEvent(
if (eventObject) {
({clientX, clientY, pageX, pageY, screenX, screenY} = eventObject);
}
if (nativeEvent.button === 1) {
button = 'auxillary';
}
}
return {
button,
defaultPrevented,
target,
type,
Expand Down Expand Up @@ -706,11 +712,11 @@ const PressResponder: ReactDOMEventResponder = {
state.activePointerId = touchEvent.identifier;
}

// Ignore any device buttons except left-mouse and touch/pen contact.
// Additionally we ignore left-mouse + ctrl-key with Macs as that
// Ignore any device buttons except primary/auxillary and touch/pen contact.
// Additionally we ignore primary-button + ctrl-key with Macs as that
// acts like right-click and opens the contextmenu.
if (
nativeEvent.button > 0 ||
nativeEvent.button > 1 ||
(isMac && isMouseEvent && nativeEvent.ctrlKey)
) {
return;
Expand Down Expand Up @@ -962,7 +968,10 @@ const PressResponder: ReactDOMEventResponder = {
state,
);
}
if (state.isPressWithinResponderRegion) {
if (
state.isPressWithinResponderRegion &&
nativeEvent.button !== 1
Copy link
Contributor

@trueadm trueadm Jul 10, 2019

Choose a reason for hiding this comment

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

Can we hoist button out and re-use it for both conditions?

) {
if (
!(
wasLongPressed &&
Expand Down
65 changes: 63 additions & 2 deletions packages/react-events/src/dom/__tests__/Press-test.internal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,15 +136,28 @@ describe('Event responder: Press', () => {
);
});

it('is called after auxillary-button "pointerdown" event', () => {
ref.current.dispatchEvent(
createEvent('pointerdown', {button: 1, pointerType: 'mouse'}),
);
expect(onPressStart).toHaveBeenCalledTimes(1);
expect(onPressStart).toHaveBeenCalledWith(
expect.objectContaining({
button: 'auxillary',
pointerType: 'mouse',
type: 'pressstart',
}),
);
});

it('ignores browser emulated events', () => {
ref.current.dispatchEvent(createEvent('pointerdown'));
ref.current.dispatchEvent(createEvent('touchstart'));
ref.current.dispatchEvent(createEvent('mousedown'));
expect(onPressStart).toHaveBeenCalledTimes(1);
});

it('ignores any events not caused by left-click or touch/pen contact', () => {
ref.current.dispatchEvent(createEvent('pointerdown', {button: 1}));
it('ignores any events not caused by primary/auxillary-click or touch/pen contact', () => {
ref.current.dispatchEvent(createEvent('pointerdown', {button: 5}));
ref.current.dispatchEvent(createEvent('mousedown', {button: 2}));
expect(onPressStart).toHaveBeenCalledTimes(0);
Expand Down Expand Up @@ -330,6 +343,23 @@ describe('Event responder: Press', () => {
);
});

it('is called after auxillary-button "pointerup" event', () => {
ref.current.dispatchEvent(
createEvent('pointerdown', {button: 1, pointerType: 'mouse'}),
);
ref.current.dispatchEvent(
createEvent('pointerup', {button: 1, pointerType: 'mouse'}),
);
expect(onPressEnd).toHaveBeenCalledTimes(1);
expect(onPressEnd).toHaveBeenCalledWith(
expect.objectContaining({
button: 'auxillary',
pointerType: 'mouse',
type: 'pressend',
}),
);
});

it('ignores browser emulated events', () => {
ref.current.dispatchEvent(
createEvent('pointerdown', {pointerType: 'touch'}),
Expand Down Expand Up @@ -664,6 +694,21 @@ describe('Event responder: Press', () => {
);
});

it('is not called after auxillary-button press', () => {
const element = (
<Press onPress={onPress}>
<div ref={ref} />
</Press>
);
ReactDOM.render(element, container);

ref.current.dispatchEvent(createEvent('pointerdown', {button: 1}));
ref.current.dispatchEvent(
createEvent('pointerup', {button: 1, clientX: 10, clientY: 10}),
);
expect(onPress).not.toHaveBeenCalled();
});

it('is called after valid "keyup" event', () => {
ref.current.dispatchEvent(createKeyboardEvent('keydown', {key: 'Enter'}));
ref.current.dispatchEvent(createKeyboardEvent('keyup', {key: 'Enter'}));
Expand Down Expand Up @@ -709,6 +754,22 @@ describe('Event responder: Press', () => {
expect(onPress).toHaveBeenCalledTimes(1);
});

it('is called with modifier keys', () => {
ref.current.dispatchEvent(
createEvent('pointerdown', {metaKey: true, pointerType: 'mouse'}),
);
ref.current.dispatchEvent(
createEvent('pointerup', {metaKey: true, pointerType: 'mouse'}),
);
expect(onPress).toHaveBeenCalledWith(
expect.objectContaining({
pointerType: 'mouse',
type: 'press',
metaKey: true,
}),
);
});

// No PointerEvent fallbacks
// TODO: jsdom missing APIs
// it('is called after "touchend" event', () => {
Expand Down