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

86 lines
3.4 KiB
TypeScript
Raw Normal View History

2020-02-08 23:23:08 +00:00
import { Field as FormikField, FieldProps } from 'formik';
2021-10-01 17:07:48 +00:00
import React, { forwardRef } from 'react';
import tw, { styled } from 'twin.macro';
2021-09-18 01:56:44 +00:00
import Input, { Textarea } from '@/components/elements/Input';
2021-07-25 22:41:54 +00:00
import InputError from '@/components/elements/InputError';
2021-10-01 17:07:48 +00:00
import Label from '@/components/elements/Label';
2019-12-16 00:41:20 +00:00
interface OwnProps {
name: string;
light?: boolean;
label?: string;
description?: string;
validate?: (value: any) => undefined | string | Promise<any>;
2021-10-01 17:07:48 +00:00
className?: string;
}
2019-12-16 00:41:20 +00:00
type Props = OwnProps & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'name'>;
2021-10-01 17:07:48 +00:00
const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, label, description, validate, className, ...props }, ref) => (
2020-07-04 22:19:46 +00:00
<FormikField innerRef={ref} name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
2021-10-01 17:07:48 +00:00
<div className={className}>
{label &&
<div css={tw`flex flex-row`} title={description}>
<Label htmlFor={id} isLight={light}>{label}</Label>
{/*{description && <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" css={tw`h-4 w-4 ml-1 cursor-pointer`}><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>}*/}
</div>
}
<Input
id={id}
{...field}
2019-12-16 00:41:20 +00:00
{...props}
isLight={light}
hasError={!!(touched[field.name] && errors[field.name])}
/>
2021-07-25 22:41:54 +00:00
<InputError errors={errors} touched={touched} name={field.name}>
{description || null}
</InputError>
</div>
)
}
2020-02-08 23:23:08 +00:00
</FormikField>
2020-07-04 22:19:46 +00:00
));
Field.displayName = 'Field';
2020-02-08 23:23:08 +00:00
2021-10-01 17:07:48 +00:00
export default Field;
type TextareaProps = OwnProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'name'>;
2021-09-18 01:56:44 +00:00
2021-10-01 17:07:48 +00:00
export const TextareaField = forwardRef<HTMLTextAreaElement, TextareaProps>(
function TextareaField ({ id, name, light = false, label, description, validate, className, ...props }, ref) {
2021-09-18 01:56:44 +00:00
return (
<FormikField innerRef={ref} name={name} validate={validate}>
{
({ field, form: { errors, touched } }: FieldProps) => (
2021-10-01 17:07:48 +00:00
<div className={className}>
2021-09-18 01:56:44 +00:00
{label && <Label htmlFor={id} isLight={light}>{label}</Label>}
<Textarea
id={id}
{...field}
{...props}
isLight={light}
hasError={!!(touched[field.name] && errors[field.name])}
/>
<InputError errors={errors} touched={touched} name={field.name}>
{description || null}
</InputError>
</div>
)
}
</FormikField>
);
}
);
TextareaField.displayName = 'TextareaField';
2021-10-01 17:07:48 +00:00
export const FieldRow = styled.div`
2021-10-30 19:12:02 +00:00
${tw`grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-6 mb-6`};
2021-10-01 17:07:48 +00:00
& > div {
2021-10-30 19:12:02 +00:00
${tw`sm:w-full sm:flex sm:flex-col`};
2021-10-01 17:07:48 +00:00
}
`;