From dbdeb3f83126e52acce1b1c853d7115ed092e912 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sun, 19 Apr 2015 01:48:50 +0300 Subject: [PATCH] Start work on drag around naive --- examples/_drag-around-naive/Box.js | 57 ++++++++---------- examples/_drag-around-naive/Container.js | 75 ++++++++++++------------ examples/_drag-around-naive/index.js | 1 - examples/index.js | 6 +- 4 files changed, 68 insertions(+), 71 deletions(-) diff --git a/examples/_drag-around-naive/Box.js b/examples/_drag-around-naive/Box.js index e5554cf153..4693a7fa5e 100644 --- a/examples/_drag-around-naive/Box.js +++ b/examples/_drag-around-naive/Box.js @@ -2,16 +2,7 @@ import React, { PropTypes } from 'react'; import ItemTypes from './ItemTypes'; -import { DragDropMixin, DropEffects } from 'react-dnd'; - -const dragSource = { - beginDrag(component) { - return { - effectAllowed: DropEffects.MOVE, - item: component.props - }; - } -}; +import { configureDragDrop } from 'react-dnd'; const style = { position: 'absolute', @@ -19,41 +10,43 @@ const style = { padding: '0.5rem' }; -const Box = React.createClass({ - mixins: [DragDropMixin], +const BoxSource = { + beginDrag(props) { + const { id, left, top } = props; + return { id, left, top }; + } +}; - propTypes: { +@configureDragDrop( + register => + register.dragSource(ItemTypes.BOX, BoxSource), + + boxSource => ({ + connectDragSource: boxSource.connect(), + isDragging: boxSource.isDragging() + }) +) +export default class Box { + static propTypes = { + connectDragSource: PropTypes.bool.isRequired, + isDragging: PropTypes.bool.isRequired, id: PropTypes.any.isRequired, left: PropTypes.number.isRequired, top: PropTypes.number.isRequired, hideSourceOnDrag: PropTypes.bool.isRequired - }, - - statics: { - configureDragDrop(register) { - register(ItemTypes.BOX, { dragSource }); - } - }, + }; render() { - const { hideSourceOnDrag, left, top, children } = this.props; - const { isDragging } = this.getDragState(ItemTypes.BOX); - + const { hideSourceOnDrag, left, top, connectDragSource, isDragging, children } = this.props; if (isDragging && hideSourceOnDrag) { return null; } return ( -
+
{children}
); } -}); - -export default Box; \ No newline at end of file +} \ No newline at end of file diff --git a/examples/_drag-around-naive/Container.js b/examples/_drag-around-naive/Container.js index 3c506c00ab..873f5c07ff 100644 --- a/examples/_drag-around-naive/Container.js +++ b/examples/_drag-around-naive/Container.js @@ -1,22 +1,11 @@ 'use strict'; -import React, { PropTypes } from 'react'; +import React, { Component, PropTypes } from 'react'; import update from 'react/lib/update'; import ItemTypes from './ItemTypes'; import Box from './Box'; -import { DragDropMixin } from'react-dnd'; - -function makeDropTarget(context) { - return { - acceptDrop(component, item) { - const delta = context.getCurrentOffsetDelta(); - const left = Math.round(item.left + delta.x); - const top = Math.round(item.top + delta.y); - - component.moveBox(item.id, left, top); - } - }; -} +import { configureDragDrop, configureDragDropContext } from 'react-dnd'; +import HTML5Backend from 'react-dnd/modules/backends/HTML5'; const styles = { width: 300, @@ -25,29 +14,45 @@ const styles = { position: 'relative' }; -const Container = React.createClass({ - mixins: [DragDropMixin], +const BoxTarget = { + drop(props, monitor, dropTargetId, component) { + const item = monitor.getItem(); + const delta = monitor.getCurrentOffsetDelta(); + const left = Math.round(item.left + delta.x); + const top = Math.round(item.top + delta.y); + + component.moveBox(item.id, left, top); + } +}; + +@configureDragDropContext(HTML5Backend) +@configureDragDrop( + register => + register.dropTarget(ItemTypes.BOX, BoxTarget), - propTypes: { - hideSourceOnDrag: PropTypes.bool.isRequired - }, + boxTarget => ({ + connectDropTarget: boxTarget.connect() + }) +) +export default class Container extends Component { + static propTypes = { + hideSourceOnDrag: PropTypes.bool.isRequired, + connectDropTarget: PropTypes.func.isRequired + }; + + static contextTypes = { + dragDropManager: PropTypes.object + } - getInitialState() { - return { + constructor(props) { + super(props); + this.state = { boxes: { 'a': { top: 20, left: 80, title: 'Drag me around' }, 'b': { top: 180, left: 20, title: 'Drag me too' } } }; - }, - - statics: { - configureDragDrop(register, context) { - register(ItemTypes.BOX, { - dropTarget: makeDropTarget(context) - }); - } - }, + } moveBox(id, left, top) { this.setState(update(this.state, { @@ -60,14 +65,14 @@ const Container = React.createClass({ } } })); - }, + } render() { - const { hideSourceOnDrag } = this.props; + const { hideSourceOnDrag, connectDropTarget } = this.props; const { boxes} = this.state; return ( -
{Object.keys(boxes).map(key => { @@ -87,6 +92,4 @@ const Container = React.createClass({
); } -}); - -export default Container; \ No newline at end of file +} \ No newline at end of file diff --git a/examples/_drag-around-naive/index.js b/examples/_drag-around-naive/index.js index 6473526a9d..88e11ae5e5 100644 --- a/examples/_drag-around-naive/index.js +++ b/examples/_drag-around-naive/index.js @@ -44,7 +44,6 @@ const DragAroundNaive = React.createClass({ If we want to add custom logic such as snapping to grid or bounds checking, we can only do this on drop. There is no way for us to control what happens to dragged preview once the browser has drawn it.

-

Next: providing custom drag feedback.

); } diff --git a/examples/index.js b/examples/index.js index d8adad35b9..dce527b9ea 100644 --- a/examples/index.js +++ b/examples/index.js @@ -3,6 +3,7 @@ import React from 'react'; import Router, { Route, Link, Redirect, RouteHandler } from 'react-router'; import AnimationFrame from 'animation-frame'; +import DragAroundNaive from './_drag-around-naive/index'; import DustbinSimple from './_dustbin-simple'; import DustbinInteresting from './_dustbin-interesting'; import DustbinStress from './_dustbin-stress'; @@ -13,7 +14,6 @@ import CustomizeHandles from './_customize-handles'; import CustomizeEffects from './_customize-effects'; /* -DragAroundNaive = require('./_drag-around-naive/index'), DragAroundCustom = require('./_drag-around-custom/index'), */ @@ -23,6 +23,7 @@ const App = React.createClass({

react-dnd examples (source)