From 0571eabcdc484b50bfa48a5f3b290e26e326af78 Mon Sep 17 00:00:00 2001 From: Evtushenko Alexandr Date: Tue, 30 Jan 2018 03:45:16 +0700 Subject: [PATCH] Update `react-overlays` to v0.8, fix `transition` prop type in `react-overlays` library, remove `react-overlays/Transition` (#23206) * Add `react-overlays/Overlay` component test. * Fix `react-overlays/Overlay` and `react-overlays/Modal` components. * Remove `react-overlays/Transition`. * Set `react-overlays` version to v0.8. --- types/react-overlays/index.d.ts | 3 +- types/react-overlays/lib/Modal.d.ts | 5 +- types/react-overlays/lib/Overlay.d.ts | 3 +- types/react-overlays/lib/Transition.d.ts | 56 ------------------- types/react-overlays/lib/index.d.ts | 2 - .../test/react-overlays-tests-individual.tsx | 41 +++++++++----- .../test/react-overlays-tests-transition.tsx | 12 ++++ .../test/react-overlays-tests.tsx | 41 +++++++++----- types/react-overlays/tsconfig.json | 3 +- 9 files changed, 74 insertions(+), 92 deletions(-) delete mode 100644 types/react-overlays/lib/Transition.d.ts create mode 100644 types/react-overlays/test/react-overlays-tests-transition.tsx diff --git a/types/react-overlays/index.d.ts b/types/react-overlays/index.d.ts index e97c7e3761..5d33d8da37 100644 --- a/types/react-overlays/index.d.ts +++ b/types/react-overlays/index.d.ts @@ -1,4 +1,4 @@ -// Type definitions for React Overlays 0.6 +// Type definitions for React Overlays 0.8 // Project: https://github.com/react-bootstrap/react-overlays // Definitions by: Aaron Beall // Vito Samson @@ -15,7 +15,6 @@ export { Overlay, Portal, Position, - Transition, RootCloseWrapper, } from './lib'; diff --git a/types/react-overlays/lib/Modal.d.ts b/types/react-overlays/lib/Modal.d.ts index 13a397f3b5..f626a30119 100644 --- a/types/react-overlays/lib/Modal.d.ts +++ b/types/react-overlays/lib/Modal.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { TransitionCallbacks } from 'react-overlays'; +import { TransitionProps } from 'react-transition-group/Transition'; import * as ModalManager from './ModalManager'; import { PortalProps } from './Portal'; @@ -88,13 +89,13 @@ interface ModalProps extends TransitionCallbacks, PortalProps { * A `react-transition-group@2.0.0` `` component used * to control animations for the dialog component. */ - transition?: Element; + transition?: React.ComponentType; /** * A `react-transition-group@2.0.0` `` component used * to control animations for the backdrop components. */ - backdropTransition?: Element; + backdropTransition?: React.ComponentType; /** * When `true` The modal will automatically shift focus to itself when it opens, and diff --git a/types/react-overlays/lib/Overlay.d.ts b/types/react-overlays/lib/Overlay.d.ts index 66a87b16c2..7df97f3cc3 100644 --- a/types/react-overlays/lib/Overlay.d.ts +++ b/types/react-overlays/lib/Overlay.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; import { TransitionCallbacks } from 'react-overlays'; +import { TransitionProps } from 'react-transition-group/Transition'; import { PortalProps } from './Portal'; import { PositionProps } from './Position'; @@ -29,5 +30,5 @@ interface OverlayProps extends TransitionCallbacks, PortalProps, PositionProps { * A `react-transition-group@2.0.0` `` component * used to animate the overlay as it changes visibility. */ - transition?: Element; + transition?: React.ComponentType; } diff --git a/types/react-overlays/lib/Transition.d.ts b/types/react-overlays/lib/Transition.d.ts deleted file mode 100644 index 7f57e7b0c8..0000000000 --- a/types/react-overlays/lib/Transition.d.ts +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import { TransitionCallbacks } from 'react-overlays'; - -declare class Transition extends React.Component { } -declare namespace Transition { } -export = Transition; - -interface TransitionProps extends TransitionCallbacks { - className?: string; - - /** - * Show the component; triggers the enter or exit animation - */ - in?: boolean; - - /** - * Unmount the component (remove it from the DOM) when it is not shown - */ - unmountOnExit?: boolean; - - /** - * Run the enter animation when the component mounts, if it is initially - * shown - */ - transitionAppear?: boolean; - - /** - * A Timeout for the animation, in milliseconds, to ensure that a node doesn't - * transition indefinately if the browser transitionEnd events are - * canceled or interrupted. - * - * By default this is set to a high number (5 seconds) as a failsafe. You should consider - * setting this to the duration of your animation (or a bit above it). - */ - timeout?: number; - - /** - * CSS class or classes applied when the component is exited - */ - exitedClassName?: string; - - /** - * CSS class or classes applied while the component is exiting - */ - exitingClassName?: string; - - /** - * CSS class or classes applied when the component is entered - */ - enteredClassName?: string; - - /** - * CSS class or classes applied while the component is entering - */ - enteringClassName?: string; -} diff --git a/types/react-overlays/lib/index.d.ts b/types/react-overlays/lib/index.d.ts index bc08d18d77..6ea153cd5a 100644 --- a/types/react-overlays/lib/index.d.ts +++ b/types/react-overlays/lib/index.d.ts @@ -5,7 +5,6 @@ import * as ModalManager from './ModalManager'; import * as Overlay from './Overlay'; import * as Portal from './Portal'; import * as Position from './Position'; -import * as Transition from './Transition'; import * as RootCloseWrapper from './RootCloseWrapper'; export { @@ -16,6 +15,5 @@ export { Overlay, Portal, Position, - Transition, RootCloseWrapper, }; diff --git a/types/react-overlays/test/react-overlays-tests-individual.tsx b/types/react-overlays/test/react-overlays-tests-individual.tsx index fbf2506331..95aa3618b3 100644 --- a/types/react-overlays/test/react-overlays-tests-individual.tsx +++ b/types/react-overlays/test/react-overlays-tests-individual.tsx @@ -1,6 +1,5 @@ import * as React from "react"; -import * as Transition from 'react-overlays/lib/Transition'; import * as Portal from 'react-overlays/lib/Portal'; import * as Modal from 'react-overlays/lib/Modal'; import * as Position from 'react-overlays/lib/Position'; @@ -9,19 +8,7 @@ import * as Affix from 'react-overlays/lib/Affix'; import * as AutoAffix from 'react-overlays/lib/AutoAffix'; import * as RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper'; -function testTransition() { - return ( - -
Test
- - ); -} +import { OverlayFade } from './react-overlays-tests-transition'; class TestAffix extends React.Component { render(): JSX.Element { @@ -35,6 +22,32 @@ class TestAffix extends React.Component { } } +class TestOverlay extends React.Component<{}, {open: boolean}> { + target: HTMLElement | null = null; + state = {open: false}; + + render(): JSX.Element { + const { open } = this.state; + + return ( +
+ + + this.target} + transition={OverlayFade} + onHide={() => this.setState({open: false})} + placement="bottom"> +
Popover content
+ +
+ ); + } +} + class TestRootCloseWrapper extends React.Component { handleRootClose = () => { }; render() { diff --git a/types/react-overlays/test/react-overlays-tests-transition.tsx b/types/react-overlays/test/react-overlays-tests-transition.tsx new file mode 100644 index 0000000000..e1e04d7dda --- /dev/null +++ b/types/react-overlays/test/react-overlays-tests-transition.tsx @@ -0,0 +1,12 @@ +import * as React from 'react'; +import { CSSTransition } from 'react-transition-group'; +import { TransitionProps } from 'react-transition-group/Transition'; + +export function OverlayFade(props: TransitionProps): JSX.Element { + return ( + + ); +} diff --git a/types/react-overlays/test/react-overlays-tests.tsx b/types/react-overlays/test/react-overlays-tests.tsx index dde53d76bc..cbb2046fbc 100644 --- a/types/react-overlays/test/react-overlays-tests.tsx +++ b/types/react-overlays/test/react-overlays-tests.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import { - Transition, Portal, Modal, Position, @@ -11,19 +10,7 @@ import { RootCloseWrapper, } from "react-overlays"; -function testTransition() { - return ( - -
Test
- - ); -} +import { OverlayFade } from './react-overlays-tests-transition'; class TestAffix extends React.Component { render(): JSX.Element { @@ -37,6 +24,32 @@ class TestAffix extends React.Component { } } +class TestOverlay extends React.Component<{}, {open: boolean}> { + target: HTMLElement | null = null; + state = {open: false}; + + render(): JSX.Element { + const { open } = this.state; + + return ( +
+ + + this.target} + transition={OverlayFade} + onHide={() => this.setState({open: false})} + placement="bottom"> +
Popover content
+ +
+ ); + } +} + class TestRootCloseWrapper extends React.Component { handleRootClose = () => { }; render() { diff --git a/types/react-overlays/tsconfig.json b/types/react-overlays/tsconfig.json index 78f037e583..33066cce2e 100644 --- a/types/react-overlays/tsconfig.json +++ b/types/react-overlays/tsconfig.json @@ -21,6 +21,7 @@ "files": [ "index.d.ts", "test/react-overlays-tests.tsx", - "test/react-overlays-tests-individual.tsx" + "test/react-overlays-tests-individual.tsx", + "test/react-overlays-tests-transition.tsx" ] } \ No newline at end of file