Backend mousemove 1.0

examples/_drag-around-experimental/Box.js

@@ -0,0 +1,83 @@
+/** @jsx React.DOM */
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    getEmptyImage = require('./getEmptyImage'),
+    { PropTypes } = React,
+    { MouseDragDropMixin, DropEffects } = require('react-dnd');
+
+var Box = React.createClass({
+  mixins: [MouseDragDropMixin],
+
+  propTypes: {
+    id: PropTypes.any.isRequired,
+    isDragFeedback: PropTypes.bool,
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired
+  },
+
+  getInitialState() {
+    return {
+      tickTock: false
+    };
+  },
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({ tickTock: !this.state.tickTock });
+    }, 200);
+  },
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  },
+
+  statics: {
+    configureDragDrop(registerType) {
+      registerType(ItemTypes.BOX, {
+        dragSource: {
+          beginDrag(component, e) {
+            return {
+              effectAllowed: DropEffects.MOVE,
+              dragPreview: getEmptyImage(),
+              item: {
+                id: component.props.id,
+                children: component.props.children,
+                startLeft: component.props.left,
+                startTop: component.props.top,
+                startClientX: e.clientX,
+                startClientY: e.clientY
+              }
+            };
+          }
+        }
+      });
+    }
+  },
+
+  render() {
+    var { isDragging } = this.getDragState(ItemTypes.BOX),
+        { isDragFeedback } = this.props,
+        transform = `translate3d(${this.props.left}px, ${this.props.top}px, 0)`;
+
+    return (
+      <div {...this.dragSourceFor(ItemTypes.BOX)}
+           style={{
+            WebkitTransform: transform,
+            transform: transform,
+            opacity: isDragging ? 0 : 1,
+            position: 'absolute',
+            backgroundColor: isDragFeedback && this.state.tickTock ? 'yellow' : 'white',
+            top: 0,
+            left: 0,
+            border: '1px dashed gray',
+            padding: '0.5rem'
+           }}>
+        {this.props.children}
+      </div>
+    );
+  }
+});
+
+module.exports = Box;

examples/_drag-around-experimental/Container.js

@@ -0,0 +1,87 @@
+/** @jsx React.DOM */
+'use strict';
+
+var React = require('react'),
+    update = require('react/lib/update'),
+    ItemTypes = require('./ItemTypes'),
+    Box = require('./Box'),
+    { PropTypes } = React,
+    { MouseDragDropMixin } = require('react-dnd');
+
+var Container = React.createClass({
+  mixins: [MouseDragDropMixin],
+
+  getInitialState() {
+    return {
+      boxes: {
+        'a': { top: 20, left: 80, title: 'Drag me around' },
+        'b': { top: 180, left: 20, title: 'Drag me too' },
+      }
+    };
+  },
+
+  statics: {
+    configureDragDrop(registerType) {
+      registerType(ItemTypes.BOX, {
+        dropTarget: {
+          acceptDrop(component, item, e) {
+            var left = Math.round(item.startLeft + (e.clientX - item.startClientX)),
+                top = Math.round(item.startTop + (e.clientY - item.startClientY));
+
+            component.moveBox(item.id, left, top);
+          }
+        }
+      });
+    }
+  },
+
+  moveBox(id, left, top) {
+    var stateUpdate = {
+      boxes: {}
+    };
+
+    stateUpdate.boxes[id] = {
+      $merge: {
+        left: left,
+        top: top
+      }
+    };
+
+    this.setState(update(this.state, stateUpdate));
+  },
+
+  render() {
+    var cursor;
+    if (this.state.draggedItemType === 'box') {
+      cursor = '-webkit-grabbing';
+    }
+
+    return (
+      <div {...this.dropTargetFor(ItemTypes.BOX)}
+           style={{
+             cursor: cursor,
+             width: 300,
+             height: 300,
+             border: '1px solid black',
+             position: 'relative'
+           }}>
+
+        {Object.keys(this.state.boxes).map(key => {
+          var box = this.state.boxes[key];
+
+          return (
+            <Box key={key}
+                 id={key}
+                 left={box.left}
+                 top={box.top}>
+              {box.title}
+            </Box>
+          );
+        })}
+
+      </div>
+    );
+  }
+});
+
+module.exports = Container;

