Add basic Formik setup and example for update password
This commit is contained in:
parent
403a1e79fa
commit
d43b7ea5bc
7 changed files with 275 additions and 40 deletions
|
@ -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}
|
||||
|
|
41
resources/scripts/components/elements/Field.tsx
Normal file
41
resources/scripts/components/elements/Field.tsx
Normal 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>
|
||||
);
|
14
resources/scripts/components/elements/SpinnerOverlay.tsx
Normal file
14
resources/scripts/components/elements/SpinnerOverlay.tsx
Normal 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>
|
||||
);
|
Reference in a new issue