react-beautiful-dnd-next - npm Package Compare versions

Comparing version 10.0.0-alpha.5 to 10.0.0-beta.1

package.json

 {
   "name": "react-beautiful-dnd-next",
-  "version": "10.0.0-alpha.5",
+  "version": "10.0.0-beta.1",
   "description": "Beautiful and accessible drag and drop for lists with React",
@@ -36,3 +36,5 @@ "author": "Alex Reardon <[e-mail]>",
     "test": "jest --config ./jest.config.js",
+    "test:ci": "jest test --maxWorkers=2",
     "test:browser": "testcafe 'chrome:headless,chrome:headless:emulation:device=iphone 6;touch=true,firefox:headless' ./test/browser/*  -r spec,xunit:./test-reports/browser/test-results.xml",
+    "test:browser:local": "testcafe 'chrome' ./test/browser/*",
     "test:coverage": "yarn test --coverage --coveragePathIgnorePatterns=/debug",
@@ -64,5 +66,5 @@ "validate": "yarn prettier:check && yarn lint:eslint && yarn lint:css && yarn typecheck",
     "raf-schd": "^4.0.0",
-    "react-redux": "^5.0.7",
+    "react-redux": "^5.1.0",
     "redux": "^4.0.1",
-    "tiny-invariant": "^1.0.1"
+    "tiny-invariant": "^1.0.2"
   },
