Merge pull request #11 from PatrickSachs/2

core version 2

Author: Patrick Sachs

packages/bulma/src/TextArea/index.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import ValidationResult from "@react-formilicious/core/validators/ValidationResult";
-import { TextArea as CoreTextArea } from "@react-formilicious/core/inputs";
 
 export default class TextArea extends React.Component {
   static getDefaultValue() {
@@ -23,7 +22,7 @@ export default class TextArea extends React.Component {
       <div className="field">
         <label className="label">{name}</label>
         <div className="contol">
-          <CoreTextArea
+          <textarea
             className="textarea"
             onChange={e => onChange(e.target.value)}
             disabled={waiting}

packages/bulma/src/TextField/index.js

@@ -1,6 +1,5 @@
 import * as React from "react";
 import ValidationResult from "@react-formilicious/core/validators/ValidationResult";
-import { Input } from "@react-formilicious/core/inputs";
 
 export default class TextField extends React.Component {
   static getDefaultValue() {
@@ -27,7 +26,7 @@ export default class TextField extends React.Component {
       <div className="field">
         <label className="label">{name}</label>
         <div className="contol">
-          <Input
+          <input
             className="input"
             onChange={e => onChange(e.target.value)}
             type={this.getType(mode)}

packages/core/CHANGELOG.md

@@ -4,6 +4,14 @@ All notable changes to this library will be documented in this file.
 
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this library adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
+## 2.0.1
+
+* Objects can now be nested(e.g. the field key `key1.key2` will correctly traverse the object chain) @PatrickSachs.
+
+## 2.0.0
+
+* Removed async field return values for now @PatrickSachs.
+
 ## 1.0.3
 
 * Fixed a bug that would not update fields when changing form data after intialization @PatrickSachs.

packages/core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-formilicious/core",
-  "version": "1.0.3",
+  "version": "2.0.1",
   "description": "Easy to use, modular and simply delicious forms for React. 📝",
   "author": "PatrickSachs",
   "license": "MIT",

packages/core/package.json

@@ -0,0 +1,40 @@
+/**
+ * Finds a property in an object. Property can be nested by using ".".
+ * @param {string | string[]} path The path of the property.
+ * @param {any} obj The object to get the property in.
+ */
+const at = (path, obj) => {
+    if (path === "" || Array.isArray(path) && path.length === 0) {
+        return obj;
+    }
+    path = Array.isArray(path) ? path : path.split(".");
+    for (let i = 0; i < path.length; i++) {
+        obj = obj && obj[path[i]];
+    }
+    return obj;
+}
+
+/**
+ * Puts an object into an object. MUTATES THE OBJECT.
+ * @param {string | string[]} path The path of the property.
+ * @param {any} obj The object to put the property in.
+ */
+export const putAt = (path, obj, value) => {
+    if (path === "" || Array.isArray(path) && path.length === 0) {
+        return value;
+    }
+    const root = obj;
+    path = Array.isArray(path) ? path : path.split(".");
+    for (let i = 0; i < path.length - 1; i++) {
+        const newObj = obj[path[i]];
+        if (newObj === null || typeof newObj !== "object") {
+            newObj = {};
+            obj[path[i]] = newObj;
+        }
+        obj = newObj;
+    }
+    obj[path[path.length - 1]] = value;
+    return root;
+};
+
+export default at;

packages/core/src/helpers/at.js

@@ -0,0 +1,101 @@
+import at, { putAt } from "./at";
+
+const getObj = () => ({
+  key1: 1,
+  key2: 2,
+  key3: 3,
+  key4: {
+    key1: 4,
+    key2: {
+      key1: 5,
+      key2: 6
+    },
+    key3: 7
+  }
+});
+
+const run = () => {
+  describe(at.name, () => {
+    test("root", () => {
+      const input = "";
+      const obj = getObj();
+      const result = at(input, obj);
+      expect(result).toEqual(obj);
+    });
+
+    test("non existant", () => {
+      const input = "test";
+      const obj = getObj();
+      const result = at(input, obj);
+      expect(result).toEqual(undefined);
+    });
+
+    test("1 layer", () => {
+      const input = "key1";
+      const obj = getObj();
+      const result = at(input, obj);
+      expect(result).toEqual(1);
+    });
+
+    test("2 layer", () => {
+      const input = "key4.key1";
+      const obj = getObj();
+      const result = at(input, obj);
+      expect(result).toEqual(4);
+    });
+
+    test("3 layer", () => {
+      const input = "key4.key2.key2";
+      const obj = getObj();
+      const result = at(input, obj);
+      expect(result).toEqual(6);
+    });
+  });
+
+  describe(putAt.name, () => {
+    test("root", () => {
+      const input = "";
+      const obj = getObj();
+      const result = putAt(input, obj, "value");
+      expect(result).toEqual("value");
+    });
+
+    test("non existant", () => {
+      const input = "test";
+      const obj = getObj();
+      const result = putAt(input, obj, "value");
+      const shouldBe = getObj();
+      shouldBe.test = "value";
+      expect(result).toEqual(shouldBe);
+    });
+
+    test("1 layer", () => {
+      const input = "key1";
+      const obj = getObj();
+      const result = putAt(input, obj, "value");
+      const shouldBe = getObj();
+      shouldBe.key1 = "value";
+      expect(result).toEqual(shouldBe);
+    });
+
+    test("2 layer", () => {
+      const input = "key4.key1";
+      const obj = getObj();
+      const result = putAt(input, obj, "value");
+      const shouldBe = getObj();
+      shouldBe.key4.key1 = "value";
+      expect(result).toEqual(shouldBe);
+    });
+
+    test("3 layer", () => {
+      const input = "key4.key2.key2";
+      const obj = getObj();
+      const result = putAt(input, obj, "value");
+      const shouldBe = getObj();
+      shouldBe.key4.key2.key2 = "value";
+      expect(result).toEqual(shouldBe);
+    });
+  });
+};
+
+run();

packages/core/src/helpers/at.test.js

@@ -4,6 +4,7 @@ import makePromise from "./helpers/makePromise";
 import { sanitizeValidationResult, sanitizeOnSubmitResult } from "./logic/validators/sanitization";
 import ValidationResult from "./validators/ValidationResult";
 import { mustResolveWithin } from "./helpers/timeout";
+import at, { putAt } from "./helpers/at";
 import defaultButtons from "./defaultButtons";
 import { runValidator } from "./logic/validators/validation";
 import filterObject, { isNotUndefined } from "./helpers/filterObject";
@@ -120,7 +121,7 @@ export default class Form extends React.Component {
     if (field && field.value !== undefined) return field.value;
     const element = this.getElement(key);
     if (!element.ignoreData) {
-      const initialValue = this.props.data[key] || this.state.initialData[key];
+      const initialValue = at(key, this.props.data) || at(key, this.state.initialData);
       if (initialValue !== undefined) return initialValue;
     }
     return element.type.getDefaultValue();
@@ -143,9 +144,7 @@ export default class Form extends React.Component {
 
   getFlatDataStructure() {
     const { elements } = this.props;
-    return elements.reduce((acc, element) => {
-      return { ...acc, [element.key]: this.getFieldValue(element.key) };
-    }, {});
+    return elements.reduce((acc, element) => putAt(element.key, acc, this.getFieldValue(element.key)), {});
   }
 
   onChange() {
@@ -169,17 +168,17 @@ export default class Form extends React.Component {
     return true;
   }
 
-  async onChangeField(key, rawValue) {
+  async onChangeField(key, value) {
     if (this.state.waiting) {
-      console.warn("[react-formilicious]", "Tried to update field \"" + key + "\" with the following value while form was in waiting state.", rawValue);
+      console.warn("[react-formilicious]", "Tried to update field \"" + key + "\" with the following value while form was in waiting state.", value);
       return;
     }
     const { fieldTimeout = 3000 } = this.props;
     const element = this.getElement(key);
     const field = await this.putFieldValue(key, {
-      version: this.getFieldVersion(key) + 1
+      version: this.getFieldVersion(key) + 1,
+      value: value
     });
-    let value = field.value;
     try {
       await mustResolveWithin((async () => {
         // First set the field to pending, then let's start the work.
@@ -188,19 +187,12 @@ export default class Form extends React.Component {
           validated: "pending",
           message: null
         });
-        value = await makePromise(rawValue);
-        // Once the field value has been resolved, set it to the field, and then start validating.
-        this.fieldMustBeVersion(key, field.version);
-        await this.putFieldValue(key, {
-          value: value
-        });
         const validation = await runValidator(element.validator, value, this.getFlatDataStructure());
         // Once we have validated put the result into the field.
         this.fieldMustBeVersion(key, field.version);
         await this.putFieldValue(key, {
           validated: validation.validated,
-          message: validation.message,
-          value: value
+          message: validation.message
         });
       })(), fieldTimeout);
       // Fire the onChange event