Group component added.

Author: DovydasNavickas

src/app.tsx

@@ -60,8 +60,8 @@ const Test = () => {
         return () => store.removeListener(listener);
     }, []);
 
-    // const [groupId] = useState(undefined);
-    const [groupId] = useState("person");
+    const [groupId] = useState(undefined);
+    // const [groupId] = useState("person");
 
     const groupContext: GroupContextObject = {
         store: store,

src/components/group-field.tsx

@@ -0,0 +1,23 @@
+import React, { useContext } from "react";
+import { SEPARATOR } from "../stores/constants";
+import { GroupContext, GroupContextObject } from "../contexts/group-context";
+
+interface Props {
+    name: string;
+    children: React.ReactNode;
+}
+
+export const Group = (props: Props) => {
+    const groupContext = useContext(GroupContext);
+
+    let groupId = props.name;
+    if (groupContext.groupId != null) {
+        groupId = `${groupContext.groupId}${SEPARATOR}${props.name}`;
+    }
+
+    const groupObject: GroupContextObject = {
+        ...groupContext,
+        groupId: groupId
+    };
+    return <GroupContext.Provider value={groupObject}>{props.children}</GroupContext.Provider>;
+};

src/components/group.tsx

@@ -0,0 +1 @@
+export const SEPARATOR = ".";

src/stores/constants.ts

@@ -1,8 +1,7 @@
-import { TinyEmitter, Callback } from "../helpers/emitter";
 import { produce } from "immer";
+import { TinyEmitter, Callback } from "../helpers/emitter";
 import { FieldValues } from "../contracts/field-contracts";
-
-export const SEPARATOR = ".";
+import { SEPARATOR } from "./constants";
 
 interface Status {
     focused: boolean;
@@ -264,7 +263,20 @@ export class GroupStoreMutable extends TinyEmitter<Callback> {
                     continue;
                 }
 
-                result[key] = field.currentValue;
+                const splitKey = key.split(SEPARATOR);
+
+                const paths = splitKey.slice(0, splitKey.length - 1);
+
+                // tslint:disable-next-line no-any
+                let current: any = result;
+                for (const path of paths) {
+                    if (current[path] == null) {
+                        current[path] = {};
+                    }
+                    current = current[path];
+                }
+
+                current[field.name] = field.currentValue;
             }
         }
         return result;

src/stores/group-store.ts

@@ -3,6 +3,7 @@ import { TextField } from "../components/text-field";
 import { ResetButton } from "../components/reset";
 import { Permanent } from "../components/permanent";
 import { GroupContext } from "../contexts/group-context";
+import { Group } from "../components/group";
 
 export const Test1 = () => {
     const [show, setShow] = useState(true);
@@ -37,14 +38,19 @@ export const Test1 = () => {
         <>
             <div>
                 <button onClick={() => setShow(!show)}>{!show ? "Mount" : "Unmount"}</button>
-                <label>
-                    First name
-                    <TextField name={firstNameId} initialValue="John" />
-                </label>
-                {lastName}
-                {/* ---------
-                {lastNameDuplicate} */}
-                {lastNamePermanent}
+                <Group name="person">
+                    <label>
+                        First name
+                        <TextField name={firstNameId} initialValue="John" />
+                    </label>
+                    {lastName}
+                    {lastNamePermanent}
+                </Group>
+                <Group name="meta">
+                    <TextField name="area" initialValue="development" />
+                    <TextField name="priority" initialValue="2" />
+                </Group>
+
                 <div>
                     <ResetButton>Reset</ResetButton>
                 </div>