diff --git a/docs/examples/ListGroupLinked.js b/docs/examples/ListGroupLinked.js index 794795c0bb..d3aea14136 100644 --- a/docs/examples/ListGroupLinked.js +++ b/docs/examples/ListGroupLinked.js @@ -1,8 +1,14 @@ +function alertClicked () { + alert('You clicked the third ListGroupItem'); +} + const listgroupInstance = ( Link 1 Link 2 - ... + + Trigger an alert + ); diff --git a/src/ListGroup.js b/src/ListGroup.js index 30dca37c87..32765ce3a6 100644 --- 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 index 1b11952ac0..cfb41e2b75 100644 --- 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 ( - {this.props.header ? this.renderStructuredContent() : this.props.children} - + + ); + }, + + renderButton(classes) { + return ( + ); }, diff --git a/test/ListGroupItemSpec.js b/test/ListGroupItemSpec.js index b67c8270a2..f4ba9c0aaf 100644 --- 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( + Button + ); + 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( Item 1 diff --git a/test/ListGroupSpec.js b/test/ListGroupSpec.js index cc0684f834..e0503acbdf 100644 --- a/test/ListGroupSpec.js +++ b/test/ListGroupSpec.js @@ -131,7 +131,7 @@ describe('ListGroup', function () { ); 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')); });