vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-10-05 07:17:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

react-flip-move: Provides its own types (#22346)

Browse Source
This commit is contained in:
Andy
2018-01-02 08:50:59 -08:00
committed by GitHub
parent 52472357ed
commit 0ed1b1d0c5
5 changed files with 6 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
notNeededPackages.json
+6
View File
@@ -828,6 +828,12 @@
"sourceRepoURL": "https://github.com/gpbl/react-day-picker",
"asOfVersion": "5.3.0"
},
{
"libraryName": "react-flip-move",
"typingsPackageName": "react-flip-move",
"sourceRepoURL": "https://github.com/joshwcomeau/react-flip-move",
"asOfVersion": "2.9.12"
},
{
"libraryName": "react-ga",
"typingsPackageName": "react-ga",
types/react-flip-move/index.d.ts
Vendored
-220
View File
@@ -1,220 +0,0 @@
// Type definitions for react-flip-move 2.9
// Project: https://github.com/joshwcomeau/react-flip-move
// Definitions by: Joey Hain <https://github.com/jmhain>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
import { Component, ReactElement } from "react";
export as namespace FlipMove;
export = FlipMove;
declare class FlipMove extends Component<FlipMove.FlipMoveProps> { }
declare namespace FlipMove {
type AnimationPreset = "elevator" | "fade" | "accordionVertical" | "accordionHorizontal" | "none";
interface Animation {
from: Partial<CSSStyleDeclaration>;
to: Partial<CSSStyleDeclaration>;
}
interface FlipMoveProps {
className?: string;
/**
* Any valid CSS3 timing function (eg. "linear", "ease-in", "cubic-bezier(1, 0, 0, 1)").
*
* @default "ease-in-out"
*/
easing?: string;
/**
* The length, in milliseconds, that the transition ought to take.
*
* @default 350
*/
duration?: number;
/**
* The length, in milliseconds, to wait before the animation begins.
*
* @default 0
*/
delay?: number;
/**
* The length, in milliseconds, to be added to the duration of each subsequent element.
*
* For example, if you are animating 4 elements with a `duration` of 200 and a `staggerDurationBy` of 20:
*
* - The first element will take 200ms to transition.
* - The second element will take 220ms to transition.
* - The third element will take 240ms to transition.
* - The fourth element will take 260ms to transition.
*
* This effect is great for "humanizing" transitions and making them feel less robotic.
*/
staggerDurationBy?: number;
/**
* The length, in milliseconds, to be added to the delay of each subsequent element.
*
* For example, if you are animating 4 elements with a `delay` of 0 and a `staggerDelayBy` of 20:
*
* - The first element will start transitioning immediately.
* - The second element will start transitioning after 20ms.
* - The third element will start transitioning after 40ms.
* - The fourth element will start transitioning after 60ms.
*
* Similarly to staggerDurationBy, This effect is great for "humanizing" transitions and making them feel less
* robotic.
*
* **Protip**: You can make elements animate one-at-a-time by using an identical duration and staggerDelayBy.
*
* @default 0
*/
staggerDelayBy?: number;
/**
* Control the appear animation that runs when the component mounts. Works identically to enterAnimation below, but
* only fires on the initial children.
*/
appearAnimation?: AnimationPreset | Animation | boolean;
/**
* Control the onEnter animation that runs when new items are added to the DOM.
*
* Accepts several types:
*
* **String:** You can enter one of the following presets to select that as your enter animation:
*
* - `elevator` (default)
* - `fade`
* - `accordionVertical`
* - `accordionHorizontal`
* - `none`
*
* **Boolean:** You can enter `false` to disable the enter animation, or `true` to select the default enter animation (elevator).
*
* **Object:** For fully granular control, you can pass in an object that contains the styles you'd like to animate.
*
* It requires two keys: `from` and `to`. Each key holds an object of CSS properties. You can supply any valid
* camelCase CSS properties, and flip-move will transition between the two, over the course of the specified
* `duration`.
*
* Example:
*
* const customEnterAnimation = {
* from: { transform: 'scale(0.5, 1)' },
* to: { transform: 'scale(1, 1)' }
* };
*
* <FlipMove enterAnimation={customEnterAnimation}>
* {renderChildren()}
* </FlipMove>
*
* @default "elevator"
*/
enterAnimation?: AnimationPreset | Animation | boolean;
/**
* Control the onLeave animation that runs when new items are removed from the DOM.
*
* This property functions identically to `enterAnimation`.
*
* @default "elevator"
*/
leaveAnimation?: AnimationPreset | Animation | boolean;
/**
* Do not collapse container height until after leaving animations complete.
*
* When false, children are immediately removed from the DOM flow as they animate away. Setting this value to true
* will maintain the height of the container until after their leaving animation completes.
*
* @default false
*/
maintainContainerHeight?: boolean;
/**
* A callback to be invoked **once per child element** at the start of the animation.
*
* In general, it is advisable to ignore the domNode argument and work with the childElement. The domNode is just
* an escape hatch for doing complex things not otherwise possible.
*
* @param childElement A reference to the React Element being animated.
* @param domNode A reference to the unadulterated DOM node being animated.
*/
onStart?(childElement: ReactElement<any>, domNode: HTMLElement): void;
/**
* A callback to be invoked **once per child element** at the end of the animation.
*
* In general, it is advisable to ignore the `domNode` argument and work with the `childElement`. The `domNode` is
* just an escape hatch for doing complex things not otherwise possible.
*
* @param childElement A reference to the React Element being animated.
* @param domNode A reference to the unadulterated DOM node being animated.
*/
onFinish?(childElement: ReactElement<any>, domNode: HTMLElement): void;
/**
* A callback to be invoked **once per group** at the start of the animation.
*
* The callback arguments are similar to the ones provided for onStart, except we provide an array of the elements
* and nodes. The order of both arguments is guaranteed; this means you can use a zipping function like lodash's
* .zip to get pairs of element/node, if needed.
*
* In general, it is advisable to ignore the `domNodes` argument and work with the `childElements` The `domNodes`
*
* are just an escape hatch for doing complex things not otherwise possible.
*
* @param childElements An array of the references to the React Element(s) being animated.
* @param domNodes An array of the references to the unadulterated DOM node(s) being animated.
*/
onStartAll?(childElements: Array<ReactElement<any>>, domNodes: HTMLElement[]): void;
/**
* A callback to be invoked **once per group** at the end of the animation.
*
* The callback arguments are similar to the ones provided for onFinish, except we provide an array of the elements
* and nodes. The order of both arguments is guaranteed; this means you can use a zipping function like lodash's
* .zip to get pairs of element/node, if needed.
*
* In general, it is advisable to ignore the `domNodes` argument and work with the `childElements` The `domNodes`
* are just an escape hatch for doing complex things not otherwise possible.
*
* @param childElements An array of the references to the React Element(s) being animated.
* @param domNodes An array of the references to the unadulterated DOM node(s) being animated.
*/
onFinishAll?(childElements: Array<ReactElement<any>>, domNodes: HTMLElement[]): void;
/**
* Flip Move wraps your children in a container element. By default, this element is a div, but you may wish to
* provide a custom HTML element (for example, if your children are list items, you may wish to set this to ul).
*
* Any valid HTML element type is accepted, but peculiar things may happen if you use an unconventional element.
*
* @default "div"
*/
typeName?: string;
/**
* Sometimes, you may wish to temporarily disable the animations and have the normal behaviour resumed. Setting this
* flag to true skips all animations.
*
* @default false
*/
disableAllAnimations?: boolean;
/**
* This function is called with a DOM node as the only argument. It should return an object as specified by the
* getBoundingClientRect() spec.
*
* For normal usage of FlipMove you won't need this. An example of usage is when FlipMove is used in a container
* that is scaled using CSS. You can correct the values from getBoundingClientRect by using this prop.
*/
getPosition?(node: HTMLElement): ClientRect;
}
}
types/react-flip-move/react-flip-move-tests.tsx
-70
View File
@@ -1,70 +0,0 @@
import * as React from "react";
import * as FlipMove from "react-flip-move";
class DefaultTest extends React.Component {
render() {
return <FlipMove />;
}
}
class PresetTest extends React.Component {
render() {
return (
<FlipMove
appearAnimation="fade"
enterAnimation="accordionHorizontal"
leaveAnimation="accordionVertical"
/>
);
}
}
class CustomAnimationTest extends React.Component {
render() {
const enterAnimation: FlipMove.Animation = {
from: { opacity: "0" },
to: { opacity: "1" }
};
const leaveAnimation: FlipMove.Animation = {
from: { opacity: "1" },
to: { opacity: "0" }
};
return (
<FlipMove
enterAnimation={enterAnimation}
appearAnimation={enterAnimation}
leaveAnimation={leaveAnimation}
/>
);
}
}
class FlipMoveTest extends React.Component {
onStart = (childElement: React.ReactElement<any>, domNode: HTMLElement) => {};
onFinish = (childElement: React.ReactElement<any>, domNode: HTMLElement) => {};
onStartAll = (childElements: Array<React.ReactElement<any>>, domNodes: HTMLElement[]) => {};
onFinishAll = (childElements: Array<React.ReactElement<any>>, domNodes: HTMLElement[]) => {};
render() {
return (
<FlipMove
delay={0}
staggerDelayBy={20}
duration={200}
staggerDurationBy={20}
maintainContainerHeight
disableAllAnimations={false}
easing="cubic-bezier(1, 0, 0, 1)"
onStart={this.onStart}
onFinish={this.onFinish}
onStartAll={this.onStartAll}
onFinishAll={this.onFinishAll}
/>
);
}
}
types/react-flip-move/tsconfig.json
-25
View File
@@ -1,25 +0,0 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"dom"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true,
"jsx": "react"
},
"files": [
"index.d.ts",
"react-flip-move-tests.tsx"
]
}
types/react-flip-move/tslint.json
-1
View File
@@ -1 +0,0 @@
{ "extends": "dtslint/dt.json" }