Chidren aren't always of string type (#1)

* chidren arent always of string type * add tests
barbuza · Aug 23, 2017 · b0cddfe · b0cddfe
1 parent c05b5af
commit b0cddfe
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/react-emoji.spec.tsx b/src/react-emoji.spec.tsx
@@ -128,4 +128,21 @@ describe("ReactEmoji", () => {
       </div>,
     );
   });
+
+  test("multiple different children", () => {
+    match(
+      <ReactEmoji>
+        <div />
+        :smile:
+      </ReactEmoji>,
+      <div>
+        <div></div>
+        <img
+          width="20px"
+          height="20px"
+          src="https://twemoji.maxcdn.com/svg/1f604.svg"
+        />
+      </div>,
+    );
+  });
 });
diff --git a/src/react-emoji.tsx b/src/react-emoji.tsx
@@ -81,14 +81,22 @@ export interface IReactEmojiProps {
   attrs?: React.HTMLAttributes<HTMLElement>;
   imgAttrs?: React.HTMLAttributes<HTMLImageElement>;
   svgAttrs?: React.SVGAttributes<SVGSVGElement>;
-  children: string;
+  children: React.ReactNode;
   symbolsUrl?: string;
   type?: EmojiType;
   tag?: string;
 }
 
-export const ReactEmoji: React.SFC<IReactEmojiProps> = (props) => React.createElement(
-  props.tag || "div",
-  props.attrs,
-  ...emojifyText(props.children, props),
-);
+export const ReactEmoji: React.SFC<IReactEmojiProps> = (props) => {
+  const children = React.Children.map(props.children, (child) => {
+    if (typeof child === "string") {
+      return emojifyText(child, props);
+    }
+    return child;
+  });
+  return React.createElement(
+    props.tag || "div",
+    props.attrs,
+    ...children,
+  );
+};