Animated placeholders

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 347275,
-    "minified": 134225,
-    "gzipped": 39798
+    "bundled": 355565,
+    "minified": 137929,
+    "gzipped": 40759
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 295057,
-    "minified": 109593,
-    "gzipped": 31944
+    "bundled": 303204,
+    "minified": 113136,
+    "gzipped": 32811
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 228983,
-    "minified": 120746,
-    "gzipped": 30051,
+    "bundled": 236995,
+    "minified": 125149,
+    "gzipped": 31186,
     "treeshaked": {
       "rollup": {
-        "code": 81922,
-        "import_statements": 846
+        "code": 85449,
+        "import_statements": 832
       },
       "webpack": {
-        "code": 84599
+        "code": 88137
       }
     }
   }

.storybook/config.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { configure, addDecorator } from '@storybook/react';
 import { withOptions } from '@storybook/addon-options';
 import PopIframeDecorator from './decorator/pop-iframe';
+import GlobalStylesDecorator from './decorator/global-styles';
 // adding css reset - storybook includes a css loader
 import '@atlaskit/css-reset';
 import { version } from '../package.json';
@@ -10,10 +11,10 @@ addDecorator(
   withOptions({
     name: 'react-beautiful-dnd',
     url: 'https://github.com/atlassian/react-beautiful-dnd',
-    showAddonPanel: false,
   }),
 );
 
+addDecorator(GlobalStylesDecorator);
 addDecorator(PopIframeDecorator);
 
 // automatically import all files ending in *.stories.js

.storybook/decorator/global-styles.jsx

@@ -0,0 +1,17 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+import { colors } from '@atlaskit/theme';
+import { grid } from '../../stories/src/constants';
+
+const GlobalStyles = styled.div`
+  background-color: ${colors.N0};
+  min-height: 100vh;
+  color: ${colors.N900};
+`;
+
+const GlobalStylesDecorator = (storyFn: Function) => (
+  <GlobalStyles>{storyFn()}</GlobalStyles>
+);
+
+export default GlobalStylesDecorator;

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2017 Atlassian Pty Ltd
+Copyright 2019 Atlassian Pty Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.

docs/guides/types.md

