47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import {Control, Field, Input as I, Heading} from 'bloomer'
|
|
import {IconType} from 'react-icons'
|
|
|
|
export interface IInputProps {
|
|
name: string
|
|
type: 'text' | 'password' | 'hidden' | 'submit' | 'email'
|
|
value?: string
|
|
onChange?: (name: this['name'], value: string) => void
|
|
placeholder?: string
|
|
readOnly?: boolean
|
|
label: string
|
|
Icon?: IconType
|
|
required?: boolean
|
|
}
|
|
|
|
export class Input extends React.PureComponent<IInputProps> {
|
|
handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (this.props.onChange) {
|
|
this.props.onChange(this.props.name, e.target.value)
|
|
}
|
|
}
|
|
render() {
|
|
const {Icon} = this.props
|
|
return (
|
|
<Field>
|
|
<Heading>{this.props.label}</Heading>
|
|
<Control hasIcons>
|
|
<I
|
|
className='input'
|
|
name={this.props.name}
|
|
type={this.props.type}
|
|
value={this.props.value}
|
|
onChange={this.handleChange}
|
|
placeholder={this.props.placeholder}
|
|
readOnly={!!this.props.readOnly}
|
|
required={this.props.required}
|
|
/>
|
|
{Icon && <span className='icon is-left is-small'>
|
|
<Icon />
|
|
</span>}
|
|
</Control>
|
|
</Field>
|
|
)
|
|
}
|
|
}
|