fix(react-wait): add missing v0.3 definitions (#42545)

* fix(react-wait): add missing createWaitingContext and waiters definitions

* fix: missing semicolons

types/react-wait/index.d.ts

@@ -1,6 +1,7 @@
 // Type definitions for react-wait 0.3
 // Project: https://github.com/f/react-wait#readme
 // Definitions by: Ifiok Jr. <https://github.com/ifiokjr>
+//                 Paweł Maciejewski <https://github.com/pwlmaciejewski>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 
@@ -8,12 +9,26 @@ import { ComponentType, FunctionComponent } from 'react';
 
 export const Waiter: FunctionComponent;
 
-export interface WaitProps {
+export interface WaitingContextWaitProps {
     fallback: JSX.Element;
+}
+
+export interface WaitProps extends WaitingContextWaitProps {
     on: string;
 }
 
+export interface WaitingContext {
+    isWaiting(): boolean;
+    startWaiting(): void;
+    endWaiting(): void;
+    Wait: ComponentType<WaitingContextWaitProps>;
+}
+
 export interface UseWaitAPI {
+    /**
+     * Returns an array of waiters.
+     */
+    waiters: string[];
     /**
      * Using Wait Component
      *
@@ -79,6 +94,19 @@ export interface UseWaitAPI {
      * ```
      */
     endWaiting(waiter: string): void;
+    /**
+     * Creates a waiting context.
+     *
+     * ```tsx
+     * const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext("creating user");
+     *  return (
+     *   <button disabled={isWaiting()}>
+     *     Disabled while creating user
+     *   </button>
+     * );
+     * ```
+     */
+    createWaitingContext(waiter: string): WaitingContext;
 }
 
 export function useWait(): UseWaitAPI;

types/react-wait/react-wait-tests.tsx

@@ -47,3 +47,25 @@ const MyComponent = () => (
         <C />
     </Waiter>
 );
+
+function testCreateWaitingContext() {
+    const { createWaitingContext } = useWait();
+    const { startWaiting, endWaiting, isWaiting, Wait } = createWaitingContext('creating user');
+    return (
+        <div>
+            <Wait fallback={<Spinner />}>
+                <button onClick={startWaiting}>Create user</button>
+            </Wait>
+            <button disabled={isWaiting()} onClick={endWaiting}>Cancel</button>
+        </div>
+    );
+}
+
+function testWaiters() {
+    const { waiters } = useWait();
+    return (
+        <ul>
+            {waiters.map((waiter, index) => <li key={index}>{waiter}</li>)}
+        </ul>
+    );
+}