[added] react-bootstrap#460 ListGroupItem outputs <button> when an on…

…Click handler is set.
kyletsang · Aug 17, 2015 · 459ab0c · 459ab0c
1 parent 537f52c
commit 459ab0c
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 14 deletions.
diff --git a/docs/examples/ListGroupLinked.js b/docs/examples/ListGroupLinked.js
@@ -1,8 +1,14 @@
+function alertClicked () {
+  alert('You clicked the third ListGroupItem'); 
+}
+
 const listgroupInstance = (
   <ListGroup>
     <ListGroupItem href='#link1'>Link 1</ListGroupItem>
     <ListGroupItem href='#link2'>Link 2</ListGroupItem>
-    <ListGroupItem href='#linkN'>...</ListGroupItem>
+    <ListGroupItem onClick={alertClicked}>
+      Trigger an alert
+    </ListGroupItem>
   </ListGroup>
 );
 

diff --git a/src/ListGroup.js b/src/ListGroup.js
@@ -9,28 +9,26 @@ class ListGroup extends React.Component {
       (item, index) => cloneElement(item, { key: item.key ? item.key : index })
     );
 
-    let childrenAnchors = false;
+    let shouldRenderDiv = false;
 
     if (!this.props.children) {
-      return this.renderDiv(items);
+      shouldRenderDiv = true;
     } else {
       React.Children.forEach(this.props.children, (child) => {
-        if (this.isAnchor(child.props)) {
-          childrenAnchors = true;
+        if (this.isAnchorOrButton(child.props)) {
+          shouldRenderDiv = true;
         }
-
       });
-
     }
 
-    if (childrenAnchors){
+    if (shouldRenderDiv){
       return this.renderDiv(items);
     } else {
       return this.renderUL(items);
     }
   }
 
-  isAnchor(props){
+  isAnchorOrButton(props){
     return (props.href || props.onClick);
   }
 

diff --git a/src/ListGroupItem.js b/src/ListGroupItem.js
@@ -1,7 +1,6 @@
 import React, { cloneElement } from 'react';
 import BootstrapMixin from './BootstrapMixin';
 import classNames from 'classnames';
-import SafeAnchor from './SafeAnchor';
 
 const ListGroupItem = React.createClass({
   mixins: [BootstrapMixin],
@@ -32,8 +31,10 @@ const ListGroupItem = React.createClass({
     classes.active = this.props.active;
     classes.disabled = this.props.disabled;
 
-    if (this.props.href || this.props.onClick) {
+    if (this.props.href) {
       return this.renderAnchor(classes);
+    } else if (this.props.onClick) {
+      return this.renderButton(classes);
     } else if (this.props.listItem) {
       return this.renderLi(classes);
     } else {
@@ -52,12 +53,23 @@ const ListGroupItem = React.createClass({
 
   renderAnchor(classes) {
     return (
-      <SafeAnchor
+      <a
         {...this.props}
         className={classNames(this.props.className, classes)}
       >
         {this.props.header ? this.renderStructuredContent() : this.props.children}
-      </SafeAnchor>
+      </a>
+    );
+  },
+
+  renderButton(classes) {
+    return (
+      <button 
+        type='button'
+        {...this.props}
+        className={classNames(this.props.className, classes)}>
+        {this.props.children}
+      </button>
     );
   },
 

diff --git a/test/ListGroupItemSpec.js b/test/ListGroupItemSpec.js
@@ -20,6 +20,15 @@ describe('ListGroupItem', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
   });
 
+  it('Should output a "button" if an "onClick" handler is set', function () {
+    let noop = function () {};
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ListGroupItem onClick={noop}>Button</ListGroupItem>
+    );
+    assert.equal(React.findDOMNode(instance).nodeName, 'BUTTON');
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group-item'));
+  });
+
   it('Should output an "li" if "listItem" prop is set', function () {
     let instance = ReactTestUtils.renderIntoDocument(
       <ListGroupItem listItem>Item 1</ListGroupItem>

diff --git a/test/ListGroupSpec.js b/test/ListGroupSpec.js
@@ -131,7 +131,7 @@ describe('ListGroup', function () {
       </ListGroup>
     );
     assert.equal(React.findDOMNode(instance).nodeName, 'DIV');
-    assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'A');
+    assert.equal(React.findDOMNode(instance).firstChild.nodeName, 'BUTTON');
     assert.equal(React.findDOMNode(instance).lastChild.nodeName, 'SPAN');
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'list-group'));
   });