import React from 'react'; import style from './style'; import FontIcon from '../font_icon'; import Tooltip from '../tooltip'; 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, maxLength: React.PropTypes.number, 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' }; renderInput () { let className = style.input; if (this.props.value && this.props.value.length > 0) className += ` ${style.filled}`; if (this.props.multiline) { return ; } else { return ; } } renderUnderline () { const error = this.props.error ? {this.props.error} : null; let counter = null; if (this.props.maxLength) { const length = this.props.value ? this.props.value.length : 0; if (length > 0) counter = {length} / {this.props.maxLength}; } if (error || counter) return {error}{counter}; } 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 (