/**
 * Created by steve on 15/09/15.
 */
import React from 'react';
var utils = require('../utils');
var classNames = require('classnames');
import ValidationMixin from '../ValidationMixin';

class MuiNumber extends React.Component {

    render() {
        let formClasses = classNames('form-group', { 'has-error' : this.props.valid === false }, this.props.form.htmlClass, { 'has-success' : this.props.valid === true && this.props.value != null});
        let labelClasses = classNames('control-label', this.props.form.labelHtmlClass);
        let fieldClasses = classNames('form-control', this.props.form.fieldHtmlClass);

        let help = this.props.form.description || '';
        if(!this.props.valid || this.props.form.description) {
            help = (
                <div className="help-block">
                    {this.props.error || this.props.form.description}
                </div>
            )
        }

        return (
            <div className={formClasses}>
                <label className={labelClasses}>{this.props.form.title}</label>
                <input type={this.props.form.type}
                       onChange={this.props.onChangeValidate}
                       step={this.props.form.step}
                       className={fieldClasses}
                       defaultValue={this.props.value}
                       id={this.props.form.key.slice(-1)[0]}
                       name={this.props.form.key.slice(-1)[0]}/>
                {help}
            </div>
        );
    }
}

export default ValidationMixin(MuiNumber);

/**
 * Created by steve on 15/09/15.
 */
import React from 'react';
var utils = require('../utils');
var classNames = require('classnames');
import ValidationMixin from '../ValidationMixin';
const TextField = require('material-ui/lib/text-field');

/**
 * There is no default number picker as part of Material-UI.
 * Instead, use a TextField and validate.
 */
class MuiNumber extends React.Component {

    constructor(props) {
        super(props);
        this.preValidationCheck = this.preValidationCheck.bind(this);
        this.state = {
            lastSuccessfulValue : this.props.value
        }
    }

    isNumeric(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

    /**
     * Prevent the field from accepting non-numeric characters.
     * @param e
     */
    preValidationCheck(e) {
        if (this.isNumeric(e.target.value)) {
            this.setState({
                lastSuccessfulValue: e.target.value
            });
            this.props.onChangeValidate(e);
        } else {
            this.refs.numberField.setValue(this.state.lastSuccessfulValue);
        }
    }

    render() {
        return (
            <TextField
                type={this.props.form.type}
                floatingLabelText={this.props.form.title}
                hintText={this.props.form.placeholder}
                errorText={this.props.error}
                onChange={this.preValidationCheck}
                defaultValue={this.state.lastSuccessfulValue}
                ref="numberField"/>
        );
    }
}

export default ValidationMixin(MuiNumber);

Add number input to mui
Add number input to mui
