Update types for react-collapse@5 (#40362)

types/react-collapse/index.d.ts

@@ -1,28 +1,47 @@
-// Type definitions for react-collapse 4.0
+// Type definitions for react-collapse 5.0
 // Project: https://github.com/nkbt/react-collapse
-// Definitions by: Adam Binford <https://github.com/Kimahriman>
+// Definitions by:  Adam Binford <https://github.com/Kimahriman>
+//                  Kristofer Giltvedt Selbekk <https://github.com/selbekk>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 import * as React from 'react';
 
-export interface CollapseProps extends React.HTMLProps<Collapse> {
+export interface CollapseCallbackArgs {
+    /** `true` only when Collapse reached final height */
+    isFullyOpened: boolean;
+    /** `true` only when Collapse is fully closed and height is zero */
+    isFullyClosed: boolean;
+    /** `true` if Collapse has any non-zero height */
     isOpened: boolean;
-    children: React.ReactNode;
-
-    springConfig?: { [key: string]: number }; // react-motion doesn't export the config interface
-    forceInitialAnimation?: boolean;
-    hasNestedCollapse?: boolean;
-    fixedHeight?: number;
-    theme?: {
-        collapse: string
-        content: string
-    };
-    style?: React.CSSProperties;
-    onRender?: ({ current, from, to }: { current: number; from: number; to: number; }) => void;
-    onRest?: () => void;
-    onMeasure?: ({ width, height }: { width: number; height: number; }) => void;
+    /** current pixel height of Collapse container (changes until reaches `contentHeight`) */
+    containerHeight: number;
+    /** determined height of supplied Content */
+    contentHeight: number;
 }
 
-export class Collapse extends React.PureComponent<CollapseProps> { }
+export interface CollapseProps extends React.HTMLProps<Collapse> {
+    /** Expands or collapses content. */
+    isOpened: boolean;
+    /** One or multiple children with static, variable or dynamic height. */
+    children: React.ReactNode;
+    /** It is possible to set className for extra div elements that ReactCollapse creates. */
+    theme?: {
+        collapse?: string;
+        content?: string;
+    };
+    /** Callback function triggered when animation has completed */
+    onRest?: (args: CollapseCallbackArgs) => void;
+    /** Callback function triggered when animation begins */
+    onWork?: (args: CollapseCallbackArgs) => void;
+    /** A way to control the initial element style. Will not be valid after the initial render */
+    initialStyle?: {
+        height?: string | number;
+        overflow?: string;
+    };
+    /** How often (in ms) the height of the content is checked. */
+    checkTimeout?: number;
+}
 
-export class UnmountClosed extends React.PureComponent<CollapseProps> { }
+export class Collapse extends React.PureComponent<CollapseProps> {}
+
+export class UnmountClosed extends React.PureComponent<CollapseProps> {}

types/react-collapse/react-collapse-tests.tsx

@@ -5,13 +5,11 @@ class TestRequired extends React.Component {
     render() {
         return (
             <div>
-                <Collapse
-                    isOpened>
-                    <div/>
+                <Collapse isOpened>
+                    <div />
                 </Collapse>
-                <UnmountClosed
-                    isOpened>
-                    <div/>
+                <UnmountClosed isOpened>
+                    <div />
                 </UnmountClosed>
             </div>
         );
@@ -20,53 +18,26 @@ class TestRequired extends React.Component {
 
 class TestAll extends React.Component {
     render() {
-        const springConfig = {
-            stiffness: 1,
-            damping: 1,
-            precision: 1,
-        };
-
         const theme = {
             collapse: 'collapse-class',
-            content: 'content-class'
+            content: 'content-class',
         };
 
-        const style: React.CSSProperties = {
-            fontWeight: 'bold',
-            fontSize: 16
-        };
-
-        const onRender = (object: { current: number; from: number; to: number; }) => {};
         const onRest = () => {};
-        const onMeasure = (object: { width: number; height: number }) => {};
+        const onWork = () => {};
+
+        const initialStyle = {
+            height: 200,
+            overflow: 'auto',
+        };
 
         return (
             <div>
-                <Collapse
-                    isOpened
-                    springConfig={ springConfig }
-                    forceInitialAnimation
-                    hasNestedCollapse
-                    fixedHeight={ 0 }
-                    theme={ theme }
-                    style={ style }
-                    onRender={ onRender }
-                    onRest={ onRest }
-                    onMeasure={ onMeasure}>
-                    <div/>
+                <Collapse isOpened initialStyle={initialStyle} theme={theme} onRest={onRest} onWork={onWork}>
+                    <div />
                 </Collapse>
-                <UnmountClosed
-                    isOpened
-                    springConfig={ springConfig }
-                    forceInitialAnimation
-                    hasNestedCollapse
-                    fixedHeight={ 0 }
-                    theme={ theme }
-                    style={ style }
-                    onRender={ onRender }
-                    onRest={ onRest }
-                    onMeasure={ onMeasure}>
-                    <div/>
+                <UnmountClosed isOpened initialStyle={initialStyle} theme={theme} onRest={onRest} onWork={onWork}>
+                    <div />
                 </UnmountClosed>
             </div>
         );