@samitouri / QOS-React-2 / commits / 1912b4a0f1

[Flare] Remove delay props from Press (#16247)

Moving working with delays into user-space.

Nicolas Gallagher committed Jul 30, 2019 at 09:29 UTC 1912b4a0f1dc68e8f39978b9bac48d7f77b2b97c

3 files changed +33 -697

packages/react-events/docs/Press.md

+4 -20

@@ -74,17 +74,6 @@ type PressOffset = {

75 ## Props

77 -### delayPressEnd: number

78 -

79 -The duration of the delay between when the press ends and when `onPressEnd` is

80 -called.

81 -

82 -### delayPressStart: number

83 -

84 -The duration of a delay between when the press starts and when `onPressStart` is

85 -called. This delay is cut short (and `onPressStart` is called) if the press is

86 -released before the threshold is exceeded.

87 -

77 ### disabled: boolean = false

79 Disables all `Press` events.

@@ -107,21 +96,16 @@ Called when the element changes press state (i.e., after `onPressStart` and

96 ### onPressEnd: (e: PressEvent) => void

98 Called once the element is no longer pressed (because the press was released,

110 -cancelled, or moved beyond the hit bounds). If the press starts again before the

111 -`delayPressEnd` threshold is exceeded then the delay is reset to prevent

112 -`onPressEnd` being called during a press.

99 +cancelled, or moved beyond the hit bounds).

100

101 ### onPressMove: (e: PressEvent) => void

102

116 -Called when a press moves within the hit bounds of the element. `onPressMove` is

117 -called immediately and doesn't wait for delayed `onPressStart`. Never called for

103 +Called when a press moves within the hit bounds of the element. Never called for

104 keyboard-initiated press events.

105

106 ### onPressStart: (e: PressEvent) => void

107

122 -Called once the element is pressed down. If the press is released before the

123 -`delayPressStart` threshold is exceeded then the delay is cut short and

124 -`onPressStart` is called immediately.

108 +Called once the element is pressed down.

109

110 ### pressRetentionOffset: PressOffset

111

@@ -142,4 +126,4 @@ Whether to `preventDefault()` native events. Native behavior is prevented by

126 default. If an anchor is the child of `Press`, internal and external navigation

127 should be performed in `onPress`. To rely on native behavior instead, set

128 `preventDefault` to `false`, but be aware that native behavior will take place

145 -immediately after interaction without respect for delays or long press.

129 +immediately after interaction.

packages/react-events/src/dom/Press.js

+26 -89

@@ -28,8 +28,6 @@ type PressListenerProps = {|

29 type PressProps = {|

30 disabled: boolean,

31 - delayPressEnd: number,

32 - delayPressStart: number,

31 pressRetentionOffset: {

32 top: number,

33 right: number,

@@ -53,7 +51,6 @@ type PressState = {

51 isPressWithinResponderRegion: boolean,

52 pointerType: PointerType,

53 pressTarget: null | Element | Document,

56 - pressEndTimeout: null | number,

54 pressStartTimeout: null | number,

55 responderRegionOnActivation: null | $ReadOnly<{|

56 bottom: number,

@@ -106,8 +103,6 @@ const isMac =

103 typeof window !== 'undefined' && window.navigator != null

104 ? /^Mac/.test(window.navigator.platform)

105 : false;

109 -const DEFAULT_PRESS_END_DELAY_MS = 0;

110 -const DEFAULT_PRESS_START_DELAY_MS = 0;

106 const DEFAULT_PRESS_RETENTION_OFFSET = {

107 bottom: 20,

108 top: 20,

@@ -240,35 +235,6 @@ function dispatchPressChangeEvent(

235 context.dispatchEvent('onPressChange', bool, DiscreteEvent);

236 }

237

243 -function activate(event: ReactDOMResponderEvent, context, props, state) {

244 - const nativeEvent: any = event.nativeEvent;

245 - const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;

246 - const wasActivePressed = state.isActivePressed;

247 - state.isActivePressed = true;

248 - if (x !== undefined && y !== undefined) {

249 - state.activationPosition = {x, y};

250 - }

251 -

252 - dispatchEvent(

253 - 'onPressStart',

254 - event,

255 - context,

256 - state,

257 - 'pressstart',

258 - DiscreteEvent,

259 - );

260 - if (!wasActivePressed) {

261 - dispatchPressChangeEvent(context, state);

262 - }

263 -}

264 -

265 -function deactivate(event: ?ReactDOMResponderEvent, context, props, state) {

266 - state.isActivePressed = false;

267 -

268 - dispatchEvent('onPressEnd', event, context, state, 'pressend', DiscreteEvent);

269 - dispatchPressChangeEvent(context, state);

270 -}

271 -

238 function dispatchPressStartEvents(

239 event: ReactDOMResponderEvent,

240 context: ReactDOMResponderContext,

@@ -277,29 +243,26 @@ function dispatchPressStartEvents(

243 ): void {

244 state.isPressed = true;

245

280 - if (state.pressEndTimeout !== null) {

281 - context.clearTimeout(state.pressEndTimeout);

282 - state.pressEndTimeout = null;

283 - }

284 -

285 - const dispatch = () => {

246 + if (!state.isActivePressStart) {

247 state.isActivePressStart = true;

287 - activate(event, context, props, state);

288 - };

248 + const nativeEvent: any = event.nativeEvent;

249 + const {clientX: x, clientY: y} = state.touchEvent || nativeEvent;

250 + const wasActivePressed = state.isActivePressed;

251 + state.isActivePressed = true;

252 + if (x !== undefined && y !== undefined) {

253 + state.activationPosition = {x, y};

254 + }

255

290 - if (!state.isActivePressStart) {

291 - const delayPressStart = calculateDelayMS(

292 - props.delayPressStart,

293 - 0,

294 - DEFAULT_PRESS_START_DELAY_MS,

256 + dispatchEvent(

257 + 'onPressStart',

258 + event,

259 + context,

260 + state,

261 + 'pressstart',

262 + DiscreteEvent,

263 );

296 - if (delayPressStart > 0) {

297 - state.pressStartTimeout = context.setTimeout(() => {

298 - state.pressStartTimeout = null;

299 - dispatch();

300 - }, delayPressStart);

301 - } else {

302 - dispatch();

264 + if (!wasActivePressed) {

265 + dispatchPressChangeEvent(context, state);

266 }

267 }

268 }

@@ -310,40 +273,20 @@ function dispatchPressEndEvents(

273 props: PressProps,

274 state: PressState,

275 ): void {

313 - const wasActivePressStart = state.isActivePressStart;

314 - let activationWasForced = false;

315 -

276 state.isActivePressStart = false;

277 state.isPressed = false;

278

319 - if (!wasActivePressStart && state.pressStartTimeout !== null) {

320 - context.clearTimeout(state.pressStartTimeout);

321 - state.pressStartTimeout = null;

322 - // don't activate if a press has moved beyond the responder region

323 - if (state.isPressWithinResponderRegion && event != null) {

324 - // if we haven't yet activated (due to delays), activate now

325 - activate(event, context, props, state);

326 - activationWasForced = true;

327 - }

328 - }

329 -

279 if (state.isActivePressed) {

331 - const delayPressEnd = calculateDelayMS(

332 - props.delayPressEnd,

333 - // if activation and deactivation occur during the same event there's no

334 - // time for visual user feedback therefore a small delay is added before

335 - // deactivating.

336 - activationWasForced ? 10 : 0,

337 - DEFAULT_PRESS_END_DELAY_MS,

280 + state.isActivePressed = false;

281 + dispatchEvent(

282 + 'onPressEnd',

283 + event,

284 + context,

285 + state,

286 + 'pressend',

287 + DiscreteEvent,

288 );

339 - if (delayPressEnd > 0) {

340 - state.pressEndTimeout = context.setTimeout(() => {

341 - state.pressEndTimeout = null;

342 - deactivate(event, context, props, state);

343 - }, delayPressEnd);

344 - } else {

345 - deactivate(event, context, props, state);

346 - }

289 + dispatchPressChangeEvent(context, state);

290 }

291

292 state.responderRegionOnDeactivation = null;

@@ -380,11 +323,6 @@ function isValidKeyboardEvent(nativeEvent: Object): boolean {

323 );

324 }

325

383 -function calculateDelayMS(delay: ?number, min = 0, fallback = 0) {

384 - const maybeNumber = delay == null ? null : delay;

385 - return Math.max(min, maybeNumber != null ? maybeNumber : fallback);

386 -}

387 -

326 // TODO: account for touch hit slop

327 function calculateResponderRegion(

328 context: ReactDOMResponderContext,

@@ -550,7 +488,6 @@ const pressResponderImpl = {

488 isPressed: false,

489 isPressWithinResponderRegion: true,

490 pointerType: '',

553 - pressEndTimeout: null,

491 pressStartTimeout: null,

492 pressTarget: null,

493 responderRegionOnActivation: null,

packages/react-events/src/dom/__tests__/Press-test.internal.js

+3 -588

@@ -16,8 +16,6 @@ let PressResponder;

16 let usePressListener;

17 let Scheduler;

19 -const DEFAULT_LONG_PRESS_DELAY = 500;

20 -

19 const createEvent = (type, data) => {

20 const event = document.createEvent('CustomEvent');

21 event.initCustomEvent(type, true, true);

@@ -262,129 +260,6 @@ describe('Event responder: Press', () => {

260 expect.objectContaining({pointerType: 'touch', type: 'pressstart'}),

261 );

262 });

265 -

266 - describe('delayPressStart', () => {

267 - it('can be configured', () => {

268 - const Component = () => {

269 - usePressListener({

270 - onPressStart,

271 - });

272 - return (

273 - <div

274 - ref={ref}

275 - responders={<PressResponder delayPressStart={2000} />}

276 - />

277 - );

278 - };

279 - ReactDOM.render(<Component />, container);

280 -

281 - ref.current.dispatchEvent(createEvent('pointerdown'));

282 - jest.advanceTimersByTime(1999);

283 - expect(onPressStart).not.toBeCalled();

284 - jest.advanceTimersByTime(1);

285 - expect(onPressStart).toHaveBeenCalledTimes(1);

286 - });

287 -

288 - it('is cut short if the press is released during a delay', () => {

289 - const Component = () => {

290 - usePressListener({

291 - onPressStart,

292 - });

293 - return (

294 - <div

295 - ref={ref}

296 - responders={<PressResponder delayPressStart={2000} />}

297 - />

298 - );

299 - };

300 - ReactDOM.render(<Component />, container);

301 -

302 - ref.current.getBoundingClientRect = () => ({

303 - top: 50,

304 - left: 50,

305 - bottom: 500,

306 - right: 500,

307 - });

308 -

309 - ref.current.dispatchEvent(createEvent('pointerdown'));

310 - jest.advanceTimersByTime(499);

311 - expect(onPressStart).toHaveBeenCalledTimes(0);

312 - ref.current.dispatchEvent(

313 - createEvent('pointerup', {

314 - clientX: 55,

315 - clientY: 55,

316 - }),

317 - );

318 - expect(onPressStart).toHaveBeenCalledTimes(1);

319 - jest.runAllTimers();

320 - expect(onPressStart).toHaveBeenCalledTimes(1);

321 - });

322 -

323 - it('onPressStart is called synchronously if delay is 0ms', () => {

324 - const Component = () => {

325 - usePressListener({

326 - onPressStart,

327 - });

328 - return (

329 - <div

330 - ref={ref}

331 - responders={<PressResponder delayPressStart={0} />}

332 - />

333 - );

334 - };

335 - ReactDOM.render(<Component />, container);

336 -

337 - ref.current.dispatchEvent(createEvent('pointerdown'));

338 - expect(onPressStart).toHaveBeenCalledTimes(1);

339 - });

340 -

341 - it('onPressStart should not be called if pointerCancel is fired before delayPressStart is finished', () => {

342 - const Component = () => {

343 - usePressListener({

344 - onPressStart,

345 - });

346 - return (

347 - <div

348 - ref={ref}

349 - responders={<PressResponder delayPressStart={500} />}

350 - />

351 - );

352 - };

353 - ReactDOM.render(<Component />, container);

354 -

355 - ref.current.dispatchEvent(createEvent('pointerdown'));

356 - jest.advanceTimersByTime(499);

357 - expect(onPressStart).toHaveBeenCalledTimes(0);

358 - ref.current.dispatchEvent(createEvent('pointercancel'));

359 - jest.runAllTimers();

360 - expect(onPressStart).toHaveBeenCalledTimes(0);

361 - });

362 - });

363 -

364 - describe('delayPressEnd', () => {

365 - it('onPressStart called each time a press is initiated', () => {

366 - // This test makes sure that onPressStart is called each time a press

367 - // starts, even if a delayPressEnd is delaying the deactivation of the

368 - // previous press.

369 - const Component = () => {

370 - usePressListener({

371 - onPressStart,

372 - });

373 - return (

374 - <div

375 - ref={ref}

376 - responders={<PressResponder delayPressEnd={2000} />}

377 - />

378 - );

379 - };

380 - ReactDOM.render(<Component />, container);

381 -

382 - ref.current.dispatchEvent(createEvent('pointerdown'));

383 - ref.current.dispatchEvent(createEvent('pointerup'));

384 - ref.current.dispatchEvent(createEvent('pointerdown'));

385 - expect(onPressStart).toHaveBeenCalledTimes(2);

386 - });

387 - });

263 });

264

265 describe('onPressEnd', () => {

@@ -549,71 +424,6 @@ describe('Event responder: Press', () => {

424 expect.objectContaining({pointerType: 'touch', type: 'pressend'}),

425 );

426 });

552 -

553 - describe('delayPressEnd', () => {

554 - it('can be configured', () => {

555 - const Component = () => {

556 - usePressListener({

557 - onPressEnd,

558 - });

559 - return (

560 - <div

561 - ref={ref}

562 - responders={<PressResponder delayPressEnd={2000} />}

563 - />

564 - );

565 - };

566 - ReactDOM.render(<Component />, container);

567 -

568 - ref.current.dispatchEvent(createEvent('pointerdown'));

569 - ref.current.dispatchEvent(createEvent('pointerup'));

570 - jest.advanceTimersByTime(1999);

571 - expect(onPressEnd).not.toBeCalled();

572 - jest.advanceTimersByTime(1);

573 - expect(onPressEnd).toHaveBeenCalledTimes(1);

574 - });

575 -

576 - it('is reset if "pointerdown" is dispatched during a delay', () => {

577 - const Component = () => {

578 - usePressListener({

579 - onPressEnd,

580 - });

581 - return (

582 - <div

583 - ref={ref}

584 - responders={<PressResponder delayPressEnd={500} />}

585 - />

586 - );

587 - };

588 - ReactDOM.render(<Component />, container);

589 -

590 - ref.current.dispatchEvent(createEvent('pointerdown'));

591 - ref.current.dispatchEvent(createEvent('pointerup'));

592 - jest.advanceTimersByTime(499);

593 - ref.current.dispatchEvent(createEvent('pointerdown'));

594 - jest.advanceTimersByTime(1);

595 - expect(onPressEnd).not.toBeCalled();

596 - ref.current.dispatchEvent(createEvent('pointerup'));

597 - jest.runAllTimers();

598 - expect(onPressEnd).toHaveBeenCalledTimes(1);

599 - });

600 - });

601 -

602 - it('onPressEnd is called synchronously if delay is 0ms', () => {

603 - const Component = () => {

604 - usePressListener({

605 - onPressEnd,

606 - });

607 - return (

608 - <div ref={ref} responders={<PressResponder delayPressEnd={0} />} />

609 - );

610 - };

611 - ReactDOM.render(<Component />, container);

612 -

613 - ref.current.dispatchEvent(createEvent('pointerdown'));

614 - ref.current.dispatchEvent(createEvent('pointerup'));

615 - expect(onPressEnd).toHaveBeenCalledTimes(1);

616 - });

427 });

428

429 describe('onPressChange', () => {

@@ -648,111 +458,6 @@ describe('Event responder: Press', () => {

458 expect(onPressChange).toHaveBeenCalledTimes(2);

459 expect(onPressChange).toHaveBeenCalledWith(false);

460 });

651 -

652 - it('is called after delayed onPressStart', () => {

653 - const Component = () => {

654 - usePressListener({

655 - onPressChange,

656 - });

657 - return (

658 - <div

659 - ref={ref}

660 - responders={<PressResponder delayPressStart={500} />}

661 - />

662 - );

663 - };

664 - ReactDOM.render(<Component />, container);

665 -

666 - ref.current.dispatchEvent(createEvent('pointerdown'));

667 - jest.advanceTimersByTime(499);

668 - expect(onPressChange).not.toBeCalled();

669 - jest.advanceTimersByTime(1);

670 - expect(onPressChange).toHaveBeenCalledTimes(1);

671 - expect(onPressChange).toHaveBeenCalledWith(true);

672 - });

673 -

674 - it('is called after delayPressStart is cut short', () => {

675 - const Component = () => {

676 - usePressListener({

677 - onPressChange,

678 - });

679 - return (

680 - <div

681 - ref={ref}

682 - responders={<PressResponder delayPressStart={500} />}

683 - />

684 - );

685 - };

686 - ReactDOM.render(<Component />, container);

687 -

688 - ref.current.getBoundingClientRect = () => ({

689 - top: 50,

690 - left: 50,

691 - bottom: 500,

692 - right: 500,

693 - });

694 -

695 - ref.current.dispatchEvent(createEvent('pointerdown'));

696 - jest.advanceTimersByTime(100);

697 - ref.current.dispatchEvent(

698 - createEvent('pointerup', {

699 - clientX: 55,

700 - clientY: 55,

701 - }),

702 - );

703 - jest.advanceTimersByTime(10);

704 - expect(onPressChange).toHaveBeenCalledWith(true);

705 - expect(onPressChange).toHaveBeenCalledWith(false);

706 - expect(onPressChange).toHaveBeenCalledTimes(2);

707 - });

708 -

709 - it('is called after delayed onPressEnd', () => {

710 - const Component = () => {

711 - usePressListener({

712 - onPressChange,

713 - });

714 - return (

715 - <div ref={ref} responders={<PressResponder delayPressEnd={500} />} />

716 - );

717 - };

718 - ReactDOM.render(<Component />, container);

719 -

720 - ref.current.dispatchEvent(createEvent('pointerdown'));

721 - expect(onPressChange).toHaveBeenCalledTimes(1);

722 - expect(onPressChange).toHaveBeenCalledWith(true);

723 - ref.current.dispatchEvent(createEvent('pointerup'));

724 - jest.advanceTimersByTime(499);

725 - expect(onPressChange).toHaveBeenCalledTimes(1);

726 - jest.advanceTimersByTime(1);

727 - expect(onPressChange).toHaveBeenCalledTimes(2);

728 - expect(onPressChange).toHaveBeenCalledWith(false);

729 - });

730 -

731 - // No PointerEvent fallbacks

732 - it('is called after "mousedown" and "mouseup" events', () => {

733 - ref.current.dispatchEvent(createEvent('mousedown'));

734 - expect(onPressChange).toHaveBeenCalledTimes(1);

735 - expect(onPressChange).toHaveBeenCalledWith(true);

736 - ref.current.dispatchEvent(createEvent('mouseup'));

737 - expect(onPressChange).toHaveBeenCalledTimes(2);

738 - expect(onPressChange).toHaveBeenCalledWith(false);

739 - });

740 - it('is called after "touchstart" and "touchend" events', () => {

741 - ref.current.dispatchEvent(

742 - createTouchEvent('touchstart', 0, {

743 - target: ref.current,

744 - }),

745 - );

746 - expect(onPressChange).toHaveBeenCalledTimes(1);

747 - expect(onPressChange).toHaveBeenCalledWith(true);

748 - ref.current.dispatchEvent(

749 - createTouchEvent('touchend', 0, {

750 - target: ref.current,

751 - }),

752 - );

753 - expect(onPressChange).toHaveBeenCalledTimes(2);

754 - expect(onPressChange).toHaveBeenCalledWith(false);

755 - });

461 });

462

463 describe('onPress', () => {

@@ -854,24 +559,6 @@ describe('Event responder: Press', () => {

559 expect(onPress).not.toBeCalled();

560 });

561

857 - it('is always called immediately after press is released', () => {

858 - const Component = () => {

859 - usePressListener({

860 - onPress,

861 - });

862 - return (

863 - <div ref={ref} responders={<PressResponder delayPressEnd={500} />} />

864 - );

865 - };

866 - ReactDOM.render(<Component />, container);

867 -

868 - ref.current.dispatchEvent(createEvent('pointerdown'));

869 - ref.current.dispatchEvent(

870 - createEvent('pointerup', {clientX: 10, clientY: 10}),

871 - );

872 - expect(onPress).toHaveBeenCalledTimes(1);

873 - });

874 -

562 it('is called with modifier keys', () => {

563 ref.current.dispatchEvent(

564 createEvent('pointerdown', {metaKey: true, pointerType: 'mouse'}),

@@ -1062,7 +749,7 @@ describe('Event responder: Press', () => {

749 * │ HitRect X │ <= Move to X and release

750 * └──────────────────┘

751 */

1065 - it('no delay and "onPress*" events are called immediately', () => {

752 + it('"onPress*" events are called immediately', () => {

753 let events = [];

754 const ref = React.createRef();

755 const createEventHandler = msg => () => {

@@ -1099,7 +786,7 @@ describe('Event responder: Press', () => {

786 ]);

787 });

788

1102 - it('no delay and "onPress*" events are correctly called with target change', () => {

789 + it('"onPress*" events are correctly called with target change', () => {

790 let events = [];

791 const outerRef = React.createRef();

792 const innerRef = React.createRef();

@@ -1149,47 +836,6 @@ describe('Event responder: Press', () => {

836 ]);

837 });

838

1152 - it('delay and "onPressMove" is called before "onPress*" events', () => {

1153 - let events = [];

1154 - const ref = React.createRef();

1155 - const createEventHandler = msg => () => {

1156 - events.push(msg);

1157 - };

1158 -

1159 - const Component = () => {

1160 - usePressListener({

1161 - onPress: createEventHandler('onPress'),

1162 - onPressChange: createEventHandler('onPressChange'),

1163 - onPressMove: createEventHandler('onPressMove'),

1164 - onPressStart: createEventHandler('onPressStart'),

1165 - onPressEnd: createEventHandler('onPressEnd'),

1166 - });

1167 - return (

1168 - <div

1169 - ref={ref}

1170 - responders={<PressResponder delayPressStart={500} />}

1171 - />

1172 - );

1173 - };

1174 - ReactDOM.render(<Component />, container);

1175 -

1176 - ref.current.getBoundingClientRect = getBoundingClientRectMock;

1177 - ref.current.dispatchEvent(createEvent('pointerdown'));

1178 - ref.current.dispatchEvent(

1179 - createEvent('pointermove', coordinatesInside),

1180 - );

1181 - jest.advanceTimersByTime(499);

1182 - expect(events).toEqual(['onPressMove']);

1183 - events = [];

1184 -

1185 - jest.advanceTimersByTime(1);

1186 - expect(events).toEqual(['onPressStart', 'onPressChange']);

1187 - events = [];

1188 -

1189 - ref.current.dispatchEvent(createEvent('pointerup', coordinatesInside));

1190 - expect(events).toEqual(['onPressEnd', 'onPressChange', 'onPress']);

1191 - });

1192 -

839 it('press retention offset can be configured', () => {

840 let events = [];

841 const ref = React.createRef();

@@ -1359,46 +1005,6 @@ describe('Event responder: Press', () => {

1005 'onPressChange',

1006 ]);

1007 });

1362 -

1363 - it('"onPress*" events are not called after delay expires', () => {

1364 - let events = [];

1365 - const ref = React.createRef();

1366 - const createEventHandler = msg => () => {

1367 - events.push(msg);

1368 - };

1369 -

1370 - const Component = () => {

1371 - usePressListener({

1372 - onPress: createEventHandler('onPress'),

1373 - onPressChange: createEventHandler('onPressChange'),

1374 - onPressMove: createEventHandler('onPressMove'),

1375 - onPressStart: createEventHandler('onPressStart'),

1376 - onPressEnd: createEventHandler('onPressEnd'),

1377 - });

1378 - return (

1379 - <div

1380 - ref={ref}

1381 - responders={

1382 - <PressResponder delayPressStart={500} delayPressEnd={500} />

1383 - }

1384 - />

1385 - );

1386 - };

1387 - ReactDOM.render(<Component />, container);

1388 -

1389 - ref.current.getBoundingClientRect = getBoundingClientRectMock;

1390 - ref.current.dispatchEvent(createEvent('pointerdown'));

1391 - ref.current.dispatchEvent(

1392 - createEvent('pointermove', coordinatesInside),

1393 - );

1394 - container.dispatchEvent(createEvent('pointermove', coordinatesOutside));

1395 - jest.runAllTimers();

1396 - expect(events).toEqual(['onPressMove']);

1397 - events = [];

1398 - container.dispatchEvent(createEvent('pointerup', coordinatesOutside));

1399 - jest.runAllTimers();

1400 - expect(events).toEqual([]);

1401 - });

1008 });

1009

1010 it('"onPress" is not called on release with mouse', () => {

@@ -1643,7 +1249,7 @@ describe('Event responder: Press', () => {

1249 * │ HitRect X │ <= Move to X and release

1250 * └──────────────────┘

1251 */

1646 - it('no delay and "onPress*" events are called immediately', () => {

1252 + it('"onPress*" events are called immediately', () => {

1253 let events = [];

1254 const ref = React.createRef();

1255 const createEventHandler = msg => () => {

@@ -1693,60 +1299,6 @@ describe('Event responder: Press', () => {

1299 ]);

1300 });

1301

1696 - it('delay and "onPressMove" is called before "onPress*" events', () => {

1697 - let events = [];

1698 - const ref = React.createRef();

1699 - const createEventHandler = msg => () => {

1700 - events.push(msg);

1701 - };

1702 -

1703 - const Component = () => {

1704 - usePressListener({

1705 - onPress: createEventHandler('onPress'),

1706 - onPressChange: createEventHandler('onPressChange'),

1707 - onPressMove: createEventHandler('onPressMove'),

1708 - onPressStart: createEventHandler('onPressStart'),

1709 - onPressEnd: createEventHandler('onPressEnd'),

1710 - });

1711 - return (

1712 - <div

1713 - ref={ref}

1714 - responders={<PressResponder delayPressStart={500} />}

1715 - />

1716 - );

1717 - };

1718 - ReactDOM.render(<Component />, container);

1719 -

1720 - document.elementFromPoint = () => ref.current;

1721 - ref.current.getBoundingClientRect = getBoundingClientRectMock;

1722 - ref.current.dispatchEvent(

1723 - createTouchEvent('touchstart', 0, {

1724 - target: ref.current,

1725 - }),

1726 - );

1727 - ref.current.dispatchEvent(

1728 - createTouchEvent('touchmove', 0, {

1729 - ...coordinatesInside,

1730 - target: ref.current,

1731 - }),

1732 - );

1733 - jest.advanceTimersByTime(499);

1734 - expect(events).toEqual(['onPressMove']);

1735 - events = [];

1736 -

1737 - jest.advanceTimersByTime(1);

1738 - expect(events).toEqual(['onPressStart', 'onPressChange']);

1739 - events = [];

1740 -

1741 - ref.current.dispatchEvent(

1742 - createTouchEvent('touchend', 0, {

1743 - ...coordinatesInside,

1744 - target: ref.current,

1745 - }),

1746 - );

1747 - expect(events).toEqual(['onPressEnd', 'onPressChange', 'onPress']);

1748 - });

1749 -

1302 it('press retention offset can be configured', () => {

1303 let events = [];

1304 const ref = React.createRef();

@@ -1976,65 +1528,6 @@ describe('Event responder: Press', () => {

1528 'onPressChange',

1529 ]);

1530 });

1979 -

1980 - it('"onPress*" events are not called after delay expires', () => {

1981 - let events = [];

1982 - const ref = React.createRef();

1983 - const createEventHandler = msg => () => {

1984 - events.push(msg);

1985 - };

1986 -

1987 - const Component = () => {

1988 - usePressListener({

1989 - onPress: createEventHandler('onPress'),

1990 - onPressChange: createEventHandler('onPressChange'),

1991 - onPressMove: createEventHandler('onPressMove'),

1992 - onPressStart: createEventHandler('onPressStart'),

1993 - onPressEnd: createEventHandler('onPressEnd'),

1994 - });

1995 - return (

1996 - <div

1997 - ref={ref}

1998 - responders={

1999 - <PressResponder delayPressStart={500} delayPressEnd={500} />

2000 - }

2001 - />

2002 - );

2003 - };

2004 - ReactDOM.render(<Component />, container);

2005 -

2006 - document.elementFromPoint = () => ref.current;

2007 - ref.current.getBoundingClientRect = getBoundingClientRectMock;

2008 - ref.current.dispatchEvent(

2009 - createTouchEvent('touchstart', 0, {

2010 - target: ref.current,

2011 - }),

2012 - );

2013 - ref.current.dispatchEvent(

2014 - createTouchEvent('touchmove', 0, {

2015 - ...coordinatesInside,

2016 - target: ref.current,

2017 - }),

2018 - );

2019 - document.elementFromPoint = () => container;

2020 - container.dispatchEvent(

2021 - createTouchEvent('touchmove', 0, {

2022 - ...coordinatesOutside,

2023 - target: container,

2024 - }),

2025 - );

2026 - jest.runAllTimers();

2027 - expect(events).toEqual(['onPressMove']);

2028 - events = [];

2029 - container.dispatchEvent(

2030 - createTouchEvent('touchend', 0, {

2031 - ...coordinatesOutside,

2032 - target: container,

2033 - }),

2034 - );

2035 - jest.runAllTimers();

2036 - expect(events).toEqual([]);

2037 - });

1531 });

1532

1533 it('"onPress" is called on re-entry to hit rect for touch', () => {

@@ -2106,82 +1599,6 @@ describe('Event responder: Press', () => {

1599 });

1600 });

1601

2109 - describe('delayed and multiple events', () => {

2110 - it('dispatches in the correct order', () => {

2111 - let events;

2112 - const ref = React.createRef();

2113 - const createEventHandler = msg => () => {

2114 - events.push(msg);

2115 - };

2116 -

2117 - const Component = () => {

2118 - usePressListener({

2119 - onPress: createEventHandler('onPress'),

2120 - onPressChange: createEventHandler('onPressChange'),

2121 - onPressMove: createEventHandler('onPressMove'),

2122 - onPressStart: createEventHandler('onPressStart'),

2123 - onPressEnd: createEventHandler('onPressEnd'),

2124 - });

2125 - return (

2126 - <div

2127 - ref={ref}

2128 - responders={

2129 - <PressResponder delayPressStart={250} delayPressEnd={250} />

2130 - }

2131 - />

2132 - );

2133 - };

2134 - ReactDOM.render(<Component />, container);

2135 -

2136 - ref.current.getBoundingClientRect = () => ({

2137 - top: 0,

2138 - left: 0,

2139 - bottom: 100,

2140 - right: 100,

2141 - });

2142 -

2143 - // 1

2144 - events = [];

2145 - ref.current.dispatchEvent(createEvent('pointerdown'));

2146 - ref.current.dispatchEvent(

2147 - createEvent('pointerup', {clientX: 10, clientY: 10}),

2148 - );

2149 - ref.current.dispatchEvent(createEvent('pointerdown'));

2150 - ref.current.dispatchEvent(

2151 - createEvent('pointerup', {clientX: 10, clientY: 10}),

2152 - );

2153 - jest.runAllTimers();

2154 -

2155 - expect(events).toEqual([

2156 - 'onPressStart',

2157 - 'onPressChange',

2158 - 'onPress',

2159 - 'onPressStart',

2160 - 'onPress',

2161 - 'onPressEnd',

2162 - 'onPressChange',

2163 - ]);

2164 -

2165 - // 2

2166 - events = [];

2167 - ref.current.dispatchEvent(createEvent('pointerdown'));

2168 - jest.advanceTimersByTime(250);

2169 - jest.advanceTimersByTime(500);

2170 - ref.current.dispatchEvent(

2171 - createEvent('pointerup', {clientX: 10, clientY: 10}),

2172 - );

2173 - jest.runAllTimers();

2174 -

2175 - expect(events).toEqual([

2176 - 'onPressStart',

2177 - 'onPressChange',

2178 - 'onPress',

2179 - 'onPressEnd',

2180 - 'onPressChange',

2181 - ]);

2182 - });

2183 - });

2184 -

1602 describe('nested responders', () => {

1603 it('dispatch events in the correct order', () => {

1604 const events = [];

@@ -2701,7 +2118,6 @@ describe('Event responder: Press', () => {

2118 ReactDOM.render(<Component />, container);

2119

2120 ref.current.dispatchEvent(createEvent('pointerdown'));

2704 - jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);

2121 ref.current.dispatchEvent(createEvent('pointermove'));

2122 ref.current.dispatchEvent(createEvent('pointerup'));

2123 ref.current.dispatchEvent(createEvent('pointerdown'));

@@ -2757,7 +2173,6 @@ describe('Event responder: Press', () => {

2173 clientY: 31,

2174 }),

2175 );

2760 - jest.advanceTimersByTime(DEFAULT_LONG_PRESS_DELAY);

2176 ref.current.dispatchEvent(

2177 createEvent('pointermove', {

2178 pointerType: 'mouse',