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] 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',