Added support for custom dragging and dragged class names (#178)

Added :defaultClassName, :defaultClassNameDragging, and :defaultClassNameDragged properties to Draggable. Updated docs and tests

Author: bvaughn

README.md

@@ -166,6 +166,12 @@ bounds: {left: number, top: number, right: number, bottom: number} | string,
 // Example: '.body'
 cancel: string,
 
+// Class names for draggable UI.
+// Default to 'react-draggable', 'react-draggable-dragging', and 'react-draggable-dragged'
+defaultClassName: string,
+defaultClassNameDragging: string,
+defaultClassNameDragged: string,
+
 // Specifies the `x` and `y` that the dragged item should start at.
 // This is generally not necessary to use (you can use absolute or relative
 // positioning of the child directly), but can be helpful for uniformity in

lib/Draggable.es6

@@ -87,6 +87,10 @@ export default class Draggable extends React.Component {
       PropTypes.oneOf([false])
     ]),
 
+    defaultClassName: PropTypes.string,
+    defaultClassNameDragging: PropTypes.string,
+    defaultClassNameDragged: PropTypes.string,
+
     /**
      * `defaultPosition` specifies the x and y that the dragged item should start at
      *
@@ -146,6 +150,9 @@ export default class Draggable extends React.Component {
     ...DraggableCore.defaultProps,
     axis: 'both',
     bounds: false,
+    defaultClassName: 'react-draggable',
+    defaultClassNameDragging: 'react-draggable-dragging',
+    defaultClassNameDragged: 'react-draggable-dragged',
     defaultPosition: {x: 0, y: 0},
     position: null
   };
@@ -319,10 +326,16 @@ export default class Draggable extends React.Component {
       style = createCSSTransform(transformOpts);
     }
 
+    const {
+      defaultClassName,
+      defaultClassNameDragging,
+      defaultClassNameDragged
+    } = this.props;
+
     // Mark with class while dragging
-    const className = classNames((this.props.children.props.className || ''), 'react-draggable', {
-      'react-draggable-dragging': this.state.dragging,
-      'react-draggable-dragged': this.state.dragged
+    const className = classNames((this.props.children.props.className || ''), defaultClassName, {
+      [defaultClassNameDragging]: this.state.dragging,
+      [defaultClassNameDragged]: this.state.dragged
     });
 
     // Reuse the child provided

specs/draggable.spec.jsx

@@ -59,6 +59,24 @@ describe('react-draggable', function () {
       assert(node.getAttribute('class') === 'foo react-draggable');
     });
 
+    it('should set the appropriate custom className when dragging or dragged', function () {
+      drag = TestUtils.renderIntoDocument(
+        <Draggable
+          defaultClassName='foo'
+          defaultClassNameDragging='bar'
+          defaultClassNameDragged='baz'
+        >
+          <div/>
+        </Draggable>
+      );
+      var node = ReactDOM.findDOMNode(drag);
+      assert(node.getAttribute('class').indexOf('foo') >= 0);
+      TestUtils.Simulate.mouseDown(node);
+      assert(node.getAttribute('class').indexOf('bar') >= 0);
+      TestUtils.Simulate.mouseUp(node);
+      assert(node.getAttribute('class').indexOf('baz') >= 0);
+    });
+
     // NOTE: this runs a shallow renderer, which DOES NOT actually render <DraggableCore>
     it('should pass handle on to <DraggableCore>', function () {
       drag = <Draggable handle=".foo"><div /></Draggable>;