Merge pull request #30222 from g1eny0ung/react-alert-4.0

Upgrade react-alert to 4.0

types/react-alert/index.d.ts

@@ -1,110 +1,97 @@
-// 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';
 
+export interface ProviderOptions {
     /**
-     * The color theme of the alert. Can be [dark, light].
+     * The margin of each alert
      *
-     * Default: 'dark'
+     * Default value: '10px'
      */
-    theme: string;
-
+    offset?: 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).
+     * The position of the alerts in the page
      *
-     * Default: 5000
+     * Default value: 'top center'
      */
-    time: number;
-
+    position?: AlertPosition;
     /**
-     * The transition animation. Can be [scale, fade].
+     * Timeout to alert remove itself, if  set to 0 it never removes itself
      *
-     * Default: 'scale'
+     * Default value: 0
      */
-    transition: string;
+    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;
 }
 
-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<ProviderOptions & {
+    template: React.ComponentType
+}> {}
 
-    /**
-     * 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<InjectedAlertProp>;
 
+export interface AlertCustomOptions {
     /**
-     * A callback function that will be called when the alert is closed.
+     * Custom timeout just for this one alert
      */
-    onClose?: () => void;
-
+    timeout?: number;
     /**
-     * The type of alert to show. This will only be used when calling show().
-     * Can be [info, success, error].
-     *
-     * Default: 'info'
+     * Callback that will be executed after this alert open
      */
-    type?: string;
+    onOpen?(): undefined;
+    /**
+     * Callback that will be executed after this alert is removed
+     */
+    onClose?(): undefined;
 }
 
-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 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'>>>;

types/react-alert/react-alert-tests.tsx

@@ -1,48 +1,91 @@
-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,
+    ProviderOptions,
+    InjectedAlertProp
+} from 'react-alert';
 
-export class ReactAlertTest extends React.Component {
-    private _alert: AlertContainer;
+class AppWithoutAlert extends React.Component<{ alert: InjectedAlertProp }> {
     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>
+        );
+    }
+}
+
+const App = withAlert(AppWithoutAlert);
+
+class AppAlert extends React.Component {
+    render() {
+        return (
+            <Alert>
+                {alert => (
+                    <button
+                        onClick={() => {
+                            alert.show('Oh look, an alert!');
+                        }}
+                    >
+                        Show Alert
+                    </button>
+                )}
+            </Alert>
+        );
+    }
+}
+
+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: ProviderOptions = {
+    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>
+        );
+    }
 }

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;
+}

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 { }
+}

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"
+    ]
+}

types/react-alert/v2/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }