[added] react-bootstrap#1181 ListGroup supports componentClass prop

kyletsang · Oct 1, 2015 · 3f5c6e3 · 3f5c6e3
1 parent 3edf4a1
commit 3f5c6e3
Show file tree

Hide file tree

Showing 5 changed files with 254 additions and 142 deletions.
diff --git a/docs/examples/ListGroupCustom.js b/docs/examples/ListGroupCustom.js
@@ -0,0 +1,21 @@
+const CustomComponent = React.createClass({
+  render() {
+    return (
+      <li
+        className="list-group-item"
+        onClick={() => {}}>
+        {this.props.children}
+      </li>
+    );
+  }
+});
+
+const listgroupInstance = (
+  <ListGroup componentClass="ul">
+    <CustomComponent>Custom Child 1 </CustomComponent>
+    <CustomComponent>Custom Child 2 </CustomComponent>
+    <CustomComponent>Custom Child 3</CustomComponent>
+  </ListGroup>
+);
+
+React.render(listgroupInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -733,6 +733,15 @@ const ComponentsPage = React.createClass({
                   <p>Set the <code>header</code> prop to create a structured item, with a heading and a body area.</p>
                   <ReactPlayground codeText={Samples.ListGroupHeader} />
 
+                  <h3><Anchor id="listgroup-with-custom-children">With custom component children</Anchor></h3>
+                  <p>
+                    When using ListGroupItems directly, ListGroup looks at whether the items have href
+                    or onClick props to determine which DOM elements to emit. However, with custom item
+                    components as children to <code>ListGroup</code>, set the
+                    <code>componentClass</code> prop to specify which element <code>ListGroup</code> should output.
+                  </p>
+                  <ReactPlayground codeText={Samples.ListGroupCustom} />
+
                   <h3><Anchor id="listgroup-props">Props</Anchor></h3>
 
                   <h4><Anchor id="listgroup-props-group">ListGroup</Anchor></h4>

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -80,6 +80,7 @@ export default {
   GridBasic:                     require('fs').readFileSync(__dirname + '/../examples/GridBasic.js', 'utf8'),
   ThumbnailAnchor:               require('fs').readFileSync(__dirname + '/../examples/ThumbnailAnchor.js', 'utf8'),
   ThumbnailDiv:                  require('fs').readFileSync(__dirname + '/../examples/ThumbnailDiv.js', 'utf8'),
+  ListGroupCustom:               require('fs').readFileSync(__dirname + '/../examples/ListGroupCustom.js', 'utf8'),
   ListGroupDefault:              require('fs').readFileSync(__dirname + '/../examples/ListGroupDefault.js', 'utf8'),
   ListGroupLinked:               require('fs').readFileSync(__dirname + '/../examples/ListGroupLinked.js', 'utf8'),
   ListGroupActive:               require('fs').readFileSync(__dirname + '/../examples/ListGroupActive.js', 'utf8'),

diff --git a/src/ListGroup.js b/src/ListGroup.js
@@ -1,4 +1,5 @@
 import React, { cloneElement } from 'react';
+import ListGroupItem from './ListGroupItem';
 import classNames from 'classnames';
 import ValidComponentChildren from './utils/ValidComponentChildren';
 
@@ -9,6 +10,17 @@ class ListGroup extends React.Component {
       (item, index) => cloneElement(item, { key: item.key ? item.key : index })
     );
 
+    if (this.areCustomChildren(items)) {
+      let Component = this.props.componentClass;
+      return (
+        <Component
+          {...this.props}
+          className={classNames(this.props.className, 'list-group')}>
+          {items}
+        </Component>
+      );
+    }
+
     let shouldRenderDiv = false;
 
     if (!this.props.children) {
@@ -21,16 +33,25 @@ class ListGroup extends React.Component {
       });
     }
 
-    if (shouldRenderDiv) {
-      return this.renderDiv(items);
-    }
-    return this.renderUL(items);
+    return shouldRenderDiv ? this.renderDiv(items) : this.renderUL(items);
   }
 
   isAnchorOrButton(props) {
     return (props.href || props.onClick);
   }
 
+  areCustomChildren(children) {
+    let customChildren = false;
+
+    ValidComponentChildren.forEach(children, (child) => {
+      if (child.type !== ListGroupItem) {
+        customChildren = true;
+      }
+    }, this);
+
+    return customChildren;
+  }
+
   renderUL(items) {
     let listItems = ValidComponentChildren.map(items,
       (item) => cloneElement(item, { listItem: true })
@@ -56,8 +77,18 @@ class ListGroup extends React.Component {
   }
 }
 
+ListGroup.defaultProps = {
+  componentClass: 'div'
+};
+
 ListGroup.propTypes = {
   className: React.PropTypes.string,
+  /**
+   * The element for ListGroup if children are
+   * user-defined custom components.
+   * @type {("ul"|"div")}
+   */
+  componentClass: React.PropTypes.oneOf(['ul', 'div']),
   id: React.PropTypes.oneOfType([
     React.PropTypes.string,
     React.PropTypes.number