Add basic Formik setup and example for update password

This commit is contained in:
Dane Everitt 2019-06-22 23:25:38 -07:00
parent 403a1e79fa
commit d43b7ea5bc
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
7 changed files with 275 additions and 40 deletions

View file

@ -8,8 +8,8 @@ type Props = Readonly<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElemen
export default ({ title, borderColor, children, ...props }: Props) => (
<div {...props}>
{title && <h2 className={'text-neutral-300 mb-2 px-4'}>{title}</h2>}
<div className={classNames('bg-neutral-700 p-4 rounded shadow-lg', borderColor, {
{title && <h2 className={'text-neutral-300 mb-4 px-4'}>{title}</h2>}
<div className={classNames('bg-neutral-700 p-4 rounded shadow-lg relative', borderColor, {
'border-t-4': !!borderColor,
})}>
{children}

View file

@ -0,0 +1,41 @@
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>
);

View file

@ -0,0 +1,14 @@
import React from 'react';
import classNames from 'classnames';
import { CSSTransition } from 'react-transition-group';
export default ({ large, visible }: { visible: boolean; large?: boolean }) => (
<CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
<div
className={classNames('absolute pin-t pin-l flex items-center justify-center w-full h-full rounded')}
style={{ background: 'rgba(0, 0, 0, 0.45)' }}
>
<div className={classNames('spinner-circle spinner-white', { 'spinner-lg': large })}></div>
</div>
</CSSTransition>
);