39 lines
1.0 KiB
JavaScript
39 lines
1.0 KiB
JavaScript
import { h, Component } from 'preact';
|
|
|
|
import { omit } from 'lowline';
|
|
|
|
import FormElement from './FormElement.jsx';
|
|
|
|
export default class Input extends FormElement {
|
|
render({ type = 'text', disabled, placeholder }, state = {}) {
|
|
const classes = Object.assign({
|
|
'field-container': true,
|
|
empty: !state.value,
|
|
filled: state.value,
|
|
focus: state.focus,
|
|
invalid: state.error,
|
|
touched: state.touched,
|
|
valid: state.value && !state.error,
|
|
});
|
|
|
|
return (
|
|
<div class={classes}>
|
|
<label className="placeholder">{placeholder}</label>
|
|
<input
|
|
disabled={disabled}
|
|
onBlur={this.onBlur}
|
|
onChange={this.onChange}
|
|
onFocus={this.onFocus}
|
|
onInput={this.onChange}
|
|
placeholder={placeholder}
|
|
ref={(input) => { this.input = input; }}
|
|
type={type}
|
|
value={state.value}
|
|
/>
|
|
<label class="icon" />
|
|
{state.error && <label class="error">{state.error}</label>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|