import React from 'react'; import autobind from 'autobind-decorator'; import style from './style.scss'; import FontIcon from '../font_icon'; @autobind export default class Input extends React.Component { static propTypes = { className: React.PropTypes.string, disabled: React.PropTypes.bool, error: React.PropTypes.string, floating: React.PropTypes.bool, icon: React.PropTypes.string, label: React.PropTypes.string, multiline: React.PropTypes.bool, onBlur: React.PropTypes.func, onChange: React.PropTypes.func, onFocus: React.PropTypes.func, onKeyPress: React.PropTypes.func, required: React.PropTypes.bool, type: React.PropTypes.string, value: React.PropTypes.any }; static defaultProps = { className: '', disabled: false, floating: true, multiline: false, required: false, type: 'text' }; state = { value: this.props.value }; onChange (event) { this.setState({value: event.target.value}, () => { if (this.props.onChange) this.props.onChange(event, this); }); } renderInput () { let className = style.input; if (this.state.value && this.state.value.length > 0) className += ` ${style.filled}`; if (this.props.multiline) { return ( ); } else { return ( ); } } render () { let className = style.root; let labelClassName = style.label; if (this.props.error) className += ` ${style.errored}`; if (this.props.disabled) className += ` ${style.disabled}`; if (this.props.className) className += ` ${this.props.className}`; if (this.props.type === 'hidden') className += ` ${style.hidden}`; if (this.props.icon) className += ` ${style['with-icon']}`; if (!this.props.floating) labelClassName += ` ${style.fixed}`; return (