Auto scroll grab near edge (#976)

Fixes #349
atlassian · Dec 7, 2018 · ac57253 · ac57253
1 parent b7d549c
commit ac57253
Show file tree

Hide file tree

Showing 41 changed files with 2,454 additions and 2,095 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 339807,
-    "minified": 130844,
-    "gzipped": 38870
+    "bundled": 346497,
+    "minified": 133751,
+    "gzipped": 39617
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 289271,
-    "minified": 107397,
-    "gzipped": 31390
+    "bundled": 295050,
+    "minified": 109602,
+    "gzipped": 31921
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 221375,
-    "minified": 116185,
-    "gzipped": 29093,
+    "bundled": 228302,
+    "minified": 120073,
+    "gzipped": 29861,
     "treeshaked": {
       "rollup": {
-        "code": 79771,
-        "import_statements": 791
+        "code": 81952,
+        "import_statements": 846
       },
       "webpack": {
-        "code": 82339
+        "code": 84571
       }
     }
   }

diff --git a/docs/media.md b/docs/media.md
@@ -53,6 +53,7 @@ This page contains a list of articles, blogs and newsletters that `react-beautif
 - [Want To Recruit Better Engineers? Open Source Your Code](https://angel.co/blog/want-to-recruit-better-engineers-open-source-your-code)
 - [How To Implement Better Drag and Drop in your React App](https://blog.bitsrc.io/implement-better-drag-and-drop-in-your-react-app-beafc4451599)
 - [Beautiful drag and drop with React — The beginner’s guide](https://medium.com/@AlejandroSobko/7798e3928290)
+- [The New Jira Beings Now (in the examples)](https://www.atlassian.com/blog/jira-software/the-new-jira-begins-now)
 - 15 Awesome React Components [Article](https://tutorialzine.com/2017/11/15-awesome-react-components)
 - 15 Interesting JavaScript and CSS Libraries for September 2017 [September edition](https://tutorialzine.com/2017/09/15-interesting-javascript-and-css-libraries-for-september-2017)
 - Mybridge React.JS Top 10 Articles For the Past Month [v.Sep 2017](https://medium.mybridge.co/react-js-top-10-articles-for-the-past-month-v-sep-2017-1894c4d91e0c)

diff --git a/src/state/auto-scroller/auto-scroller-types.js b/src/state/auto-scroller/auto-scroller-types.js
@@ -1,8 +1,9 @@
 // @flow
-import type { DraggingState } from '../../types';
+import type { State, DraggingState } from '../../types';
 
 export type AutoScroller = {|
-  cancel: () => void,
-  jumpScroll: (state: DraggingState) => void,
-  fluidScroll: (state: DraggingState) => void,
+  start: (state: DraggingState) => void,
+  stop: () => void,
+  cancelPending: () => void,
+  scroll: (state: State) => void,
 |};
diff --git a/src/state/auto-scroller/fluid-scroller.js b/src/state/auto-scroller/fluid-scroller.js
diff --git a/src/state/auto-scroller/fluid-scroller/config.js b/src/state/auto-scroller/fluid-scroller/config.js
@@ -0,0 +1,25 @@
+// @flow
+
+// Values used to control how the fluid auto scroll feels
+const config = {
+  // percentage distance from edge of container:
+  startFromPercentage: 0.25,
+  maxScrollAtPercentage: 0.05,
+  // pixels per frame
+  maxPixelScroll: 28,
+
+  // A function used to ease a percentage value
+  // A simple linear function would be: (percentage) => percentage;
+  // percentage is between 0 and 1
+  // result must be between 0 and 1
+  ease: (percentage: number): number => Math.pow(percentage, 2),
+
+  durationDampening: {
+    // ms: how long to dampen the speed of an auto scroll from the start of a drag
+    stopDampeningAt: 1200,
+    // ms: when to start accelerating the reduction of duration dampening
+    accelerateAt: 360,
+  },
+};
+
+export default config;
diff --git a/src/state/auto-scroller/fluid-scroller/did-start-in-scrollable-area.js b/src/state/auto-scroller/fluid-scroller/did-start-in-scrollable-area.js
@@ -0,0 +1 @@
+// @flow
diff --git a/...scroller/get-best-scrollable-droppable.js → ...scroller/get-best-scrollable-droppable.js b/...scroller/get-best-scrollable-droppable.js → ...scroller/get-best-scrollable-droppable.js
@@ -2,14 +2,14 @@
 import memoizeOne from 'memoize-one';
 import invariant from 'tiny-invariant';
 import { type Position } from 'css-box-model';
-import isPositionInFrame from '../visibility/is-position-in-frame';
-import { toDroppableList } from '../dimension-structures';
-import { find } from '../../native-with-fallback';
 import type {
   DroppableDimension,
   DroppableDimensionMap,
   DroppableId,
-} from '../../types';
+} from '../../../types';
+import isPositionInFrame from '../../visibility/is-position-in-frame';
+import { toDroppableList } from '../../dimension-structures';
+import { find } from '../../../native-with-fallback';
 
 const getScrollableDroppables = memoizeOne(
   (droppables: DroppableDimensionMap): DroppableDimension[] =>