import React from 'react';
import PropTypes from 'prop-types';

/**
 * Wraps an input to implement a Bootstrap [Input Group](http://getbootstrap.com/components/#input-groups)
 */
const InputGroup = props => {
  const renderAddon = addon => {
    if (!addon) {
      return null;
    }
    return <span className="input-group-addon">{addon}</span>;
  };

  const renderButton = button => {
    if (!button) {
      return null;
    }
    return <span className="input-group-btn">{button}</span>;
  };

  const {addonBefore, addonAfter, buttonBefore, buttonAfter, children} = props;

  return (
    <div className="input-group">
      {renderAddon(addonBefore)}
      {renderButton(buttonBefore)}
      {children}
      {renderAddon(addonAfter)}
      {renderButton(buttonAfter)}
    </div>
  );
};

export const propTypes = {
  children: PropTypes.node.isRequired,
  addonAfter: PropTypes.node,
  addonBefore: PropTypes.node,
  buttonAfter: PropTypes.node,
  buttonBefore: PropTypes.node,
};

InputGroup.propTypes = propTypes;

InputGroup.defaultProps = {
  addonAfter: null,
  addonBefore: null,
  buttonAfter: null,
  buttonBefore: null,
};

export default InputGroup;

@@ -224,21 +224,33 @@
 Addon = 
+(
 addon
+, position)
  =%3E %7B%0A  
@@ -309,33 +309,34 @@
 %3Cspan className=
-%22
+%7B%60
 input-group-addo
@@ -335,166 +335,26 @@
 oup-
-addon%22%3E%7Baddon%7D%3C/span%3E;%0A  %7D;%0A%0A  const renderButton = button =%3E %7B%0A    if (!button) %7B%0A      return null;%0A    %7D%0A    return %3Cspan className=%22input-group-btn%22%3E%7Bbutt
+$%7Bposition%7D%60%7D%3E%7Badd
 on%7D%3C
@@ -515,32 +515,43 @@
 ddon(addonBefore
+, 'prepend'
 )%7D%0A      %7Brender
@@ -542,36 +542,35 @@
 )%7D%0A      %7Brender
-Butt
+Add
 on(buttonBefore)
@@ -568,16 +568,27 @@
 onBefore
+, 'prepend'
 )%7D%0A     
@@ -624,24 +624,34 @@
 n(addonAfter
+, 'append'
 )%7D%0A      %7Bre
@@ -658,12 +658,11 @@
 nder
-Butt
+Add
 on(b
@@ -671,16 +671,26 @@
 tonAfter
+, 'append'
 )%7D%0A    %3C

Update input-group.