Reusing child component

Author: mzabriskie

lib/draggable.js

@@ -1,5 +1,8 @@
+'use strict';
+
 /** @jsx React.DOM */
-var React = require('react'),
+var React = require('react/addons'),
+	invariant = require('react/lib/invariant'),
 	emptyFunction = require('react/lib/emptyFunction');
 
 function createUIEvent(draggable) {
@@ -22,6 +25,8 @@ function canDragX(draggable) {
 }
 
 module.exports = React.createClass({
+	displayName: 'Draggable',
+
 	propTypes: {
 		/**
 		 * `axis` determines which axis the draggable can move.
@@ -112,6 +117,13 @@ module.exports = React.createClass({
 		};
 	},
 
+	componentWillMount: function () {
+		invariant(
+			React.Children.count(this.props.children) === 1,
+			'There should only be a single child element within Draggable.'
+		);
+	},
+
 	handleMouseDown: function (e) {
 		var node = this.getDOMNode();
 		this.setState({
@@ -147,13 +159,20 @@ module.exports = React.createClass({
 			left: canDragX(this) ? this.state.clientX : this.state.startX
 		};
 
-		return (
-			<div style={style}
-				className="react-draggable"
-				onMouseUp={this.handleMouseUp}
-				onMouseDown={this.handleMouseDown}>
-				{this.props.children}
-			</div>
-		);
+		// Reuse the child provided
+		// This makes it flexible to use whatever element is wanted (div, ul, etc)
+		var child = null;
+		React.Children.forEach(this.props.children, function (c) {
+			if (child === null) {
+				child = React.addons.cloneWithProps(c, {
+					style: style,
+					className: 'react-draggable',
+					onMouseUp: this.handleMouseUp,
+					onMouseDown: this.handleMouseDown
+				});
+			}
+		}, this);
+
+		return child;
 	}
 });

lib/styles.css

@@ -1,6 +1,4 @@
 .react-draggable {
-	cursor: move;
-	display: inline-block;
 	position: relative;
 	-webkit-user-select: none;
 	-moz-user-select: none;