misc_pterodactyl-panel/resources/scripts/components/elements/FormikFieldWrapper.tsx

35 lines
1.1 KiB
TypeScript
Raw Normal View History

import React from 'react';
import { Field, FieldProps } from 'formik';
import classNames from 'classnames';
import InputError from '@/components/elements/InputError';
2020-07-04 22:19:46 +00:00
import Label from '@/components/elements/Label';
import tw from 'twin.macro';
interface Props {
id?: string;
name: string;
children: React.ReactNode;
className?: string;
label?: string;
description?: string;
validate?: (value: any) => undefined | string | Promise<any>;
}
const FormikFieldWrapper = ({ id, name, label, className, description, validate, children }: Props) => (
<Field name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
2020-07-04 22:19:46 +00:00
{label && <Label htmlFor={id}>{label}</Label>}
{children}
<InputError errors={errors} touched={touched} name={field.name}>
2020-07-04 22:19:46 +00:00
{description || null}
</InputError>
</div>
)
}
</Field>
);
export default FormikFieldWrapper;