Hooks 🎣 (#1208)

#871

.eslintrc.js

@@ -64,6 +64,20 @@ module.exports = {
       },
     ],
 
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: 'react',
+            importNames: ['useMemo', 'useCallback'],
+            message:
+              'useMemo and useCallback are subject to cache busting. Please use useMemoOne and useCallbackOne',
+          },
+        ],
+      },
+    ],
+
     // Allowing jsx in files with any file extension (old components have jsx but not the extension)
     'react/jsx-filename-extension': 'off',
 

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 357308,
-    "minified": 138768,
-    "gzipped": 40712
+    "bundled": 392153,
+    "minified": 146738,
+    "gzipped": 41191
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 303784,
-    "minified": 113686,
-    "gzipped": 32910
+    "bundled": 324706,
+    "minified": 116369,
+    "gzipped": 33451
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 237952,
-    "minified": 125718,
-    "gzipped": 31356,
+    "bundled": 237886,
+    "minified": 123357,
+    "gzipped": 31310,
     "treeshaked": {
       "rollup": {
-        "code": 85891,
-        "import_statements": 832
+        "code": 30267,
+        "import_statements": 799
       },
       "webpack": {
-        "code": 88596
+        "code": 34399
       }
     }
   }

cypress/integration/move-between-lists.spec.js

