feat: handle change method (#58)

* fix(examples): minor example code improvements * refactor(core): decoder refactor & fixes - simplifu decoder return type - allow nulls in instanceOf decoder - expose constructor from isntanceOf decoder * feat(core): replace 'instaceOf' decoder with 'date' * feat(core): enable type coercion for decoders * feat(core): decode change event function * feat(core): implement FieldHandle handleChange fn * feat(examples): simplify code using handleChange method * feat(doc): improve decoders jsdoc Co-authored-by: Mikołaj Klaman <mklaman@virtuslab.com>
VirtusLab-Open-Source · Jan 18, 2021 · a013729 · a013729
1 parent ee33dde
commit a013729
Show file tree

Hide file tree

Showing 46 changed files with 1,494 additions and 356 deletions.
diff --git a/examples/basic-forms/1-basic-form-naive/src/example.tsx b/examples/basic-forms/1-basic-form-naive/src/example.tsx
@@ -33,7 +33,7 @@ const Example: React.FC = () => {
         <input
           id={name.id}
           value={name.value}
-          onChange={e => name.setValue(e.target.value)}
+          onChange={name.handleChange}
           onBlur={name.handleBlur}
           autoComplete="off"
         />
@@ -45,9 +45,7 @@ const Example: React.FC = () => {
           type="number"
           id={age.id}
           value={age.value}
-          onChange={e =>
-            age.setValue(e.target.value === "" ? "" : +e.target.value)
-          }
+          onChange={age.handleChange}
           onBlur={age.handleBlur}
           autoComplete="off"
         />

diff --git a/examples/basic-forms/2-basic-form-improved/src/example.tsx b/examples/basic-forms/2-basic-form-improved/src/example.tsx
@@ -42,7 +42,7 @@ const NameField: React.FC = () => {
       <input
         id={field.id}
         value={field.value}
-        onChange={e => field.setValue(e.target.value)}
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         autoComplete="off"
       />
@@ -60,9 +60,7 @@ const AgeField: React.FC = () => {
         type="number"
         id={field.id}
         value={field.value}
-        onChange={e =>
-          field.setValue(e.target.value === "" ? "" : +e.target.value)
-        }
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         autoComplete="off"
       />

diff --git a/examples/basic-forms/3-basic-form-validation/src/example.tsx b/examples/basic-forms/3-basic-form-validation/src/example.tsx
@@ -61,7 +61,7 @@ const NameField: React.FC = () => {
       <input
         id={field.id}
         value={field.value}
-        onChange={e => field.setValue(e.target.value)}
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         autoComplete="off"
       />
@@ -80,9 +80,7 @@ const AgeField: React.FC = () => {
         type="number"
         id={field.id}
         value={field.value}
-        onChange={e =>
-          field.setValue(e.target.value === "" ? "" : +e.target.value)
-        }
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         autoComplete="off"
       />

diff --git a/examples/basic-forms/4-basic-form-mui/src/example.tsx b/examples/basic-forms/4-basic-form-mui/src/example.tsx
@@ -63,7 +63,7 @@ const NameField: React.FC = () => {
         label="Name:"
         id={field.id}
         value={field.value}
-        onChange={e => field.setValue(e.target.value)}
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         error={field.error != null}
         helperText={field.error}
@@ -83,9 +83,7 @@ const AgeField: React.FC = () => {
         label="Age:"
         id={field.id}
         value={field.value}
-        onChange={e =>
-          field.setValue(e.target.value === "" ? "" : +e.target.value)
-        }
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
         error={field.error != null}
         helperText={field.error}

diff --git a/examples/inputs/checkbox-group-input/src/example.tsx b/examples/inputs/checkbox-group-input/src/example.tsx
@@ -60,7 +60,7 @@ const ColorsCheckboxGroup: React.FC = () => {
             name={colors.id}
             checked={field.value}
             onBlur={field.handleBlur}
-            onChange={e => field.setValue(e.target.checked)}
+            onChange={field.handleChange}
           />
           <label htmlFor={field.id}>{labels[key]}</label>
         </div>

diff --git a/examples/inputs/field-array-input/src/example.tsx b/examples/inputs/field-array-input/src/example.tsx
@@ -43,7 +43,7 @@ const PromoCodesArrayInput: React.FC = () => {
           <input
             key={field.id}
             value={field.value}
-            onChange={e => field.setValue(e.target.value)}
+            onChange={field.handleChange}
             onBlur={field.handleBlur}
             autoComplete="off"
           />

diff --git a/examples/inputs/mui-date-picker-input/src/example.tsx b/examples/inputs/mui-date-picker-input/src/example.tsx
@@ -17,7 +17,7 @@ import ReactDOM from "react-dom";
 import "../index.css";
 
 const Schema = createFormSchema(fields => ({
-  date: fields.instanceOf(Date),
+  date: fields.date(),
 }));
 
 const Example: React.FC = () => {
@@ -44,7 +44,8 @@ const DatePickerInput: React.FC = () => {
         variant="inline"
         label="Choose your favourite date"
         value={dateField.value}
-        onChange={date => dateField.setValue(date as Date)}
+        onChange={dateField.setValue}
+        onBlur={dateField.handleBlur}
         fullWidth
         autoOk
       />

diff --git a/examples/inputs/mui-multi-select-input/src/example.tsx b/examples/inputs/mui-multi-select-input/src/example.tsx
@@ -56,10 +56,7 @@ const ColorsMultiSelectInput: React.FC = () => {
         <Select
           labelId={colors.id}
           value={colors.value}
-          onChange={e => {
-            // TODO: simplify when field.handleChange is implemented
-            colors.setValue(e.target.value as Array<"red" | "green" | "blue">);
-          }}
+          onChange={colors.handleChange}
           input={<Input />}
           renderValue={selected => (selected as string[]).join(", ")}
           multiple

diff --git a/examples/inputs/radio-group-input/src/example.tsx b/examples/inputs/radio-group-input/src/example.tsx
@@ -42,14 +42,15 @@ const ColorsRadioGroup: React.FC = () => {
       <legend>Choose your favourite color:</legend>
 
       {Object.values(colors.options).map(option => (
-        <div key={colors.id}>
+        <div key={option}>
           <input
             id={option}
             type="radio"
             name={colors.id}
+            value={option}
             checked={colors.value === option}
             onBlur={colors.handleBlur}
-            onChange={e => e.target.checked && colors.setValue(option)}
+            onChange={colors.handleChange}
           />
           <label htmlFor={option}>{labels[option]}</label>
         </div>

diff --git a/examples/inputs/select-input/src/example.tsx b/examples/inputs/select-input/src/example.tsx
@@ -44,13 +44,9 @@ const ColorSelectInput: React.FC = () => {
       <select
         id={field.id}
         value={field.value}
-        onChange={e => field.setValue(e.target.value as Color)}
+        onChange={field.handleChange}
         onBlur={field.handleBlur}
       >
-        {/* 
-         we need custom-typed Object.keys in order for type of `option`
-         to be inferred properly to "red" | "green" | "blue" in this example 
-        */}
         {Object.values(field.options).map(option => (
           <option key={option} value={option}>
             {labels[option]}

diff --git a/src/core/builders/create-form-schema.spec.ts b/src/core/builders/create-form-schema.spec.ts
@@ -12,7 +12,7 @@ describe("createFormSchema", () => {
       choice: fields.choice("A", "B", "C"),
       num: fields.number(),
       bool: fields.bool(),
-      instance: fields.instanceOf(Date),
+      date: fields.date(),
       arrayString: fields.array(fields.string()),
       arrayChoice: fields.array(fields.choice("a", "b", "c")),
       arrayArrayString: fields.array(fields.array(fields.string())),
@@ -35,7 +35,7 @@ describe("createFormSchema", () => {
         choice: "A" | "B" | "C";
         num: number | "";
         bool: boolean;
-        instance: Date | null;
+        date: Date | null;
         arrayString: string[];
         arrayChoice: Array<"a" | "b" | "c">;
         arrayArrayString: string[][];
@@ -59,7 +59,7 @@ describe("createFormSchema", () => {
         choice: fields.choice("A", "B", "C"),
         num: fields.number(),
         bool: fields.bool(),
-        instance: fields.instanceOf(Date),
+        date: fields.date(),
         arrayString: fields.array(fields.string()),
         arrayChoice: fields.array(fields.choice("a", "b", "c")),
         arrayArrayString: fields.array(fields.array(fields.string())),
@@ -86,7 +86,7 @@ describe("createFormSchema", () => {
         choice: "A" | "B" | "C";
         num: number | "";
         bool: boolean;
-        instance: Date | null;
+        date: Date | null;
         arrayString: string[];
         arrayChoice: Array<"a" | "b" | "c">;
         arrayArrayString: string[][];
@@ -115,7 +115,7 @@ describe("createFormSchema", () => {
       choice: fields.choice("A", "B", "C"),
       num: fields.number(),
       bool: fields.bool(),
-      instance: fields.instanceOf(Date),
+      date: fields.date(),
       arrayString: fields.array(fields.string()),
       arrayChoice: fields.array(fields.choice("a", "b", "c")),
       arrayArrayString: fields.array(fields.array(fields.string())),
@@ -136,7 +136,7 @@ describe("createFormSchema", () => {
       "choice",
       "num",
       "bool",
-      "instance",
+      "date",
       "arrayString",
       "arrayChoice",
       "arrayArrayString",
@@ -153,7 +153,7 @@ describe("createFormSchema", () => {
       choice: fields.choice("A", "B", "C"),
       num: fields.number(),
       bool: fields.bool(),
-      instance: fields.instanceOf(Date),
+      date: fields.date(),
       arrayString: fields.array(fields.string()),
       arrayChoice: fields.array(fields.choice("a", "b", "c")),
       arrayArrayString: fields.array(fields.array(fields.string())),
@@ -174,7 +174,7 @@ describe("createFormSchema", () => {
       choice: expect.objectContaining({ __path: "choice" }),
       num: expect.objectContaining({ __path: "num" }),
       bool: expect.objectContaining({ __path: "bool" }),
-      instance: expect.objectContaining({ __path: "instance" }),
+      date: expect.objectContaining({ __path: "date" }),
       arrayString: expect.objectContaining({
         __path: "arrayString",
         nth: expect.any(Function),
@@ -227,7 +227,7 @@ describe("createFormSchema", () => {
     expect(descriptor.__decoder.fieldType).toBe("string");
     expect(descriptor.__decoder.init()).toBe("");
     expect(descriptor.__decoder.decode("foo").ok).toBe(true);
-    expect(descriptor.__decoder.decode(42).ok).toBe(false);
+    expect(descriptor.__decoder.decode({}).ok).toBe(false);
   });
 
   it("creates field descriptor for choice field", () => {
@@ -263,7 +263,7 @@ describe("createFormSchema", () => {
     expect(descriptor.__decoder.fieldType).toBe("number");
     expect(descriptor.__decoder.init()).toBe("");
     expect(descriptor.__decoder.decode(666).ok).toBe(true);
-    expect(descriptor.__decoder.decode("42").ok).toBe(false);
+    expect(descriptor.__decoder.decode("foo").ok).toBe(false);
   });
 
   it("creates field descriptor for bool field", () => {
@@ -277,25 +277,21 @@ describe("createFormSchema", () => {
     expect(descriptor.__decoder.fieldType).toBe("bool");
     expect(descriptor.__decoder.init()).toBe(false);
     expect(descriptor.__decoder.decode(true).ok).toBe(true);
-    expect(descriptor.__decoder.decode("true").ok).toBe(false);
+    expect(descriptor.__decoder.decode("foo").ok).toBe(false);
   });
 
-  it("creates field descriptor for instanceOf field", () => {
-    class MyClass {
-      constructor(public foo: string) {}
-    }
-
+  it("creates field descriptor for date field", () => {
     const Schema = createFormSchema(fields => ({
-      theClass: fields.instanceOf(MyClass),
+      theDate: fields.date(),
     }));
 
-    const descriptor = impl(Schema.theClass);
+    const descriptor = impl(Schema.theDate);
 
-    expect(descriptor.__path).toBe("theClass");
-    expect(descriptor.__decoder.fieldType).toBe("class");
+    expect(descriptor.__path).toBe("theDate");
+    expect(descriptor.__decoder.fieldType).toBe("date");
     expect(descriptor.__decoder.init()).toBe(null);
-    expect(descriptor.__decoder.decode(new MyClass("42")).ok).toBe(true);
-    expect(descriptor.__decoder.decode({ foo: "42" }).ok).toBe(false);
+    expect(descriptor.__decoder.decode(new Date()).ok).toBe(true);
+    expect(descriptor.__decoder.decode(new Date("foo")).ok).toBe(false);
   });
 
   it("creates field descriptor for array field", () => {

diff --git a/src/core/builders/create-form-schema.ts b/src/core/builders/create-form-schema.ts
@@ -76,7 +76,7 @@ const createFieldDescriptor = (
     case "bool":
     case "number":
     case "string":
-    case "class":
+    case "date":
     case "choice":
       return rootDescriptor;
 

diff --git a/src/core/builders/create-form-validator.spec.ts b/src/core/builders/create-form-validator.spec.ts
@@ -46,7 +46,7 @@ describe("createFormValidator", () => {
       string: fields.string(),
       number: fields.number(),
       choice: fields.choice("A", "B", "C"),
-      instance: fields.instanceOf(Date),
+      date: fields.date(),
       arrayString: fields.array(fields.string()),
       arrayChoice: fields.array(fields.choice("a", "b", "c")),
       arrayArrayString: fields.array(fields.array(fields.string())),
@@ -178,18 +178,18 @@ describe("createFormValidator", () => {
     expect(validation).toEqual([{ field: Schema.choice, error: null }]);
   });
 
-  it("should return ERR for failing single-rule on instance field ", async () => {
+  it("should return ERR for failing single-rule on date field ", async () => {
     const { validate } = createFormValidator(Schema, validate => [
       validate({
-        field: Schema.instance,
+        field: Schema.date,
         rules: () => [x => (x === null ? "REQUIRED" : null)],
       }),
     ]);
     const getValue = () => null as any;
 
-    const validation = await validate({ fields: [Schema.instance], getValue });
+    const validation = await validate({ fields: [Schema.date], getValue });
 
-    expect(validation).toEqual([{ field: Schema.instance, error: "REQUIRED" }]);
+    expect(validation).toEqual([{ field: Schema.date, error: "REQUIRED" }]);
   });
 
   it("should return ERR for failing multiple-rule on string array field ", async () => {

diff --git a/src/core/decoders/array.spec.ts b/src/core/decoders/array.spec.ts
@@ -42,7 +42,7 @@ describe("array decoder", () => {
       const decoder = impl(array(string()));
       const value = [null, "foo", 42, "", []];
 
-      expect(decoder.decode(value)).toEqual({ ok: false, value });
+      expect(decoder.decode(value)).toEqual({ ok: false });
     });
   });
 
@@ -64,7 +64,7 @@ describe("array decoder", () => {
       const decoder = impl(array(string()));
       const value = [null, "foo", 42, "", []];
 
-      expect(decoder.decode(value)).toEqual({ ok: false, value });
+      expect(decoder.decode(value)).toEqual({ ok: false });
     });
   });
 
@@ -87,7 +87,7 @@ describe("array decoder", () => {
       const decoder = impl(array(string()));
       const value = [null, "foo", 42, "", []];
 
-      expect(decoder.decode(value)).toEqual({ ok: false, value });
+      expect(decoder.decode(value)).toEqual({ ok: false });
     });
   });
 });
diff --git a/src/core/decoders/array.ts b/src/core/decoders/array.ts
@@ -3,8 +3,8 @@ import { impl, opaque } from "../types/type-mapper-util";
 
 /**
  * Define array field with elements of type defined by provided `innerDecoder`.
- * Will check if value is array and if each element matches expected type at runtime.
  * Default initial value will be `[]`
+ * Accepts empty arrays and arrays containing elements which are valid in respect to rules imposed by `innerDecoder`.
  *
  * @example
  * ```
@@ -23,7 +23,7 @@ export const array = <E>(
     init: () => [],
 
     decode: value => {
-      if (Array.isArray(value)) {
+      if (value && Array.isArray(value)) {
         const decodeResults = value.map(impl(innerDecoder).decode);
         if (decodeResults.every(result => result.ok)) {
           return {
@@ -32,7 +32,7 @@ export const array = <E>(
           };
         }
       }
-      return { ok: false, value };
+      return { ok: false };
     },
   };