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

44 lines
1.6 KiB
TypeScript
Raw Normal View History

import React from 'react';
2020-02-08 23:23:08 +00:00
import { Field as FormikField, FieldProps } from 'formik';
import classNames from 'classnames';
2019-12-16 00:41:20 +00:00
interface OwnProps {
name: string;
label?: string;
description?: string;
validate?: (value: any) => undefined | string | Promise<any>;
}
2019-12-16 00:41:20 +00:00
type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
2020-02-08 23:23:08 +00:00
const Field = ({ id, name, label, description, validate, className, ...props }: Props) => (
<FormikField name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
<React.Fragment>
{label &&
<label htmlFor={id} className={'input-dark-label'}>{label}</label>
}
<input
id={id}
{...field}
2019-12-16 00:41:20 +00:00
{...props}
className={classNames((className || 'input-dark'), {
error: touched[field.name] && errors[field.name],
})}
/>
{touched[field.name] && errors[field.name] ?
2019-12-16 00:41:20 +00:00
<p className={'input-help error'}>
{(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>
)
}
2020-02-08 23:23:08 +00:00
</FormikField>
);
2020-02-08 23:23:08 +00:00
export default Field;