From ce45dc72c04ce322901dc22f81e12f8cb8c51eb1 Mon Sep 17 00:00:00 2001
From: g1eny0ung <g1enyy0ung@gmail.com>
Date: Fri, 2 Nov 2018 09:32:59 +0800
Subject: [PATCH 1/2] Upgrade react-alert to 4.0

---
 types/react-alert/index.d.ts               | 122 ++++-----------------
 types/react-alert/react-alert-tests.tsx    | 121 +++++++++++++-------
 types/react-alert/v2/index.d.ts            | 110 +++++++++++++++++++
 types/react-alert/v2/react-alert-tests.tsx |  48 ++++++++
 types/react-alert/v2/tsconfig.json         |  27 +++++
 types/react-alert/v2/tslint.json           |   1 +
 6 files changed, 290 insertions(+), 139 deletions(-)
 create mode 100644 types/react-alert/v2/index.d.ts
 create mode 100644 types/react-alert/v2/react-alert-tests.tsx
 create mode 100644 types/react-alert/v2/tsconfig.json
 create mode 100644 types/react-alert/v2/tslint.json

diff --git a/types/react-alert/index.d.ts b/types/react-alert/index.d.ts
index 3814b7f29f..cbc48d247f 100644
--- a/types/react-alert/index.d.ts
+++ b/types/react-alert/index.d.ts
@@ -1,110 +1,34 @@
-// Type definitions for react-alert 2.4
+// Type definitions for react-alert 4.0
 // Project: https://github.com/schiehll/react-alert
-// Definitions by: Steve Syrell <https://github.com/ssyrell>
+// Definitions by: Yue Yang <https://github.com/g1eny0ung>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
-import * as React from "react";
+import * as React from 'react';
 
