mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-12 22:36:10 +08:00
Fix types for transition components
This commit is contained in:
Karol Janyst
20
types/react-transition-group/CSSTransition.d.ts
vendored
20
types/react-transition-group/CSSTransition.d.ts
vendored
@@ -1,5 +1,4 @@
|
||||
import { Component } from "react";
|
||||
import { TransitionActions } from "react-transition-group";
|
||||
import { TransitionProps } from "react-transition-group/Transition";
|
||||
|
||||
export interface CSSTransitionClassNames {
|
||||
@@ -11,6 +10,25 @@ export interface CSSTransitionClassNames {
|
||||
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;
|
||||
}
|
||||
|
||||
53
types/react-transition-group/Transition.d.ts
vendored
53
types/react-transition-group/Transition.d.ts
vendored
@@ -1,11 +1,16 @@
|
||||
import { Component, HTMLProps } from "react";
|
||||
import { TransitionActions } from "react-transition-group";
|
||||
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 TransitionProps extends TransitionActions, HTMLProps<any> {
|
||||
export interface TransitionActions {
|
||||
appear?: boolean;
|
||||
enter?: boolean;
|
||||
exit?: boolean;
|
||||
}
|
||||
|
||||
export interface TransitionProps extends TransitionActions {
|
||||
in?: boolean;
|
||||
mountOnEnter?: boolean;
|
||||
unmountOnExit?: boolean;
|
||||
@@ -17,8 +22,50 @@ export interface TransitionProps extends TransitionActions, HTMLProps<any> {
|
||||
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;
|
||||
|
||||
@@ -1,10 +1,76 @@
|
||||
import { Component, ReactType, HTMLProps } from "react";
|
||||
import { TransitionActions } from "react-transition-group";
|
||||
import { Component, ReactType, HTMLProps, ReactElement } from "react";
|
||||
import { TransitionActions, TransitionProps } from "react-transition-group/Transition";
|
||||
|
||||
export interface TransitionGroupProps extends TransitionActions, HTMLProps<any> {
|
||||
component?: ReactType;
|
||||
export interface IntrinsicTransitionGroupProps<T extends keyof JSX.IntrinsicElements = "div"> extends TransitionActions {
|
||||
component?: T;
|
||||
}
|
||||
|
||||
export interface ComponentTransitionGroupProps<T extends ReactType> extends TransitionActions {
|
||||
component: T;
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
16
types/react-transition-group/index.d.ts
vendored
16
types/react-transition-group/index.d.ts
vendored
@@ -4,12 +4,12 @@
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.3
|
||||
|
||||
export { default as CSSTransition, CSSTransitionProps, CSSTransitionClassNames } from "react-transition-group/CSSTransition";
|
||||
export { default as Transition, TransitionProps } from "react-transition-group/Transition";
|
||||
export { default as TransitionGroup, TransitionGroupProps } from "react-transition-group/TransitionGroup";
|
||||
import CSSTransition from "react-transition-group/CSSTransition";
|
||||
import Transition from "react-transition-group/Transition";
|
||||
import TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
|
||||
export interface TransitionActions {
|
||||
appear?: boolean;
|
||||
enter?: boolean;
|
||||
exit?: boolean;
|
||||
}
|
||||
export = {
|
||||
CSSTransition,
|
||||
Transition,
|
||||
TransitionGroup
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import * as React from "react";
|
||||
import CSSTransition from "react-transition-group/CSSTransition";
|
||||
import Transition from "react-transition-group/Transition";
|
||||
import TransitionGroup from "react-transition-group/TransitionGroup";
|
||||
import { CSSTransitionProps, TransitionProps, TransitionGroupProps } from "react-transition-group";
|
||||
import Components = require("react-transition-group");
|
||||
|
||||
const Test: React.StatelessComponent = () => {
|
||||
function handleEnter(node: HTMLElement, isAppearing: boolean) {}
|
||||
@@ -18,7 +18,7 @@ const Test: React.StatelessComponent = () => {
|
||||
component="ul"
|
||||
className="animated-list"
|
||||
>
|
||||
<Transition
|
||||
<Components.Transition
|
||||
in
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
@@ -35,7 +35,7 @@ const Test: React.StatelessComponent = () => {
|
||||
onExited={ handleExit }
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</Transition>
|
||||
</Components.Transition>
|
||||
|
||||
<Transition
|
||||
timeout={ { enter : 500, exit : 500 } }
|
||||
@@ -43,7 +43,7 @@ const Test: React.StatelessComponent = () => {
|
||||
<div>{ "test" }</div>
|
||||
</Transition>
|
||||
|
||||
<CSSTransition
|
||||
<Components.CSSTransition
|
||||
in
|
||||
mountOnEnter
|
||||
unmountOnExit
|
||||
@@ -61,7 +61,7 @@ const Test: React.StatelessComponent = () => {
|
||||
classNames="fade"
|
||||
>
|
||||
<div>{ "test" }</div>
|
||||
</CSSTransition>
|
||||
</Components.CSSTransition>
|
||||
|
||||
<CSSTransition
|
||||
timeout={ { enter : 500, exit : 500 } }
|
||||
|
||||
Reference in New Issue
Block a user