@@ -87,12 +89,12 @@ "devDependencies": {
     "enzyme-adapter-react-16": "^1.6.0",
-    "eslint": "^5.7.0",
+    "eslint": "^5.8.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.1.0",
-    "eslint-plugin-flowtype": "^3.0.0",
+    "eslint-plugin-flowtype": "^3.1.4",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.26.0",
+    "eslint-plugin-jest": "^21.26.2",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
-    "flow-bin": "0.83.0",
+    "flow-bin": "0.85.0",
     "globby": "^8.0.1",
@@ -118,3 +120,3 @@ "jest": "^23.6.0",
     "rollup-plugin-uglify": "^6.0.0",
-    "stylelint": "9.6.0",
+    "stylelint": "9.7.1",
     "stylelint-config-prettier": "^4.0.0",
@@ -125,3 +127,3 @@ "stylelint-config-recommended": "^2.1.0",
     "stylelint-processor-styled-components": "^1.5.0",
-    "testcafe": "^0.22.0",
+    "testcafe": "^0.23.0",
     "testcafe-reporter-xunit": "^2.1.0",
@@ -128,0 +130,0 @@ "wait-port": "^0.2.2"

src/state/get-center-from-impact/get-page-border-box-center/index.js

 // @flow
 import type { Position } from 'css-box-model';
-import whenCombining from './when-combining';
-import whenReordering from './when-reordering';
-import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
 import type {
@@ -14,2 +11,5 @@ DragImpact,
 } from '../../../types';
+import whenCombining from './when-combining';
+import whenReordering from './when-reordering';
+import withDroppableDisplacement from '../../with-scroll-change/with-droppable-displacement';
 
@@ -23,3 +23,3 @@ type Args = {|
 
-const withoutDroppableDisplacement = ({
+const getResultWithoutDroppableDisplacement = ({
   impact,
@@ -60,3 +60,5 @@ draggable,
 export default (args: Args): Position => {
-  const withoutDisplacement: Position = withoutDroppableDisplacement(args);
+  const withoutDisplacement: Position = getResultWithoutDroppableDisplacement(
+    args,
+  );
 
@@ -63,0 +65,0 @@ const droppable: ?DroppableDimension = args.droppable;

src/state/get-displacement.js

@@ -37,5 +37,5 @@ // @flow
 
-// Note: it is also an optimisation to undo the displacement on
-// items when they are no longer visible.
-// This prevents a lot of .render() calls when leaving a list
+// Note: it is also an optimisation to not render the displacement on
+// items when they are not longer visible.
+// This prevents a lot of .render() calls when leaving / entering a list
 
@@ -42,0 +42,0 @@ export default ({

src/state/middleware/auto-scroll.js

@@ -6,4 +6,3 @@ // @flow
 
-const shouldCancel = (action: Action) =>
-  action.type === 'CANCEL' ||
+const shouldCancel = (action: Action): boolean =>
   action.type === 'DROP_ANIMATE' ||
@@ -10,0 +9,0 @@ action.type === 'DROP' ||

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

@@ -8,6 +8,8 @@ // @flow
 ) => (action: Action): any => {
-  // Not stopping a collection on a 'DROP' as we want that collection to continue
+  // Not stopping a collection on a 'DROP' as we want a collection to continue
   if (
+    // drag is finished
     action.type === 'DROP_COMPLETE' ||
     action.type === 'CLEAN' ||
+    // no longer accepting changes once the drop has started
     action.type === 'DROP_ANIMATE'
@@ -14,0 +16,0 @@ ) {

src/state/middleware/hooks/hooks-middleware.js

@@ -31,8 +31,8 @@ // @flow
 
-    // All other hooks can fire after we have updated our connected components
-    next(action);
-
     // Drag end
     if (action.type === 'DROP_COMPLETE') {
       const result: DropResult = action.payload;
+      // flushing all pending hooks before snapshots are updated
+      publisher.flush();
+      next(action);
       publisher.drop(result);
@@ -42,2 +42,5 @@ return;
 
+    // All other hooks can fire after we have updated our connected components
+    next(action);
+
     // Drag state resetting - need to check if
@@ -44,0 +47,0 @@ // we should fire a onDragEnd hook

src/state/middleware/hooks/publisher.js

@@ -177,2 +177,7 @@ // @flow
 
+  const flush = () => {
+    invariant(dragging, 'Can only flush hooks while dragging');
+    asyncMarshal.flush();
+  };
+
   const drop = (result: DropResult) => {
@@ -184,4 +189,2 @@ invariant(
     dragging = null;
-    // ensure any pending hooks are flushed
-    asyncMarshal.flush();
     // not adding to frame marshal - we want this to be done in the same render pass
@@ -214,2 +217,3 @@ // we also want the consumers reorder logic to be in the same render pass
     update,
+    flush,
     drop,
@@ -216,0 +220,0 @@ abort,

src/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js

@@ -56,3 +56,2 @@ // @flow
     // Remove any droppables that do not have a visible subject
-    // it is okay if the droppable is not visible on the window
     .filter(
@@ -62,3 +61,10 @@ (droppable: DroppableDimension): boolean =>
     )
+    // Remove any that are not visible in the window
     .filter(
+      (droppable: DroppableDimension): boolean =>
+        isPartiallyVisibleThroughFrame(viewport.frame)(
+          getKnownActive(droppable),
+        ),
+    )
+    .filter(
       (droppable: DroppableDimension): boolean => {
@@ -65,0 +71,0 @@ const activeOfTarget: Rect = getKnownActive(droppable);

src/state/move-in-direction/move-to-next-place/move-to-next-combine/index.js

@@ -29,3 +29,3 @@ // @flow
   destination,
-  insideDestination,
+  insideDestination: originalInsideDestination,
   previousImpact,
@@ -42,16 +42,22 @@ }: Args): ?DragImpact => {
 
+  // we are on a location, and we are trying to combine onto a sibling
+  // that sibling might be displaced
+
   const location: ?DraggableLocation = previousImpact.destination;
-  invariant(location, 'previous location required for combining');
+  invariant(location, 'Need a previous location to move from into a combine');
 
   const currentIndex: number = location.index;
 
-  // When finding the target we need to consider displacement
-  // We need to move onto things in their current displacement
+  // update the insideDestination list to reflect the current
+  // list order
+  const currentInsideDestination: DraggableDimension[] = (() => {
+    const shallow = originalInsideDestination.slice();
 
-  const current: DraggableDimension[] = (() => {
-    const shallow = insideDestination.slice();
-
+    // if we are in the home list we need to remove the item from its original position
+    // before we insert it into its new position
     if (isInHomeList) {
       shallow.splice(draggable.descriptor.index, 1);
     }
+
+    // put the draggable into its current position in the list
     shallow.splice(location.index, 0, draggable);
@@ -70,7 +76,7 @@ return shallow;
   // The last item that can be grouped with is the last one
-  if (targetIndex > current.length - 1) {
+  if (targetIndex > currentInsideDestination.length - 1) {
     return null;
   }
 
-  const target: DraggableDimension = current[targetIndex];
+  const target: DraggableDimension = currentInsideDestination[targetIndex];
 
@@ -77,0 +83,0 @@ const merge: CombineImpact = {

src/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.js

@@ -73,3 +73,6 @@ // @flow
     // moving backward will decrease displacement
+
     if (isMovingForward) {
+      // we are moving into the visual spot of the combine item
+      // and pushing it backwards
       return {
@@ -103,3 +106,2 @@ proposedIndex: combineIndex,
     // want to leave the displaced item in place
-    // we skip displacement when we move past a displaced item
     return {
@@ -112,6 +114,7 @@ proposedIndex: visualIndex - 1,
   // is displaced backwards
+  // moving forward will increase the displacement
+  // moving backward will decrease the displacement
 
-  // moving forward will increase the displacement
   if (isMovingForward) {
-    // we skip displacement when we move past a displaced item
+    // we are moving forwards off the backwards displaced item, leaving it displaced
     return {
@@ -123,3 +126,4 @@ proposedIndex: visualIndex + 1,
 
-  // moving backwards will undo the displacement
+  // we are moving backwards into the visual spot that the displaced item is occupying
+  // this will undo the displacement of the item
   return {
@@ -126,0 +130,0 @@ proposedIndex: visualIndex,

src/state/update-displacement-visibility/speculatively-increase.js

@@ -32,2 +32,3 @@ // @flow
   const displaced: Displacement[] = impact.movement.displaced;
+
   const scrolledViewport: Viewport = scrollViewport(
@@ -34,0 +35,0 @@ viewport,

src/view/animation.js

@@ -27,3 +27,3 @@ // @flow
   fluid: `opacity ${outOfTheWayTiming}`,
-  jump: `transform ${outOfTheWayTiming}, opacity ${outOfTheWayTiming}`,
+  snap: `transform ${outOfTheWayTiming}, opacity ${outOfTheWayTiming}`,
   drop: (duration: number): string => {
@@ -30,0 +30,0 @@ const timing: string = `${duration}s ${curves.drop}`;

src/view/drag-drop-context/check-react-version.js

@@ -25,3 +25,3 @@ // @flow
 // - our peer dependency version is to a full version (eg ^16.3.1)
-const semver: RegExp = /(\d+)\.(\d+)\.(\d+)$/;
+const semver: RegExp = /(\d+)\.(\d+)\.(\d+)/;
 const getVersion = (value: string): Version => {
@@ -28,0 +28,0 @@ const result: ?(string[]) = semver.exec(value);

src/view/drag-handle/sensor/create-mouse-sensor.js

@@ -129,6 +129,12 @@ // @flow
 
-        // drag should be pending
+        // There should be a pending drag at this point
+
         if (!state.pending) {
-          kill();
-          invariant(false, 'Expected there to be a pending drag');
+          // this should be an impossible state
+          // we cannot use kill directly as it checks if there is a pending drag
+          stopPendingDrag();
+          invariant(
+            false,
+            'Expected there to be an active or pending drag when window mousemove event is received',
+          );
         }
@@ -135,0 +141,0 @@

src/view/drag-handle/sensor/create-touch-sensor.js

@@ -5,2 +5,4 @@ // @flow
 import { type Position } from 'css-box-model';
+import type { EventBinding } from '../util/event-types';
+import type { TouchSensor, CreateSensorArgs } from './sensor-types';
 import createScheduler from '../util/create-scheduler';
@@ -16,4 +18,2 @@ import createPostDragEventPreventer, {
 import supportedPageVisibilityEventName from '../util/supported-page-visibility-event-name';
-import type { EventBinding } from '../util/event-types';
-import type { TouchSensor, CreateSensorArgs } from './sensor-types';
 
@@ -132,3 +132,5 @@ type State = {
     if (!pending) {
-      kill();
+      // this should be an impossible state
+      // cannot use kill() as it will not unbind when there is no pending
+      stopPendingDrag();
       invariant(false, 'cannot start a touch drag without a pending position');
@@ -135,0 +137,0 @@ }

src/view/draggable/draggable.jsx

@@ -41,3 +41,3 @@ // @flow
 import throwIfRefIsInvalid from '../throw-if-invalid-inner-ref';
-import checkOwnPropsInDev from './check-own-props-in-dev';
+import checkOwnProps from './check-own-props';
 
@@ -57,3 +57,3 @@ export const zIndexOptions: ZIndexOptions = {
   if (shouldAnimateDragMovement) {
-    return transitions.jump;
+    return transitions.snap;
   }
@@ -121,3 +121,5 @@ return transitions.fluid;
     // as it is designed to prevent setup issues
-    checkOwnPropsInDev(props);
+    if (process.env.NODE_ENV !== 'production') {
+      checkOwnProps(props);
+    }
   }
@@ -158,4 +160,4 @@
 
-  // React calls ref callback twice for every render
-  // https://github.com/facebook/react/pull/8333/files
+  // React can call ref callback twice for every render
+  // if using an arrow function
   setRef = (ref: ?HTMLElement) => {
@@ -162,0 +164,0 @@ if (ref === null) {

src/view/droppable-dimension-publisher/check-for-nested-scroll-container.js

@@ -8,6 +8,2 @@ // @flow
 export default (scrollable: ?Element) => {
-  if (process.env.NODE_ENV === 'production') {
-    return;
-  }
-
   if (!scrollable) {
@@ -14,0 +10,0 @@ return;

src/view/droppable-dimension-publisher/droppable-dimension-publisher.jsx

@@ -50,6 +50,6 @@ // @flow
 const immediate = {
-  passive: true,
+  passive: false,
 };
 const delayed = {
-  passive: false,
+  passive: true,
 };
@@ -316,2 +316,3 @@
       // bind scroll listener
+
       env.closestScrollable.addEventListener(
@@ -323,3 +324,5 @@ 'scroll',
       // print a debug warning if using an unsupported nested scroll container setup
-      checkForNestedScrollContainers(env.closestScrollable);
+      if (process.env.NODE_ENV !== 'production') {
+        checkForNestedScrollContainers(env.closestScrollable);
+      }
     }
@@ -326,0 +329,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1318468

increased by0.87%

Lines of code

34278

increased by0.52%

Number of lines in readme file

1401

increased by4.24%

Number of medium supply chain risk alerts

4

decreased by-33.33%

Dependency changes

• Updatedreact-redux@^5.1.0

• Updatedtiny-invariant@^1.0.2