Don't allow passing style/className/transform to <Draggable> or <DraggableCore>

Author: STRML

lib/Draggable.es6

@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import assign from 'object-assign';
 import {createUIEvent, createTransform} from './utils/domFns';
 import {canDragX, canDragY, getBoundPosition, snapToGrid} from './utils/positionFns';
+import {dontSetMe} from './utils/shims';
 import DraggableCore from './DraggableCore';
 import log from './utils/log';
 
@@ -140,7 +141,14 @@ export default class Draggable extends DraggableCore {
      *   });
      * ```
      */
-    zIndex: PropTypes.number
+    zIndex: PropTypes.number,
+
+    /**
+     * These properties should be defined on the child, not here.
+     */
+    className: dontSetMe,
+    style: dontSetMe,
+    transform: dontSetMe
   });
 
   static defaultProps = assign({}, DraggableCore.defaultProps, {
@@ -265,9 +273,12 @@ export default class Draggable extends DraggableCore {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return (
-      <DraggableCore {...this.props} style={style} className={className} transform={svgTransform}
-                     onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
-        {React.Children.only(this.props.children)}
+      <DraggableCore {...this.props} onStart={this.onDragStart} onDrag={this.onDrag} onStop={this.onDragStop}>
+        {React.cloneElement(React.Children.only(this.props.children), {
+          className: className,
+          style: assign({}, this.props.children.props.style, style),
+          transform: svgTransform
+        })}
       </DraggableCore>
     );
   }

lib/DraggableCore.es6

@@ -2,6 +2,7 @@ import {default as React, PropTypes} from 'react';
 import {matchesSelector, createCoreEvent, addEvent, removeEvent, addUserSelectStyles,
         removeUserSelectStyles, styleHacks} from './utils/domFns';
 import {getControlPosition} from './utils/positionFns';
+import {dontSetMe} from './utils/shims';
 import log from './utils/log';
 
 // Simple abstraction for dragging events names.
@@ -150,7 +151,14 @@ export default class DraggableCore extends React.Component {
      * A workaround option which can be passed if onMouseDown needs to be accessed,
      * since it'll always be blocked (due to that there's internal use of onMouseDown)
      */
-    onMouseDown: PropTypes.func
+    onMouseDown: PropTypes.func,
+
+    /**
+     * These properties should be defined on the child, not here.
+     */
+    className: dontSetMe,
+    style: dontSetMe,
+    transform: dontSetMe
   };
 
   static defaultProps = {
@@ -334,8 +342,7 @@ export default class DraggableCore extends React.Component {
     // Reuse the child provided
     // This makes it flexible to use whatever element is wanted (div, ul, etc)
     return React.cloneElement(React.Children.only(this.props.children), {
-      style: styleHacks(this),
-      transform: this.props.transform,
+      style: styleHacks(this.props.children.props.style),
 
       // Note: mouseMove handler is attached to document so it will still function
       // when the user drags quickly and leaves the bounds of the element.

lib/utils/domFns.es6

@@ -114,18 +114,14 @@ export function removeUserSelectStyles() {
   document.body.setAttribute('style', style.replace(userSelectStyle, ''));
 }
 
-export function styleHacks(draggable) {
-  // Create style object. We extend from existing styles so we don't
-  // remove anything already set (like background, color, etc).
-  let childStyle = draggable.props.children.props.style || {};
-
+export function styleHacks(childStyle = {}) {
   // Workaround IE pointer events; see #51
   // https://github.com/mzabriskie/react-draggable/issues/51#issuecomment-103488278
   let touchHacks = {
     touchAction: 'none'
   };
 
-  return assign(touchHacks, childStyle, draggable.props.style);
+  return assign(touchHacks, childStyle);
 }
 
 // Create an event exposed by <DraggableCore>

lib/utils/shims.es6

@@ -16,3 +16,9 @@ export function isNum(num) {
 export function int(a) {
   return parseInt(a, 10);
 }
+
+export function dontSetMe(props, propName, componentName) {
+  if (props[propName]) {
+    throw new Error(`Invalid prop ${propName} passed to ${componentName} - do not set this, set it on the child.`);
+  }
+}

specs/draggable.spec.jsx

@@ -11,6 +11,10 @@ var dashedBrowserPrefix = browserPrefix ? '-' + browserPrefix.toLowerCase() + '-
 describe('react-draggable', function () {
   var drag;
 
+  beforeEach(function() {
+    spyOn(console, 'error');
+  });
+
   afterEach(function() {
     try {
       ReactDOM.findDOMNode(drag);
@@ -35,7 +39,7 @@ describe('react-draggable', function () {
     it('should pass style and className properly from child', function () {
       drag = (<Draggable><div className="foo" style={{color: 'black'}}/></Draggable>);
 
-      expect(renderToHTML(drag)).toEqual('<div class="foo" ' +
+      expect(renderToHTML(drag)).toEqual('<div class="foo react-draggable" ' +
         'style="touch-action:none;color:black;transform:translate(0px,0px);' + dashedBrowserPrefix +
         'transform:translate(0px,0px);" data-reactid=".1"></div>');
     });
@@ -48,13 +52,14 @@ describe('react-draggable', function () {
       var output = renderer.getRenderOutput();
 
       var expected = (
-        <DraggableCore {...Draggable.defaultProps} handle=".foo" className="react-draggable"
-          style={{
-            'transform': 'translate(0px,0px)',
-            [browserPrefix + 'Transform']: 'translate(0px,0px)'
-          }}
-          transform={null}>
-          <div />
+        <DraggableCore {...Draggable.defaultProps} handle=".foo">
+          <div
+            className="react-draggable"
+            style={{
+              'transform': 'translate(0px,0px)',
+              [browserPrefix + 'Transform']: 'translate(0px,0px)'
+            }}
+            transform={null} />
         </DraggableCore>
       );
       // Not easy to actually test equality here. The functions are bound as static props so we can't test those easily.
@@ -80,7 +85,7 @@ describe('react-draggable', function () {
           onStart={handleStart}
           onDrag={handleDrag}
           onStop={handleStop}>
-          <div>
+          <div className="foo bar">
             <div className="handle"/>
             <div className="cancel"/>
           </div>
@@ -97,6 +102,30 @@ describe('react-draggable', function () {
       expect(drag.props.onStop).toEqual(handleStop);
     });
 
+    it('should throw when setting className', function () {
+      drag = (<Draggable className="foo"><span /></Draggable>);
+
+      TestUtils.renderIntoDocument(drag);
+
+      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop className passed to Draggable - do not set this, set it on the child.');
+    });
+
+    it('should throw when setting style', function () {
+      drag = (<Draggable style={{color: 'red'}}><span /></Draggable>);
+
+      TestUtils.renderIntoDocument(drag);
+
+      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop style passed to Draggable - do not set this, set it on the child.');
+    });
+
+    it('should throw when setting transform', function () {
+      drag = (<Draggable transform="translate(100, 100)"><span /></Draggable>);
+
+      TestUtils.renderIntoDocument(drag);
+
+      expect(console.error).toHaveBeenCalledWith('Warning: Failed propType: Invalid prop transform passed to Draggable - do not set this, set it on the child.');
+    });
+
     it('should call onStart when dragging begins', function () {
       var called = false;
       drag = TestUtils.renderIntoDocument(