Get formik used on login form
This commit is contained in:
parent
d9d4c0590c
commit
f864b72e0a
3 changed files with 96 additions and 77 deletions
|
@ -2,17 +2,16 @@ import React from 'react';
|
|||
import { Field, FieldProps } from 'formik';
|
||||
import classNames from 'classnames';
|
||||
|
||||
interface Props {
|
||||
id?: string;
|
||||
type: string;
|
||||
interface OwnProps {
|
||||
name: string;
|
||||
label?: string;
|
||||
description?: string;
|
||||
autoFocus?: boolean;
|
||||
validate?: (value: any) => undefined | string | Promise<any>;
|
||||
}
|
||||
|
||||
export default ({ id, type, name, label, description, autoFocus, validate }: Props) => (
|
||||
type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
|
||||
|
||||
export default ({ id, name, label, description, validate, className, ...props }: Props) => (
|
||||
<Field name={name} validate={validate}>
|
||||
{
|
||||
({ field, form: { errors, touched } }: FieldProps) => (
|
||||
|
@ -22,15 +21,14 @@ export default ({ id, type, name, label, description, autoFocus, validate }: Pro
|
|||
}
|
||||
<input
|
||||
id={id}
|
||||
type={type}
|
||||
{...field}
|
||||
autoFocus={autoFocus}
|
||||
className={classNames('input-dark', {
|
||||
{...props}
|
||||
className={classNames((className || 'input-dark'), {
|
||||
error: touched[field.name] && errors[field.name],
|
||||
})}
|
||||
/>
|
||||
{touched[field.name] && errors[field.name] ?
|
||||
<p className={'input-help'}>
|
||||
<p className={'input-help error'}>
|
||||
{(errors[field.name] as string).charAt(0).toUpperCase() + (errors[field.name] as string).slice(1)}
|
||||
</p>
|
||||
:
|
||||
|
|
Reference in a new issue