@@ -115,6 +115,7 @@ type DraggableStateSnapshot = {|
 export type DraggableProps = {|
   style: ?DraggableStyle,
   'data-react-beautiful-dnd-draggable': string,
+  onTransitionEnd: ?(event: TransitionEvent) => void,
 |};
 type DraggableStyle = DraggingStyle | NotDraggingStyle;
 type DraggingStyle = {|

jest.config.js

@@ -1,7 +1,8 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 module.exports = {
-  setupFiles: ['./test/setup.js'],
+  setupFiles: ['./test/env-setup.js'],
+  setupTestFrameworkScriptFile: './test/test-setup.js',
   // node_modules is default.
   testPathIgnorePatterns: ['/node_modules/'],
   watchPlugins: [

package.json

@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "@atlaskit/css-reset": "^3.0.5",
+    "@atlaskit/theme": "^7.0.4",
     "@babel/core": "^7.2.2",
     "@babel/plugin-proposal-class-properties": "^7.3.0",
     "@babel/plugin-transform-modules-commonjs": "^7.2.0",
@@ -128,7 +129,7 @@
   "peerDependencies": {
     "react": "^16.3.1"
   },
-  "license": "Apache-2.0",
+  "license": "apache-2.0",
   "jest-junit": {
     "output": "test-reports/junit/js-test-results.xml"
   }

src/view/animation.js → src/animation.js

@@ -1,6 +1,6 @@
 // @flow
 import type { Position } from 'css-box-model';
-import { isEqual, origin } from '../state/position';
+import { isEqual, origin } from './state/position';
 
 export const curves = {
   outOfTheWay: 'cubic-bezier(0.2, 0, 0, 1)',
@@ -19,8 +19,30 @@ export const combine = {
   },
 };
 
-const outOfTheWayTime: number = 0.2;
-const outOfTheWayTiming = `${outOfTheWayTime}s ${curves.outOfTheWay}`;
+// export const timings = {
+//   outOfTheWay: 0.2,
+//   // greater than the out of the way time
+//   // so that when the drop ends everything will
+//   // have to be out of the way
+//   minDropTime: 0.33,
+//   maxDropTime: 0.55,
+// };
+
+// slow timings
+// uncomment to use
+export const timings = {
+  outOfTheWay: 2,
+  // greater than the out of the way time
+  // so that when the drop ends everything will
+  // have to be out of the way
+  minDropTime: 3,
+  maxDropTime: 4,
+};
+
+const outOfTheWayTiming: string = `${timings.outOfTheWay}s ${
+  curves.outOfTheWay
+}`;
+export const placeholderTransitionDelayTime: number = 0.1;
 
 export const transitions = {
   fluid: `opacity ${outOfTheWayTiming}`,
@@ -30,6 +52,7 @@ export const transitions = {
     return `transform ${timing}, opacity ${timing}`;
   },
   outOfTheWay: `transform ${outOfTheWayTiming}`,
+  placeholder: `height ${outOfTheWayTiming}, width ${outOfTheWayTiming}, margin ${outOfTheWayTiming}`,
 };
 
 const moveTo = (offset: Position): ?string =>

src/dev-warning.js

@@ -4,9 +4,14 @@ const isProduction: boolean = process.env.NODE_ENV === 'production';
 
 // not replacing newlines (which \s does)
 const spacesAndTabs: RegExp = /[ \t]{2,}/g;
+const lineStartWithSpaces: RegExp = /^[ \t]*/gm;
 
 // using .trim() to clear the any newlines before the first text and after last text
-const clean = (value: string) => value.replace(spacesAndTabs, ' ').trim();
+const clean = (value: string) =>
+  value
+    .replace(spacesAndTabs, ' ')
+    .replace(lineStartWithSpaces, '')
+    .trim();
 
 const getDevMessage = (message: string) =>
   clean(`

src/state/action-creators.js

@@ -4,12 +4,11 @@ import type {
   Critical,
   DraggableId,
   DroppableId,
-  DropResult,
+  CompletedDrag,
   MovementMode,
   Viewport,
   DimensionMap,
   DropReason,
-  PendingDrop,
   Published,
 } from '../types';
 
@@ -240,24 +239,35 @@ export const clean = (): CleanAction => ({
   payload: null,
 });
 
+export type AnimateDropArgs = {|
+  completed: CompletedDrag,
+  newHomeClientOffset: Position,
+  dropDuration: number,
+|};
+
 export type DropAnimateAction = {
   type: 'DROP_ANIMATE',
-  payload: PendingDrop,
+  payload: AnimateDropArgs,
 };
 
-export const animateDrop = (pending: PendingDrop): DropAnimateAction => ({
+export const animateDrop = (args: AnimateDropArgs): DropAnimateAction => ({
   type: 'DROP_ANIMATE',
-  payload: pending,
+  payload: args,
 });
 
+export type DropCompleteArgs = {|
+  completed: CompletedDrag,
+  shouldFlush: boolean,
+|};
+
 export type DropCompleteAction = {
   type: 'DROP_COMPLETE',
-  payload: DropResult,
+  payload: DropCompleteArgs,
 };
 
-export const completeDrop = (result: DropResult): DropCompleteAction => ({
+export const completeDrop = (args: DropCompleteArgs): DropCompleteAction => ({
   type: 'DROP_COMPLETE',
-  payload: result,
+  payload: args,
 });
 
 type DropArgs = {|

src/state/can-start-drag.js

@@ -19,11 +19,11 @@ export default (state: State, id: DraggableId): boolean => {
   //   the drop animation is complete. Otherwise they will be grabbing
   //   items not in their original position which can lead to bad visuals
   // Not allowing dragging of the dropping draggable
-  if (state.pending.result.draggableId === id) {
+  if (state.completed.result.draggableId === id) {
     return false;
   }
 
   // if dropping - allow lifting
   // if cancelling - disallow lifting
-  return state.pending.result.reason === 'DROP';
+  return state.completed.result.reason === 'DROP';
 };

src/state/create-store.js

@@ -10,7 +10,6 @@ import dropAnimationFinish from './middleware/drop-animation-finish';
 import dimensionMarshalStopper from './middleware/dimension-marshal-stopper';
 import autoScroll from './middleware/auto-scroll';
 import pendingDrop from './middleware/pending-drop';
-import updateViewportMaxScrollOnDestinationChange from './middleware/update-viewport-max-scroll-on-destination-change';
 import type { DimensionMarshal } from './dimension-marshal/dimension-marshal-types';
 import type { StyleMarshal } from '../view/style-marshal/style-marshal-types';
 import type { AutoScroller } from './auto-scroller/auto-scroller-types';
@@ -79,7 +78,6 @@ export default ({
         // When a drop animation finishes - fire a drop complete
         dropAnimationFinish,
         pendingDrop,
-        updateViewportMaxScrollOnDestinationChange,
         autoScroll(getScroller),
         // Fire responders for consumers (after update to store)
         responders(getResponders, announce),

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

@@ -29,10 +29,14 @@ export type GetDroppableDimensionFn = (
   options: ScrollOptions,
 ) => DroppableDimension;
 
+export type RecollectDroppableOptions = {|
+  withoutPlaceholder: boolean,
+|};
+
 export type DroppableCallbacks = {|
   // a drag is starting
   getDimensionAndWatchScroll: GetDroppableDimensionFn,
-  recollect: () => DroppableDimension,
+  recollect: (options: RecollectDroppableOptions) => DroppableDimension,
   // scroll a droppable
   scroll: (change: Position) => void,
   // If the Droppable is listening for scroll events - it needs to stop!

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

@@ -56,6 +56,13 @@ export default (callbacks: Callbacks) => {
     callbacks: {
       publish: callbacks.publishWhileDragging,
       collectionStarting: callbacks.collectionStarting,
+      getCritical: (): Critical => {
+        invariant(
+          collection,
+          'Cannot get critical when there is no collection',
+        );
+        return collection.critical;
+      },
     },
     getEntries: (): Entries => entries,
   });

src/state/dimension-marshal/while-dragging-publisher.js

@@ -7,8 +7,13 @@ import type {
   DraggableDimension,
   DroppableDimension,
   DraggableDescriptor,
+  Critical,
 } from '../../types';
-import type { Entries, DroppableEntry } from './dimension-marshal-types';
+import type {
+  Entries,
+  DroppableEntry,
+  RecollectDroppableOptions,
+} from './dimension-marshal-types';
 import * as timings from '../../debug/timings';
 import { origin } from '../position';
 import { warning } from '../../dev-warning';
@@ -36,6 +41,7 @@ type Staging = {|
 type Callbacks = {|
   publish: (args: Published) => mixed,
   collectionStarting: () => mixed,
+  getCritical: () => Critical,
 |};
 
 type Args = {|
@@ -89,6 +95,7 @@ export default ({ getEntries, callbacks }: Args): WhileDraggingPublisher => {
     frameId = requestAnimationFrame(() => {
       frameId = null;
       callbacks.collectionStarting();
+      const critical: Critical = callbacks.getCritical();
       timings.start(timingKey);
 
       const entries: Entries = getEntries();
@@ -111,7 +118,13 @@ export default ({ getEntries, callbacks }: Args): WhileDraggingPublisher => {
         (id: DroppableId) => {
           const entry: ?DroppableEntry = entries.droppables[id];
           invariant(entry, 'Cannot find dynamically added droppable in cache');
-          return entry.callbacks.recollect();
+          const isHome: boolean = entry.descriptor.id === critical.droppable.id;
+
+          // need to keep the placeholder when in home list
+          const options: RecollectDroppableOptions = {
+            withoutPlaceholder: !isHome,
+          };
+          return entry.callbacks.recollect(options);
         },
       );
 

src/state/droppable/should-use-placeholder.js

@@ -1,15 +1,7 @@
 // @flow
-import type { DraggableDescriptor, DragImpact, DroppableId } from '../../types';
+import type { DraggableDescriptor, DragImpact } from '../../types';
 import whatIsDraggedOver from './what-is-dragged-over';
 
-export default (
-  descriptor: DraggableDescriptor,
-  impact: DragImpact,
-): boolean => {
-  // use a placeholder when over a foreign list
-  const isOver: ?DroppableId = whatIsDraggedOver(impact);
-  if (!isOver) {
-    return false;
-  }
-  return isOver !== descriptor.droppableId;
-};
+// use placeholder if dragged over
+export default (descriptor: DraggableDescriptor, impact: DragImpact): boolean =>
+  whatIsDraggedOver(impact) === descriptor.droppableId;