From f6b98d987fe2434036cb08aae2399bd598c10100 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Tue, 2 Jun 2020 23:26:06 +0100 Subject: [PATCH 1/3] spike - list that accepts children --- .../userInterface/temporaryPanelStructure.js | 11 +++ packages/client/src/render/attachChildren.js | 30 +++++--- .../src/render/prepareRenderComponent.js | 4 +- packages/standard-components/components.json | 15 ++++ packages/standard-components/src/List.svelte | 74 +++++++++++++++++++ packages/standard-components/src/index.js | 1 + 6 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 packages/standard-components/src/List.svelte diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 55036b2da5..1c809e0aab 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -318,6 +318,17 @@ export default { }, children: [], }, + { + name: "Another List", + _component: "@budibase/standard-components/list", + description: "Shiny list", + icon: "ri-file-list-fill", + properties: { + design: { ...all }, + settings: [{ label: "Model", key: "model", control: ModelSelect }], + }, + children: [], + }, { name: "Map", _component: "@budibase/standard-components/datamap", diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js index db3c3a212c..3e4ebef103 100644 --- a/packages/client/src/render/attachChildren.js +++ b/packages/client/src/render/attachChildren.js @@ -14,6 +14,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => { const anchor = options && options.anchor ? options.anchor : null const force = options ? options.force : false const hydrate = options ? options.hydrate : true + const context = options && options.context if (!force && treeNode.children.length > 0) return treeNode.children @@ -37,16 +38,27 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => { const ComponentConstructor = componentLibraries[libName][componentName] - const childNodesThisIteration = prepareRenderComponent({ - props: childProps, - parentNode: treeNode, - ComponentConstructor, - htmlElement, - anchor, - }) + const prepareNodes = ctx => { + const childNodesThisIteration = prepareRenderComponent({ + props: childProps, + parentNode: treeNode, + ComponentConstructor, + htmlElement, + anchor, + context: ctx, + }) - for (let childNode of childNodesThisIteration) { - childNodes.push(childNode) + for (let childNode of childNodesThisIteration) { + childNodes.push(childNode) + } + } + + if (Array.isArray(context)) { + for (let singleCtx of context) { + prepareNodes(singleCtx) + } + } else { + prepareNodes(context) } } diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js index 6e8ae123d0..c8b9c5d14c 100644 --- a/packages/client/src/render/prepareRenderComponent.js +++ b/packages/client/src/render/prepareRenderComponent.js @@ -7,11 +7,12 @@ export const prepareRenderComponent = ({ anchor, props, parentNode, + context, }) => { const parentContext = (parentNode && parentNode.context) || {} let nodesToRender = [] - const createNodeAndRender = context => { + const createNodeAndRender = () => { let componentContext = parentContext if (context) { componentContext = { ...context } @@ -48,6 +49,7 @@ export const prepareRenderComponent = ({ if (typeof propValue === "string") { storeBoundProps[prop] = mustache.render(propValue, { state, + context: componentContext, }) } } diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index f9c800489e..574cbd5446 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -216,6 +216,21 @@ } } }, + "list": { + "description": "A configurable data list that attaches to your backend models.", + "data": true, + "props": { + "model": "models", + "layout": { + "type": "options", + "default": "list", + "options": [ + "list", + "grid" + ] + } + } + }, "datamap": { "description": "shiny chart", "data": true, diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte new file mode 100644 index 0000000000..8ab738fae8 --- /dev/null +++ b/packages/standard-components/src/List.svelte @@ -0,0 +1,74 @@ + + +
+
+
+
+ + diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index a201c1afae..2284ab1fcb 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -18,5 +18,6 @@ export { default as datatable } from "./DataTable.svelte" export { default as dataform } from "./DataForm.svelte" export { default as datachart } from "./DataChart.svelte" export { default as datalist } from "./DataList.svelte" +export { default as list } from "./List.svelte" export { default as datasearch } from "./DataSearch.svelte" export { default as datamap } from "./DataMap.svelte" From 4e01e9c091ff869a129979f2a6304ec8009080a6 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Wed, 3 Jun 2020 09:25:56 +0100 Subject: [PATCH 2/3] replace DataList with new List --- .../src/components/userInterface/temporaryPanelStructure.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 1c809e0aab..ca2a001a8b 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -307,7 +307,7 @@ export default { }, children: [], }, - { + /*{ name: "List", _component: "@budibase/standard-components/datalist", description: "Shiny list", @@ -317,9 +317,9 @@ export default { settings: [{ label: "Model", key: "model", control: ModelSelect }], }, children: [], - }, + },*/ { - name: "Another List", + name: "List", _component: "@budibase/standard-components/list", description: "Shiny list", icon: "ri-file-list-fill", From bd3a7b41f78dc06676a3550e6e1cf84610690343 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 4 Jun 2020 11:56:42 +0100 Subject: [PATCH 3/3] "DataList" = old list, "List" = new list --- .../src/components/userInterface/temporaryPanelStructure.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index ca2a001a8b..43180528fe 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -307,8 +307,8 @@ export default { }, children: [], }, - /*{ - name: "List", + { + name: "Data List", _component: "@budibase/standard-components/datalist", description: "Shiny list", icon: "ri-file-list-fill", @@ -317,7 +317,7 @@ export default { settings: [{ label: "Model", key: "model", control: ModelSelect }], }, children: [], - },*/ + }, { name: "List", _component: "@budibase/standard-components/list",