fix(Fade): fix TS props to work with TransitionType (#5398)

react-bootstrap · Aug 24, 2020 · 79447a7 · 79447a7
1 parent 055d25f
commit 79447a7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/Fade.tsx b/src/Fade.tsx
@@ -5,16 +5,18 @@ import React, { useCallback } from 'react';
 import Transition, {
   ENTERED,
   ENTERING,
-  TransitionProps,
 } from 'react-transition-group/Transition';
+import { TransitionCallbacks } from './helpers';
 import triggerBrowserReflow from './triggerBrowserReflow';
 
-export interface FadeProps extends Omit<TransitionProps, 'addEndListener'> {
+export interface FadeProps extends TransitionCallbacks {
+  className?: string;
   in?: boolean;
   mountOnEnter?: boolean;
   unmountOnExit?: boolean;
   appear?: boolean;
   timeout?: number;
+  children: React.ReactElement;
 }
 
 const propTypes = {
@@ -86,7 +88,7 @@ const fadeStyles = {
 };
 
 const Fade = React.forwardRef<Transition<any>, FadeProps>(
-  ({ className, children, ...props }: FadeProps, ref) => {
+  ({ className, children, ...props }, ref) => {
     const handleEnter = useCallback(
       (node) => {
         triggerBrowserReflow(node);

diff --git a/tests/simple-types-test.tsx b/tests/simple-types-test.tsx
@@ -18,9 +18,11 @@ import {
   Carousel,
   Container,
   Col,
+  Collapse,
   Row,
   Dropdown,
   DropdownButton,
+  Fade,
   Figure,
   Form,
   FormFile,
@@ -59,14 +61,15 @@ const noop = () => {};
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const MegaComponent = () => (
   <>
+    <Alert transition={Fade} />
+    <Alert transition={Collapse} />
     <Alert
       ref={React.createRef<HTMLDivElement>()}
       style={style}
       closeLabel="close"
       dismissible
       onClose={noop}
       show
-      // transition={} TODO
       variant="primary"
       bsPrefix="alert"
     >