fix(Animation): not to throw if children is not set (#2345)

mnajdova · web-flow · commit f8163447b1cb · 2020-02-13T17:19:29.000+01:00
* -fixed Animation without children

* -added changelog

* -added tests

* -prettier fixes

* -fixes

* -fixes

* -fixes
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `document` usage in `mergeProviderContexts` to get SSR working @layershifter ([#2330](https://github.com/microsoft/fluent-ui-react/pull/2330))
 - Fix `input` descenders being cropped in the Teams theme @bcalvery ([#2335](https://github.com/microsoft/fluent-ui-react/pull/2335))
 - Use referentially equal objects for `actions` in `useStateManager` @layershifter ([#2347](https://github.com/microsoft/fluent-ui-react/pull/2347))
+- Fix `Animation` component not to throw when `children` is not provided @mnajdova ([#2345](https://github.com/microsoft/fluent-ui-react/pull/2345))
 
 ### Features
 - Added sourcemaps to the dist output to simplify debugging @miroslavstastny ([#2329](https://github.com/microsoft/fluent-ui-react/pull/2329))
diff --git a/packages/react/src/components/Animation/Animation.tsx b/packages/react/src/components/Animation/Animation.tsx
@@ -13,17 +13,22 @@ import * as React from 'react'
 import { ThemeContext } from 'react-fela'
 import { Transition } from 'react-transition-group'
 
-import { childrenExist, StyledComponentProps, commonPropTypes } from '../../utils'
+import {
+  childrenExist,
+  StyledComponentProps,
+  commonPropTypes,
+  ChildrenComponentProps,
+} from '../../utils'
 import { ComponentEventHandler, ProviderContextPrepared } from '../../types'
 
 export type AnimationChildrenProp = (props: { classes: string }) => React.ReactNode
 
-export interface AnimationProps extends StyledComponentProps {
+export interface AnimationProps
+  extends StyledComponentProps,
+    ChildrenComponentProps<AnimationChildrenProp | React.ReactChild> {
   /** Additional CSS class name(s) to apply.  */
   className?: string
 
-  children: AnimationChildrenProp | React.ReactChild
-
   /** The name for the animation that should be applied, defined in the theme. */
   name?: string
 
@@ -216,6 +221,12 @@ const Animation: React.FC<AnimationProps> & {
     playState,
     timingFunction,
   ])
+
+  if (_.isNil(children)) {
+    setEnd()
+    return null
+  }
+
   const unhandledProps = getUnhandledProps(Animation.handledProps, props)
 
   const isChildrenFunction = typeof children === 'function'
@@ -238,7 +249,7 @@ const Animation: React.FC<AnimationProps> & {
       onExiting={handleAnimationEvent('onExiting')}
       onExited={handleAnimationEvent('onExited')}
       {...unhandledProps}
-      className={!isChildrenFunction ? cx(classes.root, (child as any).props.className) : ''}
+      className={!isChildrenFunction ? cx(classes.root, (child as any)?.props?.className) : ''}
     >
       {isChildrenFunction
         ? () => (children as AnimationChildrenProp)({ classes: classes.root })
diff --git a/packages/react/test/specs/components/Animation/Animation-test.tsx b/packages/react/test/specs/components/Animation/Animation-test.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import { isConformant } from 'test/specs/commonTests'
 
 import Animation from 'src/components/Animation/Animation'
+import { mountWithProvider } from 'test/utils'
 
 describe('Animation', () => {
   isConformant(Animation, {
@@ -10,4 +11,12 @@ describe('Animation', () => {
     requiredProps: { children: <div /> },
     handlesAsProp: false,
   })
+
+  test('does not throw if children is not passed', () => {
+    expect(() => mountWithProvider(<Animation />)).not.toThrowError()
+  })
+
+  test('does not throw if children function returns undefined', () => {
+    expect(() => mountWithProvider(<Animation children={() => undefined} />)).not.toThrowError()
+  })
 })
