From 7d47c3b617be52de7e8e2e31fe718beb02b08d89 Mon Sep 17 00:00:00 2001
From: Ifiok Jr <ifiokotung@gmail.com>
Date: Thu, 25 Apr 2019 17:01:57 -0500
Subject: [PATCH] feat: new react-wait types (#34848)

---
 types/react-wait/index.d.ts           | 84 +++++++++++++++++++++++++++
 types/react-wait/react-wait-tests.tsx | 49 ++++++++++++++++
 types/react-wait/tsconfig.json        | 17 ++++++
 types/react-wait/tslint.json          |  1 +
 4 files changed, 151 insertions(+)
 create mode 100644 types/react-wait/index.d.ts
 create mode 100644 types/react-wait/react-wait-tests.tsx
 create mode 100644 types/react-wait/tsconfig.json
 create mode 100644 types/react-wait/tslint.json

diff --git a/types/react-wait/index.d.ts b/types/react-wait/index.d.ts
new file mode 100644
index 0000000000..0f69864f95
--- /dev/null
+++ b/types/react-wait/index.d.ts
@@ -0,0 +1,84 @@
+// Type definitions for react-wait 0.3
+// Project: https://github.com/f/react-wait#readme
+// Definitions by: Ifiok Jr. <https://github.com/ifiokjr>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.8
+
+import { ComponentType, FunctionComponent } from 'react';
+
+export const Waiter: FunctionComponent;
+
+export interface WaitProps {
+    fallback: JSX.Element;
+    on: string;
+}
+
+export interface UseWaitAPI {
+    /**
+     * Using Wait Component
+     *
+     * ```tsx
+     * function Component() {
+     *   const { Wait } = useWait();
+     *   return (
+     *     <Wait on="the waiting message" fallback={<div>Waiting...</div>}>
+     *       The content after waiting done
+     *     </Wait>
+     *   );
+     * }
+     * ```
+     *
+     * Better example for a button with loading state:
+     * ```tsx
+     * <button disabled={isWaiting("creating user")}>
+     *   <Wait on="creating user" fallback={<div>Creating User...</div>}>
+     *     Create User
+     *   </Wait>
+     * </button>
+     * ```
+     */
+    Wait: ComponentType<WaitProps>;
+    /**
+     * Returns boolean value if any loader exists in context.
+     *
+     * ```tsx
+     * const { anyWaiting } = useWait();
+     * return <button disabled={anyWaiting()}>Disabled while waiting</button>;
+     * ```
+     */
+    anyWaiting(): boolean;
+    /**
+     * Returns boolean value if given loader exists in context.
+     *
+     * ```tsx
+     * const { isWaiting } = useWait();
+     * return (
+     *   <button disabled={isWaiting("creating user")}>
+     *     Disabled while creating user
+     *   </button>
+     * );
+     * ```
+     */
+    isWaiting(waiter: string): boolean;
+    /**
+     * Starts the given waiter.
+     *
+     * ```tsx
+     * const { startWaiting } = useWait();
+     * return <button onClick={() => startWaiting("message")}>Start</button>;
+     * ```
+     */
+    startWaiting(waiter: string): void;
+
+    /**
+     * Stops the given waiter.
+     *
+     * ```tsx
+     * const { end } = useWait();
+     * return <button onClick={() => endWaiting("message")}>Stop</button>;
+     * ```
+     */
+    endWaiting(waiter: string): void;
+}
+
+export function useWait(): UseWaitAPI;
diff --git a/types/react-wait/react-wait-tests.tsx b/types/react-wait/react-wait-tests.tsx
new file mode 100644
index 0000000000..e48edfcda0
--- /dev/null
+++ b/types/react-wait/react-wait-tests.tsx
@@ -0,0 +1,49 @@
+import { useWait, Waiter } from 'react-wait';
+
+const Spinner = () => <img src="https://a.com/spinner.gif" />;
+
+function A() {
+    const { isWaiting } = useWait();
+    return (
+        <div>
+            {isWaiting('creating user')
+                ? 'Creating User...'
+                : 'Nothing happens'}
+        </div>
+    );
+}
+
+function B() {
+    const { anyWaiting } = useWait();
+    return (
+        <div>
+            {anyWaiting() ? 'Something happening on app...' : 'Nothing happens'}
+        </div>
+    );
+}
+
+function C() {
+    const { startWaiting, endWaiting, isWaiting, Wait } = useWait();
+
+    function createUser() {
+        startWaiting('creating user');
+        // Faking the async work:
+        setTimeout(() => {
+            endWaiting('creating user');
+        }, 1000);
+    }
+
+    return (
+        <button disabled={isWaiting('creating user')} onClick={createUser}>
+            <Wait on="creating user" fallback={<Spinner />}>
+                Create User
+            </Wait>
+        </button>
+    );
+}
+
+const MyComponent = () => (
+    <Waiter>
+        <C />
+    </Waiter>
+);
diff --git a/types/react-wait/tsconfig.json b/types/react-wait/tsconfig.json
new file mode 100644
index 0000000000..187450d2ab
--- /dev/null
+++ b/types/react-wait/tsconfig.json
@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": ["es6", "dom"],
+        "jsx": "preserve",
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "react-wait-tests.tsx"]
+}
diff --git a/types/react-wait/tslint.json b/types/react-wait/tslint.json
new file mode 100644
index 0000000000..3db14f85ea
--- /dev/null
+++ b/types/react-wait/tslint.json
@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }