From dc0ad5c0d1a2a5e185ef2fb9da6088000ec8b82e Mon Sep 17 00:00:00 2001 From: michael shanks Date: Fri, 6 Sep 2019 17:25:06 +0100 Subject: [PATCH] buildPropsHierarchy + test --- .../pagesParsing/buildPropsHierarchy.js | 63 +++++++++++++++++++ .../builder/tests/buildPropsHierarchy.spec.js | 49 +++++++++++++++ .../tests/searchComponentsProps.spec.js | 4 +- packages/builder/tests/testData.js | 43 ++++++++++++- 4 files changed, 156 insertions(+), 3 deletions(-) create mode 100644 packages/builder/src/userInterface/pagesParsing/buildPropsHierarchy.js create mode 100644 packages/builder/tests/buildPropsHierarchy.spec.js diff --git a/packages/builder/src/userInterface/pagesParsing/buildPropsHierarchy.js b/packages/builder/src/userInterface/pagesParsing/buildPropsHierarchy.js new file mode 100644 index 0000000000..fdb35216a7 --- /dev/null +++ b/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); + +} \ No newline at end of file diff --git a/packages/builder/tests/buildPropsHierarchy.spec.js b/packages/builder/tests/buildPropsHierarchy.spec.js new file mode 100644 index 0000000000..2bae380491 --- /dev/null +++ b/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 + }) + + + + }); + +}); \ No newline at end of file diff --git a/packages/builder/tests/searchComponentsProps.spec.js b/packages/builder/tests/searchComponentsProps.spec.js index 53cc548cf2..e020d74d04 100644 --- a/packages/builder/tests/searchComponentsProps.spec.js +++ b/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} ]); }); diff --git a/packages/builder/tests/testData.js b/packages/builder/tests/testData.js index baa481c922..26aebc2353 100644 --- a/packages/builder/tests/testData.js +++ b/packages/builder/tests/testData.js @@ -16,9 +16,24 @@ 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" + } + } + } + }, { inherits:"budibase-components/TextBox", name: "common/SmallTextbox", @@ -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" + } + } + ] + } } + ]) \ No newline at end of file