nux-components/src/components/TextInput/TextInput.js

Avid Media Central|UX plugin for MTV.fi

import * as React from 'react';
import * as PropTypes from 'prop-types';

export class TextInput extends React.Component {
    public static propTypes = {
        name: PropTypes.string.isRequired,
        label: PropTypes.string,
        onChange: PropTypes.func.isRequired,
        placeholder: PropTypes.string,
        themePrefix: PropTypes.string.isRequired,
        type: PropTypes.string,
        value: PropTypes.string,
        error: PropTypes.string
    };

    public render() {
        const {name, label, onChange, placeholder, type, themePrefix, value, error} = this.props;
        let wrapperClass = 'form-group';
        if (error && error.length > 0) {
            wrapperClass += ' ' + 'has-error';
        }

        return (
            <div className={`${wrapperClass} ${themePrefix}label`}>
                {label ? <span>{label}</span> : ''}
                <input type={type ? type : 'text'} name={name} className={`${themePrefix}textbox`}
                       placeholder={placeholder} value={value} onChange={onChange}/>
                {error && <div className="alert alert-danger">{error}</div>}
            </div>
        );
    }
}