From 576827f4ed24e7d28e016334743d14bb55bed47c Mon Sep 17 00:00:00 2001
From: Alex Abenoja <abenojaalex@gmail.com>
Date: Thu, 7 May 2015 14:33:48 -0600
Subject: [PATCH] [changed] Introducing ButtonInput

Encapsulating types "button", "reset" and "submit" into a single
component. Usage of these types with Input is now deprecated. Please use
ButtonInput instead.
---
 src/ButtonInput.js      |  40 +++++++
 src/Input.js            | 240 ++--------------------------------------
 src/InputBase.js        | 226 +++++++++++++++++++++++++++++++++++++
 test/ButtonInputSpec.js |  82 ++++++++++++++
 test/InputSpec.js       |  22 ++--
 5 files changed, 368 insertions(+), 242 deletions(-)
 create mode 100644 src/ButtonInput.js
 create mode 100644 src/InputBase.js
 create mode 100644 test/ButtonInputSpec.js

diff --git a/src/ButtonInput.js b/src/ButtonInput.js
new file mode 100644
index 0000000000..846d577ed4
--- /dev/null
+++ b/src/ButtonInput.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import Button from './Button';
+import FormGroup from './FormGroup';
+import InputBase from './InputBase';
+
+function valueValidation({children, value}, propName, componentName) {
+  if (children && value) {
+    return new Error('Both value and children cannot be passed to ButtonInput');
+  }
+  return React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.number]).call(null, {children, value}, propName, componentName);
+}
+
+class ButtonInput extends InputBase {
+  renderFormGroup(children) {
+    let {bsStyle, value, ...other} = this.props; /* eslint no-unused-vars: 0 object-shorthand: 0 */
+    return <FormGroup {...other}>{children}</FormGroup>;
+  }
+
+  renderInput() {
+    let {children, value, ...other} = this.props;
+    let val = children ? children : value;
+    return <Button {...other} componentClass="input" ref="input" key="input" value={val} />;
+  }
+}
+
+ButtonInput.defaultProps = {
+  type: 'button'
+};
+
+ButtonInput.propTypes = {
+  type: React.PropTypes.oneOf(['button', 'reset', 'submit']),
+  bsStyle(props) {
+    //defer to Button propTypes of bsStyle
+    return null;
+  },
+  children: valueValidation,
+  value: valueValidation
+};
+
+export default ButtonInput;
diff --git a/src/Input.js b/src/Input.js
index d0870481cc..61456c70c3 100644
--- a/src/Input.js
+++ b/src/Input.js
@@ -1,239 +1,19 @@
 import React from 'react';
-import classNames from 'classnames';
-import Button from './Button';
-import FormGroup from './FormGroup';
+import InputBase from './InputBase';
+import ButtonInput from './ButtonInput';
+import deprecationWarning from './utils/deprecationWarning';
 
