fix(client): Skeleton to get parent blocks properties and styles.

lowdefy · Jun 24, 2022 · 0022fc0 · 0022fc0
1 parent 72b2584
commit 0022fc0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/packages/client/src/block/CategorySwitch.js b/packages/client/src/block/CategorySwitch.js
@@ -33,6 +33,8 @@ const CategorySwitch = ({ block, Blocks, context, loading, lowdefy }) => {
     return (
       <LoadingBlock
         blockLayout={block.eval.layout}
+        blockProperties={block.eval.properties}
+        blockStyle={block.eval.style}
         context={context}
         lowdefy={lowdefy}
         skeleton={block.eval.skeleton}

diff --git a/packages/client/src/block/LoadingBlock.js b/packages/client/src/block/LoadingBlock.js
@@ -33,7 +33,15 @@ const blockMethods = {
   unshiftItem: () => {},
 };
 
-const LoadingBlock = ({ blockLayout, blockId, context, lowdefy, skeleton }) => {
+const LoadingBlock = ({
+  blockId,
+  blockLayout,
+  blockProperties,
+  blockStyle,
+  context,
+  lowdefy,
+  skeleton,
+}) => {
   let Component = lowdefy._internal.blockComponents[skeleton.type];
   useEffect(() => {
     if (!lowdefy._internal.blockComponents[skeleton.type]) {
@@ -47,15 +55,14 @@ const LoadingBlock = ({ blockLayout, blockId, context, lowdefy, skeleton }) => {
     // default to box when a skeleton block is not found - should be a basic or loader block.
     Component = lowdefy._internal.blockComponents.Box;
   }
-  const layout = skeleton.layout || blockLayout || {};
+
   switch (Component.meta.category) {
     case 'list':
       return (
         <LoadingList
           blockId={blockId}
           Component={Component}
           context={context}
-          layout={layout}
           lowdefy={lowdefy}
           skeleton={skeleton}
         />
@@ -64,20 +71,22 @@ const LoadingBlock = ({ blockLayout, blockId, context, lowdefy, skeleton }) => {
       return (
         <LoadingContainer
           blockId={blockId}
+          blockLayout={blockLayout}
+          blockProperties={blockProperties}
+          blockStyle={blockStyle}
           Component={Component}
           context={context}
-          layout={layout}
           lowdefy={lowdefy}
           skeleton={skeleton}
         />
       );
     default:
       return (
         <BlockLayout
-          blockStyle={skeleton.style}
+          blockStyle={skeleton.style ?? blockStyle}
           highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
           id={`s-bl-${blockId}-${skeleton.id}`}
-          layout={layout}
+          layout={skeleton.layout ?? blockLayout}
           makeCssClass={makeCssClass}
         >
           <Component
@@ -88,7 +97,7 @@ const LoadingBlock = ({ blockLayout, blockId, context, lowdefy, skeleton }) => {
             menus={lowdefy.menus}
             methods={blockMethods}
             pageId={lowdefy.pageId}
-            properties={skeleton.properties}
+            properties={skeleton.properties ?? blockProperties}
           />
         </BlockLayout>
       );

diff --git a/packages/client/src/block/LoadingContainer.js b/packages/client/src/block/LoadingContainer.js
@@ -20,7 +20,16 @@ import { makeCssClass } from '@lowdefy/block-utils';
 
 import LoadingBlock from './LoadingBlock.js';
 
-const LoadingContainer = ({ blockId, Component, context, layout, lowdefy, skeleton }) => {
+const LoadingContainer = ({
+  blockId,
+  blockLayout,
+  blockProperties,
+  blockStyle,
+  Component,
+  context,
+  lowdefy,
+  skeleton,
+}) => {
   const content = {};
   // eslint-disable-next-line prefer-destructuring
   Object.keys(skeleton.areas).forEach((areaKey, i) => {
@@ -29,7 +38,7 @@ const LoadingContainer = ({ blockId, Component, context, layout, lowdefy, skelet
         area={layoutParamsToArea({
           area: skeleton.areas[areaKey] || {},
           areaKey,
-          layout,
+          layout: blockLayout ?? {},
         })}
         areaStyle={[areaStyle, skeleton.areas[areaKey] && skeleton.areas[areaKey].style]}
         highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
@@ -51,10 +60,10 @@ const LoadingContainer = ({ blockId, Component, context, layout, lowdefy, skelet
   });
   return (
     <BlockLayout
-      blockStyle={skeleton.style}
+      blockStyle={skeleton.style ?? blockStyle}
       highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
       id={`s-bl-${blockId}-${skeleton.id}`}
-      layout={layout}
+      layout={blockLayout ?? {}}
       makeCssClass={makeCssClass}
     >
       <Component
@@ -66,7 +75,7 @@ const LoadingContainer = ({ blockId, Component, context, layout, lowdefy, skelet
         menus={lowdefy.menus}
         methods={{ makeCssClass }}
         pageId={lowdefy.pageId}
-        properties={skeleton.properties}
+        properties={skeleton.properties ?? blockProperties}
       />
     </BlockLayout>
   );

diff --git a/packages/client/src/block/LoadingList.js b/packages/client/src/block/LoadingList.js
@@ -20,17 +20,26 @@ import { makeCssClass } from '@lowdefy/block-utils';
 
 import LoadingBlock from './LoadingBlock.js';
 
-const LoadingList = ({ blockId, Component, context, layout, lowdefy, skeleton }) => {
+const LoadingList = ({
+  blockId,
+  blockLayout,
+  blockProperties,
+  blockStyle,
+  Component,
+  context,
+  lowdefy,
+  skeleton,
+}) => {
   const content = {};
   const contentList = [];
   new Array(3).forEach(() => {
     Object.keys(skeleton.areas).forEach((areaKey, i) => {
       content[areaKey] = (areaStyle) => (
         <Area
           area={layoutParamsToArea({
-            area: skeleton.areas[areaKey] || {},
+            area: skeleton.areas[areaKey] ?? {},
             areaKey,
-            layout,
+            layout: blockLayout ?? {},
           })}
           areaStyle={[areaStyle, skeleton.areas[areaKey] && skeleton.areas[areaKey].style]}
           highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
@@ -54,10 +63,10 @@ const LoadingList = ({ blockId, Component, context, layout, lowdefy, skeleton })
   });
   return (
     <BlockLayout
-      blockStyle={skeleton.style}
+      blockStyle={skeleton.style ?? blockStyle}
       highlightBorders={lowdefy.lowdefyGlobal.highlightBorders}
       id={`s-bl-${blockId}-${skeleton.id}`}
-      layout={layout}
+      layout={blockLayout ?? {}}
       makeCssClass={makeCssClass}
     >
       <Component
@@ -68,7 +77,7 @@ const LoadingList = ({ blockId, Component, context, layout, lowdefy, skeleton })
         menus={lowdefy.menus}
         methods={{ makeCssClass }}
         pageId={lowdefy.pageId}
-        properties={skeleton.properties}
+        properties={skeleton.properties ?? blockProperties}
       />
     </BlockLayout>
   );