From 3bcef7f66822441e8d673efdfc66ef89a802bdc5 Mon Sep 17 00:00:00 2001 From: michael shanks Date: Thu, 15 Aug 2019 08:49:15 +0100 Subject: [PATCH] component inheritance working --- .../userInterface/ComponentsHierarchy.svelte | 62 ++++++++++++------- .../src/userInterface/NewComponent.svelte | 3 +- .../src/userInterface/PropsView.svelte | 2 +- .../userInterface/pagesParsing/createProps.js | 6 +- .../pagesParsing/searchComponents.js | 2 +- .../pagesParsing/validateProps.js | 9 ++- .../builder/tests/createDefaultProps.spec.js | 1 - .../builder/tests/getComponentInfo.spec.js | 4 -- .../tests/searchComponentsProps.spec.js | 4 +- 9 files changed, 54 insertions(+), 39 deletions(-) diff --git a/packages/builder/src/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/userInterface/ComponentsHierarchy.svelte index eb2681e253..54a3d08097 100644 --- a/packages/builder/src/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/userInterface/ComponentsHierarchy.svelte @@ -9,7 +9,8 @@ import { isEqual, trimCharsStart, trimChars, - join + join, + includes } from "lodash/fp"; import { pipe } from "../common/core"; @@ -19,6 +20,12 @@ import { store } from "../builderStore"; export let components = [] export let thisLevel = ""; +let pathPartsThisLevel; +let componentsThisLevel; +let subfolders; + +let expandedFolders = []; + const joinPath = join("/"); const normalizedName = name => pipe(name, [ @@ -53,43 +60,31 @@ const subFolder = (c) => { return ({ name: folderName, - isExpanded: false, + isExpanded: includes(folderName)(expandedFolders), path: thisLevel + "/" + folderName }); } -let pathPartsThisLevel = !thisLevel - ? 1 - : normalizedName(thisLevel).split("/").length + 1; - -let componentsThisLevel = - pipe(components, [ - filter(isOnThisLevel), - map(c => ({component:c, title:lastPartOfName(c)})), - sortBy("title") - ]); - -let subfolders = - pipe(components, [ - filter(notOnThisLevel), - sortBy("name"), - map(subFolder), - uniqWith((f1,f2) => f1.path === f2.path) - ]); - const subComponents = (subfolder) => pipe(components, [ filter(c => isInSubfolder(subfolder, c)) ]); const expandFolder = folder => { const expandedFolder = {...folder}; - expandedFolder.isExpanded = !expandedFolder.isExpanded; + if(expandedFolder.isExpanded) { + expandedFolder.isExpanded = false; + expandedFolders = filter(f => f.name !== folder.name)(expandedFolders); + } else { + expandedFolder.isExpanded = true; + expandedFolders.push(folder.name); + } const newFolders = [...subfolders]; newFolders.splice( newFolders.indexOf(folder), 1, expandedFolder); subfolders = newFolders; + } const isComponentSelected = (current,c) => @@ -99,6 +94,29 @@ const isComponentSelected = (current,c) => const isFolderSelected = (current, folder) => isInSubfolder(current, folder) + + +$: { + pathPartsThisLevel = !thisLevel + ? 1 + : normalizedName(thisLevel).split("/").length + 1; + + componentsThisLevel = + pipe(components, [ + filter(isOnThisLevel), + map(c => ({component:c, title:lastPartOfName(c)})), + sortBy("title") + ]); + + subfolders = + pipe(components, [ + filter(notOnThisLevel), + sortBy("name"), + map(subFolder), + uniqWith((f1,f2) => f1.path === f2.path) + ]); +} +
diff --git a/packages/builder/src/userInterface/NewComponent.svelte b/packages/builder/src/userInterface/NewComponent.svelte index 2d0af23280..b3e5d0ec38 100644 --- a/packages/builder/src/userInterface/NewComponent.svelte +++ b/packages/builder/src/userInterface/NewComponent.svelte @@ -48,7 +48,6 @@ const createComponent = () => { if(!validate()) return; - component.props._component = name; component.name = name; component.description = description; component.tags = pipe(tagsString, [ @@ -71,7 +70,7 @@ const onPropsValidate = result => { } const onPropsChanged = props => { - assign(component.props, [props]); + assign(component.props, props); } const validate = () => { diff --git a/packages/builder/src/userInterface/PropsView.svelte b/packages/builder/src/userInterface/PropsView.svelte index 6637a9e462..112ca0c8fc 100644 --- a/packages/builder/src/userInterface/PropsView.svelte +++ b/packages/builder/src/userInterface/PropsView.svelte @@ -59,7 +59,7 @@ let setProp = (name) => (ev, targetValue="value") => { newProps[name] = ev.target[targetValue]; - const finalProps = {_component:props._component}; + const finalProps = {}; for(let p of componentInfo.unsetProps) { if(!isEqual(newProps[p])(componentInfo.rootDefaultProps[p])) { diff --git a/packages/builder/src/userInterface/pagesParsing/createProps.js b/packages/builder/src/userInterface/pagesParsing/createProps.js index cbfa5caf21..cfa976658c 100644 --- a/packages/builder/src/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/userInterface/pagesParsing/createProps.js @@ -55,7 +55,7 @@ export const getNewComponentInfo = (allComponents, inherits) => { name:"", description:"", inherits, - props:{_component:inherits}, + props:{}, tags:parentcomponent.tags }; return getComponentInfo( @@ -74,9 +74,7 @@ export const getComponentInfo = (allComponents, cname, stack=[], subComponentPro const inheritedProps = []; if(stack.length > 0) { const targetComponent = stack[0]; - p.props._component = targetComponent.name; for(let prop in subComponentProps) { - if(prop === "_component") continue; const hasProp = pipe(targetComponent.props, [ keys, includes(prop)]); @@ -87,7 +85,7 @@ export const getComponentInfo = (allComponents, cname, stack=[], subComponentPro } const unsetProps = pipe(p.props, [ keys, - filter(k => k !== "_component" && !includes(k)(keys(subComponentProps))) + filter(k => !includes(k)(keys(subComponentProps))) ]); return ({ diff --git a/packages/builder/src/userInterface/pagesParsing/searchComponents.js b/packages/builder/src/userInterface/pagesParsing/searchComponents.js index 7ae88e695a..98c0601a25 100644 --- a/packages/builder/src/userInterface/pagesParsing/searchComponents.js +++ b/packages/builder/src/userInterface/pagesParsing/searchComponents.js @@ -54,7 +54,7 @@ export const getAncestorProps = (allComponents, name, found=[]) => { return getAncestorProps( allComponents, thisComponent.inherits, - [{_component:thisComponent.inherits, ...thisComponent.props}, + [{...thisComponent.props}, ...found]); } diff --git a/packages/builder/src/userInterface/pagesParsing/validateProps.js b/packages/builder/src/userInterface/pagesParsing/validateProps.js index 1b237b8baa..0c70eff278 100644 --- a/packages/builder/src/userInterface/pagesParsing/validateProps.js +++ b/packages/builder/src/userInterface/pagesParsing/validateProps.js @@ -9,7 +9,8 @@ import { flatten, flattenDeep, each, - indexOf + indexOf, + isUndefined } from "lodash/fp"; import { common } from "../../../../core/src"; @@ -103,7 +104,7 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) => const errors = []; - if(!props._component) { + if(isFinal && !props._component) { makeError(errors, "_component", stack)("Component is not set"); return errors; // this would break everything else anyway @@ -120,6 +121,10 @@ export const validateProps = (propsDefinition, props, stack=[], isFinal=true) => const error = makeError(errors, propDefName, stack); const propValue = props[propDefName]; + + // component declarations dont need to define al props. + if(!isFinal && isUndefined(propValue)) continue; + if(isFinal && propDef.required && propValue) { error(`Property ${propDefName} is required`); continue; diff --git a/packages/builder/tests/createDefaultProps.spec.js b/packages/builder/tests/createDefaultProps.spec.js index 4cf6182f4b..050e0b157e 100644 --- a/packages/builder/tests/createDefaultProps.spec.js +++ b/packages/builder/tests/createDefaultProps.spec.js @@ -162,7 +162,6 @@ describe("createDefaultProps", () => { }; const derivedFrom = { - _component:"root", fieldName: "surname" }; diff --git a/packages/builder/tests/getComponentInfo.spec.js b/packages/builder/tests/getComponentInfo.spec.js index a3fe240ba0..4ab0e2b0a8 100644 --- a/packages/builder/tests/getComponentInfo.spec.js +++ b/packages/builder/tests/getComponentInfo.spec.js @@ -18,7 +18,6 @@ describe("getComponentInfo", () => { expect(result.errors).toEqual([]); expect(result.fullProps).toEqual({ - _component: "budibase-components/TextBox", size: "", isPassword: false, placeholder: "", @@ -43,7 +42,6 @@ describe("getComponentInfo", () => { {size:"small"}); expect(result).toEqual({ - _component: "budibase-components/TextBox", size: "small", isPassword: false, placeholder: "", @@ -59,7 +57,6 @@ describe("getComponentInfo", () => { expect(result.errors).toEqual([]); expect(result.fullProps).toEqual({ - _component: "common/SmallTextbox", size: "small", isPassword: false, placeholder: "", @@ -74,7 +71,6 @@ describe("getComponentInfo", () => { expect(result.errors).toEqual([]); expect(result.fullProps).toEqual({ - _component: "common/PasswordBox", size: "small", isPassword: true, placeholder: "", diff --git a/packages/builder/tests/searchComponentsProps.spec.js b/packages/builder/tests/searchComponentsProps.spec.js index a2e508c7d7..53cc548cf2 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, - {_component: "budibase-components/TextBox", ...components[2].props}, - {_component: "common/SmallTextbox", ...components[3].props} + {...components[2].props}, + {...components[3].props} ]); });