feat: new react-wait types (#34848)

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;

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

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

types/react-wait/tslint.json

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