-class Input extends React.Component {
-  getInputDOMNode() {
-    return React.findDOMNode(this.refs.input);
-  }
-
-  getValue() {
-    if (this.props.type === 'static') {
-      return this.props.value;
-    } else if (this.props.type) {
-      if (this.props.type === 'select' && this.props.multiple) {
-        return this.getSelectedOptions();
-      } else {
-        return this.getInputDOMNode().value;
-      }
-    } else {
-      throw 'Cannot use getValue without specifying input type.';
-    }
-  }
-
-  getChecked() {
-    return this.getInputDOMNode().checked;
-  }
-
-  getSelectedOptions() {
-    let values = [];
-
-    Array.prototype.forEach.call(
-      this.getInputDOMNode().getElementsByTagName('option'),
-      (option) => {
-        if (option.selected) {
-          let value = option.getAttribute('value') || option.innerHtml;
-          values.push(value);
-        }
-      });
-
-    return values;
-  }
-
-  isCheckboxOrRadio() {
-    return this.props.type === 'checkbox' || this.props.type === 'radio';
-  }
-
-  isFile() {
-    return this.props.type === 'file';
-  }
-
-  renderInputGroup(children) {
-    let addonBefore = this.props.addonBefore ? (
-      <span className="input-group-addon" key="addonBefore">
-        {this.props.addonBefore}
-      </span>
-    ) : null;
-
-    let addonAfter = this.props.addonAfter ? (
-      <span className="input-group-addon" key="addonAfter">
-        {this.props.addonAfter}
-      </span>
-    ) : null;
-
-    let buttonBefore = this.props.buttonBefore ? (
-      <span className="input-group-btn">
-        {this.props.buttonBefore}
-      </span>
-    ) : null;
-
-    let buttonAfter = this.props.buttonAfter ? (
-      <span className="input-group-btn">
-        {this.props.buttonAfter}
-      </span>
-    ) : null;
-
-    let inputGroupClassName;
-    switch (this.props.bsSize) {
-      case 'small': inputGroupClassName = 'input-group-sm'; break;
-      case 'large': inputGroupClassName = 'input-group-lg'; break;
-    }
-
-    return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
-      <div className={classNames(inputGroupClassName, 'input-group')} key="input-group">
-        {addonBefore}
-        {buttonBefore}
-        {children}
-        {addonAfter}
-        {buttonAfter}
-      </div>
-    ) : children;
-  }
-
-  renderIcon() {
-    let classes = {
-      'glyphicon': true,
-      'form-control-feedback': true,
-      'glyphicon-ok': this.props.bsStyle === 'success',
-      'glyphicon-warning-sign': this.props.bsStyle === 'warning',
-      'glyphicon-remove': this.props.bsStyle === 'error'
-    };
-
-    return this.props.hasFeedback ? (
-      <span className={classNames(classes)} key="icon" />
-    ) : null;
-  }
+const buttonTypes = ['button', 'reset', 'submit'];
 
-  renderHelp() {
-    return this.props.help ? (
-      <span className="help-block" key="help">
-        {this.props.help}
-      </span>
-    ) : null;
-  }
-
-  renderCheckboxAndRadioWrapper(children) {
-    let classes = {
-      'checkbox': this.props.type === 'checkbox',
-      'radio': this.props.type === 'radio'
-    };
-
-    return (
-      <div className={classNames(classes)} key="checkboxRadioWrapper">
-        {children}
-      </div>
-    );
-  }
-
-  renderWrapper(children) {
-    return this.props.wrapperClassName ? (
-      <div className={this.props.wrapperClassName} key="wrapper">
-        {children}
-      </div>
-    ) : children;
-  }
-
-  renderLabel(children) {
-    let classes = {
-      'control-label': !this.isCheckboxOrRadio()
-    };
-    classes[this.props.labelClassName] = this.props.labelClassName;
-
-    return this.props.label ? (
-      <label htmlFor={this.props.id} className={classNames(classes)} key="label">
-        {children}
-        {this.props.label}
-      </label>
-    ) : children;
-  }
-
-  renderInput() {
-    if (!this.props.type) {
-      return this.props.children;
-    }
-
-    switch (this.props.type) {
-      case 'select':
-        return (
-          <select {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input">
-            {this.props.children}
-          </select>
-        );
-      case 'textarea':
-        return <textarea {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input" />;
-      case 'static':
-        return (
-          <p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
-            {this.props.value}
-          </p>
-        );
-      case 'submit':
-        return <Button {...this.props} componentClass="input" ref="input" key="input" />;
-    }
-
-    let className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
-    return <input {...this.props} className={classNames(this.props.className, className)} ref="input" key="input" />;
-  }
-
-  renderFormGroup(children) {
-    if (this.props.type === 'submit') {
-      let {bsStyle, ...other} = this.props; /* eslint no-unused-vars: 0 object-shorthand: 0 */
-      return <FormGroup {...other}>{children}</FormGroup>;
+class Input extends InputBase {
+  render() {
+    if (buttonTypes.indexOf(this.props.type) > -1) {
+      deprecationWarning(`Input type=${this.props.type}`, 'ButtonInput');
+      return <ButtonInput {...this.props} />;
     }
 
-    return <FormGroup {...this.props}>{children}</FormGroup>;
-  }
-
-  renderChildren() {
-    return !this.isCheckboxOrRadio() ? [
-      this.renderLabel(),
-      this.renderWrapper([
-        this.renderInputGroup(
-          this.renderInput()
-        ),
-        this.renderIcon(),
-        this.renderHelp()
-      ])
-    ] : this.renderWrapper([
-      this.renderCheckboxAndRadioWrapper(
-        this.renderLabel(
-          this.renderInput()
-        )
-      ),
-      this.renderHelp()
-    ]);
-  }
-
-  render() {
-    let children = this.renderChildren();
-    return this.renderFormGroup(children);
+    return super.render();
   }
 }
 
-Input.propTypes = {
-  type: React.PropTypes.string,
-  label: React.PropTypes.node,
-  help: React.PropTypes.node,
-  addonBefore: React.PropTypes.node,
-  addonAfter: React.PropTypes.node,
-  buttonBefore: React.PropTypes.node,
-  buttonAfter: React.PropTypes.node,
-  bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
-  bsStyle(props) {
-    if (props.type === 'submit') {
-      return null;
-    }
-    return React.PropTypes.oneOf(['success', 'warning', 'error']).apply(null, arguments);
-  },
-  hasFeedback: React.PropTypes.bool,
-  id: React.PropTypes.string,
-  groupClassName: React.PropTypes.string,
-  wrapperClassName: React.PropTypes.string,
-  labelClassName: React.PropTypes.string,
-  multiple: React.PropTypes.bool,
-  disabled: React.PropTypes.bool,
-  value: React.PropTypes.any
-};
-
 export default Input;
diff --git a/src/InputBase.js b/src/InputBase.js
new file mode 100644
index 0000000000..c552a7a6ab
--- /dev/null
+++ b/src/InputBase.js
@@ -0,0 +1,226 @@
+import React from 'react';
+import classNames from 'classnames';
+import FormGroup from './FormGroup';
+
+class InputBase extends React.Component {
+  getInputDOMNode() {
+    return React.findDOMNode(this.refs.input);
+  }
+
+  getValue() {
+    if (this.props.type === 'static') {
+      return this.props.value;
+    } else if (this.props.type) {
+      if (this.props.type === 'select' && this.props.multiple) {
+        return this.getSelectedOptions();
+      } else {
+        return this.getInputDOMNode().value;
+      }
+    } else {
+      throw 'Cannot use getValue without specifying input type.';
+    }
+  }
+
+  getChecked() {
+    return this.getInputDOMNode().checked;
+  }
+
+  getSelectedOptions() {
+    let values = [];
+
+    Array.prototype.forEach.call(
+      this.getInputDOMNode().getElementsByTagName('option'),
+      (option) => {
+        if (option.selected) {
+          let value = option.getAttribute('value') || option.innerHtml;
+          values.push(value);
+        }
+      });
+
+    return values;
+  }
+
+  isCheckboxOrRadio() {
+    return this.props.type === 'checkbox' || this.props.type === 'radio';
+  }
+
+  isFile() {
+    return this.props.type === 'file';
+  }
+
+  renderInputGroup(children) {
+    let addonBefore = this.props.addonBefore ? (
+      <span className="input-group-addon" key="addonBefore">
+        {this.props.addonBefore}
+      </span>
+    ) : null;
+
+    let addonAfter = this.props.addonAfter ? (
+      <span className="input-group-addon" key="addonAfter">
+        {this.props.addonAfter}
+      </span>
+    ) : null;
+
+    let buttonBefore = this.props.buttonBefore ? (
+      <span className="input-group-btn">
+        {this.props.buttonBefore}
+      </span>
+    ) : null;
+
+    let buttonAfter = this.props.buttonAfter ? (
+      <span className="input-group-btn">
+        {this.props.buttonAfter}
+      </span>
+    ) : null;
+
+    let inputGroupClassName;
+    switch (this.props.bsSize) {
+      case 'small': inputGroupClassName = 'input-group-sm'; break;
+      case 'large': inputGroupClassName = 'input-group-lg'; break;
+    }
+
+    return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
+      <div className={classNames(inputGroupClassName, 'input-group')} key="input-group">
+        {addonBefore}
+        {buttonBefore}
+        {children}
+        {addonAfter}
+        {buttonAfter}
+      </div>
+    ) : children;
+  }
+
+  renderIcon() {
+    let classes = {
+      'glyphicon': true,
+      'form-control-feedback': true,
+      'glyphicon-ok': this.props.bsStyle === 'success',
+      'glyphicon-warning-sign': this.props.bsStyle === 'warning',
+      'glyphicon-remove': this.props.bsStyle === 'error'
+    };
+
+    return this.props.hasFeedback ? (
+      <span className={classNames(classes)} key="icon" />
+    ) : null;
+  }
+
+  renderHelp() {
+    return this.props.help ? (
+      <span className="help-block" key="help">
+        {this.props.help}
+      </span>
+    ) : null;
+  }
+
+  renderCheckboxAndRadioWrapper(children) {
+    let classes = {
+      'checkbox': this.props.type === 'checkbox',
+      'radio': this.props.type === 'radio'
+    };
+
+    return (
+      <div className={classNames(classes)} key="checkboxRadioWrapper">
+        {children}
+      </div>
+    );
+  }
+
+  renderWrapper(children) {
+    return this.props.wrapperClassName ? (
+      <div className={this.props.wrapperClassName} key="wrapper">
+        {children}
+      </div>
+    ) : children;
+  }
+
+  renderLabel(children) {
+    let classes = {
+      'control-label': !this.isCheckboxOrRadio()
+    };
+    classes[this.props.labelClassName] = this.props.labelClassName;
+
+    return this.props.label ? (
+      <label htmlFor={this.props.id} className={classNames(classes)} key="label">
+        {children}
+        {this.props.label}
+      </label>
+    ) : children;
+  }
+
+  renderInput() {
+    if (!this.props.type) {
+      return this.props.children;
+    }
+
+    switch (this.props.type) {
+      case 'select':
+        return (
+          <select {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input">
+            {this.props.children}
+          </select>
+        );
+      case 'textarea':
+        return <textarea {...this.props} className={classNames(this.props.className, 'form-control')} ref="input" key="input" />;
+      case 'static':
+        return (
+          <p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
+            {this.props.value}
+          </p>
+        );
+    }
+
+    let className = this.isCheckboxOrRadio() || this.isFile() ? '' : 'form-control';
+    return <input {...this.props} className={classNames(this.props.className, className)} ref="input" key="input" />;
+  }
+
+  renderFormGroup(children) {
+    return <FormGroup {...this.props}>{children}</FormGroup>;
+  }
+
+  renderChildren() {
+    return !this.isCheckboxOrRadio() ? [
+      this.renderLabel(),
+      this.renderWrapper([
+        this.renderInputGroup(
+          this.renderInput()
+        ),
+        this.renderIcon(),
+        this.renderHelp()
+      ])
+    ] : this.renderWrapper([
+      this.renderCheckboxAndRadioWrapper(
+        this.renderLabel(
+          this.renderInput()
+        )
+      ),
+      this.renderHelp()
+    ]);
+  }
+
+  render() {
+    let children = this.renderChildren();
+    return this.renderFormGroup(children);
+  }
+}
+
+InputBase.propTypes = {
+  type: React.PropTypes.string,
+  label: React.PropTypes.node,
+  help: React.PropTypes.node,
+  addonBefore: React.PropTypes.node,
+  addonAfter: React.PropTypes.node,
+  buttonBefore: React.PropTypes.node,
+  buttonAfter: React.PropTypes.node,
+  bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
+  bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']),
+  hasFeedback: React.PropTypes.bool,
+  id: React.PropTypes.string,
+  groupClassName: React.PropTypes.string,
+  wrapperClassName: React.PropTypes.string,
+  labelClassName: React.PropTypes.string,
+  multiple: React.PropTypes.bool,
+  disabled: React.PropTypes.bool,
+  value: React.PropTypes.any
+};
+
+export default InputBase;
diff --git a/test/ButtonInputSpec.js b/test/ButtonInputSpec.js
new file mode 100644
index 0000000000..5118181938
--- /dev/null
+++ b/test/ButtonInputSpec.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import ReactTestUtils from 'react/lib/ReactTestUtils';
+import ButtonInput from '../src/ButtonInput';
+import {shouldWarn} from './helpers';
+
+describe('ButtonInput', () =>{
+  it('renders an input button element with type=button', function () {
+    const instance = ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" bsStyle="danger" wrapperClassName="test" />
+    );
+
+    const node = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input').getDOMNode();
+    assert.equal(node.getAttribute('type'), 'button');
+    assert.equal(node.getAttribute('class'), 'btn btn-danger');
+  });
+
+  it('supports type=reset and type=submit', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" type="reset" />
+    );
+
+    let node = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input').getDOMNode();
+    assert.equal(node.getAttribute('type'), 'reset');
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" type="submit" />
+    );
+
+    node = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input').getDOMNode();
+    assert.equal(node.getAttribute('type'), 'submit');
+  });
+
+  it('throws warning about unsupported type', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" type="password" />
+    );
+
+    shouldWarn('propType: Invalid');
+  });
+
+  it('must not throw warning when bsStyle=danger', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" bsStyle="danger" />
+    );
+
+    console.warn.called.should.be.false;
+  });
+
+  it('throws warning about wrong type for bsStyle=error', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button" bsStyle="submit" />
+    );
+
+    shouldWarn('propType: Invalid');
+  });
+
+  it('throws a warning if given both children and a value property', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonInput value="button">button</ButtonInput>
+    );
+
+    shouldWarn('Both value and children');
+  });
+
+  it('does not throw an error for strings and numbers', function () {
+    let testData = { children: 'EUREKA' };
+    let result = ButtonInput.propTypes.children(testData, 'children', 'ButtonInput');
+    assert.notInstanceOf(result, Error);
+
+    testData = { value: 4 };
+    result = ButtonInput.propTypes.value(testData, 'children', 'ButtonInput');
+    assert.notInstanceOf(result, Error);
+  });
+
+  it('does not allow elements for children', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonInput><span>blah</span></ButtonInput>
+    );
+
+    shouldWarn('propType: Invalid');
+  });
+});
diff --git a/test/InputSpec.js b/test/InputSpec.js
index ed1cbf6467..065ff1824c 100644
--- a/test/InputSpec.js
+++ b/test/InputSpec.js
@@ -41,30 +41,28 @@ describe('Input', function () {
     assert.equal(instance.getValue(), 'v');
   });
 
-  it('renders a submit button element when type=submit', function () {
-    let instance = ReactTestUtils.renderIntoDocument(
-      <Input type="submit" bsStyle="danger" wrapperClassName='test' />
+  it('throws a deprecation warning on type=button', function () {
+    ReactTestUtils.renderIntoDocument(
+      <Input type="button" />
     );
 
-    let node = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input').getDOMNode();
-    assert.equal(node.getAttribute('type'), 'submit');
-    assert.equal(node.getAttribute('class'), 'btn btn-danger');
+    shouldWarn('deprecated');
   });
 
-  it('must not throw warning when bsStyle=danger and type=submit', function () {
+  it('throws a deprecation warning on type=reset', function () {
     ReactTestUtils.renderIntoDocument(
-      <Input type="submit" bsStyle="danger" />
+      <Input type="reset" />
     );
 
-    console.warn.called.should.be.false;
+    shouldWarn('deprecated');
   });
 
-  it('throws warning about wrong type for bsStyle=error when type=submit', function () {
+  it('throws a deprecation warning on type=submit', function () {
     ReactTestUtils.renderIntoDocument(
-      <Input type="submit" bsStyle="error" />
+      <Input type="submit" />
     );
 
-    shouldWarn('propType: Invalid');
+    shouldWarn('deprecated');
   });
 
   it('renders a p element when type=static', function () {