feat(draggable-list): Draggable list passes through attributes

Draggable list passes through className, style, and id to ul and passes innerClassName to list items. Updated Documentation [Finishes #98913256]
pivotal-cf · Jul 18, 2015 · 183810a · 183810a
1 parent 94d4698
commit 183810a
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 7 deletions.
diff --git a/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js b/spec/pivotal-ui-react/draggable-list/draggable-list_spec.js
@@ -1,14 +1,24 @@
 require('../spec_helper');
+import {propagateAttributes} from '../spec_helper';
 
 describe('DraggableList', function() {
-  var DraggableList, DraggableListItem, subject, dropSpy;
+  var DraggableList, DraggableListItem, subject, dropSpy, props;
   beforeEach(function() {
     DraggableList = require('../../../src/pivotal-ui-react/draggable-list/draggable-list').DraggableList;
     DraggableListItem = require('../../../src/pivotal-ui-react/draggable-list/draggable-list').DraggableListItem;
 
     dropSpy = jasmine.createSpy('drop');
+
+    props = {
+      className: 'test-class',
+      id: 'test-id',
+      style: {
+        opacity: 1
+      }
+    };
+
     subject = React.render(
-      <DraggableList onDrop={dropSpy}>
+      <DraggableList onDrop={dropSpy} {...props} innerClassName='inner-test-class'>
         <DraggableListItem>
           Get me out of here!
         </DraggableListItem>
@@ -21,12 +31,19 @@ describe('DraggableList', function() {
       </DraggableList>,
       root
     );
+    propagateAttributes('.list-group', props);
   });
 
   afterEach(function() {
     React.unmountComponentAtNode(root);
   });
 
+
+  it('passes through innerClassName to item content', function() {
+    expect('.draggable-item-content:first').toHaveClass('inner-test-class');
+  });
+
+
   function getListItemText() {
     return $('li.list-group-item .draggable-item-content').map(function() {
       return $('> span', this).text();

diff --git a/src/pivotal-ui-react/draggable-list/draggable-list.js b/src/pivotal-ui-react/draggable-list/draggable-list.js
@@ -2,6 +2,7 @@ var React = require('react/addons');
 var types = React.PropTypes;
 var classnames = require('classnames');
 var move = require('./move_helper');
+import {mergeProps} from '../../../src/pivotal-ui-react/helpers/helpers';
 
 var HoverMixin = {
   getInitialState() {
@@ -100,7 +101,8 @@ var DraggableList = React.createClass({
 
   render() {
     var grabbed, items = [];
-    React.Children.forEach(this.props.children, function(child, draggingId) {
+    var {children, innerClassName, ...others} = this.props;
+    React.Children.forEach(children, function(child, draggingId) {
       grabbed = this.state.draggingId === draggingId;
       items.push(React.addons.cloneWithProps(child, {
         grabbed,
@@ -109,12 +111,14 @@ var DraggableList = React.createClass({
         onDragEnter: this.dragEnter,
         onDrop: this.drop,
         draggingId,
-        key: draggingId
+        key: draggingId,
+        className: innerClassName
       }));
     }, this);
     var sortedItems = this.state.itemIndices.map(i => items[i]);
+    var props = mergeProps(others, {className: {'list-group list-draggable': true, dragging: this.state.draggingId !== null}});
     return (
-      <ul className={classnames({'list-group list-draggable': true, dragging: this.state.draggingId !== null})}>
+      <ul {...props}>
         {sortedItems}
       </ul>
     );
@@ -145,6 +149,7 @@ var DraggableListItem = React.createClass({
     var {grabbed, onDragStart, onDragEnd, onDragEnter, onDrop, draggingId} = this.props;
     var {onMouseEnter, onMouseLeave} = this;
     var className = classnames({'list-group-item pan': true, grabbed, hover});
+    var innerClassName = classnames(this.props.className, 'draggable-item-content');
     var props = {
       className, onMouseEnter, onMouseLeave, onDragStart, onDragEnd, onDragEnter, onDrop,
       onDragOver: preventDefault,
@@ -153,7 +158,7 @@ var DraggableListItem = React.createClass({
     };
     return (
       <li {...props} aria-dropeffect="move">
-        <div className="draggable-item-content">
+        <div className={innerClassName}>
           <div className="draggable-grip mhl" aria-grabbed={grabbed} role="button">
             <i className="fa fa-ellipsis-v mrs"/>
             <i className="fa fa-ellipsis-v"/>

diff --git a/src/pivotal-ui/components/lists/lists.scss b/src/pivotal-ui/components/lists/lists.scss
@@ -1132,7 +1132,7 @@ var draggableListDropCallback = function(data) {
 ```
 
 ```react_example
-<UI.DraggableList onDrop={draggableListDropCallback}>
+<UI.DraggableList onDrop={draggableListDropCallback} className="my-list-class" innerClassName="my-item-class">
   <UI.DraggableListItem>
     Get me out of here!
   </UI.DraggableListItem>