StarMC/Astral-nook
StarMC/Astral-nook
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Get formik used on login form

Browse source
This commit is contained in:
Dane Everitt 2019-12-15 16:41:20 -08:00
parent d9d4c0590c
commit f864b72e0a
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
3 changed files with 96 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

16
resources/scripts/components/elements/Field.tsx
View file

@ -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>
: