Add basic PanelGroup

amd.js

@@ -4,6 +4,7 @@ define(function (require) {
     'use strict';
 
     return {
+        Accordion: require('../amd/Accordion'),
         Alert: require('../amd/Alert'),
         BootstrapMixin: require('../amd/BootstrapMixin'),
         Button: require('../amd/Button'),
@@ -19,6 +20,7 @@ define(function (require) {
         Nav: require('../amd/Nav'),
         NavItem: require('../amd/NavItem'),
         Panel: require('../amd/Panel'),
+        PanelGroup: require('../amd/PanelGroup'),
         PrimaryMixin: require('../amd/PrimaryMixin'),
         ProgressBar: require('../amd/ProgressBar'),
         SmallMixin: require('../amd/SmallMixin'),

amd/Accordion.js

@@ -0,0 +1,3 @@
+define(['./transpiled/Accordion'], function (Accordion) {
+  return Accordion.default;
+})

amd/PanelGroup.js

@@ -0,0 +1,3 @@
+define(['./transpiled/PanelGroup'], function (PanelGroup) {
+  return PanelGroup.default;
+})

amd/transpiled/Accordion.js

@@ -0,0 +1,23 @@
+define(
+  ["./react-es6","./PanelGroup","exports"],
+  function(__dependency1__, __dependency2__, __exports__) {
+    "use strict";
+    /** @jsx React.DOM */
+
+    var React = __dependency1__["default"];
+    var PanelGroup = __dependency2__["default"];
+
+    var Accordion = React.createClass({displayName: 'Accordion',
+
+      render: function () {
+        return this.transferPropsTo(
+          PanelGroup( {isAccordion:true}, 
+              this.props.children
+          )
+        );
+      }
+
+    });
+
+    __exports__["default"] = Accordion;
+  });

amd/transpiled/PanelGroup.js

@@ -0,0 +1,87 @@
+define(
+  ["./react-es6","./react-es6/lib/cx","./BootstrapMixin","./utils","exports"],
+  function(__dependency1__, __dependency2__, __dependency3__, __dependency4__, __exports__) {
+    "use strict";
+    /** @jsx React.DOM */
+
+    var React = __dependency1__["default"];
+    var classSet = __dependency2__["default"];
+    var BootstrapMixin = __dependency3__["default"];
+    var utils = __dependency4__["default"];
+
+    var PanelGroup = React.createClass({displayName: 'PanelGroup',
+      mixins: [BootstrapMixin],
+
+      propTypes: {
+        onSelect: React.PropTypes.func
+      },
+
+      getDefaultProps: function () {
+        return {
+          bsClass: 'panel-group'
+        };
+      },
+
+      getInitialState: function () {
+        var initialActiveKey = this.props.initialActiveKey;
+
+        return {
+          activeKey: initialActiveKey
+        };
+      },
+
+      render: function () {
+        var activeKey =
+          this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+
+        return this.transferPropsTo(
+          React.DOM.div( {className:classSet(this.getBsClassSet())}, 
+              utils.modifyChildren(this.props.children, this.renderPanel)
+          )
+        );
+      },
+
+      renderPanel: function (child) {
+        var activeKey =
+          this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+
+        var props = {
+          bsStyle: this.props.bsStyle
+        };
+
+        if (this.props.isAccordion) {
+          props.isCollapsable = true;
+          props.isOpen = (child.props.key === activeKey);
+          props.onSelect = this.handleSelect;
+        }
+
+        return utils.cloneWithProps(
+          child,
+          props
+        );
+      },
+
+      shouldComponentUpdate: function() {
+        // Defer any updates to this component during the `onSelect` handler.
+        return !this._isChanging;
+      },
+
+      handleSelect: function (key) {
+        if (this.props.onSelect) {
+          this._isChanging = true;
+          this.props.onSelect(key);
+          this._isChanging = false;
+        }
+
+        if (this.state.activeKey === key) {
+          key = null;
+        }
+
+        this.setState({
+          activeKey: key
+        });
+      }
+    });
+
+    __exports__["default"] = PanelGroup;
+  });

amd/transpiled/constants.js

@@ -12,6 +12,7 @@ define(
             'input-group': 'input-group',
             'form': 'form',
             'panel': 'panel',
+            'panel-group': 'panel-group',
             'progress-bar': 'progress-bar',
             'nav': 'nav'
         },

cjs/Accordion.js

@@ -0,0 +1,2 @@
+var Accordion = require('./transpiled/Accordion').default;
+module.exports = Accordion

cjs/PanelGroup.js

@@ -0,0 +1,2 @@
+var PanelGroup = require('./transpiled/PanelGroup').default;
+module.exports = PanelGroup

cjs/transpiled/Accordion.js

@@ -0,0 +1,19 @@
+"use strict";
+/** @jsx React.DOM */
+
+var React = require("./react-es6")["default"];
+var PanelGroup = require("./PanelGroup")["default"];
+
+var Accordion = React.createClass({displayName: 'Accordion',
+
+  render: function () {
+    return this.transferPropsTo(
+      PanelGroup( {isAccordion:true}, 
+          this.props.children
+      )
+    );
+  }
+
+});
+
+exports["default"] = Accordion;

cjs/transpiled/PanelGroup.js

@@ -0,0 +1,83 @@
+"use strict";
+/** @jsx React.DOM */
+
+var React = require("./react-es6")["default"];
+var classSet = require("./react-es6/lib/cx")["default"];
+var BootstrapMixin = require("./BootstrapMixin")["default"];
+var utils = require("./utils")["default"];
+
+var PanelGroup = React.createClass({displayName: 'PanelGroup',
+  mixins: [BootstrapMixin],
+
+  propTypes: {
+    onSelect: React.PropTypes.func
+  },
+
+  getDefaultProps: function () {
+    return {
+      bsClass: 'panel-group'
+    };
+  },
+
+  getInitialState: function () {
+    var initialActiveKey = this.props.initialActiveKey;
+
+    return {
+      activeKey: initialActiveKey
+    };
+  },
+
+  render: function () {
+    var activeKey =
+      this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+
+    return this.transferPropsTo(
+      React.DOM.div( {className:classSet(this.getBsClassSet())}, 
+          utils.modifyChildren(this.props.children, this.renderPanel)
+      )
+    );
+  },
+
+  renderPanel: function (child) {
+    var activeKey =
+      this.props.activeKey != null ? this.props.activeKey : this.state.activeKey;
+
+    var props = {
+      bsStyle: this.props.bsStyle
+    };
+
+    if (this.props.isAccordion) {
+      props.isCollapsable = true;
+      props.isOpen = (child.props.key === activeKey);
+      props.onSelect = this.handleSelect;
+    }
+
+    return utils.cloneWithProps(
+      child,
+      props
+    );
+  },
+
+  shouldComponentUpdate: function() {
+    // Defer any updates to this component during the `onSelect` handler.
+    return !this._isChanging;
+  },
+
+  handleSelect: function (key) {
+    if (this.props.onSelect) {
+      this._isChanging = true;
+      this.props.onSelect(key);
+      this._isChanging = false;
+    }
+
+    if (this.state.activeKey === key) {
+      key = null;
+    }
+
+    this.setState({
+      activeKey: key
+    });
+  }
+});
+
+exports["default"] = PanelGroup;

cjs/transpiled/constants.js

@@ -9,6 +9,7 @@ exports["default"] = {
         'input-group': 'input-group',
         'form': 'form',
         'panel': 'panel',
+        'panel-group': 'panel-group',
         'progress-bar': 'progress-bar',
         'nav': 'nav'
     },