Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-dnd

Package Overview
Dependencies
Maintainers
1
Versions
140
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-dnd - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

22

docs/00 Quick Start/FAQ.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -10,3 +10,3 @@ FAQ

First of all, you don't have to be use ES6 or ES7 for React DnD. They make some of the code patterns more succinct, but it's up to you whether to enable these transformations.
First of all, you don't have to use ES6 or ES7 for React DnD. They make some of the code patterns more succinct, but it's up to you whether to enable these transformations.

@@ -52,7 +52,7 @@ When I say “ES7”, I mean ES6 + a few extensions that *might* make it into ES7 (also known as ES2016). What I mark as the ES7 code in the docs is actually ES6 code + [class properties](https://gist.github.com/jeffmo/054df782c05639da2adb) + [decorators](https://github.com/wycats/javascript-decorators). You can enable these features by putting `{ "stage": 0 }` into your [.babelrc](https://babeljs.io/docs/usage/babelrc/) file. You can also [enable them individually](https://babeljs.io/docs/usage/experimental/).

Grab it from the [dist folder](https://github.com/gaearon/react-dnd/tree/master/dist) in the repo.
It exports `ReactDnD` (watch the casing!) and `ReactDnD.HTML5` for the [`HTML5` backend](/docs-html5-backend.html).
It exports `ReactDnD` (watch the casing!) and `ReactDnD.HTML5` for the [`HTML5` backend](docs-html5-backend.html).
### How do I test React DnD components and their interaction?
See the [testing](/docs-testing.html) tutorial for examples.
See the [testing](docs-testing.html) tutorial for examples.

@@ -62,15 +62,15 @@ ### How do I make the component draggable only by a small handle?

Specify the container node as the `dragPreview`, but only make the drag handle a `dragSource()`.
See the [custom drag handle example](/examples-customize-handles-and-previews.html).
See the [custom drag handle example](examples-customize-handles-and-previews.html).
### How do I constrain the drag preview movement?
By default, you can't constrain the drag preview movement because the drag preview is drawn by the browser. You can, however, use a [custom drag layer](/examples-drag-around-custom-drag-layer.html) where you're free to rendering anything, with any snapping or constraints.
By default, you can't constrain the drag preview movement because the drag preview is drawn by the browser. You can, however, use a [custom drag layer](examples-drag-around-custom-drag-layer.html) where you're free to rendering anything, with any snapping or constraints.
### How do I register a drag source or a drop target when the type depends on props?
Both [`DragSource`](/docs-drag-source.html) and [`DropTarget`](/docs-drop-target.html) let you pass a function as the first parameter instead of a string or a symbol. If you pass a function, it will be given the current props, and it should return a string, a symbol, or (for drop targets only) an array of either.
Both [`DragSource`](docs-drag-source.html) and [`DropTarget`](docs-drop-target.html) let you pass a function as the first parameter instead of a string or a symbol. If you pass a function, it will be given the current props, and it should return a string, a symbol, or (for drop targets only) an array of either.
### How do I combine several drag sources and drop targets in a single component?
Because [`DragSource`](/docs-drag-source.html) and [`DropTarget`](/docs-drop-target.html) use the partial application, you may compose them using a functional composition helper such as [`_.flow`](https://lodash.com/docs#flow). In ES7, you can just stack the decorators to achieve the same effect.
Because [`DragSource`](docs-drag-source.html) and [`DropTarget`](docs-drop-target.html) use the partial application, you may compose them using a functional composition helper such as [`_.flow`](https://lodash.com/docs#flow). In ES7, you can just stack the decorators to achieve the same effect.

@@ -120,3 +120,3 @@ -------------------

If you are using the [`HTML5` backend](/docs-html5-backend.html), you can register a drop target for one of the `NativeTypes` it exports:
If you are using the [`HTML5` backend](docs-html5-backend.html), you can register a drop target for one of the `NativeTypes` it exports:

@@ -224,3 +224,3 @@ -------------------

This is not currently documented, but you can take cues from the built-in [`HTML5`](/docs-html5-backend.html) and [`Test`](/docs-test-backend.html) backend implementations. The backend contract includes `setup()` and `teardown()` methods, and `connectDragSource()`, `connectDragPreview()` and `connectDropTarget()` methods that pass the DOM nodes to the backend. Contributions to the documentation are welcome.
This is not currently documented, but you can take cues from the built-in [`HTML5`](docs-html5-backend.html) and [`Test`](docs-test-backend.html) backend implementations. The backend contract includes `setup()` and `teardown()` methods, and `connectDragSource()`, `connectDragPreview()` and `connectDropTarget()` methods that pass the DOM nodes to the backend. Contributions to the documentation are welcome.

@@ -262,3 +262,3 @@ ### I am getting a “Super expression must either be null or a function, not undefined” error

Contributing the documentation for the underlying [DnD Core](https://github.com/gaearon/dnd-core) library would be a huge help, as it is currently not documented at all, but its concepts leak in some advanced scenarios such as [writing tests](/docs-testing.html).
Contributing the documentation for the underlying [DnD Core](https://github.com/gaearon/dnd-core) library would be a huge help, as it is currently not documented at all, but its concepts leak in some advanced scenarios such as [writing tests](docs-testing.html).

@@ -265,0 +265,0 @@ Porting the library to other modern frameworks such as Cycle, Mercury, or Deku, is also appreciated. Such ports would be able to reuse DnD Core logic and the existing backends.

12

docs/00 Quick Start/Overview.md

@@ -15,3 +15,3 @@ Overview

This is why **the HTML5 drag and drop support is implemented in a pluggable way** in React DnD. You don't have to use it. You can write a different implementation, based on touch events, mouse events, or something else entirely. Such pluggable implementations are called the *backends* in React DnD. Only the [HTML5 backend](/docs-html5-backend.html) comes with the library, but more may be added in the future.
This is why **the HTML5 drag and drop support is implemented in a pluggable way** in React DnD. You don't have to use it. You can write a different implementation, based on touch events, mouse events, or something else entirely. Such pluggable implementations are called the *backends* in React DnD. Only the [HTML5 backend](docs-html5-backend.html) comes with the library, but more may be added in the future.

@@ -125,5 +125,5 @@ The backends perform a similar role to that of React's synthetic event system: **they abstract away the browser differences and process the native DOM events.** Despite the similarities, React DnD backends do not have a dependency on React or its synthetic event system. Under the hood, all the backends do is translate the DOM events into the internal Flux actions that React DnD can process.

In React DnD, [`DragSource`](/docs-drag-source.html) and [`DropTarget`](/docs-drop-target.html), as well as a few other top-level exported functions, are in fact higher-order components. They breathe the drag and drop magic into your components.
In React DnD, [`DragSource`](docs-drag-source.html) and [`DropTarget`](docs-drop-target.html), as well as a few other top-level exported functions, are in fact higher-order components. They breathe the drag and drop magic into your components.
One caveat of using them is that they require *two* function applications. For example, here's how to wrap `YourComponent` in a [`DragSource`](/docs-drag-source.html):
One caveat of using them is that they require *two* function applications. For example, here's how to wrap `YourComponent` in a [`DragSource`](docs-drag-source.html):

@@ -154,3 +154,3 @@ -------------------

Notice how, after specifying the [`DragSource`](/docs-drag-source.html) parameters in the first function call, there is a *second* function call, where you finally pass your class. This is called [currying](http://en.wikipedia.org/wiki/Currying), or [partial application](http://en.wikipedia.org/wiki/Partial_application), and is necessary for the [ES7 decorator syntax](github.com/wycats/javascript-decorators) to work out of the box:
Notice how, after specifying the [`DragSource`](docs-drag-source.html) parameters in the first function call, there is a *second* function call, where you finally pass your class. This is called [currying](http://en.wikipedia.org/wiki/Currying), or [partial application](http://en.wikipedia.org/wiki/Partial_application), and is necessary for the [ES7 decorator syntax](github.com/wycats/javascript-decorators) to work out of the box:

@@ -174,3 +174,3 @@ -------------------

Even if you don't plan to use ES7, the partial application can still be handy, because you can combine several [`DragSource`](/docs-drag-source.html) and [`DropTarget`](/docs-drop-target.html) declarations in ES5 or ES6 using a functional composition helper such as [`_.flow`](https://lodash.com/docs#flow). In ES7, you can just stack the decorators to achieve the same effect.
Even if you don't plan to use ES7, the partial application can still be handy, because you can combine several [`DragSource`](docs-drag-source.html) and [`DropTarget`](docs-drop-target.html) declarations in ES5 or ES6 using a functional composition helper such as [`_.flow`](https://lodash.com/docs#flow). In ES7, you can just stack the decorators to achieve the same effect.

@@ -428,2 +428,2 @@ -------------------

Now you know enough about React DnD to explore the rest of the documentation!
The [tutorial](/docs-tutorial.html) is a great place to start.
The [tutorial](docs-tutorial.html) is a great place to start.

4

docs/00 Quick Start/Testing.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -84,3 +84,3 @@ Testing

If you want to test the whole interaction, and not just the individual component rendering, you should use the [test backend](/docs-test-backend.html) that ships with React DnD. **The test backend does not require the DOM** so you can also use it with [`ReactShallowRenderer`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) just fine.
If you want to test the whole interaction, and not just the individual component rendering, you should use the [test backend](docs-test-backend.html) that ships with React DnD. **The test backend does not require the DOM** so you can also use it with [`ReactShallowRenderer`](https://facebook.github.io/react/docs/test-utils.html#shallow-rendering) just fine.

@@ -87,0 +87,0 @@ This is currently the least documented part of React DnD because it exposes the underlying concepts from the [DnD Core](https://github.com/gaearon/dnd-core), the library powering React DnD inside. You can learn more about the test backend and its methods from the [DnD Core tests](https://github.com/gaearon/dnd-core/tree/v1.1.0/src/__tests__).

12

docs/00 Quick Start/Troubleshooting.md

@@ -11,5 +11,5 @@ Troubleshooting

1. You wrapped some component with a [`DragSource`](/docs-drag-source.html), [`DropTarget`](/docs-drop-target.html), or [`DragLayer`](/docs-drag-layer.html), but forgot to wrap your top-level component with the [`DragDropContext`](/docs-drag-drop-context.html).
1. You wrapped some component with a [`DragSource`](docs-drag-source.html), [`DropTarget`](docs-drop-target.html), or [`DragLayer`](docs-drag-layer.html), but forgot to wrap your top-level component with the [`DragDropContext`](docs-drag-drop-context.html).
2. You *have* wrapped the top-level component with the [`DragDropContext`](/docs-drag-drop-context.html) but exported an unwrapped version by mistake.
2. You *have* wrapped the top-level component with the [`DragDropContext`](docs-drag-drop-context.html) but exported an unwrapped version by mistake.

@@ -22,7 +22,7 @@ 3. You are using a component in an isolated environment like a unit test. See the second point for instructions to stub it.

To fix this error, find the top-level component in your app. Usually, this is the root route handler. It doesn't have to be the topmost component, but it has to be higher in the hierarchy than any of your component using React DnD. Wrap this component with a [`DragDropContext`](/docs-drag-drop-context.html) call. It is important to specify a *backend* as the only argument in that call. Currently React DnD only provides an [`HTML5` backend](/docs-html5-backend.html), but touch backend support is coming in the future.
To fix this error, find the top-level component in your app. Usually, this is the root route handler. It doesn't have to be the topmost component, but it has to be higher in the hierarchy than any of your component using React DnD. Wrap this component with a [`DragDropContext`](docs-drag-drop-context.html) call. It is important to specify a *backend* as the only argument in that call. Currently React DnD only provides an [`HTML5` backend](docs-html5-backend.html), but touch backend support is coming in the future.
#### Stub the context inside the unit tests
If you have this error in a test, [read the testing guide](/docs-testing.html) for instructions on stubbing the context.
If you have this error in a test, [read the testing guide](docs-testing.html) for instructions on stubbing the context.

@@ -61,3 +61,3 @@ #### Make sure you that don't have duplicate React

For the [`DragSource`](/docs-drag-source.html), [`DropTarget`](/docs-drop-target.html), [`DragLayer`](/docs-drag-layer.html), and the [`DragDropContext`](/docs-drag-drop-context.html), it is important that you first pass them the configuration arguments, and *then* inject your React component in a second call.
For the [`DragSource`](docs-drag-source.html), [`DropTarget`](docs-drop-target.html), [`DragLayer`](docs-drag-layer.html), and the [`DragDropContext`](docs-drag-drop-context.html), it is important that you first pass them the configuration arguments, and *then* inject your React component in a second call.

@@ -101,2 +101,2 @@ -------------------

You may not use ES7 decorators today (linters don't understand them), but this API lets you switch to the decorators when they are more mature, and also has [nicer composition semantics](/docs-faq.html#how-do-i-combine-several-drag-sources-and-drop-targets-in-a-single-component-) in ES5 or ES6.
You may not use ES7 decorators today (linters don't understand them), but this API lets you switch to the decorators when they are more mature, and also has [nicer composition semantics](docs-faq.html#how-do-i-combine-several-drag-sources-and-drop-targets-in-a-single-component-) in ES5 or ES6.

8

docs/01 Top Level API/DragDropContext.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -47,3 +47,3 @@ DragDropContext

* **`backend`**: Required. A React DnD backend. Unless you're writing a custom one, you probably want to use the [HTML5 backend](/docs-html5-backend.html) that ships with React DnD.
* **`backend`**: Required. A React DnD backend. Unless you're writing a custom one, you probably want to use the [HTML5 backend](docs-html5-backend.html) that ships with React DnD.

@@ -53,3 +53,3 @@ ### Return Value

`DragDropContext` wraps your component and returns another React component.
For easier [testing](/docs-testing.html), it provides an API to reach into the internals:
For easier [testing](docs-testing.html), it provides an API to reach into the internals:

@@ -64,2 +64,2 @@ #### Static Properties

* **`getManager()`**: Returns the internal manager that provides access to the underlying backend. This part is currently not documented, but you can refer to the [testing](/docs-testing.html) tutorial for a usage example.
* **`getManager()`**: Returns the internal manager that provides access to the underlying backend. This part is currently not documented, but you can refer to the [testing](docs-testing.html) tutorial for a usage example.

16

docs/01 Top Level API/DragLayer.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -8,11 +8,11 @@ DragLayer

For the most use cases, the default rendering of the [`HTML5` backend](/docs-html5-backend.html) should suffice. However, its drag preview has certain limitations. For example, it has to be an existing node screenshot or an image, and it cannot change midflight.
For the most use cases, the default rendering of the [`HTML5` backend](docs-html5-backend.html) should suffice. However, its drag preview has certain limitations. For example, it has to be an existing node screenshot or an image, and it cannot change midflight.
Sometimes you might want to perform the custom rendering. This also becomes necessary if you're using a custom backend. `DragLayer` lets you perform the rendering of the drag preview yourself using just the React components. It is a higher-order component accepting one required parameter that is described below.
To use `DragLayer`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](/docs-drag-drop-context.html).
To use `DragLayer`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](docs-drag-drop-context.html).
### Signature
`DragLayer` uses partial application. After specifying its only parameter with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DragLayer` usable as an ES7 decorator. Read the [overview](/docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.
`DragLayer` uses partial application. After specifying its only parameter with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DragLayer` usable as an ES7 decorator. Read the [overview](docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.

@@ -52,3 +52,3 @@ -------------------

* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives a single `monitor` parameter. Read the [overview](/docs-overview.html) for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.
* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives a single `monitor` parameter. Read the [overview](docs-overview.html) for an introduction to the monitors and the collecting function. See the collecting function described in detail in the next section.

@@ -59,7 +59,7 @@ * **`options`**: Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom `arePropsEqual(props, otherProps)` function inside the `options` object can improve the performance. Unless you have performance problems, don't worry about it.

The collecting function signature is similar to the collecting functions of [`DragSource`](/docs-drag-source.html) and [`DropTarget`](/docs-drop-target.html), except that it doesn't have a `connect` parameter because the drag layer is not interactive and only *reflects* the drag state. The collecting function is called any time the global drag state changes, including the coordinate changes, so that your component can provide a timely updated custom drag preview. You can ask the `monitor` for the client coordinates of the dragged item.
The collecting function signature is similar to the collecting functions of [`DragSource`](docs-drag-source.html) and [`DropTarget`](docs-drop-target.html), except that it doesn't have a `connect` parameter because the drag layer is not interactive and only *reflects* the drag state. The collecting function is called any time the global drag state changes, including the coordinate changes, so that your component can provide a timely updated custom drag preview. You can ask the `monitor` for the client coordinates of the dragged item.
#### Parameters
* **`monitor`**: An instance of [`DragLayerMonitor`](/docs-drag-layer-monitor.html). You can use it to query the information about the current drag state, including the coordinates. Read the [`DragLayerMonitor` documentation](docs-drag-layer-monitor.html) for a complete list of `monitor` methods, or read the [overview](/docs-overview.html) for an introduction to the monitors.
* **`monitor`**: An instance of [`DragLayerMonitor`](docs-drag-layer-monitor.html). You can use it to query the information about the current drag state, including the coordinates. Read the [`DragLayerMonitor` documentation](docs-drag-layer-monitor.html) for a complete list of `monitor` methods, or read the [overview](docs-overview.html) for an introduction to the monitors.

@@ -69,3 +69,3 @@ ### Return Value

`DragLayer` wraps your component and returns another React component.
For easier [testing](/docs-testing.html), it provides an API to reach into the internals:
For easier [testing](docs-testing.html), it provides an API to reach into the internals:

@@ -72,0 +72,0 @@ #### Static Properties

24

docs/01 Top Level API/DragSource.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -8,7 +8,7 @@ DragSource

To use `DragSource`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](/docs-drag-drop-context.html).
To use `DragSource`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](docs-drag-drop-context.html).
### Signature
`DragSource` uses partial application. After specifying its parameters with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DragSource` usable as an ES7 decorator. Read the [overview](/docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.
`DragSource` uses partial application. After specifying its parameters with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DragSource` usable as an ES7 decorator. Read the [overview](docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.

@@ -49,7 +49,7 @@ -------------------

* **`type`**: Required. Either a string, an ES6 symbol, or a function that returns either given the component's `props`. Only the [drop targets](/docs-drop-target.html) registered for the same type will react to the items produced by this drag source. Read the [overview](/docs-overview.html) to learn more about the items and types.
* **`type`**: Required. Either a string, an ES6 symbol, or a function that returns either given the component's `props`. Only the [drop targets](docs-drop-target.html) registered for the same type will react to the items produced by this drag source. Read the [overview](docs-overview.html) to learn more about the items and types.
* **`spec`**: Required. A plain JavaScript object with a few allowed methods on it. It describes how the drag source reacts to the drag and drop events. See the drag source specification described in detail in the next section.
* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: `monitor` and `connect`. Read the [overview](/docs-overview.html) for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.
* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: `monitor` and `connect`. Read the [overview](docs-overview.html) for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.

@@ -76,3 +76,3 @@ * **`options`**: Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom `arePropsEqual(props, otherProps)` function inside the `options` object can improve the performance. Unless you have performance problems, don't worry about it.

* **`monitor`**: An instance of [`DragSourceMonitor`](/docs-drag-source-monitor.html). Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, and whether it was dropped yet. Read the [`DragSourceMonitor` documentation](docs-drag-source-monitor.html) for a complete list of `monitor` methods, or read the [overview](/docs-overview.html) for an introduction to the monitors.
* **`monitor`**: An instance of [`DragSourceMonitor`](docs-drag-source-monitor.html). Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, and whether it was dropped yet. Read the [`DragSourceMonitor` documentation](docs-drag-source-monitor.html) for a complete list of `monitor` methods, or read the [overview](docs-overview.html) for an introduction to the monitors.

@@ -93,9 +93,9 @@ * **`component`**: When specified, it is the instance of your component. Use it to access the underlying DOM node for position or size measurements, or to call `setState`, and other component methods. It is purposefully missing from `isDragging` and `canDrag` because the instance may not be available by the time they are called. If you want these methods to depend on the component's state, consider lifting the state to the parent component, so that you can just use `props`. Generally your code will be cleaner if you rely on `props` instead whenever possible.

If you're new to these concepts, the [overview](/docs-overview.html) should give you a good idea about them.
If you're new to these concepts, the [overview](docs-overview.html) should give you a good idea about them.
#### Parameters
* **`connect`**: An instance of [`DragSourceConnector`](/docs-drag-source-connector.html). It has two methods: `dragPreview()` and `dragSource()`. Of them, `dragSource()` is the one you'll use the most. It returns a function you need to pass down to your component to connect the source DOM node to the React DnD backend. If you return something like `{ connectDragSource: connect.dragSource() }` from your `collect` function, the component will receive `connectDragSource` as a prop so you can mark the relevant node inside its `render()` as draggable: `return this.props.connectDragSource(<div>...</div>)`. You can see this pattern in action in the example at the end of this file. Read the [`DragSourceConnector` documentation](docs-drag-source-connector.html) for a complete list of `connect` methods, or read the [overview](/docs-overview.html) for an introduction to the connectors.
* **`connect`**: An instance of [`DragSourceConnector`](docs-drag-source-connector.html). It has two methods: `dragPreview()` and `dragSource()`. Of them, `dragSource()` is the one you'll use the most. It returns a function you need to pass down to your component to connect the source DOM node to the React DnD backend. If you return something like `{ connectDragSource: connect.dragSource() }` from your `collect` function, the component will receive `connectDragSource` as a prop so you can mark the relevant node inside its `render()` as draggable: `return this.props.connectDragSource(<div>...</div>)`. You can see this pattern in action in the example at the end of this file. Read the [`DragSourceConnector` documentation](docs-drag-source-connector.html) for a complete list of `connect` methods, or read the [overview](docs-overview.html) for an introduction to the connectors.
* **`monitor`**: An instance of [`DragSourceMonitor`](/docs-drag-source-monitor.html). It is precisely the same `monitor` you receive in the drag source specification methods, and you can use it to query the information about the current drag state. Read the [`DragSourceMonitor` documentation](docs-drag-source-monitor.html) for a complete list of `monitor` methods, or read the [overview](/docs-overview.html) for an introduction to the monitors.
* **`monitor`**: An instance of [`DragSourceMonitor`](docs-drag-source-monitor.html). It is precisely the same `monitor` you receive in the drag source specification methods, and you can use it to query the information about the current drag state. Read the [`DragSourceMonitor` documentation](docs-drag-source-monitor.html) for a complete list of `monitor` methods, or read the [overview](docs-overview.html) for an introduction to the monitors.

@@ -105,3 +105,3 @@ ### Return Value

`DragSource` wraps your component and returns another React component.
For easier [testing](/docs-testing.html), it provides an API to reach into the internals:
For easier [testing](docs-testing.html), it provides an API to reach into the internals:

@@ -116,3 +116,3 @@ #### Static Properties

* **`getHandlerId()`**: Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend. Refer to the [testing](/docs-testing.html) tutorial for a usage example.
* **`getHandlerId()`**: Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend. Refer to the [testing](docs-testing.html) tutorial for a usage example.

@@ -125,3 +125,3 @@ ### Nesting Behavior

Check out [the tutorial](/docs-tutorial.html) for more real examples!
Check out [the tutorial](docs-tutorial.html) for more real examples!

@@ -128,0 +128,0 @@ -------------------

28

docs/01 Top Level API/DropTarget.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -8,7 +8,7 @@ DropTarget

To use `DropTarget`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](/docs-drag-drop-context.html).
To use `DropTarget`, don't forget to wrap the top-level component of your app in a [`DragDropContext`](docs-drag-drop-context.html).
### Signature
`DropTarget` uses partial application. After specifying its parameters with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DropTarget` usable as an ES7 decorator. Read the [overview](/docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.
`DropTarget` uses partial application. After specifying its parameters with the first call, you need to pass your React component class as the only parameter in the second call. This signature makes `DropTarget` usable as an ES7 decorator. Read the [overview](docs-overview.html) for a more detailed explanation of the decorators and the higher-order components.

@@ -48,7 +48,7 @@ -------------------

* **`types`**: Required. A string, an ES6 symbol, an array of either, or a function that returns either of those, given component's `props`. This drop target will only react to the items produced by the [drag sources](/docs-drag-source.html) of the specified type or types. Read the [overview](/docs-overview.html) to learn more about the items and types.
* **`types`**: Required. A string, an ES6 symbol, an array of either, or a function that returns either of those, given component's `props`. This drop target will only react to the items produced by the [drag sources](docs-drag-source.html) of the specified type or types. Read the [overview](docs-overview.html) to learn more about the items and types.
* **`spec`**: Required. A plain JavaScript object with a few allowed methods on it. It describes how the drop target reacts to the drag and drop events. See the drop target specification described in detail in the next section.
* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: `monitor` and `connect`. Read the [overview](/docs-overview.html) for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.
* **`collect`**: Required. The collecting function. It should return a plain object of the props to inject into your component. It receives two parameters: `monitor` and `connect`. Read the [overview](docs-overview.html) for an introduction to the monitors, the connectors, and the collecting function. See the collecting function described in detail after the next section.

@@ -75,3 +75,3 @@ * **`options`**: Optional. A plain object. If some of the props to your component are not scalar (that is, are not primitive values or functions), specifying a custom `arePropsEqual(props, otherProps)` function inside the `options` object can improve the performance. Unless you have performance problems, don't worry about it.

* **`monitor`**: An instance of [`DropTargetMonitor`](/docs-drop-target-monitor.html). Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, whether it is over the current target, and whether it can be dropped. Read the [`DropTargetMonitor` documentation](docs-drop-target-monitor.html) for a complete list of `monitor` methods, or read the [overview](/docs-overview.html) for an introduction to the monitors.
* **`monitor`**: An instance of [`DropTargetMonitor`](docs-drop-target-monitor.html). Use it to query the information about the current drag state, such as the currently dragged item and its type, the current and initial coordinates and offsets, whether it is over the current target, and whether it can be dropped. Read the [`DropTargetMonitor` documentation](docs-drop-target-monitor.html) for a complete list of `monitor` methods, or read the [overview](docs-overview.html) for an introduction to the monitors.

@@ -92,9 +92,9 @@ * **`component`**: When specified, it is the instance of your component. Use it to access the underlying DOM node for position or size measurements, or to call `setState`, and other component methods. It is purposefully missing from `canDrop` because the instance may not be available by the time it is called. If you want this method to depend on the component's state, consider lifting the state to the parent component, so that you can just use `props`. Generally your code will be cleaner if you rely on `props` instead whenever possible.

If you're new to these concepts, the [overview](/docs-overview.html) should give you a good idea about them.
If you're new to these concepts, the [overview](docs-overview.html) should give you a good idea about them.
#### Parameters
* **`connect`**: An instance of [`DropTargetConnector`](/docs-drop-target-connector.html). It only has a single `dropTarget()` method. It returns a function you need to pass down to your component to connect the target DOM node to the React DnD backend. If you return something like `{ connectDropTarget: connect.dropTarget() }` from your `collect` function, the component will receive `connectDropTarget` as a prop so you can mark the relevant node inside its `render()` as droppable: `return this.props.connectDropTarget(<div>...</div>)`. You can see this pattern in action in the example at the end of this file. Read the [`DropTargetConnector` documentation](docs-drop-target-connector.html) for a complete list of `connect` methods, or read the [overview](/docs-overview.html) for an introduction to the connectors.
* **`connect`**: An instance of [`DropTargetConnector`](docs-drop-target-connector.html). It only has a single `dropTarget()` method. It returns a function you need to pass down to your component to connect the target DOM node to the React DnD backend. If you return something like `{ connectDropTarget: connect.dropTarget() }` from your `collect` function, the component will receive `connectDropTarget` as a prop so you can mark the relevant node inside its `render()` as droppable: `return this.props.connectDropTarget(<div>...</div>)`. You can see this pattern in action in the example at the end of this file. Read the [`DropTargetConnector` documentation](docs-drop-target-connector.html) for a complete list of `connect` methods, or read the [overview](docs-overview.html) for an introduction to the connectors.
* **`monitor`**: An instance of [`DropTargetMonitor`](/docs-drop-target-monitor.html). It is precisely the same `monitor` you receive in the drop target specification methods, and you can use it to query the information about the current drag state. Read the [`DropTargetMonitor` documentation](docs-drop-target-monitor.html) for a complete list of `monitor` methods, or read the [overview](/docs-overview.html) for an introduction to the monitors.
* **`monitor`**: An instance of [`DropTargetMonitor`](docs-drop-target-monitor.html). It is precisely the same `monitor` you receive in the drop target specification methods, and you can use it to query the information about the current drag state. Read the [`DropTargetMonitor` documentation](docs-drop-target-monitor.html) for a complete list of `monitor` methods, or read the [overview](docs-overview.html) for an introduction to the monitors.

@@ -104,3 +104,3 @@ ### Return Value

`DropTarget` wraps your component and returns another React component.
For easier [testing](/docs-testing.html), it provides an API to reach into the internals:
For easier [testing](docs-testing.html), it provides an API to reach into the internals:

@@ -115,3 +115,3 @@ #### Static Properties

* **`getHandlerId()`**: Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend. Refer to the [testing](/docs-testing.html) tutorial for a usage example.
* **`getHandlerId()`**: Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend. Refer to the [testing](docs-testing.html) tutorial for a usage example.

@@ -124,7 +124,7 @@ ### Nesting Behavior

When using the [`HTML5` backend](/docs-html5-backend.html), you can handle the file drops just by registering a drop target for `HTML5Backend.NativeTypes.FILE` or `HTML5Backend.NativeTypes.URL` built-in types. Due to the browser security restrictions, `monitor.getItem()` does not provide any information about the files or the URLs until they are dropped.
When using the [`HTML5` backend](docs-html5-backend.html), you can handle the file drops just by registering a drop target for `HTML5Backend.NativeTypes.FILE` or `HTML5Backend.NativeTypes.URL` built-in types. Due to the browser security restrictions, `monitor.getItem()` does not provide any information about the files or the URLs until they are dropped.
### Example
Check out [the tutorial](/docs-tutorial.html) for more real examples!
Check out [the tutorial](docs-tutorial.html) for more real examples!

@@ -420,3 +420,3 @@ -------------------

@DropTarget(Types.CHESSPIECE, chessSquareTarget, (collect, monitor) => ({
@DropTarget(Types.CHESSPIECE, chessSquareTarget, (connect, monitor) => ({
// Call this function inside render()

@@ -423,0 +423,0 @@ // to let React DnD handle the drag events:

8

docs/02 Connecting to DOM/DragSourceConnector.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -6,3 +6,3 @@ DragSourceConnector

`DragSourceConnector` is an object passed to a collecting function of the [`DragSource`](/docs-drag-source.html). Its methods return functions that let you assign the roles to your component's DOM nodes.
`DragSourceConnector` is an object passed to a collecting function of the [`DragSource`](docs-drag-source.html). Its methods return functions that let you assign the roles to your component's DOM nodes.

@@ -15,3 +15,3 @@ ### Methods

* **`dragPreview() => (elementOrNode, options?)`**: Optional. Returns a function that may be used inside the component to assign the drag preview role to a node. By returning `{ connectDragPreview: connect.dragPreview() }` from your collecting function, you can mark any React element as the drag preview node. To do that, replace any `element` with `this.props.connectDragPreview(element)` inside the `render` function. The drag preview is the node that will be screenshotted by the [`HTML5` backend](/docs-html5-backend.html) when the drag begins. For example, if you want to make something draggable by a small custom handle, you can mark this handle as the `dragSource()`, but also mark an outer, larger component node as the `dragPreview()`. Thus the larger drag preview appears on the screenshot, but only the smaller drag source is actually draggable. Another possible customization is passing an [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) instance to `dragPreview` from a lifecycle method like `componentDidMount`. This lets you use the actual images for drag previews. (Note that IE does not support this customization). See the example code below for the different usage examples.
* **`dragPreview() => (elementOrNode, options?)`**: Optional. Returns a function that may be used inside the component to assign the drag preview role to a node. By returning `{ connectDragPreview: connect.dragPreview() }` from your collecting function, you can mark any React element as the drag preview node. To do that, replace any `element` with `this.props.connectDragPreview(element)` inside the `render` function. The drag preview is the node that will be screenshotted by the [`HTML5` backend](docs-html5-backend.html) when the drag begins. For example, if you want to make something draggable by a small custom handle, you can mark this handle as the `dragSource()`, but also mark an outer, larger component node as the `dragPreview()`. Thus the larger drag preview appears on the screenshot, but only the smaller drag source is actually draggable. Another possible customization is passing an [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) instance to `dragPreview` from a lifecycle method like `componentDidMount`. This lets you use the actual images for drag previews. (Note that IE does not support this customization). See the example code below for the different usage examples.

@@ -36,3 +36,3 @@ ### Method Options

Check out [the tutorial](/docs-tutorial.html) for more real examples!
Check out [the tutorial](docs-tutorial.html) for more real examples!

@@ -39,0 +39,0 @@ -------------------

12

docs/02 Connecting to DOM/DropTargetConnector.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -6,3 +6,3 @@ DropTargetConnector

`DropTargetConnector` is an object passed to a collecting function of the [`DropTarget`](/docs-drop-target.html). Its only method `dropTarget()` returns a function that lets you assign the drop target role to one of your component's DOM nodes.
`DropTargetConnector` is an object passed to a collecting function of the [`DropTarget`](docs-drop-target.html). Its only method `dropTarget()` returns a function that lets you assign the drop target role to one of your component's DOM nodes.

@@ -17,3 +17,3 @@ ### Methods

Check out [the tutorial](/docs-tutorial.html) for more real examples!
Check out [the tutorial](docs-tutorial.html) for more real examples!

@@ -29,3 +29,3 @@ -------------------

return {
connectDropTarget: connect.dragSource()
connectDropTarget: connect.dropTarget()
};

@@ -57,3 +57,3 @@ }

return {
connectDropTarget: connect.dragSource()
connectDropTarget: connect.dropTarget()
};

@@ -85,3 +85,3 @@ }

return {
connectDropTarget: connect.dragSource()
connectDropTarget: connect.dropTarget()
};

@@ -88,0 +88,0 @@ }

4

docs/03 Monitoring State/DragLayerMonitor.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -6,3 +6,3 @@ DragLayerMonitor

`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.
`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.

@@ -9,0 +9,0 @@ ### Methods

4

docs/03 Monitoring State/DragSourceMonitor.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -6,3 +6,3 @@ DragSourceMonitor

`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.
`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.

@@ -9,0 +9,0 @@ ### Methods

4

docs/03 Monitoring State/DropTargetMonitor.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -6,3 +6,3 @@ DropTargetMonitor

`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.
`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.

@@ -9,0 +9,0 @@ ### Methods

6

docs/04 Backends/HTML5.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -19,5 +19,5 @@ HTML5

* **`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.
* **`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.
* **`NativeTypes`**: an enumeration of two constants, `NativeTypes.FILE` and `NativeTypes.URL`. You may register the [drop targets](/docs-drop-target.html) for these types to handle the drop of the native files and URLs.
* **`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.

@@ -24,0 +24,0 @@ ### Usage

6

docs/04 Backends/Test.md

@@ -1,2 +0,2 @@

*New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
*New to React DnD? [Read the overview](docs-overview.html) before jumping into the docs.*

@@ -7,3 +7,3 @@ Test

The `Test` backend lets you test the drag and drop interaction of your components even without the DOM.
Due to time constraints, this is currently the most underdocumented part of React DnD, but you are welcome to learn from the usage example in the [testing](/docs-testing.html) tutorial, and contribute to the docs.
Due to time constraints, this is currently the most underdocumented part of React DnD, but you are welcome to learn from the usage example in the [testing](docs-testing.html) tutorial, and contribute to the docs.

@@ -17,2 +17,2 @@ ### Importing

See the second example in the [testing](/docs-testing.html) tutorial.
See the second example in the [testing](docs-testing.html) tutorial.

214

modules/backends/HTML5.js
'use strict';
exports.__esModule = true;
var _nativeTypesConfig;
exports.getEmptyImage = getEmptyImage;

@@ -9,2 +12,4 @@ exports['default'] = createHTML5Backend;

function _defineProperty(obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

@@ -22,4 +27,2 @@

var _utilsDataTransfer = require('../utils/DataTransfer');
var _utilsOffsetHelpers = require('../utils/OffsetHelpers');

@@ -39,8 +42,2 @@

var NativeTypes = {
FILE: '__NATIVE_FILE__',
URL: '__NATIVE_URL__'
};
exports.NativeTypes = NativeTypes;
var emptyImage = undefined;

@@ -57,42 +54,51 @@

var FileDragSource = (function (_DragSource) {
function FileDragSource() {
_classCallCheck(this, FileDragSource);
var NativeTypes = {
FILE: '__NATIVE_FILE__',
URL: '__NATIVE_URL__',
TEXT: '__NATIVE_TEXT__'
};
_DragSource.call(this);
this.item = Object.defineProperties({}, {
files: {
get: function () {
console.warn('Browser doesn\'t allow reading file information until the files are dropped.');
return null;
},
configurable: true,
enumerable: true
}
});
}
exports.NativeTypes = NativeTypes;
function getDataFromDataTransfer(dataTransfer, typesToTry, defaultValue) {
var result = typesToTry.reduce(function (resultSoFar, typeToTry) {
return resultSoFar || dataTransfer.getData(typeToTry);
}, null);
_inherits(FileDragSource, _DragSource);
return result != null ? result : defaultValue;
}
FileDragSource.prototype.mutateItemByReadingDataTransfer = function mutateItemByReadingDataTransfer(dataTransfer) {
delete this.item.files;
this.item.files = Array.prototype.slice.call(dataTransfer.files);
};
var nativeTypesConfig = (_nativeTypesConfig = {}, _defineProperty(_nativeTypesConfig, NativeTypes.FILE, {
exposeProperty: 'files',
matchesTypes: ['Files'],
getData: function getData(dataTransfer) {
return Array.prototype.slice.call(dataTransfer.files);
}
}), _defineProperty(_nativeTypesConfig, NativeTypes.URL, {
exposeProperty: 'urls',
matchesTypes: ['Url', 'text/uri-list'],
getData: function getData(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '').split('\n');
}
}), _defineProperty(_nativeTypesConfig, NativeTypes.TEXT, {
exposeProperty: 'text',
matchesTypes: ['Text', 'text/plain'],
getData: function getData(dataTransfer, matchesTypes) {
return getDataFromDataTransfer(dataTransfer, matchesTypes, '');
}
}), _nativeTypesConfig);
FileDragSource.prototype.beginDrag = function beginDrag() {
return this.item;
};
function createNativeDragSource(type) {
var _nativeTypesConfig$type = nativeTypesConfig[type];
var exposeProperty = _nativeTypesConfig$type.exposeProperty;
var matchesTypes = _nativeTypesConfig$type.matchesTypes;
var getData = _nativeTypesConfig$type.getData;
return FileDragSource;
})(_dndCore.DragSource);
return (function (_DragSource) {
function NativeDragSource() {
_classCallCheck(this, NativeDragSource);
var UrlDragSource = (function (_DragSource2) {
function UrlDragSource() {
_classCallCheck(this, UrlDragSource);
_DragSource2.call(this);
this.item = Object.defineProperties({}, {
urls: {
_DragSource.call(this);
this.item = Object.defineProperties({}, _defineProperty({}, exposeProperty, {
get: function () {
console.warn('Browser doesn\'t allow reading URL information until the link is dropped.');
console.warn('Browser doesn\'t allow reading "' + exposeProperty + '" until the drop event.');
return null;

@@ -102,20 +108,32 @@ },

enumerable: true
}
});
}
}));
}
_inherits(UrlDragSource, _DragSource2);
_inherits(NativeDragSource, _DragSource);
UrlDragSource.prototype.mutateItemByReadingDataTransfer = function mutateItemByReadingDataTransfer(dataTransfer) {
delete this.item.urls;
this.item.urls = (dataTransfer.getData('Url') || dataTransfer.getData('text/uri-list') || '').split('\n');
};
NativeDragSource.prototype.mutateItemByReadingDataTransfer = function mutateItemByReadingDataTransfer(dataTransfer) {
delete this.item[exposeProperty];
this.item[exposeProperty] = getData(dataTransfer, matchesTypes);
};
UrlDragSource.prototype.beginDrag = function beginDrag() {
return this.item;
};
NativeDragSource.prototype.beginDrag = function beginDrag() {
return this.item;
};
return UrlDragSource;
})(_dndCore.DragSource);
return NativeDragSource;
})(_dndCore.DragSource);
}
function matchNativeItemType(dataTransfer) {
var dataTransferTypes = Array.prototype.slice.call(dataTransfer.types);
return Object.keys(nativeTypesConfig).filter(function (nativeItemType) {
var matchesTypes = nativeTypesConfig[nativeItemType].matchesTypes;
return matchesTypes.some(function (t) {
return dataTransferTypes.indexOf(t) > -1;
});
})[0] || null;
}
var HTML5Backend = (function () {

@@ -263,2 +281,11 @@ function HTML5Backend(manager) {

HTML5Backend.prototype.getCurrentDropEffect = function getCurrentDropEffect() {
if (this.isDraggingNativeItem()) {
// It makes more sense to default to 'copy' for native resources
return 'copy';
} else {
return this.getCurrentSourceNodeOptions().dropEffect;
}
};
HTML5Backend.prototype.getCurrentSourcePreviewNodeOptions = function getCurrentSourcePreviewNodeOptions() {

@@ -280,27 +307,17 @@ var sourceId = this.monitor.getSourceId();

HTML5Backend.prototype.isDraggingNativeItem = function isDraggingNativeItem() {
switch (this.monitor.getItemType()) {
case NativeTypes.FILE:
case NativeTypes.URL:
return true;
default:
return false;
}
var itemType = this.monitor.getItemType();
return Object.keys(NativeTypes).some(function (key) {
return NativeTypes[key] === itemType;
});
};
HTML5Backend.prototype.beginDragNativeUrl = function beginDragNativeUrl() {
HTML5Backend.prototype.beginDragNativeItem = function beginDragNativeItem(type) {
this.clearCurrentDragSourceNode();
this.currentNativeSource = new UrlDragSource();
this.currentNativeHandle = this.registry.addSource(NativeTypes.URL, this.currentNativeSource);
var SourceType = createNativeDragSource(type);
this.currentNativeSource = new SourceType();
this.currentNativeHandle = this.registry.addSource(type, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
};
HTML5Backend.prototype.beginDragNativeFile = function beginDragNativeFile() {
this.clearCurrentDragSourceNode();
this.currentNativeSource = new FileDragSource();
this.currentNativeHandle = this.registry.addSource(NativeTypes.FILE, this.currentNativeSource);
this.actions.beginDrag([this.currentNativeHandle]);
};
HTML5Backend.prototype.endDragNativeItem = function endDragNativeItem() {

@@ -389,2 +406,4 @@ this.actions.endDrag();

var nativeType = matchNativeItemType(dataTransfer);
if (this.monitor.isDragging()) {

@@ -446,5 +465,5 @@ if (typeof dataTransfer.setDragImage === 'function') {

}
} else if (_utilsDataTransfer.isUrlDataTransfer(dataTransfer)) {
// URL dragged from inside the document
this.beginDragNativeUrl();
} else if (nativeType) {
// A native item (such as URL) dragged from inside the document
this.beginDragNativeItem(nativeType);
} else {

@@ -475,8 +494,7 @@ // If by this time no drag source reacted, tell browser not to drag.

if (_utilsDataTransfer.isFileDataTransfer(dataTransfer)) {
// File dragged from outside the document
this.beginDragNativeFile();
} else if (_utilsDataTransfer.isUrlDataTransfer(dataTransfer)) {
// URL dragged from outside the document
this.beginDragNativeUrl();
var nativeType = matchNativeItemType(dataTransfer);
if (nativeType) {
// A native item (such as file or URL) dragged from outside the document
this.beginDragNativeItem(nativeType);
}

@@ -496,2 +514,7 @@ };

if (!this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return;
}
if (!_utilsBrowserDetector.isFirefox()) {

@@ -514,8 +537,3 @@ // Don't emit hover in `dragenter` on Firefox due to an edge case.

e.preventDefault();
var _getCurrentSourceNodeOptions = this.getCurrentSourceNodeOptions();
var dropEffect = _getCurrentSourceNodeOptions.dropEffect;
e.dataTransfer.dropEffect = dropEffect;
e.dataTransfer.dropEffect = this.getCurrentDropEffect();
}

@@ -538,2 +556,11 @@ };

this.dragOverTargetIds = [];
if (!this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
// Prevent default "drop and blow away the whole document" action.
e.preventDefault();
e.dataTransfer.dropEffect = 'none';
return;
}
this.actions.hover(dragOverTargetIds, {

@@ -550,8 +577,3 @@ clientOffset: _utilsOffsetHelpers.getEventClientOffset(e)

e.preventDefault();
var _getCurrentSourceNodeOptions2 = this.getCurrentSourceNodeOptions();
var dropEffect = _getCurrentSourceNodeOptions2.dropEffect;
e.dataTransfer.dropEffect = dropEffect;
e.dataTransfer.dropEffect = this.getCurrentDropEffect();
} else if (this.isDraggingNativeItem()) {

@@ -576,7 +598,9 @@ // Don't show a nice cursor but still prevent default

var isLastLeave = this.enterLeaveCounter.leave(e.target);
if (!isLastLeave || !this.isDraggingNativeItem()) {
if (!isLastLeave) {
return;
}
this.endDragNativeItem();
if (this.isDraggingNativeItem()) {
this.endDragNativeItem();
}
};

@@ -583,0 +607,0 @@

4

modules/utils/OffsetHelpers.js

@@ -43,3 +43,5 @@ 'use strict';

function getDragPreviewOffset(sourceNode, dragPreview, clientOffset, anchorPoint) {
var isImage = dragPreview instanceof Image;
// The browsers will use the image intrinsic size under different conditions.
// Firefox only cares if it's an image, but WebKit also wants it to be detached.
var isImage = dragPreview.nodeName === 'IMG' && (_BrowserDetector.isFirefox() || !document.documentElement.contains(dragPreview));
var dragPreviewNode = isImage ? sourceNode : dragPreview;

@@ -46,0 +48,0 @@

2

package.json
{
"name": "react-dnd",
"version": "1.0.0",
"version": "1.1.0",
"description": "Drag and Drop for React",

@@ -5,0 +5,0 @@ "main": "modules/index.js",

10

README.md
React *DnD*
=========
[![Join the chat at https://gitter.im/gaearon/react-dnd](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/gaearon/react-dnd?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
Drag and Drop for React.

@@ -10,2 +8,8 @@

http://gaearon.github.io/react-dnd/
http://gaearon.github.io/react-dnd/
See the changelog on the Releases page:
https://github.com/gaearon/react-dnd/releases
[![Join the chat at https://gitter.im/gaearon/react-dnd](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/gaearon/react-dnd?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 
modules/utils/DataTransfer.js
docs/00 Quick Start/Tutorial.md

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc