feat: Add support for multi-level nesting in bones layout

marcuzgabriel · Dec 1, 2023 · c289f36 · c289f36
1 parent 2f42d50
commit c289f36
Showing 1 changed file with 24 additions and 31 deletions.
diff --git a/packages/npm/src/hooks/useGetBones.tsx b/packages/npm/src/hooks/useGetBones.tsx
@@ -23,40 +23,33 @@ 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 = (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,
+      });
+    });
+  };
+
+  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) => {