Getting started on draggable columns

2 files changed, 26 insertions, 8 deletions

diff --git a/app/assets/javascripts/components/features/ui/components/column.jsx b/app/assets/javascripts/components/features/ui/components/column.jsx
index c382e108d..b33383428 100644
--- a/app/assets/javascripts/components/features/ui/components/column.jsx
+++ b/app/assets/javascripts/components/features/ui/components/column.jsx
@@ -1,5 +1,6 @@
-import ColumnHeader    from './column_header';
+import ColumnHeader from './column_header';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
+import { DragSource } from 'react-dnd';
 
 const easingOutQuint = (x, t, b, c, d) => c*((t=t/d-1)*t*t*t*t + 1) + b;
 
@@ -36,9 +37,22 @@ const style = {
   flexDirection: 'column'
 };
 
+const columnSource = {
+  beginDrag (props) {
+    return {};
+  }
+};
+
+const collect = (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+});
+
 const Column = React.createClass({
 
   propTypes: {
+    connectDragSource: React.PropTypes.func.isRequired,
+    isDragging: React.PropTypes.bool.isRequired,
     heading: React.PropTypes.string,
     icon: React.PropTypes.string,
     children: React.PropTypes.node
@@ -58,20 +72,22 @@ const Column = React.createClass({
   },
 
   render () {
+    const { heading, icon, children, connectDragSource, isDragging } = this.props;
+
     let header = '';
 
-    if (this.props.heading) {
-      header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />;
+    if (heading) {
+      header = <ColumnHeader icon={icon} type={heading} onClick={this.handleHeaderClick} />;
     }
 
-    return (
-      <div className='column' style={style} onWheel={this.handleWheel}>
+    return connectDragSource(
+      <div className='column' style={{...style, opacity: isDragging ? '0.5' : '1' }} onWheel={this.handleWheel}>
         {header}
-        {this.props.children}
+        {children}
       </div>
     );
   }
 
 });
 
-export default Column;
+export default DragSource('column', columnSource, collect)(Column);
diff --git a/app/assets/javascripts/components/features/ui/index.jsx b/app/assets/javascripts/components/features/ui/index.jsx
index da44434b1..de0c054ba 100644
--- a/app/assets/javascripts/components/features/ui/index.jsx
+++ b/app/assets/javascripts/components/features/ui/index.jsx
@@ -13,6 +13,8 @@ import { debounce } from 'react-decoration';
 import { uploadCompose } from '../../actions/compose';
 import { refreshTimeline } from '../../actions/timelines';
 import { refreshNotifications } from '../../actions/notifications';
+import { DragDropContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 
 const UI = React.createClass({
 
@@ -103,4 +105,4 @@ const UI = React.createClass({
 
 });
 
-export default connect()(UI);
+export default connect()(DragDropContext(HTML5Backend)(UI));