From 0ed1b1d0c525f3ff99cc70dfe735be5285c2c434 Mon Sep 17 00:00:00 2001 From: Andy Date: Tue, 2 Jan 2018 08:50:59 -0800 Subject: [PATCH] react-flip-move: Provides its own types (#22346) --- notNeededPackages.json | 6 + types/react-flip-move/index.d.ts | 220 ------------------ .../react-flip-move/react-flip-move-tests.tsx | 70 ------ types/react-flip-move/tsconfig.json | 25 -- types/react-flip-move/tslint.json | 1 - 5 files changed, 6 insertions(+), 316 deletions(-) delete mode 100644 types/react-flip-move/index.d.ts delete mode 100644 types/react-flip-move/react-flip-move-tests.tsx delete mode 100644 types/react-flip-move/tsconfig.json delete mode 100644 types/react-flip-move/tslint.json diff --git a/notNeededPackages.json b/notNeededPackages.json index 6786c3d526..f55a79a5a7 100644 --- a/notNeededPackages.json +++ b/notNeededPackages.json @@ -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", diff --git a/types/react-flip-move/index.d.ts b/types/react-flip-move/index.d.ts deleted file mode 100644 index 8480d50c28..0000000000 --- a/types/react-flip-move/index.d.ts +++ /dev/null @@ -1,220 +0,0 @@ -// Type definitions for react-flip-move 2.9 -// Project: https://github.com/joshwcomeau/react-flip-move -// Definitions by: Joey Hain -// 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 { } - -declare namespace FlipMove { - type AnimationPreset = "elevator" | "fade" | "accordionVertical" | "accordionHorizontal" | "none"; - - interface Animation { - from: Partial; - to: Partial; - } - - 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)' } - * }; - * - * - * {renderChildren()} - * - * - * @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, 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, 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>, 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>, 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; - } -} diff --git a/types/react-flip-move/react-flip-move-tests.tsx b/types/react-flip-move/react-flip-move-tests.tsx deleted file mode 100644 index 19dac88a65..0000000000 --- a/types/react-flip-move/react-flip-move-tests.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import * as React from "react"; -import * as FlipMove from "react-flip-move"; - -class DefaultTest extends React.Component { - render() { - return ; - } -} - -class PresetTest extends React.Component { - render() { - return ( - - ); - } -} - -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 ( - - ); - } -} - -class FlipMoveTest extends React.Component { - onStart = (childElement: React.ReactElement, domNode: HTMLElement) => {}; - - onFinish = (childElement: React.ReactElement, domNode: HTMLElement) => {}; - - onStartAll = (childElements: Array>, domNodes: HTMLElement[]) => {}; - - onFinishAll = (childElements: Array>, domNodes: HTMLElement[]) => {}; - - render() { - return ( - - ); - } -} diff --git a/types/react-flip-move/tsconfig.json b/types/react-flip-move/tsconfig.json deleted file mode 100644 index 9472de4695..0000000000 --- a/types/react-flip-move/tsconfig.json +++ /dev/null @@ -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" - ] -} \ No newline at end of file diff --git a/types/react-flip-move/tslint.json b/types/react-flip-move/tslint.json deleted file mode 100644 index 3db14f85ea..0000000000 --- a/types/react-flip-move/tslint.json +++ /dev/null @@ -1 +0,0 @@ -{ "extends": "dtslint/dt.json" }