diff --git a/packages/npm/src/hooks/useGetBones.tsx b/packages/npm/src/hooks/useGetBones.tsx index 869764b..0f02254 100644 --- 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 ( {renderNestedBones(childBones, keyIndex, generalStyles)} - ); - } + ); + } - 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 index 1b60f08..dde1900 100644 --- 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,