From c73034d2af4adcf9645ac3e4f70cf817f83a528f Mon Sep 17 00:00:00 2001 From: Spencer Elliott Date: Thu, 7 Nov 2019 14:20:54 -0500 Subject: [PATCH] Add react-toast-notifications (#40194) --- types/react-toast-notifications/index.d.ts | 84 +++++++++++++++++++ .../react-toast-notifications-tests.tsx | 35 ++++++++ types/react-toast-notifications/tsconfig.json | 24 ++++++ types/react-toast-notifications/tslint.json | 1 + 4 files changed, 144 insertions(+) create mode 100644 types/react-toast-notifications/index.d.ts create mode 100644 types/react-toast-notifications/react-toast-notifications-tests.tsx create mode 100644 types/react-toast-notifications/tsconfig.json create mode 100644 types/react-toast-notifications/tslint.json diff --git a/types/react-toast-notifications/index.d.ts b/types/react-toast-notifications/index.d.ts new file mode 100644 index 0000000000..271559e509 --- /dev/null +++ b/types/react-toast-notifications/index.d.ts @@ -0,0 +1,84 @@ +// Type definitions for react-toast-notifications 2.0 +// Project: https://github.com/jossmac/react-toast-notifications +// Definitions by: Spencer Elliott +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 2.8 + +import { ReactNode, ComponentType } from 'react'; + +export type AppearanceTypes = 'error' | 'info' | 'success' | 'warning'; + +export type Placement = 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'; + +export type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited'; + +export interface ToastProps { + appearance: AppearanceTypes; + autoDismiss: boolean | number; + autoDismissTimeout: number; // inherited from ToastProvider + children: ReactNode; + isRunning: boolean; + onDismiss: (id?: string) => void; + onMouseEnter: () => void; + onMouseLeave: () => void; + placement: Placement; + transitionDuration: number; // inherited from ToastProvider + transitionState: TransitionState; // inherited from ToastProvider +} + +export interface ToastConsumerContext { + add: AddToast; + remove: RemoveToast; + toasts: Array<{ + content: ReactNode; + id: string; + appearance: AppearanceTypes; + }>; +} + +export interface ToastConsumerProps { + children: (context: ToastConsumerContext) => ReactNode; +} + +export interface ToastContainerProps { + children: ReactNode; + hasToasts: boolean; + placement: Placement; +} + +export interface ToastProviderProps { + autoDismissTimeout?: number; + children: ReactNode; + components?: { + ToastContainer?: ComponentType; + Toast?: ComponentType; + }; + placement?: Placement; + transitionDuration?: number; +} + +export interface Options { + appearance: AppearanceTypes; + autoDismiss?: boolean; + onDismiss?: (id: string) => void; + pauseOnHover?: boolean; +} + +export type AddToast = (content: ReactNode, options?: Options, callback?: (id: string) => void) => void; + +export type RemoveToast = (id: string, callback: () => void) => void; + +export const DefaultToastContainer: ComponentType; +export const DefaultToast: ComponentType; +export const ToastConsumer: ComponentType; +export const ToastProvider: ComponentType; +export function withToastManager(...args: any[]): any; +export function useToasts(): { + addToast: AddToast; + removeToast: RemoveToast; + toastStack: Array<{ + content: ReactNode; + id: string; + appearance: AppearanceTypes; + }>; +}; diff --git a/types/react-toast-notifications/react-toast-notifications-tests.tsx b/types/react-toast-notifications/react-toast-notifications-tests.tsx new file mode 100644 index 0000000000..6e1fef3fe4 --- /dev/null +++ b/types/react-toast-notifications/react-toast-notifications-tests.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { DefaultToast, ToastProps, ToastProvider, useToasts, ToastConsumer } from 'react-toast-notifications'; + +const CustomToast: React.FC = ({ children, ...props }) => ( + +
{children}
+
+); + +const MyApp: React.FC = () => ( + + + + +); + +const Main1: React.FC = () => ( + + {context => ( +
+ +
+ )} +
+); + +const Main2: React.FC = () => { + const { addToast, removeToast, toastStack } = useToasts(); + + return ( +
+ +
+ ); +}; diff --git a/types/react-toast-notifications/tsconfig.json b/types/react-toast-notifications/tsconfig.json new file mode 100644 index 0000000000..fa7514c0db --- /dev/null +++ b/types/react-toast-notifications/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "jsx": "react", + "noImplicitAny": true, + "noImplicitThis": true, + "strictFunctionTypes": true, + "strictNullChecks": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "react-toast-notifications-tests.tsx" + ] +} diff --git a/types/react-toast-notifications/tslint.json b/types/react-toast-notifications/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/react-toast-notifications/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }