feat(react-lists): add addable list component

[Finishes #86650566]
pivotal-cf · Jan 28, 2015 · e07ff19 · e07ff19
1 parent 2a6932b
commit e07ff19
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 7 deletions.
diff --git 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 (
+        <UI.Li key={key+item}>
+          {item}
+        </UI.Li>
+      );
+    });
+    return (
+      <div>
+        <UI.Ul>
+          {items}
+        </UI.Ul>
+        <UI.HighlightButton onClick={this.change}>Click to Add Item</UI.HighlightButton>
+      </div>
+    );
+  }
+});
+```
+
+```react_example
+<AddableList />
+```
+*/
diff --git 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
@@ -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');