Skip to content

Commit

Permalink
[added] custom feedback icons for Input
Browse files Browse the repository at this point in the history
- Added a new prop on Input named feedbackIcon
- Added tests for ensuring Glyphicons as default
- Added tests for rendering the feedbackIcon

This allows for passing custom icons that may be
used instead of the default Glyphicons when an
Input is having feedback.
  • Loading branch information
André Ligné committed Aug 10, 2015
1 parent 83cdaa3 commit b688014
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 10 deletions.
25 changes: 15 additions & 10 deletions src/InputBase.js
Original file line number Diff line number Diff line change
@@ -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() {
Expand Down Expand Up @@ -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 ? (
<span className={classNames(classes)} key="icon" />
) : null;
switch (this.props.bsStyle) {
case 'success': return <Glyphicon formControlFeedback glyph="ok" key="icon" />;
case 'warning': return <Glyphicon formControlFeedback glyph="warning-sign" key="icon" />;
case 'error': return <Glyphicon formControlFeedback glyph="remove" key="icon" />;
default: return <span className="form-control-feedback" key="icon" />;
}
} else {
return null;
}
}

renderHelp() {
Expand Down Expand Up @@ -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,
Expand Down
53 changes: 53 additions & 0 deletions test/InputSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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(
<Input hasFeedback={true} bsStyle="success" />
);

assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-ok'));
});

it('renders warning feedback as Glyphicon', function () {
let instance = ReactTestUtils.renderIntoDocument(
<Input hasFeedback={true} bsStyle="warning" />
);

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(
<Input hasFeedback={true} bsStyle="error" />
);

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 = <Glyphicon glyph="star" />;

let instance = ReactTestUtils.renderIntoDocument(
<Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
);

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 = <Glyphicon glyph="star" />;

let instance = ReactTestUtils.renderIntoDocument(
<Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
);

assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback'));
});
});
});
});

0 comments on commit b688014

Please sign in to comment.