Dol0res
/
tiny-engine
forked from opentiny/tiny-engine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(canvas): add placeholder for empty container #365 (#436) 

* fix(canvas): add placeholder for empty container

* feat(canvas-render): optimize by review comment
This commit is contained in:
chilingling 2024-05-11 00:56:56 -07:00 committed by GitHub
parent e9961aaba8
commit c271054870
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/canvas/src/components/render/render.js
View File

@ -598,6 +598,20 @@ const getLoopScope = ({ scope, index, item, loopArgs }) => {
}
}
const injectPlaceHolder = (componentName, children) => {
const isEmptyArr = Array.isArray(children) && !children.length
if (configure[componentName]?.isContainer && (!children || isEmptyArr)) {
return [
{
componentName: 'CanvasPlaceholder'
}
]
}
return children
}
const renderGroup = (children, scope, parent) => {
return children.map?.((schema) => {
const { componentName, children, loop, loopArgs, condition, id } = schema
@ -617,10 +631,14 @@ const renderGroup = (children, scope, parent) => {
return null
}
const renderChildren = injectPlaceHolder(componentName, children)
return h(
getComponent(componentName),
getBindProps(schema, mergeScope),
Array.isArray(children) ? renderSlot(children, mergeScope, schema) : parseData(children, mergeScope)
Array.isArray(renderChildren)
? renderSlot(renderChildren, mergeScope, schema)
: parseData(renderChildren, mergeScope)
)
}
@ -628,19 +646,9 @@ const renderGroup = (children, scope, parent) => {
})
}
const ContainerComponent = ['CanvasCol', 'CanvasRow', 'CanvasRowColContainer']
const getChildren = (schema, mergeScope) => {
const { componentName, children } = schema
let renderChildren = children
if (ContainerComponent.includes(componentName) && !renderChildren?.length) {
renderChildren = [
{
componentName: 'CanvasPlaceholder'
}
]
}
const renderChildren = injectPlaceHolder(componentName, children)
const component = getComponent(componentName)
const isNative = typeof component === 'string'

24
packages/design-core/public/mock/bundle.json
View File

@ -311,7 +311,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": false,
"isContainer": true,
"isModal": false,
"isPopper": false,
"nestingRule": {
@ -632,7 +632,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": false,
"isContainer": true,
"isModal": false,
"isPopper": false,
"nestingRule": {
@ -1089,7 +1089,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": false,
"isContainer": true,
"isModal": false,
"isPopper": false,
"nestingRule": {
@ -4139,6 +4139,9 @@
"contentMenu": {
"actions": []
}
},
"configure": {
"isContainer": true
}
},
{
@ -4497,6 +4500,9 @@
"contentMenu": {
"actions": []
}
},
"configure": {
"isContainer": true
}
},
{
@ -5979,7 +5985,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": true,
"isContainer": false,
"isModal": false,
"nestingRule": {
"childWhitelist": "",
@ -6394,7 +6400,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": true,
"isContainer": false,
"isModal": false,
"nestingRule": {
"childWhitelist": "",
@ -8183,7 +8189,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": true,
"isContainer": false,
"isModal": false,
"nestingRule": {
"childWhitelist": "",
@ -8950,7 +8956,9 @@
"cols": 12,
"widget": {
"component": "MetaCodeEditor",
"props": {}
"props": {
"language": "json"
}
},
"description": {
"zh_CN": ""
@ -8996,7 +9004,7 @@
"loop": true,
"condition": true,
"styles": true,
"isContainer": true,
"isContainer": false,
"clickCapture": false,
"isModal": false,
"nestingRule": {