From d4641a4641b22a66ba3414d7233a52dddec3390f Mon Sep 17 00:00:00 2001 From: Quentin Sommer Date: Sun, 30 Apr 2023 16:06:49 -0400 Subject: [PATCH] Fix children handling in lucide-react-native (#1177) --- .../src/createLucideIcon.ts | 4 ++- .../lucide-react-native.spec.tsx.snap | 4 +++ .../tests/lucide-react-native.spec.tsx | 36 +++++++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/lucide-react-native/src/createLucideIcon.ts b/packages/lucide-react-native/src/createLucideIcon.ts index 3c0ed56..fe1ea13 100644 --- a/packages/lucide-react-native/src/createLucideIcon.ts +++ b/packages/lucide-react-native/src/createLucideIcon.ts @@ -30,7 +30,9 @@ const createLucideIcon = (iconName: string, iconNode: IconNode) => { const upperCasedTag = (tag.charAt(0).toUpperCase() + tag.slice(1)) as keyof (typeof NativeSvg); return createElement(NativeSvg[upperCasedTag] as FunctionComponent>, attrs); }), - ...(children as ReactNode[] || []), + ...( + (Array.isArray(children) ? children : [children]) || [] + ), ], ), ); diff --git a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap index cacc50c..18786cf 100644 --- a/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap +++ b/packages/lucide-react-native/tests/__snapshots__/lucide-react-native.spec.tsx.snap @@ -5,3 +5,7 @@ exports[`Using lucide icon components > should adjust the size, stroke color and exports[`Using lucide icon components > should not scale the strokeWidth when absoluteStrokeWidth is set 1`] = `""`; exports[`Using lucide icon components > should render an component 1`] = `""`; + +exports[`Using lucide icon components > should work with a single child component 1`] = `""`; + +exports[`Using lucide icon components > should work with several children components 1`] = `""`; diff --git a/packages/lucide-react-native/tests/lucide-react-native.spec.tsx b/packages/lucide-react-native/tests/lucide-react-native.spec.tsx index b898d59..7debf73 100644 --- a/packages/lucide-react-native/tests/lucide-react-native.spec.tsx +++ b/packages/lucide-react-native/tests/lucide-react-native.spec.tsx @@ -80,4 +80,40 @@ describe('Using lucide icon components', () => { expect( container.innerHTML ).toMatchSnapshot(); }); + + it('should work with a single child component', () => { + const testId = "single-child"; + const childId = "child"; + + const { container, getByTestId } = render( + + + + ); + const { children} = getByTestId(testId) as unknown as{ children: HTMLCollection}; + const lastChild = children[children.length -1]; + + expect(lastChild).toEqual(getByTestId(childId)); + expect(container.innerHTML).toMatchSnapshot(); + }) + + it('should work with several children components', () => { + const testId = "multiple-children"; + const childId1 = "child1"; + const childId2 = "child2"; + + const { container, getByTestId } = render( + + + + + ); + const {children} = getByTestId(testId) as unknown as{ children: HTMLCollection}; + const child1 = children[children.length - 2]; + const child2 = children[children.length - 1]; + + expect(child1).toEqual(getByTestId(childId1)); + expect(child2).toEqual(getByTestId(childId2)); + expect(container.innerHTML).toMatchSnapshot(); + }) })