fix(Animation): add state to render props function (#20776)

* fix(Animation): prevent animations to restart once they have exited/entered * fix: expose state * fix: children function * Update packages/fluentui/react-northstar/src/components/Animation/Animation.tsx Co-authored-by: Oleksandr Fediashov <[email protected]> * add changelog * fix prettier Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Nov 25, 2021 · 562acaf · 562acaf
1 parent ef4491a
commit 562acaf
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
@@ -55,6 +55,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `Embed` component to properly pass ref to root slots @chpalac ([#20703](https://github.com/microsoft/fluentui/pull/20703))
 - Fix `Chat` components to properly pass ref to root slots @chpalac ([#20691](https://github.com/microsoft/fluentui/pull/20691))
 - Fix `Flex` component to properly pass ref to root slots @chpalac ([#20752](https://github.com/microsoft/fluentui/pull/20752))
+- Fix `Animation` to expose `Transition` state for the consumer @chpalac ([#20776](https://github.com/microsoft/fluentui/pull/20776))
 
 ### Features
 - Adding `ViewPersonSparkleIcon`, `CartIcon`, and fixing `EmojiAddIcon` and `AccessibilityIcon` - @notandrew ([#20054](https://github.com/microsoft/fluentui/pull/20054))

diff --git a/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx b/packages/fluentui/react-northstar/src/components/Animation/Animation.tsx
@@ -15,7 +15,10 @@ import { childrenExist, commonPropTypes, ChildrenComponentProps } from '../../ut
 import { ComponentEventHandler } from '../../types';
 import { useAnimationStyles } from './useAnimationStyles';
 
-export type AnimationChildrenProp = (props: { classes: string }) => React.ReactNode;
+export type AnimationChildrenProp = (props: {
+  classes: string;
+  state: 'unmounted' | 'exited' | 'entering' | 'entered' | 'exiting';
+}) => React.ReactNode;
 
 export interface AnimationProps extends ChildrenComponentProps<AnimationChildrenProp | React.ReactChild> {
   /** Additional CSS class name(s) to apply.  */
@@ -187,8 +190,12 @@ export const Animation: React.FC<AnimationProps> & {
       className={!isChildrenFunction ? cx(animationClasses, className, (child as any)?.props?.className) : ''}
     >
       {isChildrenFunction
-        ? () => (children as AnimationChildrenProp)({ classes: cx(animationClasses, className) })
-        : child}
+        ? ({ state }) =>
+            (children as AnimationChildrenProp)({
+              classes: cx(animationClasses, className, (child as any)?.props?.className),
+              state,
+            })
+        : React.cloneElement(child, { className: cx(animationClasses, className, (child as any)?.props?.className) })}
     </Transition>
   );
   setEnd();