examples/_drag-around-experimental/DragLayer.js

@@ -0,0 +1,57 @@
+/** @jsx React.DOM */
+'use strict';
+
+var React = require('react'),
+    Box = require('./Box'),
+    { DragFeedbackMixin } = require('react-dnd');
+
+var DragLayer = React.createClass({
+  mixins: [DragFeedbackMixin],
+
+  render() {
+    var {
+      x,
+      y,
+      draggedItem,
+      isDragging
+    } = this.state;
+
+    var transform;
+    if (isDragging) {
+      transform = `translate3d(${x}px, ${y}px, 0)`;
+    }
+
+    return (
+      <div style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        zIndex: 100,
+        left: 0,
+        top: 0,
+        width:'100%',
+        height: '100%'
+      }}>
+        {isDragging &&
+          <div style={{
+            position: 'fixed',
+            left: 0,
+            top: 0,
+            transform: transform,
+            WebkitTransform: transform,
+            width: '100%',
+            height: '100%'
+          }}>
+            <Box left={0}
+                 top={0}
+                 id={draggedItem.id}
+                 isDragFeedback>
+              {draggedItem.children}
+            </Box>
+          </div>
+        }
+      </div>
+    );
+  }
+});
+
+module.exports = DragLayer;

examples/_drag-around-experimental/ItemTypes.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  BOX: 'box'
+};

examples/_drag-around-experimental/getEmptyImage.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var TRANSPARENT_PIXEL_SRC = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==',
+    emptyImg = document.createElement('img');
+
+emptyImg.src = TRANSPARENT_PIXEL_SRC;
+
+function getEmptyImage() {
+  return emptyImg;
+}
+
+module.exports = getEmptyImage;

examples/_drag-around-experimental/index.js

@@ -0,0 +1,27 @@
+/** @jsx React.DOM */
+'use strict';
+
+var React = require('react'),
+    Container = require('./Container'),
+    DragLayer = require('./DragLayer'),
+    LinkedStateMixin = require('react/lib/LinkedStateMixin');
+
+var DragAroundExperimental = React.createClass({
+  render() {
+    return (
+      <div>
+        <Container />
+        <DragLayer />
+        <hr />
+        <p>
+          Try dragging an item. It will change while being animated.
+        </p>
+        <p>
+          <b>This is experimental and is <i>not</i> available in master yet.</b> I'll be working on making this possible in next release.
+        </p>
+      </div>
+    );
+  }
+});
+
+module.exports = DragAroundExperimental;

examples/_sortable-mouse/Card.js

@@ -0,0 +1,58 @@
+'use strict';
+
+var React = require('react'),
+    ItemTypes = require('./ItemTypes'),
+    { PropTypes } = React,
+    { MouseDragDropMixin, DropEffects } = require('react-dnd');
+
+var Card = React.createClass({
+  mixins: [MouseDragDropMixin],
+
+  propTypes: {
+    id: PropTypes.any.isRequired,
+    text: PropTypes.string.isRequired,
+    moveCard: PropTypes.func.isRequired
+  },
+  statics: {
+    configureDragDrop(registerType) {
+      registerType(ItemTypes.CARD, {
+        dragSource: {
+          beginDrag(component) {
+            return {
+              item: {
+                id: component.props.id,
+                children: <Card {...this.props}/>
+              }
+            };
+          }
+        },
+
+        dropTarget: {
+          over(component, item) {
+            component.props.moveCard(item.id, this.props.id);
+          }
+        }
+      });
+    }
+  },
+
+  render() {
+    var { isDragging } = this.getDragState(ItemTypes.CARD);
+
+    return (
+      <div {...this.dragSourceFor(ItemTypes.CARD)}
+           {...this.dropTargetFor(ItemTypes.CARD)}
+           style={{
+             border: '1px dashed gray',
+             backgroundColor: 'white',
+             padding: '0.5rem',
+             margin: '0.5rem',
+             opacity: isDragging ? 0 : 1
+           }}>
+        {this.props.text}
+      </div>
+    );
+  }
+});
+
+module.exports = Card;