Field errorClassName/dirtyClassName/errorStyle/dirtyStyle props

Author: CodeStix

src/Field.tsx

@@ -43,14 +43,47 @@ export type FieldProps<T extends object, K extends keyof T, C> = {
      * You can change the behaviour of the default deserializer using the `type` prop.
      */
     deserializer?: Deserializer<T[K]>;
+    /**
+     * The class to set when there is an error on this field.
+     */
+    errorClassName?: string;
+    /**
+     * The class to set when this field has been modified.
+     */
+    dirtyClassName?: string;
+    /**
+     * The style to set when where is an error on this field.
+     */
+    errorStyle?: React.CSSProperties;
+    /**
+     * The style to set when this field has been modified.
+     */
+    dirtyStyle?: React.CSSProperties;
 };
 
 export function Field<T extends object, K extends keyof T, C extends React.FunctionComponent<any> | keyof JSX.IntrinsicElements = "input">(
     props: FieldProps<T, K, C> &
         Omit<ElementProps<C>, "value" | "checked" | "onChange" | "field" | keyof FieldProps<T, K, C> | keyof SerializeProps> &
         SerializeProps<T[K]>
 ) {
-    const { form, as = "input", serializer, dateAsNumber, setNullOnUncheck, setUndefinedOnUncheck, deserializer, hideWhenNull, ...rest } = props;
+    const {
+        form,
+        as = "input",
+        serializer,
+        dateAsNumber,
+        setNullOnUncheck,
+        setUndefinedOnUncheck,
+        deserializer,
+        hideWhenNull,
+        disabled,
+        className,
+        style,
+        errorClassName,
+        errorStyle,
+        dirtyClassName,
+        dirtyStyle,
+        ...rest
+    } = props;
     const serializeProps = {
         dateAsNumber,
         setNullOnUncheck,
@@ -65,8 +98,9 @@ export function Field<T extends object, K extends keyof T, C extends React.Funct
         ...rest,
         checked: typeof v === "boolean" ? v : undefined,
         value: typeof v === "boolean" ? undefined : v,
-        disabled: field.state.isSubmitting || props.disabled,
-        className: (field.dirty ? "field-dirty " : "") + (field.error ? "field-error " : "") + props.className,
+        disabled: field.state.isSubmitting || disabled,
+        className: (field.dirty ? "field-dirty " : "") + (field.error ? "field-error " : "") + (className || ""),
+        style: { ...style, ...(field.dirty ? dirtyStyle : {}), ...(field.error ? errorStyle : {}) },
         field,
         onChange: (ev: any) => {
             let v = "target" in ev ? (["checkbox", "radio"].includes(props.type!) ? ev.target.checked : ev.target.value) : ev;

testing/src/Fieldform.tsx

@@ -1,64 +1,30 @@
 import React from "react";
-import { useForm, Field, AnyListener, FieldError, FormField, Listener } from "typed-react-form";
+import { useForm, Field } from "typed-react-form";
 
-function Input(props: { value?: string; onChange?: (value: string) => void; style: React.CSSProperties }) {
-    return <input style={{ padding: "0.3em", ...props.style }} value={props.value} onChange={(ev) => props.onChange?.(ev.target.value)} />;
-}
-
-function validate(_: any) {
-    return {
-        email: "yikes"
-    };
-}
-
-function Error(props: { children: React.ReactNode; field: FormField }) {
-    return (
-        <p style={{ color: "red" }}>
-            <strong>
-                {props.children} ({props.field.dirty + ""})
-            </strong>
-        </p>
-    );
+function CustomInput(props: { value: any; onChange: React.ChangeEventHandler; style?: React.CSSProperties; className?: string }) {
+    return <input value={props.value} onChange={props.onChange} style={{ ...props.style, padding: "0.3em" }} className={props.className} />;
 }
 
 export function FieldForm() {
-    const form = useForm({ email: "", firstName: "", gender: "male" as "male" | "female", enableEmail: true }, validate);
+    const form = useForm({ nice: "" }, (values) => ({ nice: values.nice.length < 5 ? "Must be longer" : undefined }));
 
     function submit() {
-        console.log("this is epic");
+        console.log(form.values);
+        form.setDefaultValues(form.values);
     }
 
     return (
         <form onSubmit={form.handleSubmit(submit)}>
-            <Field form={form} name="firstName" as="input" />
-            <Field form={form} name="enableEmail" type="checkbox" />
-            <Field form={form} name="email" style={{ margin: "2em" }} />
-            <Field form={form} name="email" as={Input} style={{ margin: "2em" }} />
-            <FieldError form={form} name="email" as={Error} />
-            <Field form={form} name="gender" as="select">
-                <option value="male">male</option>
-                <option value="female">female</option>
-            </Field>
-            <p>
-                value: <Listener form={form} name="firstName" />
-            </p>
-            <pre>
-                <AnyListener form={form} render={() => JSON.stringify(form.values, null, 2)} />
-            </pre>
-            <button type="submit">Submit</button>
-        </form>
-    );
-}
-
-function CustomInput(props: { value: any; onChange: React.ChangeEventHandler; style: React.CSSProperties }) {
-    return <input value={props.value} onChange={props.onChange} style={{ ...props.style, padding: "0.3em" }} />;
-}
-
-function Testform() {
-    const form = useForm({ nice: "" });
-    return (
-        <form>
-            <Field form={form} name="nice" as={CustomInput} style={{ color: "gray" }} />;
+            <Field
+                form={form}
+                name="nice"
+                as={CustomInput}
+                style={{ color: "gray", fontSize: "2em" }}
+                className="blink"
+                dirtyStyle={{ fontWeight: "bold" }}
+                errorStyle={{ color: "red" }}
+            />
+            <button type="submit">Go</button>
         </form>
     );
 }