@@ -3,7 +3,7 @@ import * as keyCodes from '../../src/view/key-codes';
 import { timings } from '../../src/animation';
 
 beforeEach(() => {
-  cy.visit('/iframe.html?selectedKind=board&selectedStory=simple');
+  cy.visit('/iframe.html?id=board--simple');
 });
 
 it('should move between lists', () => {

cypress/integration/reorder-lists.spec.js

@@ -3,7 +3,7 @@ import * as keyCodes from '../../src/view/key-codes';
 import { timings } from '../../src/animation';
 
 beforeEach(() => {
-  cy.visit('/iframe.html?selectedKind=board&selectedStory=simple');
+  cy.visit('/iframe.html?id=board--simple');
 });
 
 it('should reorder lists', () => {

cypress/integration/reorder.spec.js

@@ -3,9 +3,7 @@ import * as keyCodes from '../../src/view/key-codes';
 import { timings } from '../../src/animation';
 
 beforeEach(() => {
-  cy.visit(
-    '/iframe.html?selectedKind=single%20vertical%20list&selectedStory=basic',
-  );
+  cy.visit('/iframe.html?id=single-vertical-list--basic');
 });
 
 it('should reorder a list', () => {

jest.config.js

@@ -14,4 +14,5 @@ module.exports = {
     'jest-watch-typeahead/filename',
     'jest-watch-typeahead/testname',
   ],
+  verbose: true,
 };

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-beautiful-dnd",
-  "version": "10.1.1",
+  "version": "11.0.0-beta",
   "description": "Beautiful and accessible drag and drop for lists with React",
   "author": "Alex Reardon <areardon@atlassian.com>",
   "keywords": [
@@ -57,11 +57,11 @@
     "@babel/runtime-corejs2": "^7.4.2",
     "css-box-model": "^1.1.1",
     "memoize-one": "^5.0.1",
-    "prop-types": "^15.6.1",
     "raf-schd": "^4.0.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "7.0.0-beta.0",
     "redux": "^4.0.1",
-    "tiny-invariant": "^1.0.4"
+    "tiny-invariant": "^1.0.4",
+    "use-memo-one": "^1.0.0"
   },
   "devDependencies": {
     "@atlaskit/css-reset": "^3.0.6",
@@ -134,7 +134,7 @@
     "webpack": "^4.29.6"
   },
   "peerDependencies": {
-    "react": "^16.3.1"
+    "react": "^16.8.0"
   },
   "license": "Apache-2.0",
   "jest-junit": {

rollup.config.js

@@ -33,10 +33,13 @@ const snapshotArgs =
 
 const commonjsArgs = {
   include: 'node_modules/**',
-  // needed for react-is via react-redux v5.1
+  // needed for react-is via react-redux
   // https://stackoverflow.com/questions/50080893/rollup-error-isvalidelementtype-is-not-exported-by-node-modules-react-is-inde/50098540
   namedExports: {
-    'node_modules/react-is/index.js': ['isValidElementType'],
+    'node_modules/react-redux/node_modules/react-is/index.js': [
+      'isValidElementType',
+      'isContextConsumer',
+    ],
   },
 };
 
@@ -50,10 +53,10 @@ export default [
       file: 'dist/react-beautiful-dnd.js',
       format: 'umd',
       name: 'ReactBeautifulDnd',
-      globals: { react: 'React' },
+      globals: { react: 'React', 'react-dom': 'ReactDOM' },
     },
     // Only deep dependency required is React
-    external: ['react'],
+    external: ['react', 'react-dom'],
     plugins: [
       json(),
       babel(getBabelOptions({ useESModules: true })),
@@ -71,10 +74,10 @@ export default [
       file: 'dist/react-beautiful-dnd.min.js',
       format: 'umd',
       name: 'ReactBeautifulDnd',
-      globals: { react: 'React' },
+      globals: { react: 'React', 'react-dom': 'ReactDOM' },
     },
     // Only deep dependency required is React
-    external: ['react'],
+    external: ['react', 'react-dom'],
     plugins: [
       json(),
       babel(getBabelOptions({ useESModules: true })),

src/debug/middleware/log.js

@@ -6,6 +6,7 @@ export default (store: Store) => (next: Action => mixed) => (
   action: Action,
 ): any => {
   console.group(`action: ${action.type}`);
+  console.log('action payload', action.payload);
   console.log('state before', store.getState());
 
   const result: mixed = next(action);

src/index.js

@@ -30,14 +30,14 @@ export type {
   OnDragEndResponder,
 } from './types';
 
-// Droppable
+// Droppable types
 export type {
   Provided as DroppableProvided,
   StateSnapshot as DroppableStateSnapshot,
   DroppableProps,
 } from './view/droppable/droppable-types';
 
-// Draggable
+// Draggable types
 export type {
   Provided as DraggableProvided,
   StateSnapshot as DraggableStateSnapshot,
@@ -48,5 +48,5 @@ export type {
   NotDraggingStyle,
 } from './view/draggable/draggable-types';
 
-// DragHandle
-export type { DragHandleProps } from './view/drag-handle/drag-handle-types';
+// DragHandle types
+export type { DragHandleProps } from './view/use-drag-handle/drag-handle-types';

src/state/action-creators.js

@@ -229,14 +229,20 @@ export const moveLeft = (): MoveLeftAction => ({
   payload: null,
 });
 
+type CleanActionArgs = {|
+  shouldFlush: boolean,
+|};
+
 type CleanAction = {|
   type: 'CLEAN',
-  payload: null,
+  payload: CleanActionArgs,
 |};
 
-export const clean = (): CleanAction => ({
+export const clean = (
+  args?: CleanActionArgs = { shouldFlush: false },
+): CleanAction => ({
   type: 'CLEAN',
-  payload: null,
+  payload: args,
 });
 
 export type AnimateDropArgs = {|

src/state/create-store.js

@@ -11,7 +11,7 @@ import dimensionMarshalStopper from './middleware/dimension-marshal-stopper';
 import autoScroll from './middleware/auto-scroll';
 import pendingDrop from './middleware/pending-drop';
 import type { DimensionMarshal } from './dimension-marshal/dimension-marshal-types';
-import type { StyleMarshal } from '../view/style-marshal/style-marshal-types';
+import type { StyleMarshal } from '../view/use-style-marshal/style-marshal-types';
 import type { AutoScroller } from './auto-scroller/auto-scroller-types';
 import type { Responders, Announce } from '../types';
 import type { Store } from './store-types';
@@ -27,19 +27,19 @@ const composeEnhancers =
     : compose;
 
 type Args = {|
-  getDimensionMarshal: () => DimensionMarshal,
+  dimensionMarshal: DimensionMarshal,
   styleMarshal: StyleMarshal,
   getResponders: () => Responders,
   announce: Announce,
-  getScroller: () => AutoScroller,
+  autoScroller: AutoScroller,
 |};
 
 export default ({
-  getDimensionMarshal,
+  dimensionMarshal,
   styleMarshal,
   getResponders,
   announce,
-  getScroller,
+  autoScroller,
 }: Args): Store =>
   createStore(
     reducer,
@@ -50,7 +50,7 @@ export default ({
         // > uncomment to use
         // debugging logger
         // require('../debug/middleware/log').default,
-        // user timing api
+        // // user timing api
         // require('../debug/middleware/user-timing').default,
         // debugging timer
         // require('../debug/middleware/action-timing').default,
@@ -71,14 +71,14 @@ export default ({
         // when moving into a phase where collection is no longer needed.
         // We need to stop the marshal before responders fire as responders can cause
         // dimension registration changes in response to reordering
-        dimensionMarshalStopper(getDimensionMarshal),
+        dimensionMarshalStopper(dimensionMarshal),
         // Fire application responders in response to drag changes
-        lift(getDimensionMarshal),
+        lift(dimensionMarshal),
         drop,
         // When a drop animation finishes - fire a drop complete
         dropAnimationFinish,
         pendingDrop,
-        autoScroll(getScroller),
+        autoScroll(autoScroller),
         // Fire responders for consumers (after update to store)
         responders(getResponders, announce),
       ),

src/state/dimension-marshal/dimension-marshal-types.js

@@ -90,11 +90,6 @@ export type DimensionMarshal = {|
     descriptor: DroppableDescriptor,
     callbacks: DroppableCallbacks,
   ) => void,
-  updateDroppable: (
-    previous: DroppableDescriptor,
-    descriptor: DroppableDescriptor,
-    callbacks: DroppableCallbacks,
-  ) => void,
   // it is possible for a droppable to change whether it is enabled during a drag
   updateDroppableIsEnabled: (id: DroppableId, isEnabled: boolean) => void,
   // it is also possible to update whether combining is enabled

src/state/dimension-marshal/dimension-marshal.js

@@ -164,31 +164,6 @@ export default (callbacks: Callbacks) => {
     invariant(!collection, 'Cannot add a Droppable during a drag');
   };
 
-  const updateDroppable = (
-    previous: DroppableDescriptor,
-    descriptor: DroppableDescriptor,
-    droppableCallbacks: DroppableCallbacks,
-  ) => {
-    invariant(
-      entries.droppables[previous.id],
-      'Cannot update droppable registration as no previous registration was found',
-    );
-
-    // The id might have changed, so we are removing the old entry
-    delete entries.droppables[previous.id];
-
-    const entry: DroppableEntry = {
-      descriptor,
-      callbacks: droppableCallbacks,
-    };
-    entries.droppables[descriptor.id] = entry;
-
-    invariant(
-      !collection,
-      'You are not able to update the id or type of a droppable during a drag',
-    );
-  };
-
   const unregisterDroppable = (descriptor: DroppableDescriptor) => {
     const entry: ?DroppableEntry = entries.droppables[descriptor.id];
 
@@ -328,7 +303,6 @@ export default (callbacks: Callbacks) => {
     updateDraggable,
     unregisterDraggable,
     registerDroppable,
-    updateDroppable,
     unregisterDroppable,
 
     // droppable changes

src/state/middleware/auto-scroll.js

@@ -12,17 +12,17 @@ const shouldEnd = (action: Action): boolean =>
 const shouldCancelPending = (action: Action): boolean =>
   action.type === 'COLLECTION_STARTING';
 
-export default (getScroller: () => AutoScroller) => (
-  store: MiddlewareStore,
-) => (next: Dispatch) => (action: Action): any => {
+export default (autoScroller: AutoScroller) => (store: MiddlewareStore) => (
+  next: Dispatch,
+) => (action: Action): any => {
   if (shouldEnd(action)) {
-    getScroller().stop();
+    autoScroller.stop();
     next(action);
     return;
   }
 
   if (shouldCancelPending(action)) {
-    getScroller().cancelPending();
+    autoScroller.cancelPending();
     next(action);
     return;
   }
@@ -35,12 +35,12 @@ export default (getScroller: () => AutoScroller) => (
       state.phase === 'DRAGGING',
       'Expected phase to be DRAGGING after INITIAL_PUBLISH',
     );
-    getScroller().start(state);
+    autoScroller.start(state);
     return;
   }
 
   // auto scroll happens in response to state changes
   // releasing all actions to the reducer first
   next(action);
-  getScroller().scroll(store.getState());
+  autoScroller.scroll(store.getState());
 };

src/state/middleware/dimension-marshal-stopper.js

@@ -2,9 +2,9 @@
 import type { Action, Dispatch } from '../store-types';
 import type { DimensionMarshal } from '../dimension-marshal/dimension-marshal-types';
 
-export default (getMarshal: () => DimensionMarshal) => () => (
-  next: Dispatch,
-) => (action: Action): any => {
+export default (marshal: DimensionMarshal) => () => (next: Dispatch) => (
+  action: Action,
+): any => {
   // Not stopping a collection on a 'DROP' as we want a collection to continue
   if (
     // drag is finished
@@ -13,7 +13,6 @@ export default (getMarshal: () => DimensionMarshal) => () => (
     // no longer accepting changes once the drop has started
     action.type === 'DROP_ANIMATE'
   ) {
-    const marshal: DimensionMarshal = getMarshal();
     marshal.stopPublishing();
   }