Rename FormError -> FieldError

Author: CodeStix

src/elements/Field.tsx

@@ -8,7 +8,7 @@ export type ElementProps<C extends React.FunctionComponent<any> | keyof JSX.Intr
     ? JSX.IntrinsicElements[C]
     : never;
 
-export function Field<T extends object, K extends keyof T, C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements>(
+export function Field<T extends object, K extends keyof T, C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements = "input">(
     props: {
         form: FormState<T>;
         name: K;

src/elements/FormError.tsx renamed to src/elements/FieldError.tsx

@@ -1,9 +1,8 @@
 export * from "./FormInput";
 export * from "./FormSelect";
 export * from "./FormTextArea";
-export * from "./FormError";
+export * from "./Field";
+export * from "./FieldError";
 export * from "./serializer";
 
 export type StyledFix<T, Props = {}> = T | ((props: Props) => JSX.Element);
-
-export * from "./Field";

src/elements/index.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { useForm, Field, AnyListener, FieldError } from "typed-react-form";
 
 function Input(props: { value?: string; onChange?: (value: string) => void; style: React.CSSProperties }) {
-    return <input value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} style={props.style} />;
+    return <input style={{ padding: "0.3em", ...props.style }} value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} />;
 }
 
 function validate(_: any) {
@@ -29,7 +29,6 @@ export function FieldForm() {
 
     return (
         <form onSubmit={form.handleSubmit(submit)}>
-            <Field form={form} name="email" component="textarea" />
             <Field form={form} name="email" component="input" />
             <Field form={form} name="email" component={Input} style={{ margin: "2em" }} />
             <FieldError form={form} name="email" component={Error} />