Implement buttonBefore/buttonAfter / input-group-btn

Closes react-bootstrap#201

Author: mattly

src/Input.jsx

@@ -10,6 +10,8 @@ var Input = React.createClass({
     help: React.PropTypes.node,
     addonBefore: React.PropTypes.node,
     addonAfter: React.PropTypes.node,
+    buttonBefore: React.PropTypes.node,
+    buttonAfter: React.PropTypes.node,
     bsStyle: function(props) {
       if (props.type === 'submit') {
         // Return early if `type=submit` as the `Button` component
@@ -105,11 +107,25 @@ var Input = React.createClass({
       </span>
     ) : null;
 
-    return addonBefore || addonAfter ? (
+    var buttonBefore = this.props.buttonBefore ? (
+      <span className="input-group-btn">
+        {this.props.buttonBefore}
+      </span>
+    ) : null;
+
+    var buttonAfter = this.props.buttonAfter ? (
+      <span className="input-group-btn">
+        {this.props.buttonAfter}
+      </span>
+    ) : null;
+
+    return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
       <div className="input-group" key="input-group">
         {addonBefore}
+        {buttonBefore}
         {children}
         {addonAfter}
+        {buttonAfter}
       </div>
     ) : children;
   },

test/InputSpec.jsx

@@ -3,6 +3,9 @@
 var React          = require('react');
 var ReactTestUtils = require('react/lib/ReactTestUtils');
 var Input          = require('../cjs/Input');
+var Button         = require('../cjs/Button');
+var DropdownButton = require('../cjs/DropdownButton');
+var MenuItem       = require('../cjs/MenuItem');
 
 describe('Input', function () {
   beforeEach(function() {
@@ -120,6 +123,28 @@ describe('Input', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-addon'));
   });
 
+  it('renders btn-group', function() {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input buttonAfter={<Button>!</Button>} />
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-btn'));
+  })
+
+  it('renders btn-group with dropdown', function() {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input buttonAfter={<DropdownButton title="dropdown">
+          <MenuItem key="1">One</MenuItem>
+      </DropdownButton>} />
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-btn'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'btn'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'dropdown-menu'));
+  })
+
   it('renders help', function () {
     var instance = ReactTestUtils.renderIntoDocument(
       <Input help="Help" />