├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── examples
├── basic
│ ├── .gitignore
│ ├── README.md
│ ├── package.json
│ ├── public
│ │ ├── favicon.ico
│ │ └── index.html
│ └── src
│ │ ├── App.css
│ │ ├── App.js
│ │ ├── DragItem.css
│ │ ├── DragItem.js
│ │ ├── index.css
│ │ └── index.js
└── mobile-backend
│ ├── .gitignore
│ ├── README.md
│ ├── package.json
│ ├── public
│ ├── favicon.ico
│ └── index.html
│ └── src
│ ├── App.css
│ ├── App.js
│ ├── DragItem.css
│ ├── DragItem.js
│ ├── DragPreview.css
│ ├── DragPreview.js
│ ├── index.css
│ └── index.js
├── package.json
├── src
├── index.js
└── util.js
├── test
├── fixtures
│ └── .gitkeep
├── intBetween.js
├── mocha.opts
├── setup.js
└── strength-creators-test.js
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-env", "@babel/preset-react"],
3 | "plugins": ["@babel/plugin-proposal-class-properties"]
4 | }
5 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | parser: 'babel-eslint',
3 | extends: 'airbnb',
4 |
5 | rules: {
6 | 'react/jsx-filename-extension': 0,
7 | 'no-unused-vars': 0,
8 | 'react/prop-types': 0,
9 | },
10 |
11 | env: {
12 | browser: true,
13 | mocha: true
14 | },
15 | }
16 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | *.log
4 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | examples
2 | node_modules
3 | src
4 | test
5 |
6 | .babelrc
7 | .eslintrc
8 | .gitignore
9 | .travis.yml
10 | CONTRIBUTING
11 | *.log
12 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - '4.2'
4 | - '5.5'
5 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | ### `v4.0.0`
4 | * Change `speed` prop to `strengthMultiplier`
5 | * Adds a hard dependency on using `react-dnd` which was theoretically
6 | optional before.
7 | * Fix double dispatch of `onDragOver` prop
8 | * Default strength functions always return 0 if the point is anywhere
9 | outside the box.
10 |
11 | ### `v3.2.0`
12 | * Use `prop-types` package instead of deprecated `React.PropTypes`
13 |
14 | ### `v3.1.0`
15 | * Add `onScrollChange` prop
16 |
17 | ### `v3.0.0`
18 | * Export a higher order component instead of a component.
19 | * Set displayName on component
20 | * Hoist non-react static properties
21 |
22 | ##### Before (v2)
23 | ```js
24 | import Scrollzone from 'react-dnd-scrollzone';
25 | const zone = ;
26 | ```
27 |
28 | ##### After (v3)
29 | ```js
30 | import withScrolling from 'react-dnd-scrollzone';
31 | const Scrollzone = withScrolling('div');
32 | const zone = ;
33 | ```
34 |
35 | ### `v2.0.0`
36 | * Remove `buffer` prop.
37 | * Add `horizontalStrength` and `verticalStrength` props.
38 | * Add `createVerticalStrength` and `createHorizontalStrength` exports.
39 | * Fix bug with strength calculations and large buffers.
40 | * Fix bug with scrolling not always stopping when drop targets are nested.
41 |
42 | ##### Before (v1)
43 | ```js
44 | import Scrollzone from 'react-dnd-scrollzone';
45 | const zone = ;
46 | ```
47 |
48 | ##### After (v2)
49 | ```js
50 | import Scrollzone, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone';
51 | const vStrength = createVerticalStrength(300);
52 | const hStrength = createHorizontalStrength(300);
53 | const zone = ;
54 | ```
55 |
56 | ### `v1.1.0`
57 | * Initial release.
58 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # Contributing
2 |
3 | ## PRs and Contributions
4 | * Tests must pass.
5 | * Follow existing coding style.
6 | * If you fix a bug or add a feature, add a test.
7 |
8 | ## Issues
9 | Things that will help get your question issue looked at:
10 | * Full and runnable JS code.
11 | * Clear description of the problem or unexpected behavior.
12 | * Clear description of the expected result.
13 | * Steps you have taken to debug it yourself.
14 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | (The MIT License)
2 |
3 | Copyright (c) 2016 Nicholas Clawson
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining
6 | a copy of this software and associated documentation files (the
7 | 'Software'), to deal in the Software without restriction, including
8 | without limitation the rights to use, copy, modify, merge, publish,
9 | distribute, sublicense, and/or sell copies of the Software, and to
10 | permit persons to whom the Software is furnished to do so, subject to
11 | the following conditions:
12 |
13 | The above copyright notice and this permission notice shall be
14 | included in all copies or substantial portions of the Software.
15 |
16 | THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19 | IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
20 | CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
21 | TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
22 | SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # frontend-collective-react-dnd-scrollzone
2 |
3 | Forked from https://github.com/azuqua/react-dnd-scrollzone with support for react-dnd@7.
4 |
5 | Cross browser compatible scrolling containers for drag and drop interactions.
6 |
7 | ### [Basic Example](./examples/basic)
8 |
9 | ```js
10 | import React, { Component } from 'react';
11 | import { DragDropContextProvider } from 'react-dnd';
12 | import HTML5Backend from 'react-dnd-html5-backend';
13 | import withScrolling from 'react-dnd-scrollzone';
14 | import DragItem from './DragItem';
15 | import './App.css';
16 |
17 | const ScrollingComponent = withScrolling('div');
18 |
19 | const ITEMS = [1,2,3,4,5,6,7,8,9,10];
20 |
21 | export default class App extends Component {
22 | render() {
23 | return (
24 |
25 |
26 | {ITEMS.map(n => (
27 |
28 | ))}
29 |
30 |
31 | );
32 | }
33 | }
34 | ```
35 |
36 | Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.
37 |
38 | ### Easing Example
39 |
40 | ```js
41 | import React, { Component } from 'react';
42 | import { DragDropContextProvider } from 'react-dnd';
43 | import HTML5Backend from 'react-dnd-html5-backend';
44 | import withScrolling, { createHorizontalStrength, createVerticalStrength } from 'react-dnd-scrollzone';
45 | import DragItem from './DragItem';
46 | import './App.css';
47 |
48 |
49 | const ScrollZone = withScrolling('ul');
50 | const linearHorizontalStrength = createHorizontalStrength(150);
51 | const linearVerticalStrength = createVerticalStrength(150);
52 | const ITEMS = [1,2,3,4,5,6,7,8,9,10];
53 |
54 | // this easing function is from https://gist.github.com/gre/1650294 and
55 | // expects/returns a number between [0, 1], however strength functions
56 | // expects/returns a value between [-1, 1]
57 | function ease(val) {
58 | const t = (val + 1) / 2; // [-1, 1] -> [0, 1]
59 | const easedT = t<.5 ? 2*t*t : -1+(4-2*t)*t;
60 | return easedT * 2 - 1; // [0, 1] -> [-1, 1]
61 | }
62 |
63 | function hStrength(box, point) {
64 | return ease(linearHorizontalStrength(box, point));
65 | }
66 |
67 | function vStrength(box, point) {
68 | return ease(linearVerticalStrength(box, point));
69 | }
70 |
71 | export default App(props) {
72 | return (
73 |
74 |
78 |
79 | {ITEMS.map(n => (
80 |
81 | ))}
82 |
83 |
84 | );
85 | }
86 | ```
87 | Note: You should replace the original `div` you would like to make scrollable with the `ScrollingComponent`.
88 |
89 | ### Virtualized Example
90 |
91 | Since react-dnd-scrollzone utilizes the Higher Order Components (HOC) pattern, drag and drop scrolling behaviour can easily be added to existing components. For example to speedup huge lists by using [react-virtualized](https://github.com/bvaughn/react-virtualized) for a windowed view where only the visible rows are rendered:
92 |
93 | ```js
94 | import React from 'react';
95 | import { DragDropContextProvider } from 'react-dnd';
96 | import HTML5Backend from 'react-dnd-html5-backend';
97 | import withScrolling from 'react-dnd-scrollzone';
98 | import { List } from 'react-virtualized';
99 | import DragItem from './DragItem';
100 | import './App.css';
101 |
102 | const ScrollingVirtualList = withScrolling(List);
103 |
104 | // creates array with 1000 entries
105 | const ITEMS = Array.from(Array(1000)).map((e,i)=> `Item ${i}`);
106 |
107 |
108 | export default App(props) {
109 | return (
110 |
111 | (
119 |
124 | )
125 | }
126 | />
127 |
128 | );
129 | }
130 | ```
131 |
132 |
133 | ### API
134 |
135 | #### `withScrolling`
136 |
137 | A React higher order component with the following properties:
138 |
139 | ```js
140 | const ScrollZone = withScrolling(String|Component);
141 |
142 |
147 |
148 | {children}
149 |
150 | ```
151 | Apply the withScrolling function to any html-identifier ("div", "ul" etc) or react component to add drag and drop scrolling behaviour.
152 |
153 | * `horizontalStrength` a function that returns the strength of the horizontal scroll direction
154 | * `verticalStrength` - a function that returns the strength of the vertical scroll direction
155 | * `strengthMultiplier` - strength multiplier, play around with this (default 30)
156 | * `onScrollChange` - a function that is called when `scrollLeft` or `scrollTop` of the component are changed. Called with those two arguments in that order.
157 |
158 | The strength functions are both called with two arguments. An object representing the rectangle occupied by the Scrollzone, and an object representing the coordinates of mouse.
159 |
160 | They should return a value between -1 and 1.
161 | * Negative values scroll up or left.
162 | * Positive values scroll down or right.
163 | * 0 stops all scrolling.
164 |
165 | #### `createVerticalStrength(buffer)` and `createHorizontalStrength(buffer)`
166 |
167 | These allow you to create linearly scaling strength functions with a sensitivity different than the default value of 150px.
168 |
169 | ##### Example
170 |
171 | ```js
172 | import withScrolling, { createVerticalStrength, createHorizontalStrength } from 'react-dnd-scrollzone';
173 |
174 | const Scrollzone = withScrolling('ul');
175 | const vStrength = createVerticalStrength(500);
176 | const hStrength = createHorizontalStrength(300);
177 |
178 | // zone will scroll when the cursor drags within
179 | // 500px of the top/bottom and 300px of the left/right
180 | const zone = (
181 |
182 |
183 |
184 | );
185 | ```
186 |
--------------------------------------------------------------------------------
/examples/basic/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/examples/basic/README.md:
--------------------------------------------------------------------------------
1 | # Basic Example
2 |
3 | ```bash
4 | # in this directory
5 | npm install
6 | npm start
7 | ```
8 |
--------------------------------------------------------------------------------
/examples/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "basic",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.9.5"
7 | },
8 | "dependencies": {
9 | "prop-types": "^15.5.9",
10 | "react": "^15.5.4",
11 | "react-dnd": "^2.4.0",
12 | "react-dnd-html5-backend": "^2.4.1",
13 | "react-dnd-scrollzone": "^3.1.0",
14 | "react-dom": "^15.5.4"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test --env=jsdom",
20 | "eject": "react-scripts eject"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/basic/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-collective/frontend-collective-react-dnd-scrollzone/9eead370d2dd43687143f536e5d1b14ee375a2a8/examples/basic/public/favicon.ico
--------------------------------------------------------------------------------
/examples/basic/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | React App
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/examples/basic/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | width: 500px;
3 | height: 500px;
4 | overflow: scroll;
5 | border: solid 2px black;
6 | }
7 |
--------------------------------------------------------------------------------
/examples/basic/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import HTML5Backend from 'react-dnd-html5-backend';
3 | import { DragDropContextProvider } from 'react-dnd';
4 | import withScrolling from 'react-dnd-scrollzone';
5 | import DragItem from './DragItem';
6 | import './App.css';
7 |
8 | const ScrollingComponent = withScrolling('div');
9 |
10 | const ITEMS = [1,2,3,4,5,6,7,8,9,10];
11 |
12 | export default class App extends Component {
13 | render() {
14 | return (
15 |
16 |
17 | {ITEMS.map(n => (
18 |
19 | ))}
20 |
21 |
22 | );
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/examples/basic/src/DragItem.css:
--------------------------------------------------------------------------------
1 | .DragItem {
2 | width: 100%;
3 | border: solid 1px black;
4 | padding: 30px;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/basic/src/DragItem.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { DragSource } from 'react-dnd';
4 | import './DragItem.css';
5 |
6 | class DragItem extends PureComponent {
7 |
8 | static propTypes = {
9 | label: PropTypes.string.isRequired,
10 | };
11 |
12 | render() {
13 | return this.props.dragSource(
14 |
15 | {this.props.label}
16 |
17 | );
18 | }
19 | }
20 |
21 | export default DragSource(
22 | 'foo',
23 | {
24 | beginDrag() {
25 | return {}
26 | }
27 | },
28 | (connect) => ({
29 | dragSource: connect.dragSource(),
30 | })
31 | )(DragItem);
32 |
--------------------------------------------------------------------------------
/examples/basic/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/basic/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import App from './App';
4 | import './index.css';
5 |
6 | ReactDOM.render(
7 | ,
8 | document.getElementById('root')
9 | );
10 |
--------------------------------------------------------------------------------
/examples/mobile-backend/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/examples/mobile-backend/README.md:
--------------------------------------------------------------------------------
1 | # Basic Example
2 |
3 | ```bash
4 | # in this directory
5 | npm install
6 | npm start
7 | ```
8 |
--------------------------------------------------------------------------------
/examples/mobile-backend/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mobile-backend",
3 | "version": "0.1.0",
4 | "private": true,
5 | "devDependencies": {
6 | "react-scripts": "0.9.5"
7 | },
8 | "dependencies": {
9 | "prop-types": "^15.5.9",
10 | "react": "^15.5.4",
11 | "react-dnd": "^2.4.0",
12 | "react-dnd-scrollzone": "^4.0.0",
13 | "react-dnd-touch-backend": "^0.3.10",
14 | "react-dom": "^15.5.4"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test --env=jsdom",
20 | "eject": "react-scripts eject"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/mobile-backend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/frontend-collective/frontend-collective-react-dnd-scrollzone/9eead370d2dd43687143f536e5d1b14ee375a2a8/examples/mobile-backend/public/favicon.ico
--------------------------------------------------------------------------------
/examples/mobile-backend/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | React App
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | width: 500px;
3 | height: 500px;
4 | overflow: scroll;
5 | border: solid 2px black;
6 | }
7 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import TouchBackend from 'react-dnd-touch-backend';
3 | import { DragDropContextProvider } from 'react-dnd';
4 | import withScrolling from 'react-dnd-scrollzone';
5 | import DragItem from './DragItem';
6 | import DragPreview from './DragPreview';
7 | import './App.css';
8 |
9 | const ScrollingComponent = withScrolling('div');
10 |
11 | const ITEMS = [1,2,3,4,5,6,7,8,9,10];
12 |
13 | export default class App extends Component {
14 | render() {
15 | return (
16 |
17 |
18 | {ITEMS.map(n => (
19 |
20 | ))}
21 |
22 |
23 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/DragItem.css:
--------------------------------------------------------------------------------
1 | .DragItem {
2 | width: 100%;
3 | border: solid 1px black;
4 | padding: 30px;
5 | }
6 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/DragItem.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import { DragSource } from 'react-dnd';
4 | import './DragItem.css';
5 |
6 | class DragItem extends PureComponent {
7 |
8 | static propTypes = {
9 | label: PropTypes.string.isRequired,
10 | };
11 |
12 | render() {
13 | return this.props.dragSource(
14 |
15 | {this.props.label}
16 |
17 | );
18 | }
19 | }
20 |
21 | export default DragSource(
22 | 'foo',
23 | {
24 | beginDrag() {
25 | return {}
26 | }
27 | },
28 | (connect) => ({
29 | dragSource: connect.dragSource(),
30 | })
31 | )(DragItem);
32 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/DragPreview.css:
--------------------------------------------------------------------------------
1 | .DragPreview {
2 | position: absolute;
3 | top: 0;
4 | left: 0;
5 | height: 100vh;
6 | width: 100vw;
7 | pointer-events: none;
8 | z-index: 1000;
9 | }
10 |
11 | .DragPreview__item {
12 | width: 100px;
13 | height: 100px;
14 | background: white;
15 | border: solid 1px black;
16 | }
17 |
--------------------------------------------------------------------------------
/examples/mobile-backend/src/DragPreview.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { DragLayer } from 'react-dnd';
3 | import './DragPreview.css';
4 |
5 | class DragPreview extends PureComponent {
6 |
7 | render() {
8 | const {
9 | item,
10 | offset,
11 | } = this.props;
12 |
13 | return (
14 |
15 | {item && (
16 |
24 | )}
25 |