@onewelcome/react-lib-components 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onewelcome/react-lib-components",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "license": "Apache-2.0",
   "author": "OneWelcome B.V.",
   "main": "dist/index.js",

package/src/Button/Button.module.scss

@@ -42,4 +42,13 @@
     padding-left: 1.25rem;
     padding-right: 1rem;
   }
+
+  i {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    margin-right: 0.25rem;
+  }
 }

package/src/Button/Button.tsx

@@ -62,7 +62,7 @@ export const Button = React.forwardRef<HTMLButtonElement, Props>(
         ref={ref}
         className={`${classes[color]} ${classes[variant]} ${additionalClasses.join(" ")}`}
       >
-        {startIcon && <i>{startIcon}&nbsp;</i>}
+        {startIcon && <i>{startIcon}</i>}
         <span>{children}</span>
         {endIcon && <i>&nbsp;{endIcon}</i>}
       </BaseButton>

package/src/Icon/Icon.module.scss

@@ -42,6 +42,7 @@
 
 .icon {
   line-height: 0;
+  font-size: 0.875rem;
 }
 
 .icon-image:before {

package/src/hooks/useDebouncedCallback.test.ts

@@ -0,0 +1,140 @@
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useDebouncedCallback } from "./useDebouncedCallback";
+
+const BASE_DELAY = 300;
+const EXTRA_DELAY = 200;
+
+const sleep = (delay: number) => new Promise(resolve => setTimeout(resolve, delay));
+
+describe("Testing the useDebouncedCallback hook", () => {
+  it("should run callback after specified delay", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    expect(callback).toHaveBeenCalledTimes(0);
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(2);
+  });
+
+  it("should pass args through to callback function", async () => {
+    let mutableValue = "";
+    const delay = BASE_DELAY;
+    const callback = jest.fn(arg => (mutableValue = `got arg ${arg}`));
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    act(() => result.current("passthrough"));
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(mutableValue).toBe(`got arg passthrough`);
+  });
+
+  it("should cancel pending call if fn is called again", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    expect(callback).toHaveBeenCalledTimes(0);
+    act(result.current);
+    await sleep(delay / 2);
+
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if callback changes", async () => {
+    const delay = BASE_DELAY;
+    const callback1 = jest.fn();
+    const callback2 = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay }) => useDebouncedCallback(callback, delay),
+      { initialProps: { callback: callback1, delay } }
+    );
+
+    act(result.current);
+    await sleep(delay / 2);
+
+    rerender({ callback: callback2, delay });
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback1).toHaveBeenCalledTimes(0);
+    expect(callback2).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if delay changes", async () => {
+    const delay1 = BASE_DELAY;
+    const delay2 = BASE_DELAY * 2;
+    const callback = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay }) => useDebouncedCallback(callback, delay),
+      { initialProps: { callback, delay: delay1 } }
+    );
+
+    act(result.current);
+    await sleep(delay1 / 2);
+
+    rerender({ callback, delay: delay2 });
+    act(result.current);
+    await sleep(delay2 + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should cancel pending call if dependencies change", async () => {
+    const delay = BASE_DELAY;
+    const callback = jest.fn();
+
+    const { result, rerender } = renderHook(
+      ({ callback, delay, dependencies }) => useDebouncedCallback(callback, delay, dependencies),
+      { initialProps: { callback, delay, dependencies: ["a"] } }
+    );
+
+    act(result.current);
+    await sleep(delay / 2);
+
+    rerender({ callback, delay, dependencies: ["b"] });
+    act(result.current);
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should support async callbacks", async () => {
+    const makeAsyncCall = jest.fn(
+      () =>
+        new Promise(async resolve => {
+          await sleep(delay / 2);
+          resolve(null);
+        })
+    );
+
+    const delay = BASE_DELAY;
+    const callback = jest.fn(async () => {
+      await makeAsyncCall();
+    });
+
+    const { result } = renderHook(() => useDebouncedCallback(callback, delay));
+
+    await act(async () => result.current());
+    await sleep(delay + EXTRA_DELAY);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(makeAsyncCall).toHaveBeenCalledTimes(1);
+  });
+});

package/src/hooks/useDebouncedCallback.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2022 OneWelcome B.V.
+ *
+ *    Licensed under the Apache License, Version 2.0 (the "License");
+ *    you may not use this file except in compliance with the License.
+ *    You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *    Unless required by applicable law or agreed to in writing, software
+ *    distributed under the License is distributed on an "AS IS" BASIS,
+ *    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *    See the License for the specific language governing permissions and
+ *    limitations under the License.
+ */
+
+import React from "react";
+
+export const useDebouncedCallback = (callback: Function, delay: number, dependencies?: any[]) => {
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const comboDeps = dependencies ? [callback, delay, ...dependencies] : [callback, delay];
+
+  return React.useCallback((...args) => {
+    if (timeout.current != null) {
+      clearTimeout(timeout.current);
+    }
+
+    timeout.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, comboDeps);
+};

package/src/index.ts

@@ -43,6 +43,7 @@ export {
 
 /* Utils */
 export { useRepeater } from "./hooks/useRepeater";
+export { useDebouncedCallback } from "./hooks/useDebouncedCallback";
 export { generateID, debounce, throttle } from "./util/helper";
 
 /* Notifications */