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

Comparing version 10.0.0-beta.2 to 10.0.0-beta.3

package.json

 {
   "name": "react-beautiful-dnd-next",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.0-beta.3",
   "description": "Beautiful and accessible drag and drop for lists with React",
@@ -92,3 +92,3 @@ "author": "Alex Reardon <[e-mail]>",
     "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jest": "^21.27.2",
+    "eslint-plugin-jest": "^22.0.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
@@ -107,3 +107,3 @@ "eslint-plugin-prettier": "^3.0.0",
     "react-emotion": "^9.2.12",
-    "react-test-renderer": "^16.6.0",
+    "react-test-renderer": "^16.6.1",
     "rimraf": "^2.6.2",
@@ -125,3 +125,3 @@ "rollup": "^0.67.0",
     "stylelint-processor-styled-components": "^1.5.0",
-    "testcafe": "^0.23.0",
+    "testcafe": "^0.23.1",
     "testcafe-reporter-xunit": "^2.1.0",
@@ -128,0 +128,0 @@ "wait-port": "^0.2.2"

src/index.js

@@ -24,9 +24,9 @@ // @flow
   DropResult,
-  HookProvided,
+  HandleProvided,
   Announce,
   DraggableLocation,
-  OnBeforeDragStartHook,
-  OnDragStartHook,
-  OnDragUpdateHook,
-  OnDragEndHook,
+  OnBeforeDragStartHandle,
+  OnDragStartHandle,
+  OnDragUpdateHandle,
+  OnDragEndHandle,
 } from './types';
@@ -33,0 +33,0 @@

src/state/create-store.js

@@ -8,3 +8,3 @@ // @flow
 import drop from './middleware/drop/drop-middleware';
-import hooks from './middleware/hooks/hooks-middleware';
+import handles from './middleware/handles/handles-middleware';
 import dropAnimationFinish from './middleware/drop-animation-finish';
@@ -18,3 +18,3 @@ import dimensionMarshalStopper from './middleware/dimension-marshal-stopper';
 import type { AutoScroller } from './auto-scroller/auto-scroller-types';
-import type { Hooks, Announce } from '../types';
+import type { Handles, Announce } from '../types';
 import type { Store } from './store-types';
@@ -33,3 +33,3 @@
   styleMarshal: StyleMarshal,
-  getHooks: () => Hooks,
+  getHandles: () => Handles,
   announce: Announce,
@@ -42,3 +42,3 @@ getScroller: () => AutoScroller,
   styleMarshal,
-  getHooks,
+  getHandles,
   announce,
@@ -66,3 +66,3 @@ getScroller,
         // Style updates do not cause more actions. It is important to update styles
-        // before hooks are called: specifically the onDragEnd hook. We need to clear
+        // before handles are called: specifically the onDragEnd handle. We need to clear
         // the transition styles off the elements before a reorder to prevent strange
@@ -76,6 +76,6 @@ // post drag animations in firefox. Even though we clear the transition off
         // when moving into a phase where collection is no longer needed.
-        // We need to stop the marshal before hooks fire as hooks can cause
+        // We need to stop the marshal before handles fire as handles can cause
         // dimension registration changes in response to reordering
         dimensionMarshalStopper(getDimensionMarshal),
-        // Fire application hooks in response to drag changes
+        // Fire application handles in response to drag changes
         lift(getDimensionMarshal),
@@ -88,6 +88,6 @@ drop,
         autoScroll(getScroller),
-        // Fire hooks for consumers (after update to store)
-        hooks(getHooks, announce),
+        // Fire handles for consumers (after update to store)
+        handles(getHandles, announce),
       ),
     ),
   );

src/state/droppable/get-droppable.js

 // @flow
