diff --git a/src/pivotal-ui/components/lists.scss b/src/pivotal-ui/components/lists.scss
index fbdff0ddd..cf093011e 100644
--- a/src/pivotal-ui/components/lists.scss
+++ b/src/pivotal-ui/components/lists.scss
@@ -1070,7 +1070,7 @@ parent: react_list
/*doc
---
-title: React Draggable List
+title: Draggable List
name: react_list_draggable
parent: react_list
---
@@ -1135,3 +1135,51 @@ var draggableListDropCallback = function(data) {
}
}
}
+
+
+/*doc
+---
+title: Addable List
+name: react_list_addable
+parent: react_list
+---
+
+Here's an example of how you might write an addable list component.
+
+```jsx_example
+var AddableList = React.createClass({
+ getInitialState: function() {
+ return {
+ items: ['one','two','three']
+ };
+ },
+
+ change: function() {
+ var newItems = React.addons.update(this.state.items, {$push: ['new item']});
+ this.setState({items: newItems});
+ },
+
+ render: function() {
+ var items = _.map(this.state.items, function(item, key) {
+ return (
+
+ {item}
+
+ );
+ });
+ return (
+
+
+ {items}
+
+ Click to Add Item
+
+ );
+ }
+});
+```
+
+```react_example
+
+```
+*/
diff --git a/src/pivotal-ui/javascripts/lists.js b/src/pivotal-ui/javascripts/lists.js
index bce4131f7..d611ec8ae 100644
--- a/src/pivotal-ui/javascripts/lists.js
+++ b/src/pivotal-ui/javascripts/lists.js
@@ -4,20 +4,21 @@ var _ = require('lodash');
var React = require('react/addons');
module.exports = _.transform([
- {name: 'Ul', Tag: 'ul', className: 'list-unordered', props: ['checked']},
+ {name: 'Ul', Tag: 'ul', baseClassName: 'list-unordered', props: ['checked']},
{name: 'Ol', Tag: 'ol'},
- {name: 'InlineList', className: 'list-inline', Tag: 'ul', props: ['divider']},
- {name: 'GroupList', className: 'list-group', Tag: 'ul'}
-], function(memo, {name, className, props, Tag}) {
+ {name: 'InlineList', baseClassName: 'list-inline', Tag: 'ul', props: ['divider']},
+ {name: 'GroupList', baseClassName: 'list-group', Tag: 'ul'}
+], function(memo, {name, baseClassName, Tag, props}) {
memo[name] = React.createClass({
renderChildren: function() {
if (name !== 'GroupList') {
- return this.props.children
+ return this.props.children;
}
return React.Children.map(this.props.children, c => React.addons.cloneWithProps(c, {className: 'list-group-item'}));
},
render: function() {
+ var className = baseClassName;
if (this.props.checked && props.indexOf('checked') !== -1) {
className = 'list-checked';
} else if (this.props.divider && props.indexOf('divider') !== -1) {
diff --git a/src/pivotal-ui/javascripts/pivotal-ui-react.js b/src/pivotal-ui/javascripts/pivotal-ui-react.js
index b4074917b..c68db0f4a 100644
--- a/src/pivotal-ui/javascripts/pivotal-ui-react.js
+++ b/src/pivotal-ui/javascripts/pivotal-ui-react.js
@@ -7,6 +7,6 @@ require('prism');
require('./scale')();
require('./back-to-top')();
-global.React = require('react');
+global.React = require('react/addons');
global.UI = require('./components.js');