fix: when designMode is not design, the hidden attribute does not take effect

liujuping · JackLian · commit 3dd0b6d0a862 · 2022-06-22T13:30:13.000+08:00
diff --git a/packages/renderer-core/src/hoc/leaf.tsx b/packages/renderer-core/src/hoc/leaf.tsx
@@ -367,7 +367,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
         return null;
       }
 
-      _leaf = _leaf || getNode(componentId);
+      _leaf = _leaf || getNode?.(componentId);
       if (_leaf && this.curEventLeaf && _leaf !== this.curEventLeaf) {
         this.disposeFunctions.forEach((fn) => fn());
         this.disposeFunctions = [];
@@ -513,7 +513,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {
     }
 
     get leaf(): Node | undefined {
-      return this.props._leaf || getNode(componentCacheId);
+      return this.props._leaf || getNode?.(componentCacheId);
     }
 
     render() {
diff --git a/packages/renderer-core/src/renderer/base.tsx b/packages/renderer-core/src/renderer/base.tsx
@@ -475,10 +475,6 @@ export default function baseRendererFactory(): IBaseRenderComponent {
         // DesignMode 为 design 情况下，需要进入 leaf Hoc，进行相关事件注册
         const displayInHook = engine?.props?.designMode === 'design';
 
-        if (schema.hidden && !displayInHook) {
-          return null;
-        }
-
         if (schema.loop != null) {
           const loop = parseData(schema.loop, scope);
           const useLoop = isUseLoop(loop, this._designModeIsDesign);
diff --git a/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap b/packages/renderer-core/tests/renderer/__snapshots__/renderer.test.tsx.snap
@@ -1121,3 +1121,20 @@ exports[`JSExpression base props 1`] = `
   />
 </div>
 `;
+
+exports[`designMode designMode:default 1`] = `
+<div
+  className="lce-page"
+  style={Object {}}
+>
+  <div
+    className="div-ut"
+    forwardRef={[Function]}
+  >
+    <div
+      className="div-ut-children"
+      forwardRef={[Function]}
+    />
+  </div>
+</div>
+`;
diff --git a/packages/renderer-core/tests/renderer/renderer.test.tsx b/packages/renderer-core/tests/renderer/renderer.test.tsx
@@ -7,7 +7,7 @@ import components from '../utils/components';
 
 const Renderer = rendererFactory();
 
-function getComp(schema, comp = null): Promise<{
+function getComp(schema, comp = null, others = {}): Promise<{
   component,
   inst,
 }> {
@@ -17,6 +17,7 @@ function getComp(schema, comp = null): Promise<{
       <Renderer
         schema={schema}
         components={components as any}
+        {...others}
       />);
 
     const componentInstance = component.root;
@@ -321,4 +322,82 @@ describe('JSExpression', () => {
       done();
     });
   })
+});
+
+describe("designMode", () => {
+  it('designMode:default', (done) => {
+    const schema = {
+      componentName: 'Page',
+      props: {},
+      children: [
+        {
+          componentName: "Div",
+          props: {
+            className: 'div-ut',
+            children: [
+              {
+                componentName: "Div",
+                visible: true,
+                props: {
+                  className: 'div-ut-children',
+                }
+              }
+            ]
+          }
+        }
+      ]
+    };
+
+    getComp(schema, components.Div).then(({ component, inst }) => {
+      expect(inst.length).toBe(2);
+      expect(inst[0].props.className).toBe('div-ut');
+      expect(inst[1].props.className).toBe('div-ut-children');
+      componentSnapshot = component;
+      done();
+    });
+  });
+  it('designMode:design', (done) => {
+    const schema = {
+      componentName: 'Page',
+      props: {},
+      children: [
+        {
+          componentName: "Div",
+          id: '0',
+          props: {
+            className: 'div-ut',
+            children: [
+              {
+                componentName: "Div",
+                id: 'hiddenId',
+                hidden: true,
+                props: {
+                  className: 'div-ut-children',
+                }
+              }
+            ]
+          }
+        }
+      ]
+    };
+
+    getComp(schema, components.Div, {
+      designMode: 'design',
+      getNode: (id) => {
+        if (id === 'hiddenId') {
+          return {
+            export() {
+              return {
+                hidden: true,
+              };
+            }
+          }
+        }
+      }
+    }).then(({ component, inst }) => {
+      expect(inst.length).toBe(1);
+      expect(inst[0].props.className).toBe('div-ut');
+      done();
+    });
+  });
 })

Original file line number	Diff line number	Diff line change
`@@ -367,7 +367,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {`
`367`	`367`	`return null;`
`368`	`368`	`}`
`369`	`369`
`370`		`- _leaf = _leaf \|\| getNode(componentId);`
	`370`	`+ _leaf = _leaf \|\| getNode?.(componentId);`
`371`	`371`	`if (_leaf && this.curEventLeaf && _leaf !== this.curEventLeaf) {`
`372`	`372`	`this.disposeFunctions.forEach((fn) => fn());`
`373`	`373`	`this.disposeFunctions = [];`
`@@ -513,7 +513,7 @@ export function leafWrapper(Comp: types.IBaseRenderComponent, {`
`513`	`513`	`}`
`514`	`514`
`515`	`515`	`get leaf(): Node \| undefined {`
`516`		`- return this.props._leaf \|\| getNode(componentCacheId);`
	`516`	`+ return this.props._leaf \|\| getNode?.(componentCacheId);`
`517`	`517`	`}`
`518`	`518`
`519`	`519`	`render() {`