Merge pull request #2 from dmitry-blackwave/feat/bones-deep-nesting

feat: Add support for multi-level nesting in bones layout
marcuzgabriel · Dec 10, 2023 · c68dbb9 · c68dbb9
2 parents 2f42d50 + 43e1912
commit c68dbb9
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 32 deletions.
diff --git a/packages/npm/src/hooks/useGetBones.tsx b/packages/npm/src/hooks/useGetBones.tsx
@@ -23,40 +23,40 @@ interface UseGetBonesProps {
 export const useGetBones = (componentSize: IComponentSize) => {
   const renderBone = useRenderBone(componentSize);
 
-  return useCallback(
-    ({ bonesLayout, children, prefix, generalStyles }: UseGetBonesProps) => {
-      if (bonesLayout && bonesLayout.length > 0) {
-        const iterator: number[] = new Array(bonesLayout.length).fill(0);
+  const renderNestedBones = useCallback(
+    (
+      bones: ICustomViewStyle[],
+      prefix: string | number | undefined,
+      generalStyles: IGeneralStyles,
+    ) => {
+      return bones.map((bone, index) => {
+        const keyIndex = prefix ? `${prefix}_${index}` : index;
 
-        return iterator.map((_, i) => {
-          /* NOTE: Has nested layout with children */
-          if (bonesLayout[i]?.children?.length) {
-            const containerPrefix =
-              bonesLayout[i]?.key || `bone_container_${i}`;
-            const { children: childBones, ...layoutStyle } =
-              bonesLayout[i] ?? {};
+        const { children: childBones, ...layoutStyle } = bone;
 
-            return (
-              <View key={containerPrefix} style={layoutStyle}>
-                {childBones?.map((__, childIndex) =>
-                  renderBone({
-                    generalStyles,
-                    bonesLayout: childBones,
-                    index: childIndex,
-                    keyIndex: prefix ? `${prefix}_${childIndex}` : childIndex,
-                  }),
-                )}
-              </View>
-            );
-          }
+        if (childBones?.length) {
+          return (
+            <View key={keyIndex} style={layoutStyle}>
+              {renderNestedBones(childBones, keyIndex, generalStyles)}
+            </View>
+          );
+        }
 
-          return renderBone({
-            generalStyles,
-            bonesLayout,
-            index: i,
-            keyIndex: prefix ? `${prefix}_${i}` : i,
-          });
+        return renderBone({
+          generalStyles,
+          bonesLayout: bones,
+          index,
+          keyIndex,
         });
+      });
+    },
+    [renderBone],
+  );
+
+  return useCallback(
+    ({ bonesLayout, children, prefix, generalStyles }: UseGetBonesProps) => {
+      if (bonesLayout && bonesLayout.length > 0) {
+        return renderNestedBones(bonesLayout, prefix, generalStyles);
       }
 
       return Children.map(children as JSX.Element[], (child, i) => {
@@ -87,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,