Skip to content

Instantly share code, notes, and snippets.

@JulienMelissas

JulienMelissas/Select.js

Forked from keeth/Select.js
Last active September 12, 2017 22:44
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JulienMelissas/f383d64243acba7c675935180ccc29f0 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JulienMelissas/f383d64243acba7c675935180ccc29f0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JulienMelissas revised this gist Sep 5, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -36,7 +36,7 @@ const Select = React.createClass({
    ref="select"
    onChange={this.changeValue}
    value={this.getValue()}
    />
    />
    {errorMessage ? <span>{errorMessage}</span> : null}
    </div>
    );
  2. JulienMelissas revised this gist Sep 5, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -37,7 +37,7 @@ const Select = React.createClass({
    onChange={this.changeValue}
    value={this.getValue()}
    />
    {<span className='error-message'>{errorMessage}</span>
    {errorMessage ? <span>{errorMessage}</span> : null}
    </div>
    );
    }
  3. JulienMelissas revised this gist Sep 5, 2016. 1 changed file with 5 additions and 9 deletions.
    14 changes: 5 additions & 9 deletions Select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,16 +2,15 @@ import React from 'react';
    import Formsy from 'formsy-react';
    import ReactSelect from 'react-select';

    import './Select.less';
    // Dont forget to import your styles somewhere

    const Select = React.createClass({

    mixins: [Formsy.Mixin],

    propTypes: {
    id: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    placeholder: React.PropTypes.string,
    multiple: React.PropTypes.bool,
    options: React.PropTypes.array.isRequired
    },
    @@ -31,17 +30,14 @@ const Select = React.createClass({

    return (
    <div className={'form-group' + (className ? ' ' + className : '') }>
    <label htmlFor={this.props.id}>{this.props.title}</label>
    <label htmlFor={this.props.name}>{this.props.title}</label>
    <ReactSelect
    {...this.props}
    ref="select"
    id={this.props.id}
    name={this.props.name}
    multi={this.props.multiple}
    onChange={this.changeValue}
    value={this.getValue()}
    options={this.props.options}
    />
    <span className='error-message'>{errorMessage}</span>
    {<span className='error-message'>{errorMessage}</span>
    </div>
    );
    }
  4. @keeth keeth revised this gist May 22, 2015. 1 changed file with 6 additions and 2 deletions.
    8 changes: 6 additions & 2 deletions Select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -17,7 +17,11 @@ const Select = React.createClass({
    },

    changeValue(value, selectedOptions) {
    this.setValue(selectedOptions);
    if (this.props.multiple) {
    this.setValue(selectedOptions.map(option => option.value));
    } else {
    this.setValue(value);
    }
    },

    render() {
    @@ -43,4 +47,4 @@ const Select = React.createClass({
    }
    });

    export default Select;
    export default Select;
  5. @keeth keeth created this gist May 21, 2015.
    46 changes: 46 additions & 0 deletions Select.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,46 @@
    import React from 'react';
    import Formsy from 'formsy-react';
    import ReactSelect from 'react-select';

    import './Select.less';

    const Select = React.createClass({

    mixins: [Formsy.Mixin],

    propTypes: {
    id: React.PropTypes.string.isRequired,
    title: React.PropTypes.string.isRequired,
    name: React.PropTypes.string.isRequired,
    multiple: React.PropTypes.bool,
    options: React.PropTypes.array.isRequired
    },

    changeValue(value, selectedOptions) {
    this.setValue(selectedOptions);
    },

    render() {
    var className = this.showRequired() ? 'required' : this.showError() ? 'error' : null;

    var errorMessage = this.getErrorMessage();

    return (
    <div className={'form-group' + (className ? ' ' + className : '') }>
    <label htmlFor={this.props.id}>{this.props.title}</label>
    <ReactSelect
    ref="select"
    id={this.props.id}
    name={this.props.name}
    multi={this.props.multiple}
    onChange={this.changeValue}
    value={this.getValue()}
    options={this.props.options}
    />
    <span className='error-message'>{errorMessage}</span>
    </div>
    );
    }
    });

    export default Select;