Adding onBeforeCapture Responder (#1605)

Author: alexreardon

.eslintrc.js

@@ -177,6 +177,9 @@ module.exports = {
     // Having issues with this rule not working correctly
     'react/default-props-match-prop-types': 'off',
 
+    // Allowing functions to be passed as props
+    'react/jsx-no-bind': 'off',
+
     // Require // @flow at the top of files
     'flowtype/require-valid-file-annotation': [
       'error',

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 380407,
-    "minified": 139714,
-    "gzipped": 42033
+    "bundled": 381298,
+    "minified": 140093,
+    "gzipped": 42104
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 322021,
-    "minified": 115167,
-    "gzipped": 34123
+    "bundled": 322912,
+    "minified": 115528,
+    "gzipped": 34201
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 241645,
-    "minified": 126072,
-    "gzipped": 32900,
+    "bundled": 242417,
+    "minified": 126431,
+    "gzipped": 32987,
     "treeshaked": {
       "rollup": {
-        "code": 21306,
+        "code": 21303,
         "import_statements": 788
       },
       "webpack": {
-        "code": 24963
+        "code": 24960
       }
     }
   }

docs/guides/responders.md

@@ -18,13 +18,15 @@ type DraggableId = Id;
 ```js
 type Responders = {|
   // optional
+  onBeforeCapture?: OnBeforeCaptureResponder,
   onBeforeDragStart?: OnBeforeDragStartResponder,
   onDragStart?: OnDragStartResponder,
   onDragUpdate?: OnDragUpdateResponder,
   // required
   onDragEnd: OnDragEndResponder,
 |};
 
+type OnBeforeCaptureResponder = (before: BeforeCapture) => mixed;
 type OnBeforeDragStartResponder = (start: DragStart) => mixed;
 type OnDragStartResponder = (
   start: DragStart,
@@ -39,11 +41,16 @@ type OnDragEndResponder = (
   provided: ResponderProvided,
 ) => mixed;
 
+type BeforeCapture = {|
+  draggableId: DraggableId,
+  mode: MovementMode,
+|};
+
 type DraggableRubric = {|
   draggableId: DraggableId,
   type: TypeId,
   source: DraggableLocation,
-|}
+|};
 
 type DragStart = {|
   ...DraggableRubric,

docs/guides/types.md

@@ -1,6 +1,6 @@
 {
   "name": "react-beautiful-dnd",
-  "version": "12.0.0",
+  "version": "12.1.0-alpha.0",
   "description": "Beautiful and accessible drag and drop for lists with React",
   "author": "Alex Reardon <areardon@atlassian.com>",
   "keywords": [

package.json

@@ -19,13 +19,15 @@ export type {
   DroppableId,
   DraggableRubric,
   MovementMode,
+  BeforeCapture,
   DragStart,
   DragUpdate,
   DropResult,
   Direction,
   ResponderProvided,
   Announce,
   DraggableLocation,
+  OnBeforeCaptureResponder,
   OnBeforeDragStartResponder,
   OnDragStartResponder,
   OnDragUpdateResponder,

src/index.js

@@ -12,6 +12,23 @@ import type {
   Published,
 } from '../types';
 
+export type BeforeInitialCaptureArgs = {|
+  draggableId: DraggableId,
+  movementMode: MovementMode,
+|};
+
+export type BeforeInitialCaptureAction = {|
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: BeforeInitialCaptureArgs,
+|};
+
+export const beforeInitialCapture = (
+  args: BeforeInitialCaptureArgs,
+): BeforeInitialCaptureAction => ({
+  type: 'BEFORE_INITIAL_CAPTURE',
+  payload: args,
+});
+
 export type LiftArgs = {|
   // lifting with DraggableId rather than descriptor
   // as the descriptor might change after a drop is flushed
@@ -286,6 +303,7 @@ export const dropAnimationFinished = (): DropAnimationFinishedAction => ({
 });
 
 export type Action =
+  | BeforeInitialCaptureAction
   | LiftAction
   | InitialPublishAction
   | WhileDraggingPublishAction

src/state/action-creators.js

@@ -3,7 +3,12 @@ import { invariant } from '../../invariant';
 import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types';
 import type { State, ScrollOptions, LiftRequest } from '../../types';
 import type { MiddlewareStore, Action, Dispatch } from '../store-types';
-import { completeDrop, initialPublish, flush } from '../action-creators';
+import {
+  completeDrop,
+  initialPublish,
+  flush,
+  beforeInitialCapture,
+} from '../action-creators';
 import validateDimensions from './util/validate-dimensions';
 
 export default (marshal: DimensionMarshal) => ({
@@ -30,6 +35,11 @@ export default (marshal: DimensionMarshal) => ({
   // Removing any placeholders before we capture any starting dimensions
   dispatch(flush());
 
+  // Let consumers know we are just about to publish
+  // We are only publishing a small amount of information as
+  // things might change as a result of the onBeforeCapture callback
+  dispatch(beforeInitialCapture({ draggableId: id, movementMode }));
+
   // will communicate with the marshal to start requesting dimensions
   const scrollOptions: ScrollOptions = {
     shouldPublishImmediately: movementMode === 'SNAP',

src/state/middleware/lift.js

@@ -11,13 +11,16 @@ import type {
   Responders,
   ResponderProvided,
   Critical,
+  BeforeCapture,
   DragImpact,
   DraggableLocation,
   Combine,
   DragStart,
   Announce,
   DragUpdate,
   MovementMode,
+  DraggableId,
+  OnBeforeCaptureResponder,
   OnBeforeDragStartResponder,
   OnDragStartResponder,
   OnDragUpdateResponder,
@@ -83,6 +86,24 @@ export default (getResponders: () => Responders, announce: Announce) => {
   const asyncMarshal: AsyncMarshal = getAsyncMarshal();
   let dragging: ?WhileDragging = null;
 
+  const beforeCapture = (draggableId: DraggableId, mode: MovementMode) => {
+    invariant(
+      !dragging,
+      'Cannot fire onBeforeCapture as a drag start has already been published',
+    );
+    withTimings('onBeforeCapture', () => {
+      // No use of screen reader for this responder
+      const fn: ?OnBeforeCaptureResponder = getResponders().onBeforeCapture;
+      if (fn) {
+        const before: BeforeCapture = {
+          draggableId,
+          mode,
+        };
+        fn(before);
+      }
+    });
+  };
+
   const beforeStart = (critical: Critical, mode: MovementMode) => {
     invariant(
       !dragging,
@@ -221,6 +242,7 @@ export default (getResponders: () => Responders, announce: Announce) => {
   };
 
   return {
+    beforeCapture,
     beforeStart,
     start,
     update,

src/state/middleware/responders/publisher.js

@@ -26,6 +26,14 @@ export default (
   return (store: MiddlewareStore) => (next: Dispatch) => (
     action: Action,
   ): any => {
+    if (action.type === 'BEFORE_INITIAL_CAPTURE') {
+      publisher.beforeCapture(
+        action.payload.draggableId,
+        action.payload.movementMode,
+      );
+      return;
+    }
+
     if (action.type === 'INITIAL_PUBLISH') {
       const critical: Critical = action.payload.critical;
       publisher.beforeStart(critical, action.payload.movementMode);