42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Field, FieldProps } from 'formik';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
id?: string;
|
||
|
|
type: string;
|
||
|
|
name: string;
|
||
|
|
label?: string;
|
||
|
|
description?: string;
|
||
|
|
validate?: (value: any) => undefined | string | Promise<any>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ id, type, name, label, description, validate }: Props) => (
|
||
|
|
<Field name={name} validate={validate}>
|
||
|
|
{
|
||
|
|
({ field, form: { errors, touched } }: FieldProps) => (
|
||
|
|
<React.Fragment>
|
||
|
|
{label &&
|
||
|
|
<label htmlFor={id} className={'input-dark-label'}>{label}</label>
|
||
|
|
}
|
||
|
|
<input
|
||
|
|
id={id}
|
||
|
|
type={type}
|
||
|
|
{...field}
|
||
|
|
className={classNames('input-dark', {
|
||
|
|
error: touched[field.name] && errors[field.name],
|
||
|
|
})}
|
||
|
|
/>
|
||
|
|
{touched[field.name] && errors[field.name] ?
|
||
|
|
<p className={'input-help'}>
|
||
|
|
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
|
||
|
|
</p>
|
||
|
|
:
|
||
|
|
description ? <p className={'input-help'}>{description}</p> : null
|
||
|
|
}
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
</Field>
|
||
|
|
);
|