Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic support for input group addons #38

Merged
merged 1 commit into from
Dec 14, 2015
Merged

Conversation

seburgi
Copy link
Contributor

@seburgi seburgi commented Dec 14, 2015

This adds the ability to add addons to input fields (see: http://getbootstrap.com/components/#input-groups-basic).

This commit adds two props to the Input component: addonBefore and addonAfter.
Both can either be a string or a renderable element (PropType node).

Example:

    let beforeElement = (<span className="glyphicon glyphicon-search"></span>);

    <Input
          {...sharedProps}
          name="amount"
          id="amount"
          label="How much was paid?"
          addonBefore={beforeElement}
          addonAfter="Just a string" />

Caveats:

  • When using an element as addon one HAS to provide an Id, or else the getId method in the component mixin will produce an error when JSON stringifying the props (see: getId() function may bomb due to circular reference #33).
  • When using addonAfter, addtional styling for the Input component may be necessary to correctly display the error icon.

@@ -48,7 +58,15 @@ var Input = React.createClass({
render: function() {
var element = this.renderElement();

if (this.getLayout() === 'elementOnly' || this.props.type === 'hidden') {
if (this.getLayout() === 'hidden') {
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be this.props.type === 'hidden'.

@twisty
Copy link
Owner

twisty commented Dec 14, 2015

Thanks for this, looks good. Just one thing I noticed (see annotation on line 61). If you can change and resubmit that would be cool. Thanks again, Tim.

@seburgi
Copy link
Contributor Author

seburgi commented Dec 14, 2015

Thanks for the quick feedback! Damn, you are absolutely right about line 61, I already fixed it and squashed the two commits to one again.

twisty added a commit that referenced this pull request Dec 14, 2015
Add basic support for input group addons.
@twisty twisty merged commit 168641d into twisty:master Dec 14, 2015
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants