1
0
mirror of https://github.com/oceanprotocol/market.git synced 2024-06-16 17:33:26 +02:00
market/src/components/atoms/Input/index.tsx

65 lines
1.4 KiB
TypeScript
Raw Normal View History

import React, { FormEvent, ChangeEvent, ReactElement } from 'react'
import InputElement from './InputElement'
import Help from './Help'
import Label from './Label'
import styles from './index.module.css'
export interface InputProps {
name: string
label?: string
placeholder?: string
required?: boolean
help?: string
tag?: string
type?: string
options?: string[]
additionalComponent?: ReactElement
value?: string
onChange?(
e:
| FormEvent<HTMLInputElement>
| ChangeEvent<HTMLInputElement>
| ChangeEvent<HTMLSelectElement>
| ChangeEvent<HTMLTextAreaElement>
): void
rows?: number
multiple?: boolean
pattern?: string
min?: string
disabled?: boolean
field?: {
name: string
value: string
onChange: () => void
onBlur: () => void
}
}
2020-07-10 12:09:43 +02:00
export default function Input(props: InputProps): ReactElement {
const {
required,
name,
label,
help,
additionalComponent,
field
} = props as Partial<InputProps>
return (
<div className={styles.field}>
<Label htmlFor={name} required={required}>
{label}
</Label>
<InputElement {...field} {...props} />
{help && <Help>{help}</Help>}
{additionalComponent && additionalComponent}
2020-07-10 12:09:43 +02:00
{/* TODO: Make field errors show up here */}
{/* {meta && meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null} */}
</div>
)
}