Move to React.cloneElement from React.addons.cloneWithProps.

This requires we import object-assign to merge styles.

Author: STRML

lib/draggable.js

@@ -2,7 +2,7 @@
 
 var React = require('react');
 var emptyFunction = function(){};
-var cloneWithProps = require('react/lib/cloneWithProps');
+var assign = require('object-assign');
 
 function createUIEvent(draggable) {
 	return {
@@ -24,7 +24,7 @@ function canDragX(draggable) {
 }
 
 function isFunction(func) {
-  return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]'
+  return typeof func === 'function' || Object.prototype.toString.call(func) === '[object Function]';
 }
 
 // @credits https://gist.github.com/rogozhnikoff/a43cfed27c41e4e68cdc
@@ -92,7 +92,7 @@ function getControlPosition(e) {
   return {
     clientX: position.clientX,
     clientY: position.clientY
-  }
+  };
 }
 
 function addEvent(el, event, handler) {
@@ -446,15 +446,15 @@ module.exports = React.createClass({
 			style.zIndex = this.props.zIndex;
 		}
 
-		var className = 'react-draggable';
+		var className = (this.props.children.props.className || '') + ' react-draggable';
 		if (this.state.dragging) {
 			className += ' react-draggable-dragging';
 		}
 
 		// Reuse the child provided
 		// This makes it flexible to use whatever element is wanted (div, ul, etc)
-		return cloneWithProps(React.Children.only(this.props.children), {
-			style: style,
+		return React.cloneElement(React.Children.only(this.props.children), {
+			style: assign({}, this.props.children.props.style || {}, style),
 			className: className,
 
 			onMouseDown: this.handleDragStart,

package.json

@@ -34,5 +34,8 @@
     "uglify-js": "^2.4.15",
     "webpack": "^1.3.2-beta8",
     "webpack-dev-server": "^1.4.7"
+  },
+  "dependencies": {
+    "object-assign": "^2.0.0"
   }
 }

specs/draggable.spec.js

@@ -16,6 +16,16 @@ describe('react-draggable', function () {
 			expect(typeof drag.props.onStop).toEqual('function');
 		});
 
+		it('should pass style and className properly from child', function () {
+			var el = <Draggable><div className="foo" style={{color: 'black'}}/></Draggable>;
+			var renderer = TestUtils.createRenderer();
+			renderer.render(el);
+			var output = renderer.getRenderOutput();
+
+			expect(output.props.className).toEqual('foo react-draggable');
+			expect(output.props.style).toEqual({top: 0, left: 0, color: 'black'});
+		});
+
 		it('should honor props', function () {
 			function handleStart() {}
 			function handleDrag() {}