fix: Adapt story to multiple neested bones, useCallback and correct d…

…ependencies
marcuzgabriel · Dec 10, 2023 · 43e1912 · 43e1912
1 parent c289f36
commit 43e1912
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 17 deletions.
diff --git a/packages/npm/src/hooks/useGetBones.tsx b/packages/npm/src/hooks/useGetBones.tsx
@@ -23,28 +23,35 @@ interface UseGetBonesProps {
 export const useGetBones = (componentSize: IComponentSize) => {
   const renderBone = useRenderBone(componentSize);
 
-  const renderNestedBones = (bones: ICustomViewStyle[], prefix: string | number | undefined, generalStyles: IGeneralStyles) => {
-    return bones.map((bone, index) => {
-      const keyIndex = prefix ? `${prefix}_${index}` : index;
+  const renderNestedBones = useCallback(
+    (
+      bones: ICustomViewStyle[],
+      prefix: string | number | undefined,
+      generalStyles: IGeneralStyles,
+    ) => {
+      return bones.map((bone, index) => {
+        const keyIndex = prefix ? `${prefix}_${index}` : index;
 
-      const { children: childBones, ...layoutStyle } = bone;
+        const { children: childBones, ...layoutStyle } = bone;
 
-      if (childBones?.length) {
-        return (
+        if (childBones?.length) {
+          return (
             <View key={keyIndex} style={layoutStyle}>
               {renderNestedBones(childBones, keyIndex, generalStyles)}
             </View>
-        );
-      }
+          );
+        }
 
-      return renderBone({
-        generalStyles,
-        bonesLayout: bones,
-        index,
-        keyIndex,
+        return renderBone({
+          generalStyles,
+          bonesLayout: bones,
+          index,
+          keyIndex,
+        });
       });
-    });
-  };
+    },
+    [renderBone],
+  );
 
   return useCallback(
     ({ bonesLayout, children, prefix, generalStyles }: UseGetBonesProps) => {
@@ -80,6 +87,6 @@ export const useGetBones = (componentSize: IComponentSize) => {
         );
       });
     },
-    [componentSize, renderBone],
+    [componentSize, renderNestedBones],
   );
 };
diff --git a/packages/web/src/Skeleton.stories.tsx b/packages/web/src/Skeleton.stories.tsx
@@ -30,10 +30,31 @@ const DEFAULT_ARGS: ISkeletonProps = {
       alignItems: 'center',
       children: [
         {
-          width: 119,
+          width: '100%',
           height: 19,
           borderRadius: 16,
           marginBottom: 8,
+          flexDirection: 'column',
+          children: [
+            {
+              width: '100%',
+              height: '100%',
+              flexDirection: 'row',
+              children: [
+                {
+                  width: 119,
+                  height: '100%',
+                  borderRadius: 16,
+                },
+                {
+                  width: 119,
+                  marginLeft: 6,
+                  height: '100%',
+                  borderRadius: 16,
+                },
+              ],
+            },
+          ],
         },
         {
           width: 234,