feat: Make the DnD library work as part of the component. Expose it to make it importable

Author: rcdexta

package.json

@@ -43,7 +43,7 @@
     "lodash": "^4.17.4",
     "prop-types": "^15.6.0",
     "react-redux": "^5.0.3",
-    "react-smooth-dnd": "0.4.4",
+    "smooth-dnd": "0.6.2",
     "redux": "^3.6.0",
     "redux-actions": "^1.2.2",
     "redux-logger": "^3.0.6",
@@ -91,14 +91,14 @@
     "jest-cli": "^21.0.1",
     "jsdom": "^9.12.0",
     "mocha": "^3.4.2",
-    "node-sass": "^4.5.3",
+    "node-sass": "4.9.3",
     "prettier": "1.10.2",
     "pretty-quick": "^1.4.1",
     "react": "^16.2.0",
     "react-addons-test-utils": "^15.5.1",
     "react-dom": "^16.2.0",
     "react-test-renderer": "^15.4.2",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "7.1.0",
     "semantic-release": "^6.3.6",
     "style-loader": "^0.18.2",
     "webpack": "^3.0.0"

src/components/BoardContainer.js

@@ -6,8 +6,8 @@ import {BoardDiv} from '../styles/Base'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import Lane from './Lane'
-import {Container, Draggable} from 'react-smooth-dnd'
-
+import Container from '../dnd/Container'
+import Draggable from '../dnd/Draggable'
 import * as boardActions from '../actions/BoardActions'
 import * as laneActions from '../actions/LaneActions'
 

src/components/Lane.js

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types'
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import isEqual from 'lodash/isEqual'
-import {Container, Draggable} from 'react-smooth-dnd'
+import Container from '../dnd/Container'
+import Draggable from '../dnd/Draggable'
 import uuidv1 from 'uuid/v1'
 
 import Loader from './Loader'

src/dnd/Container.js

@@ -0,0 +1,91 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types';
+import container from 'smooth-dnd';
+import { dropHandlers } from 'smooth-dnd';
+import Draggable from './Draggable';
+
+container.dropHandler = dropHandlers.reactDropHandler().handler;
+container.wrapChild = p => p; // dont wrap children they will already be wrapped
+
+class Container extends Component {
+	constructor(props) {
+		super(props);
+		this.getContainerOptions = this.getContainerOptions.bind(this);
+		this.setRef = this.setRef.bind(this);
+		this.prevContainer = null;
+	}
+
+	componentDidMount() {
+		this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this);
+		this.prevContainer = this.containerDiv;
+		this.container = container(this.containerDiv, this.getContainerOptions(this.props));
+	}
+
+	componentWillUnmount() {
+		this.container.dispose();
+		this.container = null;
+	}
+
+	componentDidUpdate() {
+		this.containerDiv = this.containerDiv || ReactDOM.findDOMNode(this);
+		if (this.containerDiv) {
+			if (this.prevContainer && this.prevContainer !== this.containerDiv) {
+				this.container.dispose();
+				this.container = container(this.containerDiv, this.getContainerOptions(this.props));
+				this.prevContainer = this.containerDiv;
+			}
+		}
+	}
+
+	render() {
+		if (this.props.render) {
+			return this.props.render(this.setRef);
+		} else {
+			return (
+				<div style={this.props.style} ref={this.setRef}>
+					{this.props.children}
+				</div>
+			);
+		}
+	}
+
+	setRef(element) {
+		this.containerDiv = element;
+	}
+
+	getContainerOptions(props) {
+		return Object.assign({}, props);
+	}
+}
+
+Container.propTypes = {
+	behaviour: PropTypes.oneOf(["move", "copy", "drag-zone"]),
+	groupName: PropTypes.string,
+	orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+	style: PropTypes.object,
+	dragHandleSelector: PropTypes.string,
+	nonDragAreaSelector: PropTypes.string,
+	dragBeginDelay: PropTypes.number,
+	animationDuration: PropTypes.number,
+	autoScrollEnabled: PropTypes.string,
+	lockAxis: PropTypes.string,
+	dragClass: PropTypes.string,
+	dropClass: PropTypes.string,
+	onDragStart: PropTypes.func,
+	onDragEnd: PropTypes.func,
+	onDrop: PropTypes.func,
+	getChildPayload: PropTypes.func,
+	shouldAnimateDrop: PropTypes.func,
+	shouldAcceptDrop: PropTypes.func,
+	onDragEnter: PropTypes.func,
+	onDragLeave: PropTypes.func,
+	render: PropTypes.func
+};
+
+Container.defaultProps = {
+	behaviour: 'move',
+	orientation: 'vertical'
+};
+
+export default Container;

src/dnd/Draggable.js

@@ -0,0 +1,27 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { constants } from 'smooth-dnd';
+const {
+	wrapperClass
+} = constants;
+
+class Draggable extends Component {
+	render() {
+		if (this.props.render) {
+			return React.cloneElement(this.props.render(), { className: wrapperClass });
+		}
+		
+		const clsName = `${this.props.className ? (this.props.className + ' ') : ''}`
+		return (
+			<div {...this.props} className={`${clsName}${wrapperClass}`} >
+				{this.props.children}
+			</div>
+		);
+	}
+}
+
+Draggable.propTypes = {
+	render: PropTypes.func
+};
+
+export default Draggable;

src/index.js

@@ -2,6 +2,9 @@ import Board from './components/Board'
 import Tag from './components/Tag'
 import Lane from './components/Lane'
 import Card from './components/Card'
+import Draggable from './dnd/Draggable'
+import Container from './dnd/Container'
 
 export {Board, Tag, Lane, Card}
+export {Container, Draggable}
 export default Board