From cd9469f84d89c05a829a70d7d829753a4450e50a Mon Sep 17 00:00:00 2001 From: naru200 Date: Wed, 29 Sep 2021 16:55:27 +0900 Subject: [PATCH] fix: Fix touch sensor (ref: https://github.com/atlassian/react-beautiful-dnd/pull/2281) --- .size-snapshot.json | 18 +++++++++--------- .../find-closest-draggable-id-from-event.js | 2 +- .../sensors/use-touch-sensor.js | 17 ++++++++++++----- .../use-sensor-marshal/use-sensor-marshal.js | 14 ++++++++++++-- 4 files changed, 34 insertions(+), 17 deletions(-) diff --git a/.size-snapshot.json b/.size-snapshot.json index 424d87419e..5390c0beae 100644 --- a/.size-snapshot.json +++ b/.size-snapshot.json @@ -1,18 +1,18 @@ { "dist/react-beautiful-dnd.js": { - "bundled": 364998, - "minified": 133574, - "gzipped": 39437 + "bundled": 365551, + "minified": 133810, + "gzipped": 39559 }, "dist/react-beautiful-dnd.min.js": { - "bundled": 306810, - "minified": 108365, - "gzipped": 31340 + "bundled": 307297, + "minified": 108548, + "gzipped": 31423 }, "dist/react-beautiful-dnd.esm.js": { - "bundled": 240910, - "minified": 125371, - "gzipped": 32650, + "bundled": 241424, + "minified": 125681, + "gzipped": 32721, "treeshaked": { "rollup": { "code": 21121, diff --git a/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js b/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js index 2c7187f18a..0df7089934 100644 --- a/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js +++ b/src/view/use-sensor-marshal/find-closest-draggable-id-from-event.js @@ -10,7 +10,7 @@ function getSelector(contextId: ContextId): string { return `[${attributes.dragHandle.contextId}="${contextId}"]`; } -function findClosestDragHandleFromEvent( +export function findClosestDragHandleFromEvent( contextId: ContextId, event: Event, ): ?HTMLElement { diff --git a/src/view/use-sensor-marshal/sensors/use-touch-sensor.js b/src/view/use-sensor-marshal/sensors/use-touch-sensor.js index 01f87a944b..663517e1b3 100644 --- a/src/view/use-sensor-marshal/sensors/use-touch-sensor.js +++ b/src/view/use-sensor-marshal/sensors/use-touch-sensor.js @@ -293,11 +293,14 @@ export default function useTouchSensor(api: SensorAPI) { y: clientY, }; + const handle: ?HTMLElement = api.findClosestDragHandle(event); + invariant(handle, 'Touch sensor unable to find drag handle'); + // unbind this event handler unbindEventsRef.current(); // eslint-disable-next-line no-use-before-define - startPendingDrag(actions, point); + startPendingDrag(actions, point, handle); }, }), // not including stop or startPendingDrag as it is not defined initially @@ -350,7 +353,7 @@ export default function useTouchSensor(api: SensorAPI) { }, [stop]); const bindCapturingEvents = useCallback( - function bindCapturingEvents() { + function bindCapturingEvents(target: HTMLElement) { const options: EventOptions = { capture: true, passive: false }; const args: GetBindingArgs = { cancel, @@ -366,7 +369,7 @@ export default function useTouchSensor(api: SensorAPI) { // Old behaviour: // https://gist.github.com/parris/dda613e3ae78f14eb2dc9fa0f4bfce3d // https://stackoverflow.com/questions/33298828/touch-move-event-dont-fire-after-touch-start-target-is-removed - const unbindTarget = bindEvents(window, getHandleBindings(args), options); + const unbindTarget = bindEvents(target, getHandleBindings(args), options); const unbindWindow = bindEvents(window, getWindowBindings(args), options); unbindEventsRef.current = function unbindAll() { @@ -397,7 +400,11 @@ export default function useTouchSensor(api: SensorAPI) { ); const startPendingDrag = useCallback( - function startPendingDrag(actions: PreDragActions, point: Position) { + function startPendingDrag( + actions: PreDragActions, + point: Position, + target: HTMLElement, + ) { invariant( getPhase().type === 'IDLE', 'Expected to move from IDLE to PENDING drag', @@ -415,7 +422,7 @@ export default function useTouchSensor(api: SensorAPI) { longPressTimerId, }); - bindCapturingEvents(); + bindCapturingEvents(target); }, [bindCapturingEvents, getPhase, setPhase, startDragging], ); diff --git a/src/view/use-sensor-marshal/use-sensor-marshal.js b/src/view/use-sensor-marshal/use-sensor-marshal.js index db3ac12556..b4888df894 100644 --- a/src/view/use-sensor-marshal/use-sensor-marshal.js +++ b/src/view/use-sensor-marshal/use-sensor-marshal.js @@ -45,7 +45,9 @@ import getBorderBoxCenterPosition from '../get-border-box-center-position'; import { warning } from '../../dev-warning'; import useLayoutEffect from '../use-isomorphic-layout-effect'; import { noop } from '../../empty'; -import findClosestDraggableIdFromEvent from './find-closest-draggable-id-from-event'; +import findClosestDraggableIdFromEvent, { + findClosestDragHandleFromEvent, +} from './find-closest-draggable-id-from-event'; import findDraggable from '../get-elements/find-draggable'; import bindEvents from '../event-bindings/bind-events'; @@ -233,7 +235,7 @@ function tryStart({ function finish( reason: 'CANCEL' | 'DROP', - options?: StopDragOptions = { shouldBlockNextClick: false }, + options: StopDragOptions = { shouldBlockNextClick: false }, ) { args.cleanup(); @@ -438,6 +440,12 @@ export default function useSensorMarshal({ [contextId, lockAPI, registry, store], ); + const findClosestDragHandle = useCallback( + (event: Event): ?DraggableId => + findClosestDragHandleFromEvent(contextId, event), + [contextId], + ); + const findClosestDraggableId = useCallback( (event: Event): ?DraggableId => findClosestDraggableIdFromEvent(contextId, event), @@ -472,6 +480,7 @@ export default function useSensorMarshal({ () => ({ canGetLock, tryGetLock, + findClosestDragHandle, findClosestDraggableId, findOptionsForDraggable, tryReleaseLock, @@ -480,6 +489,7 @@ export default function useSensorMarshal({ [ canGetLock, tryGetLock, + findClosestDragHandle, findClosestDraggableId, findOptionsForDraggable, tryReleaseLock,