mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-03 14:27:04 +00:00
Merge pull request #17824 from LKay/lkay/react-transition-group-v2
Add definitions for react-transition-group v2
This commit is contained in:
Ryan Cavanaugh
+38
@@ -0,0 +1,38 @@
|
||||
import { Component } from "react";
|
||||
import { TransitionProps } from "react-transition-group/Transition";
|
||||
|
||||
export interface CSSTransitionClassNames {
|
||||
appear?: string;
|
||||
appearActive?: string;
|
||||
enter?: string;
|
||||
enterActive?: string;
|
||||
exit?: string;
|
||||
exitActive?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* The animation classNames applied to the component as it enters or exits.
|
||||
* A single name can be provided and it will be suffixed for each stage: e.g.
|
||||
*
|
||||
* `classNames="fade"` applies `fade-enter`, `fade-enter-active`,
|
||||
* `fade-exit`, `fade-exit-active`, `fade-appear`, and `fade-appear-active`.
|
||||
* Each individual classNames can also be specified independently like:
|
||||
*
|
||||
* ```js
|
||||
* classNames={{
|
||||
* appear: 'my-appear',
|
||||
* appearActive: 'my-active-appear',
|
||||
* enter: 'my-enter',
|
||||
* enterActive: 'my-active-enter',
|
||||
* exit: 'my-exit',
|
||||
* exitActive: 'my-active-exit',
|
||||
* }}
|
||||
* ```
|
||||
*/
|
||||
export interface CSSTransitionProps extends TransitionProps {
|
||||
classNames: string | CSSTransitionClassNames;
|
||||
}
|
||||
|
||||
declare class CSSTransition extends Component<CSSTransitionProps> {}
|
||||
|
||||
export default CSSTransition;
|
||||
+71
@@ -0,0 +1,71 @@
|
||||
import { Component } from "react";
|
||||
|
||||
export type EndHandler = (node: HTMLElement, done: () => void) => void;
|
||||
export type EnterHandler = (node: HTMLElement, isAppearing: boolean) => void;
|
||||
export type ExitHandler = (node: HTMLElement) => void;
|
||||
|
||||
export interface TransitionActions {
|
||||
appear?: boolean;
|
||||
enter?: boolean;
|
||||
exit?: boolean;
|
||||
}
|
||||
|
||||
export interface TransitionProps extends TransitionActions {
|
||||
in?: boolean;
|
||||
mountOnEnter?: boolean;
|
||||
unmountOnExit?: boolean;
|
||||
timeout: number | { enter?: number, exit?: number };
|
||||
addEndListener?: EndHandler;
|
||||
onEnter?: EnterHandler;
|
||||
onEntering?: EnterHandler;
|
||||
onEntered?: EnterHandler;
|
||||
onExit?: ExitHandler;
|
||||
onExiting?: ExitHandler;
|
||||
onExited?: ExitHandler;
|
||||
[prop: string]: any;
|
||||
}
|
||||
|
||||
/**
|
||||
* The Transition component lets you describe a transition from one component
|
||||
* state to another _over time_ with a simple declarative API. Most commonly
|
||||
* It's used to animate the mounting and unmounting of Component, but can also
|
||||
* be used to describe in-place transition states as well.
|
||||
*
|
||||
* By default the `Transition` component does not alter the behavior of the
|
||||
* component it renders, it only tracks "enter" and "exit" states for the components.
|
||||
* It's up to you to give meaning and effect to those states. For example we can
|
||||
* add styles to a component when it enters or exits:
|
||||
*
|
||||
* ```jsx
|
||||
* import Transition from 'react-transition-group/Transition';
|
||||
*
|
||||
* const duration = 300;
|
||||
*
|
||||
* const defaultStyle = {
|
||||
* transition: `opacity ${duration}ms ease-in-out`,
|
||||
* opactity: 0,
|
||||
* }
|
||||
*
|
||||
* const transitionStyles = {
|
||||
* entering: { opacity: 1 },
|
||||
* entered: { opacity: 1 },
|
||||
* };
|
||||
*
|
||||
* const Fade = ({ in: inProp }) => (
|
||||
* <Transition in={inProp} timeout={duration}>
|
||||
* {(state) => (
|
||||
* <div style={{
|
||||
* ...defaultStyle,
|
||||
* ...transitionStyles[state]
|
||||
* }}>
|
||||
* I'm A fade Transition!
|
||||
* </div>
|
||||
* )}
|
||||
* </Transition>
|
||||
* );
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
declare class Transition extends Component<TransitionProps> {}
|
||||
|
||||
export default Transition;
|
||||
+72
-15
@@ -1,19 +1,76 @@
|
||||
import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
|
||||
import { HTMLTransitionGroupProps } from "./index";
|
||||
import { Component, ReactType, HTMLProps, ReactElement } from "react";
|
||||
import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
|
||||
|
||||
declare namespace TransitionGroup {
|
||||
interface TransitionGroupChildLifecycle {
|
||||
componentWillAppear?(callback: () => void): void;
|
||||
componentDidAppear?(): void;
|
||||
componentWillEnter?(callback: () => void): void;
|
||||
componentDidEnter?(): void;
|
||||
componentWillLeave?(callback: () => void): void;
|
||||
componentDidLeave?(): void;
|
||||
}
|
||||
|
||||
type TransitionGroupProps = HTMLTransitionGroupProps<TransitionGroup>;
|
||||
export interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div"> extends TransitionActions {
|
||||
component?: T;
|
||||
}
|
||||
|
||||
declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
|
||||
export interface ComponentTransitionGroupProps<T extends ReactType> extends TransitionActions {
|
||||
component: T;
|
||||
}
|
||||
|
||||
export = TransitionGroup;
|
||||
export type TransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div", V extends ReactType = any> =
|
||||
(IntrinsicTransitionGroupProps<T> & JSX.IntrinsicElements[T]) | (ComponentTransitionGroupProps<V>) & {
|
||||
children?: ReactElement<TransitionProps> | Array<ReactElement<TransitionProps>>;
|
||||
};
|
||||
|
||||
/**
|
||||
* The `<TransitionGroup>` component manages a set of `<Transition>` components
|
||||
* in a list. Like with the `<Transition>` component, `<TransitionGroup>`, is a
|
||||
* state machine for managing the mounting and unmounting of components over
|
||||
* time.
|
||||
*
|
||||
* Consider the example below using the `Fade` CSS transition from before.
|
||||
* As items are removed or added to the TodoList the `in` prop is toggled
|
||||
* automatically by the `<TransitionGroup>`. You can use _any_ `<Transition>`
|
||||
* component in a `<TransitionGroup>`, not just css.
|
||||
*
|
||||
* ```jsx
|
||||
* import TransitionGroup from 'react-transition-group/TransitionGroup';
|
||||
*
|
||||
* class TodoList extends React.Component {
|
||||
* constructor(props) {
|
||||
* super(props)
|
||||
* this.state = {items: ['hello', 'world', 'click', 'me']}
|
||||
* }
|
||||
* handleAdd() {
|
||||
* const newItems = this.state.items.concat([
|
||||
* prompt('Enter some text')
|
||||
* ]);
|
||||
* this.setState({ items: newItems });
|
||||
* }
|
||||
* handleRemove(i) {
|
||||
* let newItems = this.state.items.slice();
|
||||
* newItems.splice(i, 1);
|
||||
* this.setState({items: newItems});
|
||||
* }
|
||||
* render() {
|
||||
* return (
|
||||
* <div>
|
||||
* <button onClick={() => this.handleAdd()}>Add Item</button>
|
||||
* <TransitionGroup>
|
||||
* {this.state.items.map((item, i) => (
|
||||
* <FadeTransition key={item}>
|
||||
* <div>
|
||||
* {item}{' '}
|
||||
* <button onClick={() => this.handleRemove(i)}>
|
||||
* remove
|
||||
* </button>
|
||||
* </div>
|
||||
* </FadeTransition>
|
||||
* ))}
|
||||
* </TransitionGroup>
|
||||
* </div>
|
||||
* );
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* Note that `<TransitionGroup>` does not define any animation behavior!
|
||||
* Exactly _how_ a list item animates is up to the individual `<Transition>`
|
||||
* components. This means you can mix and match animations across different
|
||||
* list items.
|
||||
*/
|
||||
declare class TransitionGroup extends Component<TransitionGroupProps> {}
|
||||
|
||||
export default TransitionGroup;
|
||||
|
||||
+8
-22
@@ -1,29 +1,15 @@
|
||||
// Type definitions for react-transition-group 1.1
|
||||
// Type definitions for react-transition-group 2.0
|
||||
// Project: https://github.com/reactjs/react-transition-group
|
||||
// Definitions by: Karol Janyst <https://github.com/LKay>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
import { HTMLAttributes, ReactElement, ReactType } from "react";
|
||||
import CSSTransition from "react-transition-group/CSSTransition";
|
||||
import Transition from "react-transition-group/Transition";
|
||||
import TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
|
||||
export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
|
||||
component?: ReactType;
|
||||
childFactory?(child: ReactElement<any>): ReactElement<any>;
|
||||
}
|
||||
|
||||
import * as TransitionGroup from "./TransitionGroup";
|
||||
export {
|
||||
TransitionGroupProps,
|
||||
TransitionGroupChildLifecycle
|
||||
} from "./TransitionGroup";
|
||||
|
||||
import * as CSSTransitionGroup from "./CSSTransitionGroup";
|
||||
export {
|
||||
CSSTransitionGroupProps,
|
||||
CSSTransitionGroupTransitionName
|
||||
} from "./CSSTransitionGroup";
|
||||
|
||||
export {
|
||||
TransitionGroup,
|
||||
CSSTransitionGroup
|
||||
export = {
|
||||
CSSTransition,
|
||||
Transition,
|
||||
TransitionGroup
|
||||
};
|
||||
|
||||
@@ -1,73 +1,81 @@
|
||||
import * as React from "react";
|
||||
import * as TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
import * as CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
|
||||
import { CSSTransitionGroupProps, TransitionGroupProps, TransitionGroupChildLifecycle } from "react-transition-group";
|
||||
|
||||
class TestChild extends React.Component implements TransitionGroupChildLifecycle {
|
||||
componentWillAppear(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidAppear() {}
|
||||
|
||||
componentWillEnter(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidEnter() {}
|
||||
|
||||
componentWillLeave(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidLeave() {}
|
||||
|
||||
render() {
|
||||
return (<li>{ "Test" }</li>);
|
||||
}
|
||||
}
|
||||
import CSSTransition from "react-transition-group/CSSTransition";
|
||||
import Transition from "react-transition-group/Transition";
|
||||
import TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
import Components = require("react-transition-group");
|
||||
|
||||
const Test: React.StatelessComponent = () => {
|
||||
function handleEnter(node: HTMLElement, isAppearing: boolean) {}
|
||||
|
||||
function handleExit(node: HTMLElement) {}
|
||||
|
||||
function handleEndListener(node: HTMLElement, done: () => void) {
|
||||
node.addEventListener("transitionend", done, false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<TransitionGroup component="ul" className="animated-list">
|
||||
<TestChild />
|
||||
</TransitionGroup>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={ true }
|
||||
transitionAppearTimeout={ 500 }
|
||||
transitionEnter={ true }
|
||||
transitionEnterTimeout={ 500 }
|
||||
transitionLeave={ true }
|
||||
transitionLeaveTimeout={ 500 }
|
||||
<TransitionGroup
|
||||
component="ul"
|
||||
className="animated-list"
|
||||
>
|
||||
<Components.Transition
|
||||
in
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
appear
|
||||
enter
|
||||
exit
|
||||
timeout={ 500 }
|
||||
addEndListener={ handleEndListener }
|
||||
onEnter={ handleEnter }
|
||||
onEntering={ handleEnter }
|
||||
onEntered={ handleEnter }
|
||||
onExit={ handleExit }
|
||||
onExiting={ handleExit }
|
||||
onExited={ handleExit }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
</Components.Transition>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: "enter",
|
||||
enterActive: "enterActive",
|
||||
leave: "leave",
|
||||
leaveActive: "leaveActive",
|
||||
appear: "appear",
|
||||
appearActive: "appearActive"
|
||||
<Transition
|
||||
timeout={ { enter : 500, exit : 500 } }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</Transition>
|
||||
|
||||
<Components.CSSTransition
|
||||
in
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
appear
|
||||
enter
|
||||
exit
|
||||
timeout={ 500 }
|
||||
addEndListener={ handleEndListener }
|
||||
onEnter={ handleEnter }
|
||||
onEntering={ handleEnter }
|
||||
onEntered={ handleEnter }
|
||||
onExit={ handleExit }
|
||||
onExiting={ handleExit }
|
||||
onExited={ handleExit }
|
||||
classNames="fade"
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</Components.CSSTransition>
|
||||
|
||||
<CSSTransition
|
||||
timeout={ { enter : 500, exit : 500 } }
|
||||
classNames={ {
|
||||
appear: "fade-appear",
|
||||
appearActive: "fade-active-appear",
|
||||
enter: "fade-enter",
|
||||
enterActive: "fade-active-enter",
|
||||
exit: "fade-exit",
|
||||
exitActive: "fade-active-exit"
|
||||
} }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: "enter",
|
||||
leave: "leave",
|
||||
appear: "appear"
|
||||
} }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
</div>
|
||||
</CSSTransition>
|
||||
</TransitionGroup>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "commonjs",
|
||||
"moduleResolution": "node",
|
||||
"lib": [
|
||||
"es6"
|
||||
"es6", "dom"
|
||||
],
|
||||
"strict": true,
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
@@ -18,7 +21,8 @@
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"CSSTransitionGroup.d.ts",
|
||||
"CSSTransition.d.ts",
|
||||
"Transition.d.ts",
|
||||
"TransitionGroup.d.ts",
|
||||
"react-transition-group-tests.tsx"
|
||||
]
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Component, HTMLAttributes, ReactElement, ReactType } from "react";
|
||||
import { HTMLTransitionGroupProps } from "./index";
|
||||
|
||||
declare namespace TransitionGroup {
|
||||
interface TransitionGroupChildLifecycle {
|
||||
componentWillAppear?(callback: () => void): void;
|
||||
componentDidAppear?(): void;
|
||||
componentWillEnter?(callback: () => void): void;
|
||||
componentDidEnter?(): void;
|
||||
componentWillLeave?(callback: () => void): void;
|
||||
componentDidLeave?(): void;
|
||||
}
|
||||
|
||||
type TransitionGroupProps = HTMLTransitionGroupProps<TransitionGroup>;
|
||||
}
|
||||
|
||||
declare class TransitionGroup extends Component<TransitionGroup.TransitionGroupProps> {}
|
||||
|
||||
export = TransitionGroup;
|
||||
+29
@@ -0,0 +1,29 @@
|
||||
// Type definitions for react-transition-group 1.1
|
||||
// Project: https://github.com/reactjs/react-transition-group
|
||||
// Definitions by: Karol Janyst <https://github.com/LKay>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
import { HTMLAttributes, ReactElement, ReactType } from "react";
|
||||
|
||||
export interface HTMLTransitionGroupProps<T> extends HTMLAttributes<T> {
|
||||
component?: ReactType;
|
||||
childFactory?(child: ReactElement<any>): ReactElement<any>;
|
||||
}
|
||||
|
||||
import * as TransitionGroup from "./TransitionGroup";
|
||||
export {
|
||||
TransitionGroupProps,
|
||||
TransitionGroupChildLifecycle
|
||||
} from "./TransitionGroup";
|
||||
|
||||
import * as CSSTransitionGroup from "./CSSTransitionGroup";
|
||||
export {
|
||||
CSSTransitionGroupProps,
|
||||
CSSTransitionGroupTransitionName
|
||||
} from "./CSSTransitionGroup";
|
||||
|
||||
export {
|
||||
TransitionGroup,
|
||||
CSSTransitionGroup
|
||||
};
|
||||
@@ -0,0 +1,73 @@
|
||||
import * as React from "react";
|
||||
import * as TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
import * as CSSTransitionGroup from "react-transition-group/CSSTransitionGroup";
|
||||
import { CSSTransitionGroupProps, TransitionGroupProps, TransitionGroupChildLifecycle } from "react-transition-group";
|
||||
|
||||
class TestChild extends React.Component implements TransitionGroupChildLifecycle {
|
||||
componentWillAppear(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidAppear() {}
|
||||
|
||||
componentWillEnter(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidEnter() {}
|
||||
|
||||
componentWillLeave(callback: () => void) {
|
||||
callback();
|
||||
}
|
||||
|
||||
componentDidLeave() {}
|
||||
|
||||
render() {
|
||||
return (<li>{ "Test" }</li>);
|
||||
}
|
||||
}
|
||||
|
||||
const Test: React.StatelessComponent = () => {
|
||||
return (
|
||||
<div>
|
||||
<TransitionGroup component="ul" className="animated-list">
|
||||
<TestChild />
|
||||
</TransitionGroup>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName="example"
|
||||
transitionAppear={ true }
|
||||
transitionAppearTimeout={ 500 }
|
||||
transitionEnter={ true }
|
||||
transitionEnterTimeout={ 500 }
|
||||
transitionLeave={ true }
|
||||
transitionLeaveTimeout={ 500 }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: "enter",
|
||||
enterActive: "enterActive",
|
||||
leave: "leave",
|
||||
leaveActive: "leaveActive",
|
||||
appear: "appear",
|
||||
appearActive: "appearActive"
|
||||
} }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
|
||||
<CSSTransitionGroup
|
||||
transitionName={ {
|
||||
enter: "enter",
|
||||
leave: "leave",
|
||||
appear: "appear"
|
||||
} }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransitionGroup>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"lib": [
|
||||
"es6"
|
||||
],
|
||||
"noImplicitAny": true,
|
||||
"noImplicitThis": true,
|
||||
"strictNullChecks": true,
|
||||
"jsx": "react",
|
||||
"baseUrl": "../../",
|
||||
"typeRoots": ["../../"],
|
||||
"paths": {
|
||||
"react-transition-group": ["react-transition-group/v1"],
|
||||
"react-transition-group/*": ["react-transition-group/v1/*"]
|
||||
},
|
||||
"types": [],
|
||||
"noEmit": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"files": [
|
||||
"index.d.ts",
|
||||
"CSSTransitionGroup.d.ts",
|
||||
"TransitionGroup.d.ts",
|
||||
"react-transition-group-tests.tsx"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
{ "extends": "dtslint/dt.json" }
|
||||
Reference in New Issue
Block a user