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

* fix(canvas): add placeholder for empty container * feat(canvas-render): optimize by review comment
opentiny · May 11, 2024 · c271054 · c271054
1 parent e9961aa
commit c271054
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 20 deletions.
diff --git a/packages/canvas/src/components/render/render.js b/packages/canvas/src/components/render/render.js
@@ -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,30 +631,24 @@ 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)
       )
     }
 
     return loopList?.length ? loopList.map(renderElement) : renderElement()
   })
 }
 
-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'

diff --git a/packages/design-core/public/mock/bundle.json b/packages/design-core/public/mock/bundle.json
@@ -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": {