upgraded @types/react and fixed bugs with React.Children possibly bei…

…ng null or the empty obj.
zookatron · Jan 26, 2019 · 327e69d · 327e69d
1 parent 608eab9
commit 327e69d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 34 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -54,7 +54,7 @@
     "@types/jest": "^23.3.10",
     "@types/jsdom": "^12.2.0",
     "@types/prop-types": "^15.5.8",
-    "@types/react": "^16.7.18",
+    "@types/react": "^16.7.21",
     "@types/react-dom": "^16.0.11",
     "@types/react-test-renderer": "^16.0.3",
     "bulma": "0.7.2",

diff --git a/src/components/modal/modal-card-head.tsx b/src/components/modal/modal-card-head.tsx
@@ -13,7 +13,7 @@ const mapChildren = (
   close: ModalContextValue["close"],
 ) =>
   React.Children.map(children, (child, i) => {
-    if (typeof child === "object") {
+    if (typeof child === "object" && child !== null && "type" in child) {
       if (child.type === Delete) {
         const onClick = (child.props as React.HTMLAttributes<Element>).onClick;
 

diff --git a/src/elements/form/label.tsx b/src/elements/form/label.tsx
@@ -35,7 +35,7 @@ const identifyLabelDiscriminator = (children: React.ReactNode) => {
   let discriminator = "label";
 
   React.Children.forEach(children, (child, i) => {
-    if (typeof child === "object") {
+    if (typeof child === "object" && child !== null && "type" in child) {
       if (
         child.type === Checkbox ||
         (child.type === "input" &&

diff --git a/src/elements/form/select.tsx b/src/elements/form/select.tsx
@@ -42,37 +42,36 @@ const mapSelectContainerChildren = (
 ) => {
   let classNameExtension: string | undefined;
   const mapped = React.Children.map(children, (child, i) => {
-    if (
-      typeof child === "object" &&
+    if (typeof child === "object" && child !== null && "type" in child) {
       // tslint:disable-next-line:no-use-before-declare
-      (child.type === "select" || child.type === Select)
-    ) {
-      classNameExtension = classNames({
-        "is-multiple": (child.props as React.SelectHTMLAttributes<Element>)
-          .multiple,
-      });
-      if (state === "focused" || state === "hovered") {
-        return React.cloneElement(child, {
-          className: classNames(
-            `is-${state}`,
-            (child.props as React.SelectHTMLAttributes<Element>).className,
-          ),
+      if (child.type === "select" || child.type === Select) {
+        classNameExtension = classNames({
+          "is-multiple": (child.props as React.SelectHTMLAttributes<Element>)
+            .multiple,
         });
+        if (state === "focused" || state === "hovered") {
+          return React.cloneElement(child, {
+            className: classNames(
+              `is-${state}`,
+              (child.props as React.SelectHTMLAttributes<Element>).className,
+            ),
+          });
+        }
+
+        return child;
+      } else if (child.type === React.Fragment) {
+        const fragmentMapped = mapSelectContainerChildren(
+          (child.props as React.ComponentPropsWithoutRef<typeof React.Fragment>)
+            .children,
+          state,
+        );
+        classNameExtension = classNames(
+          classNameExtension,
+          fragmentMapped.classNameExtension,
+        );
+
+        return <React.Fragment children={fragmentMapped.children} />;
       }
-
-      return child;
-    } else if (typeof child === "object" && child.type === React.Fragment) {
-      const fragmentMapped = mapSelectContainerChildren(
-        (child.props as React.ComponentPropsWithoutRef<typeof React.Fragment>)
-          .children,
-        state,
-      );
-      classNameExtension = classNames(
-        classNameExtension,
-        fragmentMapped.classNameExtension,
-      );
-
-      return <React.Fragment children={fragmentMapped.children} />;
     }
 
     return child;