├── .babelrc
├── .eslintignore
├── .gitignore
├── .npmignore
├── .travis.yml
├── LICENSE
├── README.md
├── docs
├── 00 Quick Start
│ ├── FAQ.md
│ ├── Overview.md
│ ├── Testing.md
│ ├── Troubleshooting.md
│ └── Tutorial.md
├── 01 Top Level API
│ ├── DragDropContext.md
│ ├── DragLayer.md
│ ├── DragSource.md
│ └── DropTarget.md
├── 02 Connecting to DOM
│ ├── DragSourceConnector.md
│ └── DropTargetConnector.md
├── 03 Monitoring State
│ ├── DragLayerMonitor.md
│ ├── DragSourceMonitor.md
│ └── DropTargetMonitor.md
├── 04 Backends
│ ├── HTML5.md
│ └── Test.md
├── README.md
└── index.md
├── examples
├── 00 Chessboard
│ └── Tutorial App
│ │ ├── Board.js
│ │ ├── Board.less
│ │ ├── BoardSquare.js
│ │ ├── Constants.js
│ │ ├── Game.js
│ │ ├── Knight.js
│ │ ├── Square.js
│ │ └── index.js
├── 01 Dustbin
│ ├── Multiple Targets
│ │ ├── Box.js
│ │ ├── Container.js
│ │ ├── Dustbin.js
│ │ ├── ItemTypes.js
│ │ └── index.js
│ ├── Single Target
│ │ ├── Box.js
│ │ ├── Container.js
│ │ ├── Dustbin.js
│ │ ├── ItemTypes.js
│ │ ├── __tests__
│ │ │ └── Box-test.js
│ │ └── index.js
│ └── Stress Test
│ │ ├── Box.js
│ │ ├── Container.js
│ │ ├── Dustbin.js
│ │ ├── ItemTypes.js
│ │ └── index.js
├── 02 Drag Around
│ ├── Custom Drag Layer
│ │ ├── Box.js
│ │ ├── BoxDragPreview.js
│ │ ├── Container.js
│ │ ├── CustomDragLayer.js
│ │ ├── DraggableBox.js
│ │ ├── ItemTypes.js
│ │ ├── index.js
│ │ ├── shallowEqual.js
│ │ ├── shouldPureComponentUpdate.js
│ │ └── snapToGrid.js
│ └── Naive
│ │ ├── Box.js
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ └── index.js
├── 03 Nesting
│ ├── Drag Sources
│ │ ├── Colors.js
│ │ ├── Container.js
│ │ ├── SourceBox.js
│ │ ├── TargetBox.js
│ │ └── index.js
│ └── Drop Targets
│ │ ├── Box.js
│ │ ├── Container.js
│ │ ├── Dustbin.js
│ │ ├── ItemTypes.js
│ │ └── index.js
├── 04 Sortable
│ ├── Cancel on Drop Outside
│ │ ├── Card.js
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ └── index.js
│ ├── Simple
│ │ ├── Card.js
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ └── index.js
│ └── Stress Test
│ │ ├── Card.js
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ └── index.js
├── 05 Customize
│ ├── Drop Effects
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ ├── SourceBox.js
│ │ ├── TargetBox.js
│ │ └── index.js
│ └── Handles and Previews
│ │ ├── BoxWithHandle.js
│ │ ├── BoxWithImage.js
│ │ ├── Container.js
│ │ ├── ItemTypes.js
│ │ └── index.js
├── README.md
└── shared
│ └── wrapInTestContext.js
├── karma.conf.js
├── package.json
├── scripts
├── build.sh
├── buildSiteIndexPages.sh
├── buildStaticSite.sh
├── cssTransformLoader.js
├── markdownLoader.js
├── prism.js
├── publishStaticSite.sh
├── resolvers.js
└── startSiteDevServer.sh
├── site
├── Constants.js
├── IndexPage.js
├── LICENSE
├── README.md
├── base.less
├── client.js
├── components
│ ├── CodeBlock.js
│ ├── CodeBlock.less
│ ├── Cover.js
│ ├── Cover.less
│ ├── Header.js
│ ├── Header.less
│ ├── NavBar.js
│ ├── NavBar.less
│ ├── PageBody.js
│ ├── PageBody.less
│ ├── SideBar.js
│ ├── SideBar.less
│ └── StaticHTMLBlock.js
├── constants.less
├── pages
│ ├── APIPage.js
│ ├── ExamplePage.js
│ └── HomePage.js
├── renderPath.js
├── webpack-client.config.js
└── webpack-prerender.config.js
├── src
├── DragDropContext.js
├── DragLayer.js
├── DragSource.js
├── DropTarget.js
├── areOptionsEqual.js
├── createSourceConnector.js
├── createSourceFactory.js
├── createSourceMonitor.js
├── createTargetConnector.js
├── createTargetFactory.js
├── createTargetMonitor.js
├── decorateHandler.js
├── index.js
├── registerSource.js
├── registerTarget.js
├── utils
│ ├── checkDecoratorArguments.js
│ ├── cloneWithRef.js
│ ├── isValidType.js
│ ├── shallowEqual.js
│ └── shallowEqualScalar.js
└── wrapConnectorHooks.js
├── test-utils.js
├── tests.webpack.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["es2015", "stage-0"],
3 | "plugins": [
4 | "transform-class-properties",
5 | "transform-decorators-legacy",
6 | ["transform-react-jsx", {
7 | "pragma": "preact.h"
8 | }]
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | __site__
2 | __site_prerender__
3 | site
4 | scripts
5 | dist
6 | lib
7 | **/node_modules
8 | **/webpack*.config.js
9 | tests.webpack.js
10 | karma.conf.js
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist
3 | lib
4 | .DS_Store
5 | .idea
6 | __site__
7 | __site_prerender__
8 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | scripts
3 | examples
4 | site
5 | __site__
6 | __site_prerender__
7 | webpack.config.js
8 | .babelrc
9 | .eslintrc
10 | bower.json
11 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "iojs-2"
4 | script:
5 | - npm run lint
6 | - npm run build
7 | before_install:
8 | - npm install -g npm@3.x
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Dan Abramov
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
23 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Drag and Drop for Preact
2 | =========
3 |
4 | _This is a form of [react-dnd](https://github.com/react-dnd/react-dnd) made by [@gaearon](https://github.com/gaearon)_
5 |
6 | Docs could be looked at `react-dnd` docs page since API is the same (replace React things with Preact ones):
7 |
8 | https://react-dnd.github.io/react-dnd/
9 |
--------------------------------------------------------------------------------
/docs/00 Quick Start/Testing.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | Testing
4 | ===================
5 |
6 | React DnD is test-friendly. The whole drag and drop interaction, including the rendering of your components, as well as the side effects you perform in response to the drag and drop events, can be tested.
7 |
8 | There are several different approaches to testing React components. React DnD is not opinionated and lets you use either of them. **Neither of those approaches require the browser event system to be available.**
9 |
10 | A few test examples are included with the React DnD inside its `examples` folder. Run `npm install` and `npm test` inside the `react-dnd` root folder to start them.
11 |
12 | ### Testing the Components in Isolation
13 |
14 | If you are only interested in testing the *rendering* of your components in isolation, and not their interaction, you may use the `DecoratedComponent` static property available on any class wrapped with React DnD to access the original class. You may then test it with the different props without any dependency on React DnD, supplying an identity function to stub the connector methods.
15 |
16 | -------------------
17 | ```js
18 | var React = require('react');
19 | var TestUtils = require('react-addons-test-utils');
20 | var expect = require('expect');
21 |
22 | it('can be tested independently', function () {
23 | // Obtain the reference to the component before React DnD wrapping
24 | var OriginalBox = Box.DecoratedComponent;
25 |
26 | // Stub the React DnD connector functions with an identity function
27 | var identity = function (el) { return el; };
28 |
29 | // Render with one set of props and test
30 | var root = TestUtils.renderIntoDocument(
31 |
37 | You can drop here!
38 |
39 | );
40 | }
41 | });
42 |
43 | module.exports = DropTarget(/* ... */)(DropZone);
44 | ```
45 | -------------------
46 | ```js
47 | import React from 'react';
48 | import { DropTarget } from 'react-dnd';
49 |
50 | /* ... */
51 |
52 | function collect(connect, monitor) {
53 | return {
54 | connectDropTarget: connect.dropTarget()
55 | };
56 | }
57 |
58 | class DropZone {
59 | render() {
60 | const { connectDropTarget } = this.props;
61 |
62 | return connectDropTarget(
63 |
64 | You can drop here!
65 |
66 | );
67 | }
68 | }
69 |
70 | export default DropTarget(/* ... */)(DropZone);
71 | ```
72 | -------------------
73 | ```js
74 | import React from 'react';
75 | import { DropTarget } from 'react-dnd';
76 |
77 | /* ... */
78 |
79 | function collect(connect, monitor) {
80 | return {
81 | connectDropTarget: connect.dropTarget()
82 | };
83 | }
84 |
85 | @DropTarget(/* ... */)
86 | export default class DropZone {
87 | render() {
88 | const { connectDropTarget } = this.props;
89 |
90 | return connectDropTarget(
91 |
92 | You can drop here!
93 |
94 | );
95 | }
96 | }
97 | ```
98 | -------------------
99 |
100 |
--------------------------------------------------------------------------------
/docs/03 Monitoring State/DragLayerMonitor.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | DragLayerMonitor
4 | ===================
5 |
6 | `DragLayerMonitor` is an object passed to a collecting function of the [`DragLayer`](docs-drag-layer.html). Its methods let you get information about the global drag state.
7 |
8 | ### Methods
9 |
10 | * **`isDragging()`**: Returns `true` if a drag operation is in progress. Returns `false` otherwise.
11 |
12 | * **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
13 |
14 | * **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
15 |
16 | * **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
17 |
18 | * **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
19 |
20 | * **`getClientOffset`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
21 |
22 | * **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
23 |
24 | * **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.
--------------------------------------------------------------------------------
/docs/03 Monitoring State/DragSourceMonitor.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | DragSourceMonitor
4 | ===================
5 |
6 | `DragSourceMonitor` is an object passed to a collecting function of the [`DragSource`](docs-drag-source.html). Its methods let you get information about the drag state of a specific drag source. The specific drag source bound to that monitor is called the monitor's *owner* below.
7 |
8 | ### Methods
9 |
10 | * **`canDrag()`**: Returns `true` if no drag operation is in progress, and the owner's `canDrag()` returns `true` or is not defined.
11 |
12 | * **`isDragging()`**: Returns `true` if there is a drag operation is in progress, and either the owner initiated the drag, or its `isDragging()` is defined and returns `true`.
13 |
14 | * **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
15 |
16 | * **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
17 |
18 | * **`getDropResult()`**: Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their `drop()` methods. When a chain of `drop()` is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from `drop()` overrides the child drop result previously set by the child. Returns `null` if called outside `endDrag()`.
19 |
20 | * **`didDrop()`** Returns `true` if some drop target has handled the drop event, `false` otherwise. Even if a target did not return a drop result, `didDrop()` returns `true`. Use it inside `endDrag()` to test whether any drop target has handled the drop. Returns `false` if called outside `endDrag()`.
21 |
22 | * **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
23 |
24 | * **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
25 |
26 | * **`getClientOffset()`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
27 |
28 | * **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
29 |
30 | * **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.
31 |
--------------------------------------------------------------------------------
/docs/03 Monitoring State/DropTargetMonitor.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | DropTargetMonitor
4 | ===================
5 |
6 | `DropTargetMonitor` is an object passed to a collecting function of the [`DropTarget`](docs-drop-target.html). Its methods let you get information about the drag state of a specific drop target. The specific drop target bound to that monitor is called the monitor's *owner* below.
7 |
8 | ### Methods
9 |
10 | * **`canDrop()`**: Returns `true` if no drag operation is in progress, and the owner's `canDrop()` returns `true` or is not defined.
11 |
12 | * **`isOver(options)`**: Returns `true` if there is a drag operation is in progress, and the pointer is currently hovering over the owner. You may optionally pass `{ shallow: true }` to strictly check whether *only* the owner is being hovered, as opposed to a nested target.
13 |
14 | * **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
15 |
16 | * **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
17 |
18 | * **`getDropResult()`**: Returns a plain object representing the last recorded drop result. The drop targets may optionally specify it by returning an object from their `drop()` methods. When a chain of `drop()` is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from `drop()` overrides the drop result previously set by the child. Returns `null` if called outside `drop()`.
19 |
20 | * **`didDrop()`** Returns `true` if some drop target has handled the drop event, `false` otherwise. Even if a target did not return a drop result, `didDrop()` returns `true`. Use it inside `drop()` to test whether any nested drop target has already handled the drop. Returns `false` if called outside `drop()`.
21 |
22 | * **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
23 |
24 | * **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
25 |
26 | * **`getClientOffset()`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
27 |
28 | * **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
29 |
30 | * **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.
31 |
--------------------------------------------------------------------------------
/docs/04 Backends/HTML5.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | HTML5
4 | ===================
5 |
6 | This is the only officially supported backend for React DnD. It uses [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood and hides [its quirks](http://quirksmode.org/blog/archives/2009/09/the_html5_drag.html).
7 |
8 | ### Installation
9 |
10 | The HTML5 backend comes in a separate package:
11 |
12 | ```
13 | npm install --save react-dnd-html5-backend
14 | ```
15 |
16 | While we suggest you to use NPM, you can find the precompiled UMD build in the `dist` folder available on the [latest](https://github.com/gaearon/react-dnd-html5-backend/tree/latest/dist) branch as well as in every [tagged release](https://github.com/gaearon/react-dnd-html5-backend/releases). This is where you can point Bower if that’s what you use.
17 |
18 | ### Extras
19 |
20 | Aside from the default export, the HTML5 backend module also provides a few extras:
21 |
22 | * **`getEmptyImage()`**: a function returning a transparent empty [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image). Use `connect.dragPreview()` of the [DragSourceConnector](docs-drag-source-connector.html) to hide the browser-drawn drag preview completely. Handy for drawing the [custom drag layers with `DragLayer`](docs-drag-layer.html). Note that the custom drag previews don't work in IE.
23 |
24 | * **`NativeTypes`**: an enumeration of three constants, `NativeTypes.FILE`, `NativeTypes.URL` and `NativeTypes.TEXT`. You may register the [drop targets](docs-drop-target.html) for these types to handle the drop of the native files, URLs, or the regular page text.
25 |
26 | ### Usage
27 |
28 | -------------------
29 | ```js
30 | var HTML5Backend = require('react-dnd-html5-backend');
31 | var DragDropContext = require('react-dnd').DragDropContext;
32 |
33 | var YourApp = React.createClass(
34 | /* ... */
35 | );
36 |
37 | module.exports = DragDropContext(HTML5Backend)(YourApp);
38 | ```
39 | -------------------
40 | ```js
41 | import HTML5Backend from 'react-dnd-html5-backend';
42 | import { DragDropContext } from 'react-dnd';
43 |
44 | class YourApp {
45 | /* ... */
46 | }
47 |
48 | export default DragDropContext(HTML5Backend)(YourApp);
49 | ```
50 | -------------------
51 | ```js
52 | import HTML5Backend from 'react-dnd-html5-backend';
53 | import { DragDropContext } from 'react-dnd';
54 |
55 | @DragDropContext(HTML5Backend)
56 | export default class YourApp {
57 | /* ... */
58 | }
59 | ```
60 | -------------------
61 |
62 |
--------------------------------------------------------------------------------
/docs/04 Backends/Test.md:
--------------------------------------------------------------------------------
1 | *New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*
2 |
3 | Test
4 | ===================
5 |
6 | The test backend lets you test the drag and drop interaction of your components without the DOM.
7 |
8 | ### Installation
9 |
10 | The test backend comes in a separate package:
11 |
12 | ```
13 | npm install --save-dev react-dnd-test-backend
14 | ```
15 |
16 | ### Usage
17 |
18 | See the second example in the [testing](docs-testing.html) tutorial.
--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | The docs are not meant to be read on Github.
2 | Read the docs on the official React DnD website instead:
3 |
4 | http://gaearon.github.io/react-dnd/docs-overview.html
--------------------------------------------------------------------------------
/docs/index.md:
--------------------------------------------------------------------------------
1 | React DnD is a set of React [higher-order](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750) components to help you build complex drag and drop interfaces while keeping your components decoupled. It is a perfect fit for apps like Trello and Storify, where dragging transfers data between different parts of the application, and the components change their appearance and the application state in response to the drag and drop events.
2 |
3 | ## Installation
4 |
5 | ```sh
6 | npm install --save react-dnd
7 | npm install --save react-dnd-html5-backend
8 | ```
9 |
10 | The second package instructs React DnD to use [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood. You may choose to use a third-party backend instead, such as [the touch backend](https://github.com/yahoo/react-dnd-touch-backend).
11 |
12 | ## What's It Look Like?
13 |
14 | -------------------
15 | ```js
16 | // Let's make
60 | {text}
61 |
62 | );
63 | }
64 | });
65 |
66 | // Export the wrapped component:
67 | module.exports = DragSource(ItemTypes.CARD, cardSource, collect)(Card);
68 | ```
69 | -------------------
70 | ```js
71 | // Let's make
111 | {text}
112 |
113 | );
114 | }
115 | }
116 |
117 | Card.propTypes = propTypes;
118 |
119 | // Export the wrapped component:
120 | export default DragSource(ItemTypes.CARD, cardSource, collect)(Card);
121 | ```
122 | -------------------
123 | ```js
124 | // Let's make
158 | {text}
159 |
160 | );
161 | }
162 | }
163 | ```
164 | -------------------
165 |
166 | ## Features
167 |
168 | ### It works with your components
169 |
170 | Instead of providing readymade widgets, React DnD wraps your components and injects props into them. If you use React Router or Flummox, you already know this pattern.
171 |
172 | ### It embraces unidirectional data flow
173 |
174 | React DnD fully embraces the declarative rendering paradigm of React and doesn't mutate the DOM. It is a great complement to Redux and other architectures with the unidirectional data flow. In fact it is built on Redux.
175 |
176 | ### It hides the platform quirks
177 |
178 | HTML5 drag and drop has an awkward API full of pitfalls and browser inconsistencies. React DnD handles them internally for you, so you can focus on developing your application instead of working around the browser bugs.
179 |
180 | ### It is extensible and testable
181 |
182 | React DnD uses the HTML5 drag and drop under the hood, but it also lets you supply a custom “backend”. You can create a custom DnD backend based on the touch events, the mouse events, or something else entirely. For example, a built-in simulation backend lets you test drag and drop interaction of your components in a Node environment.
183 |
184 | ### It is ready for the future
185 |
186 | React DnD does not export mixins, and works equally great with any components, whether they are created using ES6 classes, `createClass` or alternative React frameworks such as Omniscient. Its API shines with ES7 decorators if you like to be on the bleeding edge, but it also feels natural in both ES5 and ES6.
187 |
188 | ## Touch Support
189 |
190 | For touch support, use React DnD with [the touch backend](https://github.com/yahoo/react-dnd-touch-backend) instead of the HTML5 backend.
191 |
192 | ## Non-Goals
193 |
194 | React DnD gives you a set of powerful primitives, but it does not contain any readymade components. It's lower level than [jQuery UI](https://jqueryui.com/) or [interact.js](http://interactjs.io/) and is focused on getting the drag and drop interaction right, leaving its visual aspects such as axis constraints or snapping to you. For example, React DnD doesn't plan to provide a `Sortable` component. Instead it makes it easy for you to build your own, with any rendering customizations that you need.
195 |
196 | ## Support and Contributions
197 |
198 | Issues and potential improvements are discussed on [Github](https://github.com/gaearon/react-dnd/issues).
199 | The [Gitter room](https://gitter.im/gaearon/react-dnd) is another good place to get support.
200 |
201 | ## Thanks
202 |
203 | Big thanks to [BrowserStack](https://www.browserstack.com) for letting the maintainers use their service to debug browser issues.
204 |
205 | ## License
206 |
207 | React DnD is licensed as MIT. Use it as you will.
208 |
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/Board.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import BoardSquare from './BoardSquare';
3 | import Knight from './Knight';
4 | import { DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 | import './Board.less';
7 |
8 | @DragDropContext(HTML5Backend)
9 | export default class Board extends Component {
10 |
11 | renderSquare(i) {
12 | const x = i % 8;
13 | const y = Math.floor(i / 8);
14 |
15 | return (
16 |
18 |
20 | {this.renderPiece(x, y)}
21 |
22 |
23 | );
24 | }
25 |
26 | renderPiece(x, y) {
27 | const [knightX, knightY] = this.props.knightPosition;
28 | if (x === knightX && y === knightY) {
29 | return
41 | {squares}
42 |
43 | );
44 | }
45 | }
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/Board.less:
--------------------------------------------------------------------------------
1 | .Board {
2 | width: 100%;
3 | height: 100%;
4 | display: flex;
5 | flex-wrap: wrap;
6 | }
7 |
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/BoardSquare.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import Square from './Square';
3 | import { canMoveKnight, moveKnight } from './Game';
4 | import { ItemTypes } from './Constants';
5 | import { DropTarget } from 'react-dnd';
6 |
7 | const squareTarget = {
8 | canDrop(props) {
9 | return canMoveKnight(props.x, props.y);
10 | },
11 |
12 | drop(props) {
13 | moveKnight(props.x, props.y);
14 | }
15 | };
16 |
17 | function collect(connect, monitor) {
18 | return {
19 | connectDropTarget: connect.dropTarget(),
20 | isOver: monitor.isOver(),
21 | canDrop: monitor.canDrop()
22 | };
23 | }
24 |
25 | @DropTarget(ItemTypes.KNIGHT, squareTarget, collect)
26 | export default class BoardSquare extends Component {
27 |
28 | renderOverlay(color) {
29 | return (
30 |
40 | );
41 | }
42 |
43 | render() {
44 | const { x, y, connectDropTarget, isOver, canDrop, children } = this.props;
45 | const black = (x + y) % 2 === 1;
46 |
47 | return connectDropTarget(
48 |
53 |
54 | {children}
55 |
56 | {isOver && !canDrop && this.renderOverlay('red')}
57 | {!isOver && canDrop && this.renderOverlay('yellow')}
58 | {isOver && canDrop && this.renderOverlay('green')}
59 |
60 | );
61 | }
62 | }
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/Constants.js:
--------------------------------------------------------------------------------
1 | export const ItemTypes = {
2 | KNIGHT: 'knight'
3 | };
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/Game.js:
--------------------------------------------------------------------------------
1 | let knightPosition = [1, 7];
2 | let observer = null;
3 |
4 | function emitChange() {
5 | observer(knightPosition);
6 | }
7 |
8 | export function observe(o) {
9 | if (observer) {
10 | throw new Error('Multiple observers not implemented.');
11 | }
12 |
13 | observer = o;
14 | emitChange();
15 |
16 | return () => {
17 | observer = null;
18 | };
19 | }
20 |
21 | export function canMoveKnight(toX, toY) {
22 | const [x, y] = knightPosition;
23 | const dx = toX - x;
24 | const dy = toY - y;
25 |
26 | return (Math.abs(dx) === 2 && Math.abs(dy) === 1) ||
27 | (Math.abs(dx) === 1 && Math.abs(dy) === 2);
28 | }
29 |
30 | export function moveKnight(toX, toY) {
31 | knightPosition = [toX, toY];
32 | emitChange();
33 | }
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/Square.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 |
3 | export default class Square extends Component {
4 |
5 | render() {
6 | const { black } = this.props;
7 | const backgroundColor = black ? 'black' : 'white';
8 | const color = black ? 'white' : 'black';
9 |
10 | return (
11 |
17 | {this.props.children}
18 |
19 | );
20 | }
21 | }
--------------------------------------------------------------------------------
/examples/00 Chessboard/Tutorial App/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Board from './Board';
3 | import { observe } from './Game';
4 |
5 | /**
6 | * Unlike the tutorial, export a component so it can be used on the website.
7 | */
8 | export default class ChessboardTutorialApp extends Component {
9 | constructor(props) {
10 | super(props);
11 | this.unobserve = observe(this.handleChange.bind(this));
12 | }
13 |
14 | handleChange(knightPosition) {
15 | const nextState = { knightPosition };
16 | if (this.state) {
17 | this.setState(nextState);
18 | } else {
19 | this.state = nextState;
20 | }
21 | }
22 |
23 | componentWillUnmount() {
24 | this.unobserve();
25 | }
26 |
27 | render() {
28 | const { knightPosition } = this.state;
29 | return (
30 |
31 |
32 | Browse the Source
34 |
35 | This is a sample app you'll build as you work through the tutorial .
36 |
37 |
38 | It illustrates creating the drag sources and the drop targets, using the monitors to query the current drag state, and customizing the drag previews.
39 |
40 |
45 |
47 |
48 | Make sure to check out the tutorial for step-by-step instructions on building it!
49 |
50 |
34 | {isDropped ?
35 | {name} :
36 | name
37 | }
38 |
39 | );
40 | }
41 | }
--------------------------------------------------------------------------------
/examples/01 Dustbin/Multiple Targets/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import { DragDropContext } from 'react-dnd';
3 | import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
4 | import Dustbin from './Dustbin';
5 | import Box from './Box';
6 | import ItemTypes from './ItemTypes';
7 | import update from 'react/lib/update';
8 |
9 | @DragDropContext(HTML5Backend)
10 | export default class Container extends Component {
11 | constructor(props) {
12 | super(props);
13 | this.state = {
14 | dustbins: [
15 | { accepts: [ItemTypes.GLASS], lastDroppedItem: null },
16 | { accepts: [ItemTypes.FOOD], lastDroppedItem: null },
17 | { accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL], lastDroppedItem: null },
18 | { accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null }
19 | ],
20 | boxes: [
21 | { name: 'Bottle', type: ItemTypes.GLASS },
22 | { name: 'Banana', type: ItemTypes.FOOD },
23 | { name: 'Magazine', type: ItemTypes.PAPER }
24 | ],
25 | droppedBoxNames: []
26 | };
27 | }
28 |
29 | isDropped(boxName) {
30 | return this.state.droppedBoxNames.indexOf(boxName) > -1;
31 | }
32 |
33 | render() {
34 | const { boxes, dustbins } = this.state;
35 |
36 | return (
37 |
38 |
39 | {dustbins.map(({ accepts, lastDroppedItem }, index) =>
40 | this.handleDrop(index, item)}
43 | key={index} />
44 | )}
45 |
46 |
47 |
48 | {boxes.map(({ name, type }, index) =>
49 |
55 |
43 | {isActive ?
44 | 'Release to drop' :
45 | 'This dustbin accepts: ' + accepts.join(', ')
46 | }
47 |
48 | {lastDroppedItem &&
49 |
Last dropped: {JSON.stringify(lastDroppedItem)}
50 | }
51 |
8 |
9 | Browse the Source
11 |
12 | This is a slightly more interesting example.
13 |
14 |
15 | It demonstrates how a single drop target may accept multiple types, and how those types may be derived from props.
16 | It also demonstrates the handling of native files and URLs (try dropping them onto the last two dustbins).
17 |
18 |
19 |
48 | {name}
49 |
50 | )
51 | );
52 | }
53 | }
--------------------------------------------------------------------------------
/examples/01 Dustbin/Single Target/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import { DragDropContext } from 'react-dnd';
3 | import HTML5Backend from 'react-dnd-html5-backend';
4 | import Dustbin from './Dustbin';
5 | import Box from './Box';
6 |
7 | @DragDropContext(HTML5Backend)
8 | export default class Container extends Component {
9 | render() {
10 | return (
11 |
12 |
13 |
15 |
16 |
20 |
44 | {isActive ?
45 | 'Release to drop' :
46 | 'Drag a box here'
47 | }
48 |
49 | );
50 | }
51 | }
--------------------------------------------------------------------------------
/examples/01 Dustbin/Single Target/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | BOX: 'box'
3 | };
--------------------------------------------------------------------------------
/examples/01 Dustbin/Single Target/__tests__/Box-test.js:
--------------------------------------------------------------------------------
1 | import TestUtils from 'react-dom/lib/ReactTestUtils';
2 | import wrapInTestContext from '../../../shared/wrapInTestContext';
3 | import expect from 'expect';
4 | import Box from '../Box';
5 |
6 | describe('Box', () => {
7 | describe('can be tested independently', () => {
8 | it('it is not dragging', (done) => {
9 | // Obtain the reference to the component before React DnD wrapping
10 | const OriginalBox = Box.DecoratedComponent;
11 |
12 | // Stub the React DnD connector functions with an identity function
13 | const identity = x => x;
14 |
15 | // Render with one set of props and test
16 | TestUtils.renderIntoDocument(
17 |
8 |
9 | Browse the Source
11 |
12 | This is the simplest example there is.
13 |
14 |
15 | Drag the boxes below and drop them into the dustbin.
16 | Note that it has a neutral, an active and a hovered state.
17 | The dragged item itself changes opacity while dragged.
18 |
19 |
20 |
39 | {isDropped ?
40 | {name} :
41 | name
42 | }
43 |
44 | );
45 | }
46 | }
--------------------------------------------------------------------------------
/examples/01 Dustbin/Stress Test/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import { DragDropContext } from 'react-dnd';
3 | import HTML5Backend, { NativeTypes } from 'react-dnd-html5-backend';
4 | import Dustbin from './Dustbin';
5 | import Box from './Box';
6 | import ItemTypes from './ItemTypes';
7 | import shuffle from 'lodash/shuffle';
8 | import update from 'react/lib/update';
9 |
10 | @DragDropContext(HTML5Backend)
11 | export default class Container extends Component {
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | dustbins: [
16 | { accepts: [ItemTypes.GLASS], lastDroppedItem: null },
17 | { accepts: [ItemTypes.FOOD], lastDroppedItem: null },
18 | { accepts: [ItemTypes.PAPER, ItemTypes.GLASS, NativeTypes.URL], lastDroppedItem: null },
19 | { accepts: [ItemTypes.PAPER, NativeTypes.FILE], lastDroppedItem: null }
20 | ],
21 | boxes: [
22 | { name: 'Bottle', type: ItemTypes.GLASS },
23 | { name: 'Banana', type: ItemTypes.FOOD },
24 | { name: 'Magazine', type: ItemTypes.PAPER }
25 | ],
26 | droppedBoxNames: []
27 | };
28 | }
29 |
30 | componentDidMount() {
31 | this.interval = setInterval(() => this.tickTock(), 1000);
32 | }
33 |
34 | tickTock() {
35 | this.setState({
36 | boxes: shuffle(this.state.boxes),
37 | dustbins: shuffle(this.state.dustbins)
38 | });
39 | }
40 |
41 | componentWillUnmount() {
42 | clearInterval(this.interval);
43 | }
44 |
45 | isDropped(boxName) {
46 | return this.state.droppedBoxNames.indexOf(boxName) > -1;
47 | }
48 |
49 | render() {
50 | const { boxes, dustbins } = this.state;
51 |
52 | return (
53 |
54 |
55 | {dustbins.map(({ accepts, lastDroppedItem }, index) =>
56 | this.handleDrop(index, item)}
59 | key={index} />
60 | )}
61 |
62 |
63 |
64 | {boxes.map(({ name, type }, index) =>
65 |
71 |
43 | {isActive ?
44 | 'Release to drop' :
45 | 'This dustbin accepts: ' + accepts.join(', ')
46 | }
47 |
48 | {lastDroppedItem &&
49 |
Last dropped: {JSON.stringify(lastDroppedItem)}
50 | }
51 |
8 |
9 | Browse the Source
11 |
12 | This example is similar to the previous one, but props of both the drag sources and the drop targets change every second.
13 | It demonstrates that React DnD keeps track of the changing props, and if a component receives the new props, React DnD recalculates the drag and drop state.
14 | It also shows how a custom isDragging implementation can make the drag source appear as dragged, even if the component that initiated the drag has received new props.
15 |
16 |
17 |
20 | {title}
21 |
22 | );
23 | }
24 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Custom Drag Layer/BoxDragPreview.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import shouldPureComponentUpdate from './shouldPureComponentUpdate';
3 | import Box from './Box';
4 |
5 | const styles = {
6 | display: 'inline-block',
7 | transform: 'rotate(-7deg)',
8 | WebkitTransform: 'rotate(-7deg)'
9 | };
10 |
11 | export default class BoxDragPreview extends Component {
12 |
13 | shouldComponentUpdate = shouldPureComponentUpdate;
14 |
15 | constructor(props) {
16 | super(props);
17 | this.tick = this.tick.bind(this);
18 | this.state = {
19 | tickTock: false
20 | };
21 | }
22 |
23 | componentDidMount() {
24 | this.interval = setInterval(this.tick, 500);
25 | }
26 |
27 | componentWillUnmount() {
28 | clearInterval(this.interval);
29 | }
30 |
31 | tick() {
32 | this.setState({
33 | tickTock: !this.state.tickTock
34 | });
35 | }
36 |
37 | render() {
38 | const { title } = this.props;
39 | const { tickTock } = this.state;
40 |
41 | return (
42 |
43 |
46 | );
47 | }
48 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Custom Drag Layer/Container.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import shouldPureComponentUpdate from './shouldPureComponentUpdate';
3 | import update from 'react/lib/update';
4 | import ItemTypes from './ItemTypes';
5 | import DraggableBox from './DraggableBox';
6 | import snapToGrid from './snapToGrid';
7 | import { DropTarget } from 'react-dnd';
8 |
9 | const styles = {
10 | width: 300,
11 | height: 300,
12 | border: '1px solid black',
13 | position: 'relative'
14 | };
15 |
16 | const boxTarget = {
17 | drop(props, monitor, component) {
18 | const delta = monitor.getDifferenceFromInitialOffset();
19 | const item = monitor.getItem();
20 |
21 | let left = Math.round(item.left + delta.x);
22 | let top = Math.round(item.top + delta.y);
23 | if (props.snapToGrid) {
24 | [left, top] = snapToGrid(left, top);
25 | }
26 |
27 | component.moveBox(item.id, left, top);
28 | }
29 | };
30 |
31 | @DropTarget(ItemTypes.BOX, boxTarget, connect => ({
32 | connectDropTarget: connect.dropTarget()
33 | }))
34 | export default class Container extends Component {
35 | static propTypes = {
36 | connectDropTarget: PropTypes.func.isRequired,
37 | snapToGrid: PropTypes.bool.isRequired
38 | }
39 |
40 | shouldComponentUpdate = shouldPureComponentUpdate;
41 |
42 | constructor(props) {
43 | super(props);
44 | this.state = {
45 | boxes: {
46 | 'a': { top: 20, left: 80, title: 'Drag me around' },
47 | 'b': { top: 180, left: 20, title: 'Drag me too' }
48 | }
49 | };
50 | }
51 |
52 | moveBox(id, left, top) {
53 | this.setState(update(this.state, {
54 | boxes: {
55 | [id]: {
56 | $merge: {
57 | left: left,
58 | top: top
59 | }
60 | }
61 | }
62 | }));
63 | }
64 |
65 | renderBox(item, key) {
66 | return (
67 |
79 | {Object
80 | .keys(boxes)
81 | .map(key => this.renderBox(boxes[key], key))
82 | }
83 |
84 | );
85 | }
86 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Custom Drag Layer/CustomDragLayer.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import ItemTypes from './ItemTypes';
3 | import BoxDragPreview from './BoxDragPreview';
4 | import snapToGrid from './snapToGrid';
5 | import { DragLayer } from 'react-dnd';
6 |
7 | const layerStyles = {
8 | position: 'fixed',
9 | pointerEvents: 'none',
10 | zIndex: 100,
11 | left: 0,
12 | top: 0,
13 | width: '100%',
14 | height: '100%'
15 | };
16 |
17 | function getItemStyles(props) {
18 | const { initialOffset, currentOffset } = props;
19 | if (!initialOffset || !currentOffset) {
20 | return {
21 | display: 'none'
22 | };
23 | }
24 |
25 | let { x, y } = currentOffset;
26 |
27 | if (props.snapToGrid) {
28 | x -= initialOffset.x;
29 | y -= initialOffset.y;
30 | [x, y] = snapToGrid(x, y);
31 | x += initialOffset.x;
32 | y += initialOffset.y;
33 | }
34 |
35 | const transform = `translate(${x}px, ${y}px)`;
36 | return {
37 | transform: transform,
38 | WebkitTransform: transform
39 | };
40 | }
41 |
42 | @DragLayer(monitor => ({
43 | item: monitor.getItem(),
44 | itemType: monitor.getItemType(),
45 | initialOffset: monitor.getInitialSourceClientOffset(),
46 | currentOffset: monitor.getSourceClientOffset(),
47 | isDragging: monitor.isDragging()
48 | }))
49 | export default class CustomDragLayer extends Component {
50 |
51 | renderItem(type, item) {
52 | switch (type) {
53 | case ItemTypes.BOX:
54 | return (
55 |
71 |
72 | {this.renderItem(itemType, item)}
73 |
74 |
54 |
56 | );
57 | }
58 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Custom Drag Layer/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | BOX: 'box'
3 | };
--------------------------------------------------------------------------------
/examples/02 Drag Around/Custom Drag Layer/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 | import CustomDragLayer from './CustomDragLayer';
4 | import { DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 |
7 | @DragDropContext(HTML5Backend)
8 | export default class DragAroundCustomDragLayer extends Component {
9 | constructor(props) {
10 | super(props);
11 |
12 | this.handleSnapToGridAfterDropChange = this.handleSnapToGridAfterDropChange.bind(this);
13 | this.handleSnapToGridWhileDraggingChange = this.handleSnapToGridWhileDraggingChange.bind(this);
14 |
15 | this.state = {
16 | snapToGridAfterDrop: false,
17 | snapToGridWhileDragging: false
18 | };
19 | }
20 |
21 | render() {
22 | const { snapToGridAfterDrop, snapToGridWhileDragging } = this.state;
23 |
24 | return (
25 |
26 |
27 | Browse the Source
29 |
30 | The browser APIs provide no way to change the drag preview or its behavior once drag has started.
31 | Libraries such as jQuery UI implement the drag and drop from scratch to work around this, but react-dnd
32 | only supports browser drag and drop “backend” for now, so we have to accept its limitations.
33 |
34 |
35 | We can, however, customize behavior a great deal if we feed the browser an empty image as drag preview.
36 | This library provides a DragLayer that you can use to implement a fixed layer on top of your app where you'd draw a custom drag preview component.
37 |
38 |
39 | Note that we can draw a completely different component on our drag layer if we wish so. It's not just a screenshot.
40 |
41 |
42 | With this approach, we miss out on default “return” animation when dropping outside the container.
43 | However, we get great flexibility in customizing drag feedback and zero flicker.
44 |
45 |
46 |
47 |
48 |
49 | Snap to grid while dragging
53 |
54 |
56 | Snap to grid after drop
60 |
61 |
62 |
34 | {children}
35 |
36 | );
37 | }
38 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Naive/Container.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import update from 'react/lib/update';
3 | import ItemTypes from './ItemTypes';
4 | import Box from './Box';
5 | import { DropTarget, DragDropContext } from 'react-dnd';
6 | import HTML5Backend from 'react-dnd-html5-backend';
7 |
8 | const styles = {
9 | width: 300,
10 | height: 300,
11 | border: '1px solid black',
12 | position: 'relative'
13 | };
14 |
15 | const boxTarget = {
16 | drop(props, monitor, component) {
17 | const item = monitor.getItem();
18 | const delta = monitor.getDifferenceFromInitialOffset();
19 | const left = Math.round(item.left + delta.x);
20 | const top = Math.round(item.top + delta.y);
21 |
22 | component.moveBox(item.id, left, top);
23 | }
24 | };
25 |
26 | @DragDropContext(HTML5Backend)
27 | @DropTarget(ItemTypes.BOX, boxTarget, connect => ({
28 | connectDropTarget: connect.dropTarget()
29 | }))
30 | export default class Container extends Component {
31 |
32 | constructor(props) {
33 | super(props);
34 | this.state = {
35 | boxes: {
36 | 'a': { top: 20, left: 80, title: 'Drag me around' },
37 | 'b': { top: 180, left: 20, title: 'Drag me too' }
38 | }
39 | };
40 | }
41 |
42 | moveBox(id, left, top) {
43 | this.setState(update(this.state, {
44 | boxes: {
45 | [id]: {
46 | $merge: {
47 | left: left,
48 | top: top
49 | }
50 | }
51 | }
52 | }));
53 | }
54 |
55 | render() {
56 | const { hideSourceOnDrag, connectDropTarget } = this.props;
57 | const { boxes} = this.state;
58 |
59 | return connectDropTarget(
60 |
61 | {Object.keys(boxes).map(key => {
62 | const { left, top, title } = boxes[key];
63 | return (
64 |
69 | {title}
70 |
71 | );
72 | })}
73 |
74 | );
75 | }
76 | }
--------------------------------------------------------------------------------
/examples/02 Drag Around/Naive/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | BOX: 'box'
3 | };
--------------------------------------------------------------------------------
/examples/02 Drag Around/Naive/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class DragAroundNaive extends Component {
5 | constructor(props) {
6 | super(props);
7 | this.handleHideSourceClick = this.handleHideSourceClick.bind(this);
8 | this.state = {
9 | hideSourceOnDrag: true
10 | };
11 | }
12 |
13 | handleHideSourceClick() {
14 | this.setState({
15 | hideSourceOnDrag: !this.state.hideSourceOnDrag
16 | });
17 | }
18 |
19 | render() {
20 | const { hideSourceOnDrag } = this.state;
21 |
22 | return (
23 |
24 |
25 | Browse the Source
27 |
28 | This example naively relies on browser drag and drop implementation without much custom logic.
29 |
30 |
31 | When the box is dragged, we remove its original DOM node by returning null from render() and let browser draw the drag preview.
32 | When the is released, we draw it at the new coordinates.
33 | If you try to drag the box outside the container, the browser will animate its return.
34 |
35 |
36 | While this approach works for simple cases, it flickers on drop.
37 | This happens because the browser removes the drag preview before we have a chance to make the dragged item visible.
38 | This might not be a problem if you dim the original item instead of hiding it, but it's clearly visible otherwise.
39 |
40 |
41 | If we want to add custom logic such as snapping to grid or bounds checking, we can only do this on drop.
42 | There is no way for us to control what happens to dragged preview once the browser has drawn it.
43 | Check out the custom rendering example if you'd rather trade more control for some more work.
44 |
45 |
46 |
47 |
48 | Hide the source item while dragging
52 |
53 |
54 |
13 |
14 |
15 |
16 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
28 |
50 | Forbid drag
54 |
55 | {children}
56 |
57 | );
58 | }
59 | }
60 |
61 | export default class StatefulSourceBox extends Component {
62 | constructor(props) {
63 | super(props);
64 | this.state = {
65 | forbidDrag: false
66 | };
67 | }
68 |
69 | render() {
70 | return (
71 | this.handleToggleForbidDrag()} />
74 | );
75 | }
76 |
77 | handleToggleForbidDrag() {
78 | this.setState({
79 | forbidDrag: !this.state.forbidDrag
80 | });
81 | }
82 | }
--------------------------------------------------------------------------------
/examples/03 Nesting/Drag Sources/TargetBox.js:
--------------------------------------------------------------------------------
1 | import { PropTypes, Component } from 'react';
2 | import { DropTarget } from 'react-dnd';
3 | import Colors from './Colors';
4 |
5 | const style = {
6 | border: '1px solid gray',
7 | height: '15rem',
8 | width: '15rem',
9 | padding: '2rem',
10 | textAlign: 'center'
11 | };
12 |
13 | const ColorTarget = {
14 | drop(props, monitor) {
15 | props.onDrop(monitor.getItemType());
16 | }
17 | };
18 |
19 | @DropTarget([Colors.YELLOW, Colors.BLUE], ColorTarget, (connect, monitor) => ({
20 | connectDropTarget: connect.dropTarget(),
21 | isOver: monitor.isOver(),
22 | canDrop: monitor.canDrop(),
23 | draggingColor: monitor.getItemType()
24 | }))
25 | class TargetBox extends Component {
26 |
27 | render() {
28 | const { canDrop, isOver, draggingColor, lastDroppedColor, connectDropTarget } = this.props;
29 | const opacity = isOver ? 1 : 0.7;
30 |
31 | let backgroundColor = '#fff';
32 | switch (draggingColor) {
33 | case Colors.BLUE:
34 | backgroundColor = 'lightblue';
35 | break;
36 | case Colors.YELLOW:
37 | backgroundColor = 'lightgoldenrodyellow';
38 | break;
39 | default:
40 | break;
41 | }
42 |
43 | return connectDropTarget(
44 |
45 |
46 |
Drop here.
47 |
48 | {!canDrop && lastDroppedColor &&
49 |
Last dropped: {lastDroppedColor}
50 | }
51 |
this.handleDrop(color)} />
67 | );
68 | }
69 |
70 | handleDrop(color) {
71 | this.setState({
72 | lastDroppedColor: color
73 | });
74 | }
75 | }
--------------------------------------------------------------------------------
/examples/03 Nesting/Drag Sources/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class NestingDragSources extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Browse the Source
11 |
12 | You can nest the drag sources in one another.
13 | If a nested drag source returns false from canDrag, its parent will be asked, until a draggable source is found and activated.
14 | Only the activated drag source will have its beginDrag() and endDrag() called.
15 |
16 |
17 |
29 | Drag me
30 |
31 | );
32 | }
33 | }
--------------------------------------------------------------------------------
/examples/03 Nesting/Drop Targets/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Dustbin from './Dustbin';
3 | import Box from './Box';
4 | import { DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 |
7 | @DragDropContext(HTML5Backend)
8 | export default class Container extends Component {
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
21 |
23 |
24 |
25 |
26 |
27 |
29 |
63 | {text}
64 |
65 | {hasDropped &&
66 |
dropped {hasDroppedOnChild && ' on child'}
67 | }
68 |
69 |
70 | {children}
71 |
72 |
8 |
9 | Browse the Source
11 |
12 | Drop targets can, too, be nested in one another.
13 | Unlike the drag sources, several drop targets may react to the same item being dragged.
14 | React DnD by design offers no means of stopping propagation.
15 | Instead, the drop targets may compare monitor.isOver() and monitor.isOver({'{'} shallow: false {'}'}) to learn if just them, or their nested targets, are being hovered.
16 | They may also check monitor.didDrop() and monitor.getDropResult() to learn if a nested target has already handled the drop, and even return a different drop result.
17 |
18 |
19 |
62 | {text}
63 |
64 | ));
65 | }
66 | }
--------------------------------------------------------------------------------
/examples/04 Sortable/Cancel on Drop Outside/Container.js:
--------------------------------------------------------------------------------
1 | import { Component, PropTypes } from 'react';
2 | import update from 'react/lib/update';
3 | import Card from './Card';
4 | import { DropTarget, DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 | import ItemTypes from './ItemTypes';
7 |
8 | const style = {
9 | width: 400
10 | };
11 |
12 | const cardTarget = {
13 | drop() {
14 | }
15 | };
16 |
17 | @DragDropContext(HTML5Backend)
18 | @DropTarget(ItemTypes.CARD, cardTarget, connect => ({
19 | connectDropTarget: connect.dropTarget()
20 | }))
21 | export default class Container extends Component {
22 |
23 | constructor(props) {
24 | super(props);
25 | this.moveCard = this.moveCard.bind(this);
26 | this.findCard = this.findCard.bind(this);
27 | this.state = {
28 | cards: [{
29 | id: 1,
30 | text: 'Write a cool JS library'
31 | }, {
32 | id: 2,
33 | text: 'Make it generic enough'
34 | }, {
35 | id: 3,
36 | text: 'Write README'
37 | }, {
38 | id: 4,
39 | text: 'Create some examples'
40 | }, {
41 | id: 5,
42 | text: 'Spam in Twitter and IRC to promote it'
43 | }, {
44 | id: 6,
45 | text: '???'
46 | }, {
47 | id: 7,
48 | text: 'PROFIT'
49 | }]
50 | };
51 | }
52 |
53 | moveCard(id, atIndex) {
54 | const { card, index } = this.findCard(id);
55 | this.setState(update(this.state, {
56 | cards: {
57 | $splice: [
58 | [index, 1],
59 | [atIndex, 0, card]
60 | ]
61 | }
62 | }));
63 | }
64 |
65 | findCard(id) {
66 | const { cards } = this.state;
67 | const card = cards.filter(c => c.id === id)[0];
68 |
69 | return {
70 | card,
71 | index: cards.indexOf(card)
72 | };
73 | }
74 |
75 | render() {
76 | const { connectDropTarget } = this.props;
77 | const { cards } = this.state;
78 |
79 | return connectDropTarget(
80 |
81 | {cards.map(card => {
82 | return (
83 |
91 | );
92 | }
93 | }
--------------------------------------------------------------------------------
/examples/04 Sortable/Cancel on Drop Outside/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | CARD: 'card'
3 | };
--------------------------------------------------------------------------------
/examples/04 Sortable/Cancel on Drop Outside/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class SortableCancelOnDropOutside extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Browse the Source
11 |
12 | Because you write the logic instead of using the readymade components, you can tweak the behavior to the one your app needs.
13 | In this example, instead of moving the card inside the drop target's drop() handler, we do it inside the drag source's endDrag() handler. This let us check monitor.didDrop() and revert the drag operation if the card was dropped outside its container.
14 |
15 |
16 |
94 | {text}
95 |
96 | ));
97 | }
98 | }
99 |
--------------------------------------------------------------------------------
/examples/04 Sortable/Simple/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import update from 'react/lib/update';
3 | import Card from './Card';
4 | import { DragDropContext } from 'react-dnd';
5 | import HTML5Backend from 'react-dnd-html5-backend';
6 |
7 | const style = {
8 | width: 400
9 | };
10 |
11 | @DragDropContext(HTML5Backend)
12 | export default class Container extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.moveCard = this.moveCard.bind(this);
16 | this.state = {
17 | cards: [{
18 | id: 1,
19 | text: 'Write a cool JS library'
20 | }, {
21 | id: 2,
22 | text: 'Make it generic enough'
23 | }, {
24 | id: 3,
25 | text: 'Write README'
26 | }, {
27 | id: 4,
28 | text: 'Create some examples'
29 | }, {
30 | id: 5,
31 | text: 'Spam in Twitter and IRC to promote it (note that this element is taller than the others)'
32 | }, {
33 | id: 6,
34 | text: '???'
35 | }, {
36 | id: 7,
37 | text: 'PROFIT'
38 | }]
39 | };
40 | }
41 |
42 | moveCard(dragIndex, hoverIndex) {
43 | const { cards } = this.state;
44 | const dragCard = cards[dragIndex];
45 |
46 | this.setState(update(this.state, {
47 | cards: {
48 | $splice: [
49 | [dragIndex, 1],
50 | [hoverIndex, 0, dragCard]
51 | ]
52 | }
53 | }));
54 | }
55 |
56 | render() {
57 | const { cards } = this.state;
58 |
59 | return (
60 |
61 | {cards.map((card, i) => {
62 | return (
63 |
71 | );
72 | }
73 | }
74 |
--------------------------------------------------------------------------------
/examples/04 Sortable/Simple/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | CARD: 'card'
3 | };
--------------------------------------------------------------------------------
/examples/04 Sortable/Simple/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class SortableSimple extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Browse the Source
11 |
12 | It is easy to implement a sortable interface with React DnD. Just make the same component both a drag source and a drop target, and reorder the data in the hover handler.
13 |
14 |
15 |
44 | {text}
45 |
46 | ));
47 | }
48 | }
--------------------------------------------------------------------------------
/examples/04 Sortable/Stress Test/Container.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import update from 'react/lib/update';
3 | import { name } from 'faker';
4 | import Card from './Card';
5 | import { DragDropContext } from 'react-dnd';
6 | import HTML5Backend from 'react-dnd-html5-backend';
7 |
8 | const style = {
9 | width: 400
10 | };
11 |
12 | @DragDropContext(HTML5Backend)
13 | export default class Container extends Component {
14 | constructor(props) {
15 | super(props);
16 |
17 | this.moveCard = this.moveCard.bind(this);
18 | this.drawFrame = this.drawFrame.bind(this);
19 |
20 | const cardsById = {};
21 | const cardsByIndex = [];
22 |
23 | for (let i = 0; i < 1000; i++) {
24 | const card = { id: i, text: name.findName() };
25 | cardsById[card.id] = card;
26 | cardsByIndex[i] = card;
27 | }
28 |
29 | this.state = {
30 | cardsById,
31 | cardsByIndex
32 | };
33 | }
34 |
35 | moveCard(id, afterId) {
36 | const { cardsById, cardsByIndex } = this.state;
37 |
38 | const card = cardsById[id];
39 | const afterCard = cardsById[afterId];
40 |
41 | const cardIndex = cardsByIndex.indexOf(card);
42 | const afterIndex = cardsByIndex.indexOf(afterCard);
43 |
44 | this.scheduleUpdate({
45 | cardsByIndex: {
46 | $splice: [
47 | [cardIndex, 1],
48 | [afterIndex, 0, card]
49 | ]
50 | }
51 | });
52 | }
53 |
54 | componentWillUnmount() {
55 | cancelAnimationFrame(this.requestedFrame);
56 | }
57 |
58 | scheduleUpdate(updateFn) {
59 | this.pendingUpdateFn = updateFn;
60 |
61 | if (!this.requestedFrame) {
62 | this.requestedFrame = requestAnimationFrame(this.drawFrame);
63 | }
64 | }
65 |
66 | drawFrame() {
67 | const nextState = update(this.state, this.pendingUpdateFn);
68 | this.setState(nextState);
69 |
70 | this.pendingUpdateFn = null;
71 | this.requestedFrame = null;
72 | }
73 |
74 | render() {
75 | const { cardsByIndex } = this.state;
76 |
77 | return (
78 |
79 | {cardsByIndex.map(card => {
80 | return (
81 |
88 | );
89 | }
90 | }
--------------------------------------------------------------------------------
/examples/04 Sortable/Stress Test/ItemTypes.js:
--------------------------------------------------------------------------------
1 | export default {
2 | CARD: 'card'
3 | };
--------------------------------------------------------------------------------
/examples/04 Sortable/Stress Test/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class SortableStressTest extends Component {
5 | constructor(props) {
6 | super(props);
7 | // Avoid rendering on server because the big data list is generated
8 | this.state = { shouldRender: false };
9 | }
10 |
11 | componentDidMount() {
12 | // Won't fire on server.
13 | this.setState({ shouldRender: true }); // eslint-disable-line react/no-did-mount-set-state
14 | }
15 |
16 | render() {
17 | const { shouldRender } = this.state;
18 |
19 | return (
20 |
21 |
22 | Browse the Source
24 |
25 | How many items can React DnD handle at the same time?
26 | There are a thousand items in this list.
27 | With some optimizations like updating the state inside a requestAnimationFrame callback, it can handle a few thousand items without lagging.
28 | After that, you're better off using virtual lists like fixed-data-table .
29 | Luckily, React DnD is designed to work great with any virtual React data list components because it doesn't keep any state in the DOM.
30 |
31 |
32 | This example does not scroll automatically but you can add the scrolling with a parent drop target that compares component.getBoundingClientRect() with monitor.getClientOffset() inside its hover handler.
33 | In fact, you are welcome to contribute this functionality to this example!
34 |
35 | {shouldRender &&
}
36 |
12 |
13 |
16 |
17 |
19 |
33 | When I am over a drop zone, I have {showCopyIcon ? 'copy' : 'no'} icon.
34 |
,
35 | { dropEffect }
36 | );
37 | }
38 | }
--------------------------------------------------------------------------------
/examples/05 Customize/Drop Effects/TargetBox.js:
--------------------------------------------------------------------------------
1 | import { PropTypes, Component } from 'react';
2 | import ItemTypes from './ItemTypes';
3 | import { DropTarget } from 'react-dnd';
4 |
5 | const style = {
6 | border: '1px solid gray',
7 | height: '15rem',
8 | width: '15rem',
9 | padding: '2rem',
10 | textAlign: 'center'
11 | };
12 |
13 | const boxTarget = {
14 | drop() {
15 | }
16 | };
17 |
18 | @DropTarget(ItemTypes.BOX, boxTarget, (connect, monitor) => ({
19 | connectDropTarget: connect.dropTarget(),
20 | isOver: monitor.isOver(),
21 | canDrop: monitor.canDrop()
22 | }))
23 | export default class TargetBox extends Component {
24 |
25 | render() {
26 | const { canDrop, isOver, connectDropTarget } = this.props;
27 | const isActive = canDrop && isOver;
28 |
29 | return connectDropTarget(
30 |
31 | {isActive ?
32 | 'Release to drop' :
33 | 'Drag item here'
34 | }
35 |
36 | );
37 | }
38 | }
--------------------------------------------------------------------------------
/examples/05 Customize/Drop Effects/index.js:
--------------------------------------------------------------------------------
1 | import { Component } from 'react';
2 | import Container from './Container';
3 |
4 | export default class CustomizeDropEffects extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Browse the Source
11 |
12 | Some browsers let you specify the “drop effects” for the draggable items.
13 | In the compatible browsers, you will see a “copy” icon when you drag the first box over the drop zone.
14 |
15 |
16 |
41 |
42 | {connectDragSource(
43 |
44 | )}
45 |
46 | Drag me by the handle
47 |
8 |
9 | Browse the Source
11 |
12 | React DnD lets you choose the draggable node, as well as the drag preview node in your component's render function.
13 | You may also use an Image
15 |
16 |
(http://github.com/gaearon)",
38 | "license": "MIT",
39 | "bugs": {
40 | "url": "https://github.com/NekR/preact-dnd/issues"
41 | },
42 | "homepage": "https://github.com/NekR/preact-dnd/",
43 | "dependencies": {
44 | "disposables": "^1.0.1",
45 | "dnd-core": "^2.0.1",
46 | "hoist-non-react-statics": "^1.2.0",
47 | "invariant": "^2.1.0",
48 | "lodash": "^4.2.0"
49 | },
50 | "devDependencies": {
51 | "animation-frame": "^0.2.4",
52 | "autoprefixer": "^5.0.0",
53 | "babel-core": "^6.21.0",
54 | "babel-loader": "^6.2.10",
55 | "babel-plugin-transform-class-properties": "^6.24.1",
56 | "babel-plugin-transform-decorators-legacy": "^1.3.4",
57 | "babel-plugin-transform-react-jsx": "^6.24.1",
58 | "babel-preset-es2015": "^6.24.1",
59 | "babel-preset-stage-0": "^6.24.1",
60 | "css-loader": "^0.9.1",
61 | "eslint": "^1.6.0",
62 | "eslint-config-airbnb": "^0.1.0",
63 | "eslint-plugin-react": "^3.5.1",
64 | "expect": "^1.6.0",
65 | "extract-text-webpack-plugin": "^0.3.8",
66 | "faker": "^2.1.3",
67 | "file-loader": "^0.8.1",
68 | "glob": "^4.3.5",
69 | "html-loader": "^0.2.3",
70 | "karma": "^0.13.10",
71 | "karma-chrome-launcher": "^0.2.1",
72 | "karma-cli": "^0.1.1",
73 | "karma-mocha": "^0.2.0",
74 | "karma-sourcemap-loader": "^0.3.6",
75 | "karma-webpack": "^1.7.0",
76 | "less": "^2.2.0",
77 | "less-loader": "^2.0.0",
78 | "marked": "^0.3.2",
79 | "mocha": "^2.2.5",
80 | "null-loader": "^0.1.0",
81 | "postcss": "^4.0.2",
82 | "preact": "^8.2.4",
83 | "react": "^15.0.0-rc.2",
84 | "react-dnd-html5-backend": "^2.1.2",
85 | "react-dnd-test-backend": "^1.0.2",
86 | "react-dom": "^15.0.0-rc.2",
87 | "react-hot-loader": "^1.2.3",
88 | "react-router": "~0.13.2",
89 | "request": "2.46.0",
90 | "style-loader": "^0.8.3",
91 | "url-loader": "^0.5.5",
92 | "webpack": "^1.8.11",
93 | "webpack-dev-server": "^1.8.2"
94 | }
95 | }
96 |
--------------------------------------------------------------------------------
/scripts/build.sh:
--------------------------------------------------------------------------------
1 | #!/bin/sh
2 |
3 | # build minified standalone version in dist
4 | rm -rf dist
5 | ./node_modules/.bin/webpack --output-filename=dist/ReactDnD.js
6 | ./node_modules/.bin/webpack --output-filename=dist/ReactDnD.min.js --optimize-minimize
7 |
8 | # build ES5 modules to lib
9 | rm -rf lib
10 | ./node_modules/.bin/babel src --out-dir lib
11 |
--------------------------------------------------------------------------------
/scripts/buildSiteIndexPages.sh:
--------------------------------------------------------------------------------
1 | #!/usr/bin/env node
2 | require('babel-core/register');
3 |
4 | // -*- mode: js -*-
5 | "use strict";
6 |
7 | var fs = require('fs');
8 | var path = require('path');
9 | var glob = require('glob');
10 | var Constants = require('../site/Constants');
11 | var renderPath = require('../__site_prerender__/renderPath');
12 | var flatten = require('lodash/flatten');
13 |
14 | var sitePath = path.join(__dirname, '../__site__');
15 | if (!fs.existsSync(sitePath)) {
16 | fs.mkdirSync(sitePath);
17 | }
18 |
19 | var files = {
20 | 'main.css': 'main.css',
21 | 'main.js': 'main.js'
22 | };
23 |
24 | if (process.env.NODE_ENV === 'production') {
25 | Object.keys(files).forEach(function(fileName) {
26 | var searchPath = path.join(
27 | __dirname,
28 | '../__site__/' + fileName.replace('.', '-*.')
29 | );
30 | var hashedFilename = glob.sync(searchPath)[0];
31 | if (!hashedFilename) {
32 | throw new Error(
33 | 'Hashed file of "' + fileName + '" ' +
34 | 'not found when searching with "' + searchPath + '"'
35 | );
36 | }
37 |
38 | files[fileName] = path.basename(hashedFilename);
39 | });
40 | }
41 |
42 | var locations = flatten([
43 | Constants.APIPages.map(function (group) {
44 | return group.pages;
45 | }),
46 | Constants.ExamplePages.map(function (group) {
47 | return group.pages;
48 | }),
49 | Constants.Pages
50 | ]).reduce(function(paths, pages) {
51 | return paths.concat(
52 | Object.keys(pages).map(function(key) {
53 | return pages[key].location;
54 | })
55 | );
56 | }, []);
57 |
58 | locations.forEach(function(fileName) {
59 | var props = {
60 | location: fileName,
61 | devMode: process.env.NODE_ENV !== 'production',
62 | files: files
63 | };
64 |
65 | renderPath(fileName, props, function(content) {
66 | fs.writeFileSync(
67 | path.join(sitePath, fileName),
68 | content
69 | );
70 | });
71 | });
72 |
--------------------------------------------------------------------------------
/scripts/buildStaticSite.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | PATH=$(npm bin):$PATH
4 |
5 | rm -rf ./__site__
6 | rm -rf ./__site_prerender__
7 | NODE_ENV=production webpack --config "$PWD/site/webpack-client.config.js"
8 | NODE_ENV=production webpack --config "$PWD/site/webpack-prerender.config.js"
9 | NODE_ENV=production ./scripts/buildSiteIndexPages.sh
10 |
--------------------------------------------------------------------------------
/scripts/cssTransformLoader.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var postcss = require('postcss');
4 | var autoPrefixer = require('autoprefixer');
5 |
6 | module.exports = function(content) {
7 | if (this && this.cacheable) {
8 | // Webpack specific call
9 | this.cacheable();
10 | }
11 |
12 | content = postcss()
13 | .use(autoPrefixer())
14 | .process(content).css;
15 |
16 | return content;
17 | };
18 |
--------------------------------------------------------------------------------
/scripts/markdownLoader.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | var marked = require('marked');
4 | var prism = require('./prism');
5 |
6 | // functions come before keywords
7 | prism.languages.insertBefore('javascript', 'keyword', {
8 | 'var': /\b(this)\b/g,
9 | 'block-keyword': /\b(if|else|while|for|function)\b/g,
10 | 'primitive': /\b(true|false|null|undefined)\b/g,
11 | 'function': prism.languages.function,
12 | });
13 |
14 | prism.languages.insertBefore('javascript', {
15 | 'qualifier': /\b[A-Z][a-z0-9_]+/g,
16 | });
17 |
18 | marked.setOptions({
19 | xhtml: true,
20 | highlight: function(code) {
21 | return prism.highlight(code, prism.languages.javascript);
22 | }
23 | });
24 |
25 | var renderer = new marked.Renderer();
26 |
27 | renderer.heading = function (text, level) {
28 | var escapedText = text.toLowerCase().replace(/[^\w]+/g, '-');
29 |
30 | // A hack to have proper anchor scrolling despite the navbar on top of them.
31 | // In CSS, they'll be positioned relatively.
32 | return '' + text + ' ';
33 | };
34 |
35 | renderer.code = function(code, lang, escaped) {
36 | if (this.options.highlight) {
37 | var out = this.options.highlight(code, lang);
38 | if (out != null && out !== code) {
39 | escaped = true;
40 | code = out;
41 | }
42 | }
43 | return '' +
44 | (escaped ? code : escapeCode(code, true)) +
45 | '';
46 | };
47 |
48 | function escapeCode(code) {
49 | return code
50 | .replace(/&/g, '&')
51 | .replace(//g, '>')
53 | .replace(/"/g, '"')
54 | .replace(/'/g, ''');
55 | }
56 |
57 | module.exports = function(markdown) {
58 | if (this && this.cacheable) {
59 | // Webpack specific call
60 | this.cacheable();
61 | }
62 |
63 | return marked(markdown, { renderer: renderer });
64 | };
65 |
--------------------------------------------------------------------------------
/scripts/publishStaticSite.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 |
4 | PROJECT_DIRECTORY="react-dnd"
5 | SITE_DIRECTORY="$PROJECT_DIRECTORY-site"
6 | GITHUB_REPO="git@github.com:gaearon/react-dnd.git"
7 | GH_PAGES_SITE="http://gaearon.github.io/react-dnd/"
8 |
9 | # Move to parent dir
10 | cd ../
11 |
12 | # Setup repo if doesnt exist
13 | if [ ! -d "$SITE_DIRECTORY" ]; then
14 | read -p "No site repo setup, can I create it at \"$PWD/$SITE_DIRECTORY\"? [Y/n] " -r
15 | echo
16 | if [[ ! $REPLY =~ ^[Yy]$ ]] && [[ ! $REPLY == "" ]]
17 | then
18 | echo "Exit by user"
19 | exit 1
20 | fi
21 | git clone "$GITHUB_REPO" "$SITE_DIRECTORY"
22 | cd "$SITE_DIRECTORY"
23 | git checkout origin/gh-pages
24 | git checkout -b gh-pages
25 | git push --set-upstream origin gh-pages
26 | cd ../
27 | fi
28 |
29 | cd "$PROJECT_DIRECTORY"
30 | npm run build-site
31 | open __site__/index.html
32 | cd ../
33 |
34 | echo
35 | echo
36 | read -p "Are you ready to publish? [Y/n] " -r
37 | echo
38 | if [[ ! $REPLY =~ ^[Yy]$ ]] && [[ ! $REPLY == "" ]]
39 | then
40 | echo "Exit by user"
41 | exit 1
42 | fi
43 |
44 | cd "$SITE_DIRECTORY"
45 | git reset --hard
46 | git checkout -- .
47 | git clean -dfx
48 | git fetch
49 | git rebase
50 | rm -Rf *
51 | echo "$PWD"
52 | cp -R ../$PROJECT_DIRECTORY/__site__/* .
53 | git add --all
54 | git commit -m "Update website"
55 | git push
56 | sleep 1
57 | open $GH_PAGES_SITE
58 |
--------------------------------------------------------------------------------
/scripts/resolvers.js:
--------------------------------------------------------------------------------
1 | var fs = require('fs');
2 | var glob = require('glob');
3 | var path = require('path');
4 |
5 | function buildHasteMap() {
6 | var root = path.resolve(__dirname, '../src');
7 | var hasteMap = {};
8 | glob.sync(root + '/**/*.{js,css}').forEach(function(file) {
9 | var code = fs.readFileSync(file);
10 | var regex = /@providesModule ([^\s*]+)/;
11 | var result = regex.exec(code);
12 | if (result) {
13 | var id = result[1];
14 | if (path.extname(file) === '.css') {
15 | id += '.css';
16 | }
17 | hasteMap[id] = file;
18 | }
19 | });
20 | return hasteMap;
21 | };
22 |
23 | function resolveHasteDefines() {
24 | // Run in the context of webpack's compiler.
25 | var hasteMap = buildHasteMap();
26 | this.resolvers.normal.plugin('module', function(request, callback) {
27 | var hastePath = hasteMap[request.request];
28 | if (hastePath) {
29 | return callback(null, {
30 | path: hastePath,
31 | query: request.query,
32 | file: true,
33 | resolved: true
34 | });
35 | }
36 | return callback();
37 | });
38 | }
39 |
40 | module.exports = {
41 | resolveHasteDefines: resolveHasteDefines
42 | };
43 |
--------------------------------------------------------------------------------
/scripts/startSiteDevServer.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 | set -e
3 | PATH=$(npm bin):$PATH
4 |
5 | rm -rf ./__site__
6 | rm -rf ./__site_prerender__
7 | ./node_modules/.bin/webpack --config "$PWD/site/webpack-prerender.config.js"
8 | ./scripts/buildSiteIndexPages.sh
9 | ./node_modules/.bin/webpack-dev-server --config "$PWD/site/webpack-client.config.js" --hot --content-base __site__
10 |
--------------------------------------------------------------------------------
/site/Constants.js:
--------------------------------------------------------------------------------
1 | export const Pages = {
2 | HOME: {
3 | location: 'index.html',
4 | title: 'Home'
5 | }
6 | };
7 |
8 | export const APIPages = [{
9 | title: 'Quick Start',
10 | pages: {
11 | OVERVIEW: {
12 | location: 'docs-overview.html',
13 | title: 'Overview'
14 | },
15 | TUTORIAL: {
16 | location: 'docs-tutorial.html',
17 | title: 'Tutorial'
18 | },
19 | TESTING: {
20 | location: 'docs-testing.html',
21 | title: 'Testing'
22 | },
23 | FAQ: {
24 | location: 'docs-faq.html',
25 | title: 'FAQ'
26 | },
27 | TROUBLESHOOTING: {
28 | location: 'docs-troubleshooting.html',
29 | title: 'Troubleshooting'
30 | }
31 | }
32 | }, {
33 | title: 'Top-Level API',
34 | pages: {
35 | DRAG_SOURCE: {
36 | location: 'docs-drag-source.html',
37 | title: 'DragSource'
38 | },
39 | DROP_TARGET: {
40 | location: 'docs-drop-target.html',
41 | title: 'DropTarget'
42 | },
43 | DRAG_LAYER: {
44 | location: 'docs-drag-layer.html',
45 | title: 'DragLayer'
46 | },
47 | DRAG_DROP_CONTEXT: {
48 | location: 'docs-drag-drop-context.html',
49 | title: 'DragDropContext'
50 | }
51 | }
52 | }, {
53 | title: 'Connecting to DOM',
54 | pages: {
55 | DRAG_SOURCE_CONNECTOR: {
56 | location: 'docs-drag-source-connector.html',
57 | title: 'DragSourceConnector'
58 | },
59 | DROP_TARGET_CONNECTOR: {
60 | location: 'docs-drop-target-connector.html',
61 | title: 'DropTargetConnector'
62 | }
63 | }
64 | }, {
65 | title: 'Monitoring State',
66 | pages: {
67 | DRAG_SOURCE_MONITOR: {
68 | location: 'docs-drag-source-monitor.html',
69 | title: 'DragSourceMonitor'
70 | },
71 | DROP_TARGET_MONITOR: {
72 | location: 'docs-drop-target-monitor.html',
73 | title: 'DropTargetMonitor'
74 | },
75 | DRAG_LAYER_MONITOR: {
76 | location: 'docs-drag-layer-monitor.html',
77 | title: 'DragLayerMonitor'
78 | }
79 | }
80 | }, {
81 | title: 'Backends',
82 | pages: {
83 | HTML5_BACKEND: {
84 | location: 'docs-html5-backend.html',
85 | title: 'HTML5'
86 | },
87 | TEST_BACKEND: {
88 | location: 'docs-test-backend.html',
89 | title: 'Test'
90 | }
91 | }
92 | }];
93 |
94 | export const ExamplePages = [{
95 | title: 'Chessboard',
96 | pages: {
97 | CHESSBOARD_TUTORIAL_APP: {
98 | location: 'examples-chessboard-tutorial-app.html',
99 | title: 'Tutorial App'
100 | }
101 | }
102 | }, {
103 | title: 'Dustbin',
104 | pages: {
105 | DUSTBIN_SINGLE_TARGET: {
106 | location: 'examples-dustbin-single-target.html',
107 | title: 'Single Target'
108 | },
109 | DUSTBIN_MULTIPLE_TARGETS: {
110 | location: 'examples-dustbin-multiple-targets.html',
111 | title: 'Multiple Targets'
112 | },
113 | DUSTBIN_STRESS_TEST: {
114 | location: 'examples-dustbin-stress-test.html',
115 | title: 'Stress Test'
116 | }
117 | }
118 | }, {
119 | title: 'Drag Around',
120 | pages: {
121 | DRAG_AROUND_NAIVE: {
122 | location: 'examples-drag-around-naive.html',
123 | title: 'Naive'
124 | },
125 | DRAG_AROUND_CUSTOM_DRAG_LAYER: {
126 | location: 'examples-drag-around-custom-drag-layer.html',
127 | title: 'Custom Drag Layer'
128 | }
129 | }
130 | }, {
131 | title: 'Nesting',
132 | pages: {
133 | NESTING_DRAG_SOURCES: {
134 | location: 'examples-nesting-drag-sources.html',
135 | title: 'Drag Sources'
136 | },
137 | NESTING_DROP_TARGETS: {
138 | location: 'examples-nesting-drop-targets.html',
139 | title: 'Drop Targets'
140 | }
141 | }
142 | }, {
143 | title: 'Sortable',
144 | pages: {
145 | SORTABLE_SIMPLE: {
146 | location: 'examples-sortable-simple.html',
147 | title: 'Simple'
148 | },
149 | SORTABLE_CANCEL_ON_DROP_OUTSIDE: {
150 | location: 'examples-sortable-cancel-on-drop-outside.html',
151 | title: 'Cancel on Drop Outside'
152 | },
153 | SORTABLE_STRESS_TEST: {
154 | location: 'examples-sortable-stress.html',
155 | title: 'Stress Test'
156 | }
157 | }
158 | }, {
159 | title: 'Customize',
160 | pages: {
161 | CUSTOMIZE_HANDLES_AND_PREVIEWS: {
162 | location: 'examples-customize-handles-and-previews.html',
163 | title: 'Handles and Previews'
164 | },
165 | CUSTOMIZE_DROP_EFFECTS: {
166 | location: 'examples-customize-drop-effects.html',
167 | title: 'Drop Effects'
168 | }
169 | }
170 | }];
171 |
172 | export const DOCS_DEFAULT = APIPages[0].pages.OVERVIEW;
173 | export const EXAMPLES_DEFAULT = ExamplePages[0].pages.CHESSBOARD_TUTORIAL_APP;
--------------------------------------------------------------------------------
/site/IndexPage.js:
--------------------------------------------------------------------------------
1 | import './base.less';
2 | import Constants, { APIPages, ExamplePages, Pages } from './Constants';
3 | import HomePage from './pages/HomePage';
4 | import APIPage from './pages/APIPage';
5 | import ExamplePage from './pages/ExamplePage';
6 | import React, { Component } from 'react';
7 | import ReactDOMServer from 'react-dom/server';
8 |
9 | const APIDocs = {
10 | OVERVIEW: require('../docs/00 Quick Start/Overview.md'),
11 | TUTORIAL: require('../docs/00 Quick Start/Tutorial.md'),
12 | TESTING: require('../docs/00 Quick Start/Testing.md'),
13 | FAQ: require('../docs/00 Quick Start/FAQ.md'),
14 | TROUBLESHOOTING: require('../docs/00 Quick Start/Troubleshooting.md'),
15 | DRAG_SOURCE: require('../docs/01 Top Level API/DragSource.md'),
16 | DRAG_SOURCE_MONITOR: require('../docs/03 Monitoring State/DragSourceMonitor.md'),
17 | DRAG_SOURCE_CONNECTOR: require('../docs/02 Connecting to DOM/DragSourceConnector.md'),
18 | DROP_TARGET: require('../docs/01 Top Level API/DropTarget.md'),
19 | DROP_TARGET_CONNECTOR: require('../docs/02 Connecting to DOM/DropTargetConnector.md'),
20 | DROP_TARGET_MONITOR: require('../docs/03 Monitoring State/DropTargetMonitor.md'),
21 | DRAG_DROP_CONTEXT: require('../docs/01 Top Level API/DragDropContext.md'),
22 | DRAG_LAYER: require('../docs/01 Top Level API/DragLayer.md'),
23 | DRAG_LAYER_MONITOR: require('../docs/03 Monitoring State/DragLayerMonitor.md'),
24 | HTML5_BACKEND: require('../docs/04 Backends/HTML5.md'),
25 | TEST_BACKEND: require('../docs/04 Backends/Test.md')
26 | };
27 |
28 | const Examples = {
29 | CHESSBOARD_TUTORIAL_APP: require('../examples/00 Chessboard/Tutorial App'),
30 | DUSTBIN_SINGLE_TARGET: require('../examples/01 Dustbin/Single Target'),
31 | DUSTBIN_MULTIPLE_TARGETS: require('../examples/01 Dustbin/Multiple Targets'),
32 | DUSTBIN_STRESS_TEST: require('../examples/01 Dustbin/Stress Test'),
33 | DRAG_AROUND_NAIVE: require('../examples/02 Drag Around/Naive'),
34 | DRAG_AROUND_CUSTOM_DRAG_LAYER: require('../examples/02 Drag Around/Custom Drag Layer'),
35 | NESTING_DRAG_SOURCES: require('../examples/03 Nesting/Drag Sources'),
36 | NESTING_DROP_TARGETS: require('../examples/03 Nesting/Drop Targets'),
37 | SORTABLE_SIMPLE: require('../examples/04 Sortable/Simple'),
38 | SORTABLE_CANCEL_ON_DROP_OUTSIDE: require('../examples/04 Sortable/Cancel on Drop Outside'),
39 | SORTABLE_STRESS_TEST: require('../examples/04 Sortable/Stress Test'),
40 | CUSTOMIZE_HANDLES_AND_PREVIEWS: require('../examples/05 Customize/Handles and Previews'),
41 | CUSTOMIZE_DROP_EFFECTS: require('../examples/05 Customize/Drop Effects')
42 | };
43 |
44 | export default class IndexPage extends Component {
45 | static getDoctype() {
46 | return '';
47 | }
48 |
49 | static renderToString(props) {
50 | return IndexPage.getDoctype() +
51 | ReactDOMServer.renderToString(React DnD
74 |
121 |
123 | );
124 | }
125 | }
126 | }
127 |
128 | throw new Error(
129 | 'Page of location ' +
130 | JSON.stringify(this.props.location) +
131 | ' not found.'
132 | );
133 | }
134 |
135 | componentDidMount() {
136 | if (!this.state.renderPage) {
137 | this.setState({
138 | renderPage: true
139 | });
140 | }
141 | }
142 | }
143 |
--------------------------------------------------------------------------------
/site/LICENSE:
--------------------------------------------------------------------------------
1 | BSD License
2 |
3 | Copyright (c) 2015, Facebook, Inc. All rights reserved.
4 |
5 | Redistribution and use in source and binary forms, with or without modification,
6 | are permitted provided that the following conditions are met:
7 |
8 | * Redistributions of source code must retain the above copyright notice, this
9 | list of conditions and the following disclaimer.
10 |
11 | * Redistributions in binary form must reproduce the above copyright notice,
12 | this list of conditions and the following disclaimer in the documentation
13 | and/or other materials provided with the distribution.
14 |
15 | * Neither the name Facebook nor the names of its contributors may be used to
16 | endorse or promote products derived from this software without specific
17 | prior written permission.
18 |
19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR
23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
29 |
--------------------------------------------------------------------------------
/site/README.md:
--------------------------------------------------------------------------------
1 | React DnD website is based on the [fixed-data-table](https://github.com/facebook/fixed-data-table) website and uses its code with a permission.
2 |
3 | View it on the web: http://gaearon.github.io/react-dnd
4 |
5 | Run it locally:
6 |
7 | ```
8 | npm install
9 | npm start
10 | ```
11 |
12 | After it builds the static site (might take about half a minute), open http://localhost:8080/.
13 |
--------------------------------------------------------------------------------
/site/base.less:
--------------------------------------------------------------------------------
1 | @import './constants.less';
2 |
3 | * { box-sizing: border-box; }
4 |
5 | html, body {
6 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
7 | -webkit-text-size-adjust: 100%;
8 | -ms-text-size-adjust: 100%;
9 | margin: 0;
10 | padding: 0;
11 | -webkit-font-smoothing: antialiased;
12 | text-rendering: optimizeLegibility;
13 | color: @body-color;
14 | font-family: 'Helvetica Neue', Helvetica, sans-serif;
15 | font-size: 14px;
16 | line-height: 1.625;
17 | }
18 |
19 | @media only screen and (min-width: @screen-tablet) {
20 | body {
21 | font-size: 18px;
22 | }
23 | }
24 |
25 | h1, h2, h3, h4, h5, h6 {
26 | color: @header-color;
27 | }
28 |
29 | a[href] {
30 | color: @link-color;
31 | text-decoration: none;
32 | }
33 |
34 | a[id]:not([href]) {
35 | // This is quite a badass hack.
36 | // We really those anchors despite the navbar!
37 | position: relative;
38 | top: -@navbar-height;
39 | }
40 |
41 | pre, code {
42 | font-family: Consolas, 'Source Code Pro', Menlo, monospace;
43 | background: #F9F8F7;
44 | color: #484A4C;
45 | // font-size: 1em;
46 | // letter-spacing: -0.015em;
47 | }
48 |
49 | a code {
50 | color: inherit;
51 | }
52 |
53 | code {
54 | margin: -0.05rem -0.15em;
55 | padding: 0.05rem 0.35em;
56 | }
57 |
58 | blockquote {
59 | margin: 1rem 0;
60 | padding: 0 1rem;
61 | color: #727476;
62 | border-left: solid 3px #DCDAD9;
63 | }
64 |
65 | blockquote > :first-child {
66 | margin-top: 0;
67 | }
68 |
69 | blockquote > :last-child {
70 | margin-bottom: 0;
71 | }
72 |
73 | hr {
74 | border: 1px solid;
75 | color: @body-color;
76 | opacity: 0.1;
77 | }
78 |
79 |
80 | // Markdown
81 |
82 | .codeBlock {
83 | -webkit-overflow-scrolling: touch;
84 | background: #FCFBFA;
85 | border-left: solid 3px #ECEAE9;
86 | box-sizing: border-box;
87 | display: block;
88 | // font-size: 0.875em;
89 | margin: 0.5rem 0;
90 | overflow-y: scroll;
91 | padding: 0.5rem 8px 0.5rem 12px;
92 | white-space: pre;
93 | }
94 |
95 | .t.blockParams {
96 | padding-left: 2ch;
97 | }
98 |
99 | // TODO: not random colors
100 |
101 | .token.punctuation,
102 | .token.ignore,
103 | .t.interfaceDef,
104 | .t.member,
105 | .t.callSig {
106 | color: #808890;
107 | }
108 |
109 | .token.function,
110 | .token.class-name,
111 | .token.qualifier,
112 | .t.fnQualifier,
113 | .t.fnName {
114 | color: #32308E;
115 | }
116 |
117 | .token.primitive,
118 | .t.primitive {
119 | color: #922;
120 | }
121 |
122 | .token.number,
123 | .t.typeParam {
124 | color: #905;
125 | }
126 |
127 | .t.typeQualifier,
128 | .t.typeName {
129 | color: #013679;
130 | }
131 |
132 | .t.param {
133 | color: #945277;
134 | }
135 |
136 | .t.memberName {
137 | color: teal;
138 | }
139 |
140 | .token.block-keyword,
141 | .token.keyword,
142 | .t.keyword {
143 | color: #A51;
144 | }
145 |
146 | .token.string,
147 | .token.regex {
148 | color: #df5050;
149 | }
150 |
151 | .token.operator {
152 | color: #a67f59;
153 | }
154 |
155 | .token.comment {
156 | color: #998;
157 | font-style: italic;
158 | }
159 |
--------------------------------------------------------------------------------
/site/client.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from 'react-dom';
3 | import IndexPage from './IndexPage';
4 |
5 | render(
6 |
86 |
87 | {['es5', 'es6', 'es7'].map(this.renderSyntaxLink, this)}
88 |
89 |
90 |
92 |
111 |
112 | {syntax.toUpperCase()}
113 |
114 |
115 | );
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
/site/components/CodeBlock.less:
--------------------------------------------------------------------------------
1 | @import '../constants.less';
2 |
3 | .CodeBlock-tabs {
4 | padding: 0;
5 | }
6 |
7 | .CodeBlock-tab {
8 | display: inline-block;
9 | margin-right: 10px;
10 | }
11 |
12 | .CodeBlock-tab a {
13 | cursor: pointer;
14 | color: @body-color;
15 | }
16 |
17 | .CodeBlock-activeTab a {
18 | color: @accent-color;
19 | }
--------------------------------------------------------------------------------
/site/components/Cover.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './Cover.less';
3 |
4 | export default class Cover extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 | Drag and Drop for React
11 |
12 |
13 |
13 |
14 |
15 |
React DnD
16 |
Drag and Drop for React
17 |
18 |
19 |
24 |
25 |
13 |
14 | {this.props.children}
15 |
16 |
8 |
9 | {this.props.groups.map(this.renderGroup, this)}
10 |
11 |
18 |
19 | {title}
20 |
21 | {Object.keys(pages).map(key => this.renderLink(pages[key], key))}
22 |
23 | );
24 | }
25 |
26 | renderLink({ title, location }, key) {
27 | const arrow =
36 | {title}
37 | {arrow}
38 |
39 | );
40 | }
41 | }
--------------------------------------------------------------------------------
/site/components/SideBar.less:
--------------------------------------------------------------------------------
1 | @import '../constants.less';
2 |
3 | .SideBar {
4 | flex-shrink: 0;
5 |
6 | @media only screen and (min-width: @screen-tablet) {
7 | position: fixed;
8 | left: @content-padding;
9 | top: @navbar-height;
10 | bottom: 0;
11 | width: @sidebar-width;
12 | overflow: scroll;
13 | padding: @content-padding*2 0;
14 | }
15 |
16 | .SideBar-group + .SideBar-group {
17 | margin-top: @content-padding;
18 | }
19 |
20 | .SideBar-groupTitle {
21 | border-bottom: 2px solid fade(@accent-color, 10%);
22 | padding-bottom: .5em;
23 | margin: 0 0 .5em 0;
24 | }
25 |
26 | .SideBar-item {
27 | display: block;
28 | color: @body-color;
29 |
30 | &.SideBar-item--selected {
31 | color: @accent-color;
32 | position: relative;
33 |
34 | &:after {
35 | content: '·';
36 | position: absolute;
37 | left: -.5em; top: 0; bottom: 0;
38 | // color: fade(@accent-color, 10%);
39 | }
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/site/components/StaticHTMLBlock.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import CodeBlock from './CodeBlock';
3 |
4 | export default class StaticHTMLBlock extends Component {
5 | static propTypes = {
6 | html: React.PropTypes.string.isRequired
7 | };
8 |
9 | render() {
10 | const { html } = this.props;
11 |
12 | // Here goes a really hack-ish way to convert
13 | // areas separated by Markdown
31 | );
32 | break;
33 | case 1:
34 | es5Content = content;
35 | break;
36 | case 2:
37 | es6Content = content;
38 | break;
39 | case 3:
40 | es7Content = content;
41 | elements.push(
42 |
53 | {elements}
54 |
55 | );
56 | }
57 | }
--------------------------------------------------------------------------------
/site/constants.less:
--------------------------------------------------------------------------------
1 | @accent-color: #0074D9;
2 |
3 | @link-color: @accent-color;
4 | @header-color: #212325;
5 | @body-color: #626466;
6 |
7 | @navbar-height: 5em;
8 |
9 | @content-width: 52em;
10 | @content-padding: 1.5em;
11 |
12 | @sidebar-width: 12em;
13 |
14 | @screen-tablet: 680px;
15 |
--------------------------------------------------------------------------------
/site/pages/APIPage.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Header from '../components/Header';
3 | import PageBody from '../components/PageBody';
4 | import SideBar from '../components/SideBar';
5 | import StaticHTMLBlock from '../components/StaticHTMLBlock';
6 | import { APIPages } from '../Constants';
7 |
8 | export default class APIPage extends Component {
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
22 |
11 |
12 |
13 |
20 |
11 |
12 |
13 |
14 |
16 |
or . ' +
10 | 'Read more: https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute'
11 | );
12 |
13 | if (!previousRef) {
14 | // When there is no ref on the element, use the new ref directly
15 | return cloneElement(element, {
16 | ref: newRef
17 | });
18 | }
19 |
20 | return cloneElement(element, {
21 | ref: (node) => {
22 | newRef(node);
23 |
24 | if (previousRef) {
25 | previousRef(node);
26 | }
27 | }
28 | });
29 | }
30 |
--------------------------------------------------------------------------------
/src/utils/isValidType.js:
--------------------------------------------------------------------------------
1 | import isArray from 'lodash/isArray';
2 |
3 | export default function isValidType(type, allowArray) {
4 | return typeof type === 'string' ||
5 | typeof type === 'symbol' ||
6 | allowArray && isArray(type) && type.every(t => isValidType(t, false));
7 | }
8 |
--------------------------------------------------------------------------------
/src/utils/shallowEqual.js:
--------------------------------------------------------------------------------
1 | export default function shallowEqual(objA, objB) {
2 | if (objA === objB) {
3 | return true;
4 | }
5 |
6 | const keysA = Object.keys(objA);
7 | const keysB = Object.keys(objB);
8 |
9 | if (keysA.length !== keysB.length) {
10 | return false;
11 | }
12 |
13 | // Test for A's keys different from B.
14 | const hasOwn = Object.prototype.hasOwnProperty;
15 | for (let i = 0; i < keysA.length; i++) {
16 | if (!hasOwn.call(objB, keysA[i]) ||
17 | objA[keysA[i]] !== objB[keysA[i]]) {
18 | return false;
19 | }
20 |
21 | const valA = objA[keysA[i]];
22 | const valB = objB[keysA[i]];
23 |
24 | if (valA !== valB) {
25 | return false;
26 | }
27 | }
28 |
29 | return true;
30 | }
--------------------------------------------------------------------------------
/src/utils/shallowEqualScalar.js:
--------------------------------------------------------------------------------
1 | export default function shallowEqualScalar(objA, objB) {
2 | if (objA === objB) {
3 | return true;
4 | }
5 |
6 | if (typeof objA !== 'object' || objA === null ||
7 | typeof objB !== 'object' || objB === null) {
8 | return false;
9 | }
10 |
11 | const keysA = Object.keys(objA);
12 | const keysB = Object.keys(objB);
13 |
14 | if (keysA.length !== keysB.length) {
15 | return false;
16 | }
17 |
18 | // Test for A's keys different from B.
19 | const hasOwn = Object.prototype.hasOwnProperty;
20 | for (let i = 0; i < keysA.length; i++) {
21 | if (!hasOwn.call(objB, keysA[i])) {
22 | return false;
23 | }
24 |
25 | const valA = objA[keysA[i]];
26 | const valB = objB[keysA[i]];
27 |
28 | if (valA !== valB || typeof valA === 'object' || typeof valB === 'object') {
29 | return false;
30 | }
31 | }
32 |
33 | return true;
34 | }
--------------------------------------------------------------------------------
/src/wrapConnectorHooks.js:
--------------------------------------------------------------------------------
1 | import cloneWithRef from './utils/cloneWithRef';
2 | // import { isValidElement } from 'react';
3 |
4 | function isValidElement(object) {
5 | if (!object) return false;
6 |
7 | return (
8 | 'nodeName' in object &&
9 | 'attributes' in object &&
10 | 'children' in object &&
11 | 'key' in object
12 | );
13 | }
14 |
15 | function throwIfCompositeComponentElement(element) {
16 | // Custom components can no longer be wrapped directly in React DnD 2.0
17 | // so that we don't need to depend on findDOMNode() from react-dom.
18 | if (typeof element.nodeName === 'string') {
19 | return;
20 | }
21 |
22 | const displayName = element.nodeName.displayName ||
23 | element.nodeName.name ||
24 | 'the component';
25 |
26 | throw new Error(
27 | `Only native element nodes can now be passed to React DnD connectors. ` +
28 | `You can either wrap ${displayName} into a
, or turn it into a ` +
29 | `drag source or a drop target itself.`
30 | );
31 | }
32 |
33 | function wrapHookToRecognizeElement(hook) {
34 | return (elementOrNode = null, options = null) => {
35 | // When passed a node, call the hook straight away.
36 | if (!isValidElement(elementOrNode)) {
37 | const node = elementOrNode;
38 | hook(node, options);
39 | return;
40 | }
41 |
42 | // If passed a ReactElement, clone it and attach this function as a ref.
43 | // This helps us achieve a neat API where user doesn't even know that refs
44 | // are being used under the hood.
45 | const element = elementOrNode;
46 | throwIfCompositeComponentElement(element);
47 |
48 | // When no options are passed, use the hook directly
49 | const ref = options ?
50 | node => hook(node, options) :
51 | hook;
52 |
53 | return cloneWithRef(element, ref);
54 | };
55 | }
56 |
57 | export default function wrapConnectorHooks(hooks) {
58 | const wrappedHooks = {};
59 |
60 | Object.keys(hooks).forEach(key => {
61 | const hook = hooks[key];
62 | const wrappedHook = wrapHookToRecognizeElement(hook);
63 | wrappedHooks[key] = () => wrappedHook;
64 | });
65 |
66 | return wrappedHooks;
67 | }
--------------------------------------------------------------------------------
/test-utils.js:
--------------------------------------------------------------------------------
1 | import preact from 'preact';
2 |
3 | export default {
4 | renderIntoDocument(component, callback) {
5 | const elem = document.createElement('div');
6 |
7 | class Wrap extends preact.Component {
8 | render() {
9 | const clone = preact.cloneElement(component, {
10 | ref: (a) => {
11 | this.instance = a;
12 | }
13 | });
14 |
15 | return clone;
16 | }
17 |
18 | componentDidMount() {
19 | callback(this.instance);
20 | }
21 | }
22 |
23 | preact.render(