Merge pull request #61 from Wavelop/release/0.3.4

Release/0.3.4

Author: Blundert

README.md

@@ -49,10 +49,11 @@
   - [👶 Prerequisites](#-prerequisites)
   - [💻 Installation](#-installation)
 - [🚲 Usage](#-usage)
-- [📚Documentation](#documentation)
+- [📚 Documentation](#-documentation)
+- [🥇 Add your values](#-add-your-values)
 - [🏘 Using existing components](#-using-existing-components)
   - [🧱 Build your custom components](#-build-your-custom-components)
-  - [🧱 Repeater components](#-repeater-components)
+  - [💫 Repeater components](#-repeater-components)
 - [✈️ Roadmap](#️-roadmap)
 - [🚑 Contributing](#-contributing)
 - [💰 License](#-license)
@@ -110,6 +111,7 @@ export default [
     helperText: "Write your email",
     tag: Input,
     type: "email",
+    defaultValue: "info@wavelop.com",
     validations: [
       {
         kind: required,
@@ -186,10 +188,29 @@ export default withDynamicForm()(Example);
 
 _For more examples, please refer to the [Example folder](https://github.com/Wavelop/dynamic-form/tree/master/example)_.
 
-## 📚Documentation
+## 📚 Documentation
 
 Check out our [documentation website](https://dynamic-form-wavelop.firebaseapp.com/).
 
+## 🥇 Add your values
+
+Use the `deafultValue` option to add an initial value to a field. 
+
+```javascript
+// config.js
+...
+fields: [
+  {
+    name: "field1_row2",
+    label: "field1_row2",
+    helperText: "field1_row2",
+    tag: "notRow",
+    defaultValue: "hello",
+  }
+]
+...
+```
+
 ## 🏘 Using existing components
 
 Core functionalities can be used with exinsing components, as with the one of the package `@wavelop/dynamic-form-base-components` or you can create your custom components to inject inside the configuration. 
@@ -198,13 +219,14 @@ Core functionalities can be used with exinsing components, as with the one of th
 
 WIP.
 
-### 🧱 Repeater components
+### 💫 Repeater components
 
 There are more way to create repeater components:
 
 1. Update your configuration dinamically adding new piece of configuration. To group state results you should use `rowOptions`, both on row container and field. 
 
-Example: 
+<details>
+ <summary>Example point 1</summary>
 
 In the configuration create the initial configuration:
 ```js
@@ -473,7 +495,11 @@ console.log(groupByRowsGroupIn);
 **/
 ```
 
-2. (WIP) Create a custom component that implement the repeater logic and it update the form values.
+</details>
+
+
+<br/>
+1. (WIP) Create a custom component that implement the repeater logic and it update the form values.
 
 <!-- ROADMAP -->
 ## ✈️ Roadmap

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynamic-form/wavelop",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Dynamic form from configuration with React",
   "author": "Wavelop",
   "license": "MIT",

packages/base-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavelop/dynamic-form-base-components",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Dynamic Form: basic components",
   "author": "Wavelop",
   "license": "MIT",

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wavelop/dynamic-form",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Dynamic Form: core functionalities",
   "author": "Wavelop",
   "license": "MIT",

packages/core/src/components/DynamicForm/index.jsx

@@ -26,6 +26,7 @@ const DynamicForm = forwardRef((props, ref) => {
   const helpers = useDynamicForm();
   const { idStateModel, idStateError } = helpers;
 
+  // Save config only at the beniginning
   useMemo(() => {
     !internal && saveConfig(idStateModel, id, config, internal);
   }, [config, internal]);

packages/core/src/components/DynamicForm/utils/dataCoverterHandler.js

@@ -1,12 +1,12 @@
-export const dataCoverterHandler = (data, config) => {
+export const dataCoverterHandler = (data, {dataManipulatorIn} = {}) => {
   let dataConverted = data;
 
   if (
-    config.dataManipulatorIn &&
-    typeof config.dataManipulatorIn === "function" &&
+    dataManipulatorIn &&
+    typeof dataManipulatorIn === "function" &&
     data !== ""
   ) {
-    dataConverted = config.dataManipulatorIn(data);
+    dataConverted = dataManipulatorIn(data);
   }
   return dataConverted;
 };

packages/core/src/components/DynamicForm/utils/dataCoverterHandler.test.js

@@ -0,0 +1,20 @@
+import { dataCoverterHandler } from "./dataCoverterHandler";
+
+
+describe("Components", () => {
+    describe("FactoryComponent", () => {
+        describe("utils", () => {
+            describe("dataCoverterHandler", () => {
+
+                it("given a data without a dataManipulatorIn, data is not converted", () => {
+                    expect(dataCoverterHandler("10")).toEqual("10");
+                });
+
+                it("given a data with a dataManipulatorIn, data is converted", () => {
+                    expect(dataCoverterHandler("10", {dataManipulatorIn: (data) => { return parseInt(data); }})).toEqual(10);
+                });
+
+            });
+        });
+    });
+});

packages/core/src/components/DynamicForm/utils/htmlToRender.js

@@ -37,10 +37,8 @@ export const htmlToRender = ({
               onChange={handleChange(dispatchModel, "UPDATE_MODEL")}
               config={configObj}
               data={
-                stateFromService && stateFromService[configObj.name]
-                  ? tag === "hidden"
-                    ? model[name]
-                    : stateFromService[configObj.name]
+                stateFromService !== undefined && stateFromService[configObj.name] !== null
+                  ? stateFromService[configObj.name]
                   : configObj.defaultValue !== undefined &&
                     configObj.defaultValue !== null
                   ? configObj.defaultValue

packages/core/src/components/FactoryComponent/utils/dataCoverterHandler.js

@@ -1,12 +1,12 @@
-export const dataCoverterHandler = (data, config) => {
+export const dataCoverterHandler = (data, {dataManipulatorIn} = {}) => {
   let dataConverted = data;
 
   if (
-    config.dataManipulatorIn &&
-    typeof config.dataManipulatorIn === "function" &&
+    dataManipulatorIn &&
+    typeof dataManipulatorIn === "function" &&
     data !== ""
   ) {
-    dataConverted = config.dataManipulatorIn(data);
+    dataConverted = dataManipulatorIn(data);
   }
   return dataConverted;
 };

packages/core/src/components/FactoryComponent/utils/dataCoverterHandler.test.js

@@ -0,0 +1,20 @@
+import { dataCoverterHandler } from "./dataCoverterHandler";
+
+
+describe("Components", () => {
+    describe("FactoryComponent", () => {
+        describe("utils", () => {
+            describe("dataCoverterHandler", () => {
+
+                it("given a data without a dataManipulatorIn, data is not converted", () => {
+                    expect(dataCoverterHandler("10")).toEqual("10");
+                });
+
+                it("given a data with a dataManipulatorIn, data is converted", () => {
+                    expect(dataCoverterHandler("10", {dataManipulatorIn: (data) => { return parseInt(data); }})).toEqual(10);
+                });
+
+            });
+        });
+    });
+});