-import { type BoxModel, type Position, type Rect } from 'css-box-model';
+import { type BoxModel, type Position } from 'css-box-model';
 import type {
@@ -79,7 +79,6 @@ Axis,
 
-  const subjectPageMarginBox: Rect = page.marginBox;
   const axis: Axis = direction === 'vertical' ? vertical : horizontal;
 
   const subject: DroppableSubject = getSubject({
-    pageMarginBox: subjectPageMarginBox,
+    page,
     withPlaceholder: null,
@@ -86,0 +85,0 @@ axis,

src/state/droppable/scroll-droppable.js

@@ -42,3 +42,3 @@ // @flow
   const subject: DroppableSubject = getSubject({
-    pageMarginBox: droppable.subject.pageMarginBox,
+    page: droppable.subject.page,
     withPlaceholder: droppable.subject.withPlaceholder,
@@ -45,0 +45,0 @@ axis: droppable.axis,

src/state/droppable/util/get-subject.js

 // @flow
-import { getRect, type Rect, type Spacing } from 'css-box-model';
+import { getRect, type Rect, type Spacing, type BoxModel } from 'css-box-model';
 import type {
@@ -42,3 +42,3 @@ Axis,
 type Args = {|
-  pageMarginBox: Rect,
+  page: BoxModel,
   withPlaceholder: ?PlaceholderInSubject,
@@ -50,3 +50,3 @@ axis: Axis,
 export default ({
-  pageMarginBox,
+  page,
   withPlaceholder,
@@ -56,3 +56,3 @@ axis,
 }: Args): DroppableSubject => {
-  const scrolled: Spacing = scroll(pageMarginBox, frame);
+  const scrolled: Spacing = scroll(page.marginBox, frame);
   const increased: Spacing = increase(scrolled, axis, withPlaceholder);
@@ -62,3 +62,3 @@ const clipped: ?Rect = clip(increased, frame);
   return {
-    pageMarginBox,
+    page,
     withPlaceholder,
@@ -65,0 +65,0 @@ active: clipped,

src/state/droppable/with-placeholder.js

@@ -24,3 +24,3 @@ // @flow
   // TODO: consider margin collapsing?
-  const availableSpace: number = droppable.subject.pageMarginBox[axis.size];
+  const availableSpace: number = droppable.subject.page.contentBox[axis.size];
   const insideDroppable: DraggableDimension[] = getDraggablesInsideDroppable(
@@ -56,3 +56,3 @@ droppable.descriptor.id,
   droppable: DroppableDimension,
-  placeholderSize: Position,
+  displaceBy: Position,
   draggables: DraggableDimensionMap,
@@ -67,2 +67,7 @@ ): DroppableDimension => {
 
+  const placeholderSize: Position = patch(
+    droppable.axis.line,
+    displaceBy[droppable.axis.line],
+  );
+
   const requiredGrowth: ?Position = getRequiredGrowthForPlaceholder(
@@ -82,3 +87,3 @@ droppable,
     const subject: DroppableSubject = getSubject({
-      pageMarginBox: droppable.subject.pageMarginBox,
+      page: droppable.subject.page,
       withPlaceholder: added,
@@ -101,3 +106,3 @@ axis: droppable.axis,
   const subject: DroppableSubject = getSubject({
-    pageMarginBox: droppable.subject.pageMarginBox,
+    page: droppable.subject.page,
     withPlaceholder: added,
@@ -127,3 +132,3 @@ axis: droppable.axis,
     const subject: DroppableSubject = getSubject({
-      pageMarginBox: droppable.subject.pageMarginBox,
+      page: droppable.subject.page,
       axis: droppable.axis,
@@ -149,3 +154,3 @@ frame: null,
   const subject: DroppableSubject = getSubject({
-    pageMarginBox: droppable.subject.pageMarginBox,
+    page: droppable.subject.page,
     axis: droppable.axis,
@@ -152,0 +157,0 @@ frame: newFrame,

src/state/get-drag-impact/in-foreign-list.js

@@ -48,2 +48,3 @@ // @flow
     draggable.displaceBy,
+    // always displace forward in foreign list
     true,
@@ -50,0 +51,0 @@ );

src/state/middleware/lift.js

@@ -23,3 +23,3 @@ // @flow
   // this can change the descriptor of the dragging item
-  // Will call the onDragEnd hooks
+  // Will call the onDragEnd handle
   if (initial.phase === 'DROP_ANIMATING') {
@@ -26,0 +26,0 @@ dispatch(completeDrop(initial.pending.result));

src/state/post-reducer/when-moving/update.js

@@ -5,3 +5,3 @@ // @flow
 import { add, subtract } from '../../position';
-import getDimensionMapWithPlaceholder from './util/get-dimension-map-with-placeholder';
+import getDimensionMapWithPlaceholder from '../../get-dimension-map-with-placeholder';
 import getUserDirection from '../../user-direction/get-user-direction';
@@ -8,0 +8,0 @@ import type {

src/state/publish-while-dragging/index.js

@@ -25,3 +25,3 @@ // @flow
 import noImpact from '../no-impact';
-import getDimensionMapWithPlaceholder from '../post-reducer/when-moving/util/get-dimension-map-with-placeholder';
+import getDimensionMapWithPlaceholder from '../get-dimension-map-with-placeholder';
 
@@ -28,0 +28,0 @@ type Args = {|

src/state/reducer.js

@@ -414,3 +414,3 @@ // @flow
 
-  // Action will be used by hooks to call consumers
+  // Action will be used by handles to call consumers
   // We can simply return to the idle state
@@ -417,0 +417,0 @@ if (action.type === 'DROP_COMPLETE') {

src/types.js

@@ -115,3 +115,3 @@ // @flow
   // raw, unchanging
-  pageMarginBox: Rect,
+  page: BoxModel,
   withPlaceholder: ?PlaceholderInSubject,
@@ -219,3 +219,3 @@ // The hitbox for a droppable
 // FLUID: everything is done in response to highly granular input (eg mouse)
-// SNAP: items move in response to commands (eg arrowDown);
+// SNAP: items move in response to commands (eg keyboard);
 export type MovementMode = 'FLUID' | 'SNAP';
@@ -359,26 +359,26 @@
 
-export type HookProvided = {|
+export type HandleProvided = {|
   announce: Announce,
 |};
 
-export type OnBeforeDragStartHook = (start: DragStart) => mixed;
-export type OnDragStartHook = (
+export type OnBeforeDragStartHandle = (start: DragStart) => mixed;
+export type OnDragStartHandle = (
   start: DragStart,
-  provided: HookProvided,
+  provided: HandleProvided,
 ) => mixed;
-export type OnDragUpdateHook = (
+export type OnDragUpdateHandle = (
   update: DragUpdate,
-  provided: HookProvided,
+  provided: HandleProvided,
 ) => mixed;
-export type OnDragEndHook = (
+export type OnDragEndHandle = (
   result: DropResult,
-  provided: HookProvided,
+  provided: HandleProvided,
 ) => mixed;
 
-export type Hooks = {|
-  onBeforeDragStart?: OnBeforeDragStartHook,
-  onDragStart?: OnDragStartHook,
-  onDragUpdate?: OnDragUpdateHook,
+export type Handles = {|
+  onBeforeDragStart?: OnBeforeDragStartHandle,
+  onDragStart?: OnDragStartHandle,
+  onDragUpdate?: OnDragUpdateHandle,
   // always required
-  onDragEnd: OnDragEndHook,
+  onDragEnd: OnDragEndHandle,
 |};

src/view/drag-drop-context/drag-drop-context.jsx

@@ -22,3 +22,3 @@ // @flow
 } from '../../state/dimension-marshal/dimension-marshal-types';
-import type { DraggableId, State, Hooks } from '../../types';
+import type { DraggableId, State, Handles } from '../../types';
 import type { Store } from '../../state/store-types';
@@ -45,3 +45,3 @@ import {
 type Props = {|
-  ...Hooks,
+  ...Handles,
   // we do not technically need any children for this component
@@ -108,5 +108,5 @@ children: Node | null,
       styleMarshal: this.styleMarshal,
-      // This is a function as users are allowed to change their hook functions
+      // This is a function as users are allowed to change their handle functions
       // at any time
-      getHooks: (): Hooks => ({
+      getHandles: (): Handles => ({
         onBeforeDragStart: this.props.onBeforeDragStart,
@@ -113,0 +113,0 @@ onDragStart: this.props.onDragStart,

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

@@ -76,5 +76,3 @@ // @flow
 
-export default class DroppableDimensionPublisher extends React.Component<
-  Props,
-> {
+export default class DroppableDimensionPublisher extends React.Component<Props> {
   /* eslint-disable react/sort-comp */
@@ -81,0 +79,0 @@ dragging: ?WhileDragging;

No alert changes

Improved metrics

Lines of code

34298

increased by0.01%

Number of lines in readme file

1207

increased by0.75%

Worsened metrics

Total package byte prevSize

1314326

decreased by-0.01%

No dependency changes