fix(Flex): handle cases of falsy values provided as children (#890)

* add null checks

* address flex gap issue

* improve null detection logic

* update changelog

* upd changelog

* fix changelog

* upd

* improve expressiveness of filtering expression

Author: kuzhelov

CHANGELOG.md

@@ -17,6 +17,12 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### Features
+- Export `arrow-up`,`arrow-down` and `chat` SVG icon @VyshnaviDasari ([#873](https://github.com/stardust-ui/react/pull/873))
+
+### Fixes
+- Properly handle falsy values provided as `Flex` and `Flex.Item` children @kuzhelov ([#890](https://github.com/stardust-ui/react/pull/890))
+
 <!--------------------------------[ v0.21.0 ]------------------------------- -->
 ## [v0.21.0](https://github.com/stardust-ui/react/tree/v0.21.0) (2019-02-12)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.20.0...v0.21.0)
@@ -83,7 +89,6 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add sample screener tests with steps for `Dropdown` @silviuavram ([#797](https://github.com/stardust-ui/react/pull/797))
 - Add shorthand support for `triggerButton` in `Dropdown` @silviuavram ([#815](https://github.com/stardust-ui/react/pull/815))
 - Add toggle functionality in the `Popoup` even if the `trigger` is not button @kolaps33 ([#758](https://github.com/stardust-ui/react/pull/758))
-- Export `arrow-up`,`arrow-down` and `chat` SVG icon @VyshnaviDasari ([#873](https://github.com/stardust-ui/react/pull/873))
 
 ### Fixes
 - Handle `onClick` and `onFocus` on ListItems correctly @layershifter ([#779](https://github.com/stardust-ui/react/pull/779))

packages/react/src/components/Flex/Flex.tsx

@@ -90,20 +90,27 @@ class Flex extends UIComponent<ReactProps<FlexProps>> {
   renderChildren = (gapClasses: string) => {
     const { column, gap, children } = this.props
 
-    return React.Children.map(children, (child: React.ReactElement<any>, index) => {
-      const childElement =
-        child.type && ((child.type as any) as typeof FlexItem).__isFlexItem
-          ? React.cloneElement(child, {
-              flexDirection: column ? 'column' : 'row',
-            })
-          : child
-
-      const renderGap = index !== 0
+    let isFirstElement = true
+    return React.Children.map(children, (child: any) => {
+      const isFlexItemElement: boolean = _.get(child, 'type.__isFlexItem')
+      const maybeChildElement = isFlexItemElement
+        ? React.cloneElement(child, {
+            flexDirection: column ? 'column' : 'row',
+          })
+        : child
+
+      const renderGap = !isFirstElement
+      if (maybeChildElement) {
+        isFirstElement = false
+      }
+
       return (
-        <>
-          {renderGap && gap && <Flex.Gap className={cx(`${Flex.className}__gap`, gapClasses)} />}
-          {childElement}
-        </>
+        maybeChildElement && (
+          <>
+            {renderGap && gap && <Flex.Gap className={cx(`${Flex.className}__gap`, gapClasses)} />}
+            {maybeChildElement}
+          </>
+        )
       )
     })
   }

packages/react/src/components/Flex/FlexItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
+import * as _ from 'lodash'
 import { UIComponent, commonPropTypes } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
 import { Extendable } from '../../types'
@@ -78,7 +79,9 @@ class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
       })
     }
 
-    return applyStyles(React.Children.only(children), styles, classes)
+    return _.isNil(children)
+      ? children
+      : applyStyles(React.Children.only(children), styles, classes)
   }
 }