Use React-DND to make a drag and drop interface for sorting category

priorities

Author: wbprice

.eslintrc.json

@@ -5,6 +5,7 @@
     },
     "rules": {
         "indent": ["error", 4],
-        "semi": ["error", "always"]
+        "semi": ["error", "always"],
+        "new-cap": 0
     }
 }

config/gulp.js

@@ -7,7 +7,7 @@ const webpack = require('webpack-stream');
 const path = require('path');
 
 const babelConfig = {
-    presets: ['react', 'es2015'],
+    presets: ['react', 'es2015', 'stage-0'],
     plugins: [
         [
             'css-modules-transform', {
@@ -76,6 +76,7 @@ module.exports = {
                     module: {
                         loaders: [{
                             test: /\.js$/,
+                            exclude: /node_modules/,
                             loader: 'babel-loader',
                             query: {
                                 presets: ['react', 'es2015']
@@ -99,6 +100,7 @@ module.exports = {
                     module: {
                         loaders: [{
                             test: /\.js$/,
+                            exclude: /node_modules/,
                             loader: 'babel-loader',
                             query: {
                                 presets: ['react', 'es2015']

frontend/js/components/ecosystems/CategoryList.js

@@ -1,31 +1,82 @@
 import React, { PropTypes, Component } from 'react';
+import { DragDropContext } from 'react-dnd';
+import MultiBackend, { Preview } from 'react-dnd-multi-backend';
+import HTML5toTouch from 'react-dnd-multi-backend/lib/HTML5toTouch';
+import update from 'immutability-helper';
 
 import CategoryListItem from './../organisms/CategoryListItem';
+import { CategoryListItemNameStatic } from './../organisms/CategoryListItemName';
 
 class CategoryList extends Component {
 
-    render() {
+    constructor(props) {
+        super(props);
+        this.moveCard = this.moveCard.bind(this);
+        this.state = {
+            categories: []
+        };
+    }
 
+    generatePreview(type, item, style) {
+        const category = this.state.categories.find(category => {
+            return category.id === item.id;
+        });
         return (
-      <div className="category-list">
-        {
-          this.props.categories.map((categoryItem, index) => {
-              return (<CategoryListItem
-              key={index}
-              name={categoryItem.name}
-              icon={categoryItem.icon}
-              rank={categoryItem.rank} />);
-          })
-        }
-      </div>
-    );
+            <div style={style} className="category-list-item-dnd">
+                <div className="category-list-item">
+                    <CategoryListItemNameStatic
+                        name={category.name}
+                        icon={category.icon} />
+                </div>
+            </div>
+        );
+    }
+
+    componentWillReceiveProps(newProps) {
+        this.setState({
+            categories: newProps.categories
+        });
+    }
 
+    moveCard(dragIndex, hoverIndex) {
+        const { categories } = this.state;
+        const dragCard = categories[dragIndex];
+
+        this.setState(update(this.state, {
+            categories: {
+                $splice: [
+                    [dragIndex, 1],
+                    [hoverIndex, 0, dragCard]
+                ]
+            }
+        }));
     }
 
-}
+    render() {
+        return (
+            <div className="category-list">
+                <Preview generator={this.generatePreview.bind(this)} />
+                {
+                    this.state.categories.map((categoryItem, index) => {
+                        return (
+                            <CategoryListItem
+                                key={categoryItem.id}
+                                index={index}
+                                id={categoryItem.id}
+                                name={categoryItem.name}
+                                icon={categoryItem.icon}
+                                moveCard={this.moveCard} />
+                        );
+                    })
+                }
+            </div>
+        );
+    }}
+
+
 
 CategoryList.propTypes = {
     categories: PropTypes.array
 };
 
-export default CategoryList;
+export default DragDropContext(MultiBackend(HTML5toTouch))(CategoryList);

frontend/js/components/organisms/CategoryListItem.js

@@ -1,37 +1,35 @@
 import React, { PropTypes, Component } from 'react';
 
-import Icon from './../atoms/Icon';
+import { CategoryListItemName } from './../organisms/CategoryListItemName';
 
 class CategoryListItem extends Component {
-
-    constructor(props) {
-        super(props);
-    }
-
     render() {
         return (
             <div className="category-list-item">
-                <div className="rank">
-                    <label>{this.props.rank}</label>
-                </div>
-
-                <div className="category-name card">
-                    {
-                      this.props.icon &&
-                      <Icon className="medium padding">{this.props.icon}</Icon>
-                    }
-                    <span className="category-name-label">{this.props.name}</span>
-                </div>
-          </div>
+                {
+                    this.props.index + 1 &&
+                    <div className="rank">
+                        <label>{this.props.index + 1}</label>
+                    </div>
+                }
+
+                <CategoryListItemName
+                    index={this.props.index}
+                    id={this.props.id}
+                    name={this.props.name}
+                    icon={this.props.icon}
+                    moveCard={this.props.moveCard} />
+            </div>
         );
     }
-
 }
 
 CategoryListItem.propTypes = {
     name: PropTypes.string,
     icon: PropTypes.string,
-    rank: PropTypes.number
+    index: PropTypes.number,
+    moveCard: PropTypes.func,
+    id: PropTypes.number
 };
 
 export default CategoryListItem;

frontend/js/components/organisms/CategoryListItemName.js

@@ -0,0 +1,115 @@
+'use strict';
+
+import React, { Component, PropTypes } from 'react';
+import Icon from './../atoms/Icon';
+import { findDOMNode } from 'react-dom';
+import { DragSource, DropTarget } from 'react-dnd';
+
+const ItemTypes = {
+    CARD: 'card'
+};
+
+const cardSource = {
+    beginDrag(props) {
+        return {
+            id: props.id,
+            index: props.index
+        };
+    }
+};
+
+const cardTarget = {
+    hover(props, monitor, component) {
+        const dragIndex = monitor.getItem().index;
+        const hoverIndex = props.index;
+
+        // Don't replace items with themselves
+        if (dragIndex === hoverIndex) {
+            return;
+        }
+
+        // Determine rectangle on screen
+        const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
+
+        // Get vertical middle
+        const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+
+        // Determine mouse position
+        const clientOffset = monitor.getClientOffset();
+
+        // Get pixels to the top
+        const hoverClientY = clientOffset.y - hoverBoundingRect.top;
+
+        // Only perform the move when the mouse has crossed half of the items height
+        // When dragging downwards, only move when the cursor is below 50%
+        // When dragging upwards, only move when the cursor is above 50%
+
+        // Dragging downwards
+        if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
+            return;
+        }
+
+        // Dragging upwards
+        if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
+            return;
+        }
+
+        // Time to actually perform the action
+        props.moveCard(dragIndex, hoverIndex);
+
+        // Note: we're mutating the monitor item here!
+        // Generally it's better to avoid mutations,
+        // but it's good here for the sake of performance
+        // to avoid expensive index searches.
+        monitor.getItem().index = hoverIndex;
+    }
+}
+
+class CategoryListItemName extends Component {
+    render() {
+        const {
+            connectDragSource,
+            connectDropTarget,
+            isDragging
+        } = this.props;
+
+        const template = (
+            <div className={`category-name card ${isDragging ? 'hidden' : ''}`}>
+                {
+                    this.props.icon &&
+                    <Icon className="medium padding">{this.props.icon}</Icon>
+                }
+                <span className="category-name-label">{this.props.name}</span>
+            </div>
+        );
+
+        if (connectDragSource && connectDropTarget) {
+            return connectDragSource(connectDropTarget((template)));
+        }
+        return template;
+    }
+}
+
+CategoryListItemName.propTypes = {
+    icon: PropTypes.string,
+    name: PropTypes.string,
+    index: PropTypes.number,
+    connectDragSource: PropTypes.func,
+    connectDropTarget: PropTypes.func,
+    isDragging: PropTypes.bool
+};
+
+const DropCategoryListItemName = DropTarget(ItemTypes.CARD, cardTarget, (connect) => ({
+    connectDropTarget: connect.dropTarget()
+}))(CategoryListItemName);
+
+const DragDropCategoryListItemName = DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+}))(DropCategoryListItemName);
+
+export {
+    DragDropCategoryListItemName as CategoryListItemName,
+    CategoryListItemName as CategoryListItemNameStatic
+};
+

frontend/styles/category-list-item.scss

@@ -19,6 +19,10 @@
         align-items: center;
         margin-bottom: 0;
 
+        &.hidden {
+            opacity: 0;
+        }
+
         &.card {
             padding: 1em 2em;
             .icon {
@@ -30,4 +34,14 @@
             font-size: 1.125em;
         }
     }   
+}
+
+.category-list-item-dnd {
+    width: 100%;
+    padding: 0 1em 0 5em;
+    margin-left: -5em;
+
+    .category-list-item {
+        margin: 0em;
+    }
 }