diff --git a/src/InputBase.js b/src/InputBase.js index c552a7a6ab..6293c37d51 100644 --- a/src/InputBase.js +++ b/src/InputBase.js @@ -1,6 +1,7 @@ import React from 'react'; import classNames from 'classnames'; import FormGroup from './FormGroup'; +import Glyphicon from './Glyphicon'; class InputBase extends React.Component { getInputDOMNode() { @@ -91,17 +92,20 @@ class InputBase extends React.Component { } 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' - }; + if (this.props.hasFeedback) { + if (this.props.feedbackIcon) { + return React.cloneElement(this.props.feedbackIcon, { formControlFeedback: true }); + } - return this.props.hasFeedback ? ( - - ) : null; + switch (this.props.bsStyle) { + case 'success': return ; + case 'warning': return ; + case 'error': return ; + default: return ; + } + } else { + return null; + } } renderHelp() { @@ -214,6 +218,7 @@ InputBase.propTypes = { bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']), bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']), hasFeedback: React.PropTypes.bool, + feedbackIcon: React.PropTypes.node, id: React.PropTypes.string, groupClassName: React.PropTypes.string, wrapperClassName: React.PropTypes.string, diff --git a/test/InputSpec.js b/test/InputSpec.js index f4bf29c622..340e50df44 100644 --- a/test/InputSpec.js +++ b/test/InputSpec.js @@ -4,6 +4,7 @@ import Input from '../src/Input'; import Button from '../src/Button'; import DropdownButton from '../src/DropdownButton'; import MenuItem from '../src/MenuItem'; +import Glyphicon from '../src/Glyphicon'; import {shouldWarn} from './helpers'; describe('Input', function () { @@ -279,4 +280,56 @@ describe('Input', function () { let node = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input')); assert.isNotNull(node.getAttribute('disabled')); }); + + context('when Input listens to feedback', function () { + it('renders success feedback as Glyphicon', function () { + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-ok')); + }); + + it('renders warning feedback as Glyphicon', function () { + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-warning-sign')); + }); + + it('renders error feedback as Glyphicon', function () { + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-remove')); + }); + + context('when using feedbackIcon', function () { + it('uses the feedbackIcon', function () { + let customIcon = ; + + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-star')); + }); + + it('adds the .form-control-feedback class for Glyphicons', function () { + let customIcon = ; + + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback')); + }); + }); + }); });