Support class component (HOC)

README.md

@@ -180,7 +180,7 @@ return <button onClick={() => startWaiting("message")}>Start</button>;
 Stops the given waiter.
 
 ```jsx
-const { end } = useWait();
+const { endWaiting } = useWait();
 
 return <button onClick={() => endWaiting("message")}>Stop</button>;
 ```
@@ -254,6 +254,32 @@ function CreateUserButton() {
 }
 ```
 
+#### `injectWaiting(WrappedComponent, { forwardRef: boolean, propName: string })` HOC
+
+This function is a High Order Component (HOC) factory which injects waiting API into the wrapped class or function component via `waiting` prop. But it can be overridden by specifying `propName` object as a second argument.
+
+> Second parameters in the function(options) is optional.
+
+```jsx
+import { injectWaiting } from "react-wait";
+class MyClassComponent extends React.Component {
+  render() {
+    const { isWaiting, Wait } = this.props.waiting;
+    return (
+      <div>
+        <button disabled={isWaiting("creating user")}>
+          <Wait on="creating user" fallback={<div>Creating User...</div>}>
+            Create User
+          </Wait>
+        </button>
+      </div>
+    );
+  }
+}
+
+export default injectWaiting(MyClassComponent);
+```
+
 ## Contributors
 
 - Fatih Kadir Akın, (creator)

__tests__/react-wait.js

@@ -2,11 +2,20 @@ import React from "react";
 import Enzyme, { mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 
-import { Waiter, useWait } from "../src/index";
+import { Waiter, useWait, injectWaiting } from "../src/index";
 import * as api from "../src/api";
 
 Enzyme.configure({ adapter: new Adapter() });
 
+function assertInjectedProps(component, propName) {
+  expect(component.prop(propName).waiters).toEqual([]);
+  expect(component.prop(propName).anyWaiting).toBeInstanceOf(Function);
+  expect(component.prop(propName).isWaiting).toBeInstanceOf(Function);
+  expect(component.prop(propName).startWaiting).toBeInstanceOf(Function);
+  expect(component.prop(propName).endWaiting).toBeInstanceOf(Function);
+  expect(component.prop(propName).Wait).toBeInstanceOf(Function);
+}
+
 test("startWaiting", async () => {
   expect(api.startWaiting(["a"], "b")).toEqual(["a", "b"]);
   expect(api.startWaiting(["a", "b"], "c")).toEqual(["a", "b", "c"]);
@@ -33,7 +42,7 @@ test("isWaiting", async () => {
   expect(api.isWaiting(["a b", "c d"], "a b")).toEqual(true);
 });
 
-test("isWaiting", async () => {
+test("anyWaiting", async () => {
   expect(api.anyWaiting(["a", "b"])).toEqual(true);
   expect(api.anyWaiting(["a", "b", "c"])).toEqual(true);
   expect(api.anyWaiting([])).toEqual(false);
@@ -315,3 +324,81 @@ test("contextful", async () => {
       .html()
   ).toBe('<div id="waiters">[]</div>');
 });
+
+test("injectWaiting with options", async () => {
+  const propName = "customPropName";
+  const wrapperRef = React.createRef();
+
+  class ClassComponent extends React.Component {
+    render() {
+      return <div>Class Component</div>;
+    }
+  }
+
+  const InjectedComponent = injectWaiting(ClassComponent, {
+    propName,
+    forwardRef: true
+  });
+  const app = mount(
+    <Waiter>
+      <InjectedComponent ref={wrapperRef} />
+    </Waiter>
+  );
+  const component = app.find(ClassComponent);
+
+  expect(component.prop(propName)).not.toBeFalsy();
+  expect(wrapperRef.current).toBe(component.instance());
+  assertInjectedProps(component, propName);
+});
+
+test("injectWaiting without options", async () => {
+  const propName = "customPropName";
+  const wrapperRef = React.createRef();
+
+  class ClassComponent extends React.Component {
+    render() {
+      return <div>Class Component</div>;
+    }
+  }
+
+  const InjectedComponent = injectWaiting(ClassComponent);
+  const app = mount(
+    <Waiter>
+      <InjectedComponent />
+    </Waiter>
+  );
+  const component = app.find(ClassComponent);
+
+  expect(component.prop(propName)).toBeFalsy();
+  expect(wrapperRef.current).not.toBe(component.instance());
+  assertInjectedProps(component, "waiting");
+});
+
+test("injectWaiting getDisplayName", async () => {
+  const displayName = "qwe";
+
+  function WithDisplayName() {
+    return <div>waiting</div>;
+  }
+
+  function WithName() {
+    return <div>waiting</div>;
+  }
+
+  function WithNothing() {
+    return <div>waiting</div>;
+  }
+
+  WithDisplayName.displayName = displayName;
+  delete WithNothing.name;
+
+  const InjectedWithDisplayName = injectWaiting(WithDisplayName);
+  const InjectedWithName = injectWaiting(WithName);
+  const InjectedWithNothing = injectWaiting(WithNothing);
+
+  expect(InjectedWithDisplayName.displayName).toEqual(
+    `WithWaiting(${displayName})`
+  );
+  expect(InjectedWithName.displayName).toEqual(`WithWaiting(${WithName.name})`);
+  expect(InjectedWithNothing.displayName).toEqual(`WithWaiting(Component)`);
+});