-export interface AlertContainerProps {
-    /**
-     * The offset of the alert from the page border, can be any number.
-     *
-     * Default: 14.
-     */
-    offset: number;
+export type AlertPosition =
+    | 'top left'
+    | 'top right'
+    | 'top center'
+    | 'bottom left'
+    | 'bottom right'
+    | 'bottom center';
 
-    /**
-     * The position of the alert. Can be [bottom left, bottom right, top left, top right].
-     *
-     * Default: 'bottom left'
-     */
-    position: string;
+export type AlertType = 'info' | 'success' | 'error';
+export type AlertTransition = 'fade' | 'scale';
 
-    /**
-     * The color theme of the alert. Can be [dark, light].
-     *
-     * Default: 'dark'
-     */
-    theme: string;
-
-    /**
-     * The time in milliseconds the alert is displayed. After this
-     * time ellapses, the alert will close itself. Use 0 to prevent self-closure
-     * (applies to all alerts).
-     *
-     * Default: 5000
-     */
-    time: number;
-
-    /**
-     * The transition animation. Can be [scale, fade].
-     *
-     * Default: 'scale'
-     */
-    transition: string;
+export interface ProviderProps {
+    offset?: string;
+    position?: AlertPosition;
+    timeout?: number;
+    type?: AlertType;
+    transition?: AlertTransition;
+    zIndex?: number;
+    template: React.ComponentType;
 }
 
-export interface AlertShowOptions {
-    /**
-     * The time in milliseconds the alert is displayed. After this
-     * time ellapses, the alert will close itself. Use 0 to prevent self-closure.
-     */
-    time?: number;
+export class Provider extends React.Component<ProviderProps> {}
 
-    /**
-     * The icon to show in the alert.
-     *
-     * Default: the icon which matches the type of alert to be shown.
-     */
-    icon?: React.ReactNode;
+export const Alert: React.Consumer<undefined>;
 
-    /**
-     * A callback function that will be called when the alert is closed.
-     */
-    onClose?: () => void;
-
-    /**
-     * The type of alert to show. This will only be used when calling show().
-     * Can be [info, success, error].
-     *
-     * Default: 'info'
-     */
-    type?: string;
-}
-
-export default class AlertContainer extends React.Component<AlertContainerProps> {
-    /**
-     * Show a success alert.
-     * @returns The id of the created alert.
-     */
-    success(message: string, options?: AlertShowOptions): string;
-
-    /**
-     * Show an error alert.
-     * @returns The id of the created alert.
-     */
-    error(message: string, options?: AlertShowOptions): string;
-
-    /**
-     * Show an info alert.
-     * @returns The id of the created alert.
-     */
-    info(message: string, options?: AlertShowOptions): string;
-
-    /**
-     * Show an alert.
-     * @returns The id of the created alert.
-     */
-    show(message: string, options?: AlertShowOptions): string;
-
-    /**
-     * Remove all alerts from the page.
-     */
-    removeAll(): void;
-
-    /**
-     * Removes the alert with the specified id from the page.
-     */
-    remove(id: string): void;
-}
+export function withAlert<P>(c: React.ComponentType<P>): React.ComponentType<P>;
diff --git a/types/react-alert/react-alert-tests.tsx b/types/react-alert/react-alert-tests.tsx
index 84686ea73d..d421d8cc88 100644
--- a/types/react-alert/react-alert-tests.tsx
+++ b/types/react-alert/react-alert-tests.tsx
@@ -1,48 +1,89 @@
-import * as React from "react";
-import AlertContainer, { AlertContainerProps, AlertShowOptions } from "react-alert";
+import * as React from 'react';
+import {
+    Provider as AlertProvider,
+    Alert,
+    withAlert,
+    AlertPosition,
+    AlertTransition
+} from 'react-alert';
 
-export class ReactAlertTest extends React.Component {
-    private _alert: AlertContainer;
+class AppWithoutAlert extends React.Component<any> {
     render() {
-        const props: AlertContainerProps = {
-            offset: 14,
-            position: "bottom left",
-            theme: "dark",
-            time: 5000,
-            transition: "scale"
-        };
+        return (
+            <button
+                onClick={() => {
+                    this.props.alert.show('Oh look, an alert!');
+                }}
+            >
+                Show Alert
+            </button>
+        );
+    }
+}
+
+class AppAlert extends React.Component {
+    render() {
+        return (
+            <Alert>
+                {alert => (
+                    <button
+                        onClick={() => {
+                            (alert as any).show('Oh look, an alert!');
+                        }}
+                    >
+                        Show Alert
+                    </button>
+                )}
+            </Alert>
+        );
+    }
+}
+
+const App = withAlert(AppWithoutAlert);
+
+class AlertTemplate extends React.Component<any> {
+    render() {
+        // the style contains only the margin given as offset
+        // options contains all alert given options
+        // message is the alert message...
+        // close is a function that closes the alert
+        const { style, options, message, close } = this.props;
 
         return (
-            <div>
-                <AlertContainer ref={a => this._alert = a as AlertContainer} {...props} />
+            <div style={style}>
+                {options.type === 'info' && '!'}
+                {options.type === 'success' && ':)'}
+                {options.type === 'error' && ':('}
+                {message}
+                <button onClick={close}>X</button>
             </div>
         );
     }
-
-    private _testMethods(): void {
-        const options: AlertShowOptions = {
-            time: 5000,
-            type: "info",
-            onClose: this._onAlertClosed,
-            icon: <img src="path/to/some/image/32x32.png" />
-        };
-
-        let alertId: string;
-        alertId = this._alert.show("show without options");
-        alertId = this._alert.show("show with options", options);
-
-        alertId = this._alert.error("error without options");
-        alertId = this._alert.error("error with options", options);
-
-        alertId = this._alert.info("info without options");
-        alertId = this._alert.info("info with options", options);
-
-        alertId = this._alert.success("success without options");
-        alertId = this._alert.success("success with options", options);
-
-        this._alert.remove(alertId);
-        this._alert.removeAll();
-    }
-
-    private _onAlertClosed(): void { }
+}
+
+const options = {
+    position: 'bottom center' as AlertPosition,
+    timeout: 5000,
+    offset: '30px',
+    transition: 'scale' as AlertTransition
+};
+
+class Root extends React.Component {
+    render() {
+        return (
+            <AlertProvider template={AlertTemplate} {...options}>
+                <App />
+            </AlertProvider>
+        );
+    }
+}
+
+class RootAlert extends React.Component {
+    render() {
+        return (
+            <AlertProvider template={AlertTemplate} {...options}>
+                <AppAlert />
+            </AlertProvider>
+        );
+    }
 }
diff --git a/types/react-alert/v2/index.d.ts b/types/react-alert/v2/index.d.ts
new file mode 100644
index 0000000000..3814b7f29f
--- /dev/null
+++ b/types/react-alert/v2/index.d.ts
@@ -0,0 +1,110 @@
+// Type definitions for react-alert 2.4
+// Project: https://github.com/schiehll/react-alert
+// Definitions by: Steve Syrell <https://github.com/ssyrell>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import * as React from "react";
+
+export interface AlertContainerProps {
+    /**
+     * The offset of the alert from the page border, can be any number.
+     *
+     * Default: 14.
+     */
+    offset: number;
+
+    /**
+     * The position of the alert. Can be [bottom left, bottom right, top left, top right].
+     *
+     * Default: 'bottom left'
+     */
+    position: string;
+
+    /**
+     * The color theme of the alert. Can be [dark, light].
+     *
+     * Default: 'dark'
+     */
+    theme: string;
+
+    /**
+     * The time in milliseconds the alert is displayed. After this
+     * time ellapses, the alert will close itself. Use 0 to prevent self-closure
+     * (applies to all alerts).
+     *
+     * Default: 5000
+     */
+    time: number;
+
+    /**
+     * The transition animation. Can be [scale, fade].
+     *
+     * Default: 'scale'
+     */
+    transition: string;
+}
+
+export interface AlertShowOptions {
+    /**
+     * The time in milliseconds the alert is displayed. After this
+     * time ellapses, the alert will close itself. Use 0 to prevent self-closure.
+     */
+    time?: number;
+
+    /**
+     * The icon to show in the alert.
+     *
+     * Default: the icon which matches the type of alert to be shown.
+     */
+    icon?: React.ReactNode;
+
+    /**
+     * A callback function that will be called when the alert is closed.
+     */
+    onClose?: () => void;
+
+    /**
+     * The type of alert to show. This will only be used when calling show().
+     * Can be [info, success, error].
+     *
+     * Default: 'info'
+     */
+    type?: string;
+}
+
+export default class AlertContainer extends React.Component<AlertContainerProps> {
+    /**
+     * Show a success alert.
+     * @returns The id of the created alert.
+     */
+    success(message: string, options?: AlertShowOptions): string;
+
+    /**
+     * Show an error alert.
+     * @returns The id of the created alert.
+     */
+    error(message: string, options?: AlertShowOptions): string;
+
+    /**
+     * Show an info alert.
+     * @returns The id of the created alert.
+     */
+    info(message: string, options?: AlertShowOptions): string;
+
+    /**
+     * Show an alert.
+     * @returns The id of the created alert.
+     */
+    show(message: string, options?: AlertShowOptions): string;
+
+    /**
+     * Remove all alerts from the page.
+     */
+    removeAll(): void;
+
+    /**
+     * Removes the alert with the specified id from the page.
+     */
+    remove(id: string): void;
+}
diff --git a/types/react-alert/v2/react-alert-tests.tsx b/types/react-alert/v2/react-alert-tests.tsx
new file mode 100644
index 0000000000..84686ea73d
--- /dev/null
+++ b/types/react-alert/v2/react-alert-tests.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import AlertContainer, { AlertContainerProps, AlertShowOptions } from "react-alert";
+
+export class ReactAlertTest extends React.Component {
+    private _alert: AlertContainer;
+    render() {
+        const props: AlertContainerProps = {
+            offset: 14,
+            position: "bottom left",
+            theme: "dark",
+            time: 5000,
+            transition: "scale"
+        };
+
+        return (
+            <div>
+                <AlertContainer ref={a => this._alert = a as AlertContainer} {...props} />
+            </div>
+        );
+    }
+
+    private _testMethods(): void {
+        const options: AlertShowOptions = {
+            time: 5000,
+            type: "info",
+            onClose: this._onAlertClosed,
+            icon: <img src="path/to/some/image/32x32.png" />
+        };
+
+        let alertId: string;
+        alertId = this._alert.show("show without options");
+        alertId = this._alert.show("show with options", options);
+
+        alertId = this._alert.error("error without options");
+        alertId = this._alert.error("error with options", options);
+
+        alertId = this._alert.info("info without options");
+        alertId = this._alert.info("info with options", options);
+
+        alertId = this._alert.success("success without options");
+        alertId = this._alert.success("success with options", options);
+
+        this._alert.remove(alertId);
+        this._alert.removeAll();
+    }
+
+    private _onAlertClosed(): void { }
+}
diff --git a/types/react-alert/v2/tsconfig.json b/types/react-alert/v2/tsconfig.json
new file mode 100644
index 0000000000..47de249c7e
--- /dev/null
+++ b/types/react-alert/v2/tsconfig.json
@@ -0,0 +1,27 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../../",
+        "typeRoots": [
+            "../../"
+        ],
+        "paths": {
+            "react-alert": ["react-alert/v2"]
+        },
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true,
+        "jsx": "react"
+    },
+    "files": [
+        "index.d.ts",
+        "react-alert-tests.tsx"
+    ]
+}
diff --git a/types/react-alert/v2/tslint.json b/types/react-alert/v2/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-alert/v2/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }

From 7f58de6fb2c248e0347d539b31dcfa4687bfec05 Mon Sep 17 00:00:00 2001
From: g1eny0ung <g1enyy0ung@gmail.com>
Date: Sat, 3 Nov 2018 12:37:04 +0800
Subject: [PATCH 2/2] Add alert prop's types

---
 types/react-alert/index.d.ts            | 73 +++++++++++++++++++++++--
 types/react-alert/react-alert-tests.tsx | 14 +++--
 2 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/types/react-alert/index.d.ts b/types/react-alert/index.d.ts
index cbc48d247f..6c94da77b0 100644
--- a/types/react-alert/index.d.ts
+++ b/types/react-alert/index.d.ts
@@ -17,18 +17,81 @@ export type AlertPosition =
 export type AlertType = 'info' | 'success' | 'error';
 export type AlertTransition = 'fade' | 'scale';
 
-export interface ProviderProps {
+export interface ProviderOptions {
+    /**
+     * The margin of each alert
+     *
+     * Default value: '10px'
+     */
     offset?: string;
+    /**
+     * The position of the alerts in the page
+     *
+     * Default value: 'top center'
+     */
     position?: AlertPosition;
+    /**
+     * Timeout to alert remove itself, if  set to 0 it never removes itself
+     *
+     * Default value: 0
+     */
     timeout?: number;
+    /**
+     * The default alert type used when calling this.props.alert.show
+     *
+     * Default value: 'info'
+     */
     type?: AlertType;
+    /**
+     * The transition animation
+     *
+     * Default value: 'fade'
+     */
     transition?: AlertTransition;
+    /**
+     * The z-index of alerts
+     *
+     * Default value: 100
+     */
     zIndex?: number;
-    template: React.ComponentType;
 }
 
-export class Provider extends React.Component<ProviderProps> {}
+export class Provider extends React.Component<ProviderOptions & {
+    template: React.ComponentType
+}> {}
 
-export const Alert: React.Consumer<undefined>;
+export const Alert: React.Consumer<InjectedAlertProp>;
 
-export function withAlert<P>(c: React.ComponentType<P>): React.ComponentType<P>;
+export interface AlertCustomOptions {
+    /**
+     * Custom timeout just for this one alert
+     */
+    timeout?: number;
+    /**
+     * Callback that will be executed after this alert open
+     */
+    onOpen?(): undefined;
+    /**
+     * Callback that will be executed after this alert is removed
+     */
+    onClose?(): undefined;
+}
+
+export interface AlertCustomOptionsWithType extends AlertCustomOptions {
+    type?: AlertType;
+}
+
+export interface InjectedAlertProp {
+    show(
+        message?: string,
+        options?: AlertCustomOptionsWithType
+    ): InjectedAlertProp;
+    remove(alert: InjectedAlertProp): undefined;
+    success(message?: string, options?: AlertCustomOptions): InjectedAlertProp;
+    error(message?: string, options?: AlertCustomOptions): InjectedAlertProp;
+    info(message?: string, options?: AlertCustomOptions): InjectedAlertProp;
+}
+
+export function withAlert<P extends { alert: InjectedAlertProp }>(
+    c: React.ComponentType<P>
+): React.ComponentType<Pick<P, Exclude<keyof P, 'alert'>>>;
diff --git a/types/react-alert/react-alert-tests.tsx b/types/react-alert/react-alert-tests.tsx
index d421d8cc88..c6088a52a8 100644
--- a/types/react-alert/react-alert-tests.tsx
+++ b/types/react-alert/react-alert-tests.tsx
@@ -4,10 +4,12 @@ import {
     Alert,
     withAlert,
     AlertPosition,
-    AlertTransition
+    AlertTransition,
+    ProviderOptions,
+    InjectedAlertProp
 } from 'react-alert';
 
-class AppWithoutAlert extends React.Component<any> {
+class AppWithoutAlert extends React.Component<{ alert: InjectedAlertProp }> {
     render() {
         return (
             <button
@@ -21,6 +23,8 @@ class AppWithoutAlert extends React.Component<any> {
     }
 }
 
+const App = withAlert(AppWithoutAlert);
+
 class AppAlert extends React.Component {
     render() {
         return (
@@ -28,7 +32,7 @@ class AppAlert extends React.Component {
                 {alert => (
                     <button
                         onClick={() => {
-                            (alert as any).show('Oh look, an alert!');
+                            alert.show('Oh look, an alert!');
                         }}
                     >
                         Show Alert
@@ -39,8 +43,6 @@ class AppAlert extends React.Component {
     }
 }
 
-const App = withAlert(AppWithoutAlert);
-
 class AlertTemplate extends React.Component<any> {
     render() {
         // the style contains only the margin given as offset
@@ -61,7 +63,7 @@ class AlertTemplate extends React.Component<any> {
     }
 }
 
-const options = {
+const options: ProviderOptions = {
     position: 'bottom center' as AlertPosition,
     timeout: 5000,
     offset: '30px',