Implement Input

[stevoland]

Some ideas

<Input
    type="number"
    addonBefore="$"
    addonAfter=".00"
    label="How much"
    isInline={true}
    bsStyle="warning"
    hasFeedback={true}
    className="col-sm-9"
    labelClassName="col-sm-3"
    groupClassName="blah"
    placeholder="eg: 27"
    help=""
/>

If label prop is present, a .form-group is rendered:

<div class="form-group">
    <label></label>
    <input/>
</div>

if addonBefore or addonAfter prop is present, an .input-group is added:

<div class="form-group">
    <label></label>
    <div class="input-group">
      <span class="input-group-addon">$</span>
      <input/>
      <span class="input-group-addon">.00</span>
    </div>
</div>

• Other props are transferred to the input.
• type can also be select, textarea or a custom instance
• If checkbox or radio, label wraps input
• hasFeedback adds icons based on bsStyle

[syllog1sm]

Hmm. That's a good start, but there's a fair bit going on in the Boostrap component. It's confusing though, because the docs are a bit scattered (as usual):

http://getbootstrap.com/css/#forms
http://getbootstrap.com/components/#input-groups

Here's how my current Input component works. It doesn't use all of the functionality either.

            <Form callback={this.submit}>
                <Input name="email" type="email" placeholder="Email" required={true}/>
                <Input name="password" type="password" placeholder="Password"/>
                <Input name="password" type="password" placeholder="Re-enter Password"/>
                <Button bsStyle="success" bsSize="large">
                    Submit
                </Button>
                <Button bsStyle="danger" bsSize="large">
                    Cancel
                </Button>
            </Form>

Here's my implementation of Input. It does some validation; I'm not sure if this is a great idea.

var Input = React.createClass({
    propTypes: {
        name: React.PropTypes.string.isRequired,
        type: React.PropTypes.oneOf(INPUT_TYPES).isRequired,
        placeholder: React.PropTypes.string,
        label: React.PropTypes.string,
        required: React.PropTypes.bool,
        oneOf: React.PropTypes.array,
        minLength: React.PropTypes.int
    },

    getInitialState: function() { return {}; },

    getValue: function() {
        return this.refs.input.getDOMNode().value;
    },

    renderInput: function(){
        var className = "form-control input-md";
        return <input type={this.props.type} className={className}
            placeholder={this.props.placeholder} ref="input"/>;
    },

    renderLabel: function(){
        return this.props.label ? <label>{this.props.label}</label> : undefined;
    },

    render: function(){
        var className = "form-group";
        if (this.state.error)
            className += ' has-error';
        return this.transferPropsTo(
            <div className={className} onBlur={this.onBlur} onFocus={this.onFocus}>
                {this.renderInput()}
                {this.renderLabel()}
            </div>
        );
    },

    onBlur: function(e){
        var value = this.getValue();
        var error;
        if (this.props.required && !value)
            error = 'required';
        else if (this.props.oneOf && !(value in this.props.oneOf))
            error = 'oneOf';
        else if (this.props.minLength && value.length < this.props.minLength)
            error = 'minLength';
        this.setState({error: error});
    },

    onFocus: function(e) {
        this.setState({error: false});
        e.stopPropagation();
    }
});

[stevoland]

I'd like to leave validation out of the component at least for now. Just add the relevant error/warning class from some prop like bsStyle in my example. What other functionality can you see missing from my initial example?

[syllog1sm]

I missed that "before" and "after" would do the input-group parts, so that's covered.

Where does placeholder text go?

[stevoland]

oh, yeah, forgot placeholder - I'll add that.

On Tue, Feb 11, 2014 at 3:03 PM, syllog1sm notifications@github.com wrote:

I missed that "before" and "after" would do the input-group parts, so
that's covered.

Where does placeholder text go?

Reply to this email directly or view it on GitHubhttps://github.com//issues/20#issuecomment-34762245
.

[velsa]

What would be really cool is to have Input with optional autocompletion
Thanks !

[stevoland]

That would be great. Id like a pure React Selectize https://github.com/brianreavis/selectize.js . It's not going to happen in this project I'm afraid.

[velsa]

Answering my own comment: https://github.com/chenglou/react-chosen

For those looking )

[liamcmitchell]

Is there any work in progress? I may have some time to spend on it.

I agree that validation should stay out for now.

[stevoland]

That would be fantastic! I don't think it's been started.@pieterv ?

[pieterv]

@liamcmitchell sounds good! I haven't made any progress on this.

For validation it would be nice if we can make sure HTML5 validation properties can still be set on the input, required being the main one.

[liamcmitchell]

Work in progress here: #89

[PetrSnobelt]

Just note that there is wrapper around selectize.js
https://github.com/ggarek/react-selectize

[mtscout6]

@PetrSnobelt Did you so that library's announcement that it is no longer maintained? What are you looking for?

[PetrSnobelt]

I know, but it is only wrapper...
I'm looking for great autocomplete/suggestion component (like selectize) for react-bootstrap