buildPropsHierarchy + test

packages/builder/src/userInterface/pagesParsing/buildPropsHierarchy.js

@@ -0,0 +1,63 @@
+import { 
+    getComponentInfo, createProps, getInstanceProps 
+} from "./createProps";
+import { cloneDeep } from "lodash/fp";
+
+export const buildPropsHierarchy = (allComponents, baseComponent) => {
+
+    const buildProps = (componentName, propsDefinition, derivedFromProps) => {
+
+        const {props} = createProps(componentName, propsDefinition, derivedFromProps);
+        props._component = componentName;
+        for(let propName in props) {
+            if(propName === "_component") continue;
+
+            const propDef = propsDefinition[propName];
+            if(propDef.type === "component") {
+
+                const subComponentProps = props[propName];
+                
+                if(!subComponentProps._component) continue;
+
+                const propComponentInfo = getComponentInfo(
+                    allComponents, subComponentProps._component);
+
+                const subComponentInstanceProps = getInstanceProps(
+                    propComponentInfo,
+                    subComponentProps
+                );
+
+                props[propName] = buildProps(
+                    propComponentInfo.rootComponent.name,
+                    propComponentInfo.propsDefinition,
+                    subComponentInstanceProps);
+
+            } else if(propDef.type === "array") {
+                const propsArray = props[propName];
+                const newPropsArray = [];
+                let index = 0;
+                for(let element of propsArray) {
+                    newPropsArray.push(
+                        buildProps(
+                            `${propName}[${index}]`,
+                            propDef.elementDefinition,
+                            element));
+                    index++;
+                }
+
+                props[propName] = newPropsArray;
+            }
+        }
+
+        return props;
+
+    }
+
+    const baseComponentInfo  = getComponentInfo(allComponents, baseComponent);
+
+    return buildProps(
+        baseComponentInfo.rootComponent.name,
+        baseComponentInfo.propsDefinition,
+        baseComponentInfo.fullProps);
+
+}

packages/builder/tests/buildPropsHierarchy.spec.js

@@ -0,0 +1,49 @@
+import { allComponents } from "./testData";
+import {
+    find
+} from "lodash/fp";
+import { buildPropsHierarchy } from "../src/userInterface/pagesParsing/buildPropsHierarchy";
+
+describe("buildPropsHierarchy", () => {
+
+
+    it("should build a complex component with arrays and components", () => {
+
+        const components = allComponents();
+
+        const allprops = buildPropsHierarchy(
+            components, "ButtonGroup");
+
+        expect(allprops._component).toEqual("budibase-components/div");
+
+        const primaryButtonProps = () => ({
+            _component: "budibase-components/Button",
+            css:"btn-primary",
+            content: {_component:""},
+            contentText: "",
+            size:""
+        });
+
+        const headerButton = primaryButtonProps();
+        expect(allprops.header).toEqual(headerButton);
+
+        const button1 = primaryButtonProps();
+        button1.contentText = "Button 1";
+        expect(allprops.children[0]).toEqual({
+            _component: "children[0]",
+            control: button1
+        });
+
+
+        const button2 = primaryButtonProps();
+        button2.contentText = "Button 2";
+        expect(allprops.children[1]).toEqual({
+            _component: "children[1]",
+            control: button2
+        })
+
+
+
+    });
+
+});

packages/builder/tests/searchComponentsProps.spec.js

@@ -92,8 +92,8 @@ describe("getAncestorProps", () => {
 
         expect(result).toEqual([
             components[0].props,
-            {...components[2].props},
-            {...components[3].props}
+            {...components[3].props},
+            {...components[4].props}
         ]);
 
     });

packages/builder/tests/testData.js

@@ -16,7 +16,22 @@ export const allComponents = () => ([
         props: {
             size: {type:"options", options:["small", "medium", "large"]},
             css: "string",
-            content: "component"
+            content: "component",
+            contentText: "string"
+        } 
+    },
+    {
+        name: "budibase-components/div",
+        tags: ["input"],
+        props: {
+            width: "number",
+            header : "component",
+            children: {
+                type:"array",
+                elementDefinition: {
+                    control: "component"
+                }
+            } 
         }
     },
     {
@@ -40,5 +55,31 @@ export const allComponents = () => ([
         props: {
             css:"btn-primary"
         }
+    },
+    {
+        inherits:"budibase-components/div",
+        name:"ButtonGroup",
+        props: {
+
+            width: 100,
+            header: {
+                _component: "PrimaryButton"
+            },
+            children: [
+                {
+                    control: {
+                        _component: "PrimaryButton",
+                        contentText: "Button 1"
                     }
+                },
+                {
+                    control: {
+                        _component: "PrimaryButton",
+                        contentText: "Button 2"
+                    }
+                }
+            ]
+        }
+    }
+
     ])