Update on prop changes

Author: ljwagerfield

jest.config.pretest.js

@@ -1,3 +1,4 @@
+const error = global.console.error;
 global.console = {
   log: () => undefined, // console.log are ignored in tests
 
@@ -7,7 +8,7 @@ global.console = {
       // Silence React "render in body" warning.
       return;
     }
-    console.error(e);
+    error(e);
   },
   warn: console.warn,
   info: console.info,

package-lock.json

@@ -74,6 +74,7 @@
     "react": ">=16.3.0"
   },
   "dependencies": {
+    "lodash.isequal": "^4.5.0",
     "uploader": "^3.35.0"
   },
   "devDependencies": {
@@ -84,6 +85,7 @@
     "@types/enzyme": "3.10.11",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "27.4.1",
+    "@types/lodash.isequal": "4.5.5",
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.9",
     "@typescript-eslint/eslint-plugin": "4.8.1",

package.json

@@ -1,4 +1,5 @@
 import { UploaderInterface, UploadWidgetResult, UploadWidgetConfig } from "uploader";
+import { useAutoUpdatingOptions } from "react-uploader/hooks/UseAutoUpdatingOptions";
 
 interface MouseEventLite {
   preventDefault: () => void;
@@ -12,10 +13,12 @@ interface Props {
 }
 
 export const UploadButton = ({ uploader, options, onComplete, children }: Props): JSX.Element => {
+  const autoUpdatingOptions = useAutoUpdatingOptions(options);
+
   const onClick = (e: MouseEventLite): void => {
     e.preventDefault();
 
-    uploader.open(options).then(
+    uploader.open(autoUpdatingOptions).then(
       files => {
         if (onComplete !== undefined) {
           onComplete(files);

src/UploadButton.tsx

@@ -1,6 +1,7 @@
 import { UploaderInterface, UploadWidgetResult, UploadWidgetConfig } from "uploader";
 import React, { useLayoutEffect } from "react";
-import { useElementRef } from "./Utils";
+import { useElementRef } from "./hooks/UseElementRef";
+import { useAutoUpdatingOptions } from "react-uploader/hooks/UseAutoUpdatingOptions";
 
 interface Props {
   className?: string;
@@ -25,17 +26,16 @@ export const UploadDropzone = ({
 }: Props): JSX.Element => {
   const [element, elementRef] = useElementRef();
   const classNameProp = className === undefined ? {} : { className };
+  const onUpdateParams: UploadWidgetConfig = onUpdate === undefined ? {} : { onUpdate };
+  const autoUpdatingOptions = useAutoUpdatingOptions({ ...options, ...onUpdateParams });
 
   // Prevent React warning, while keeping rendering synchronous in the browser.
   if (typeof window !== "undefined") {
     useLayoutEffect(() => {
       if (element !== undefined) {
-        const onUpdateParams: UploadWidgetConfig = onUpdate === undefined ? {} : { onUpdate };
-
         uploader
           .open({
-            ...options,
-            ...onUpdateParams,
+            ...autoUpdatingOptions,
             container: element,
             layout: "inline"
           })

src/UploadDropzone.tsx

@@ -0,0 +1,25 @@
+import { UploadWidgetConfig } from "uploader";
+import { useObjectDep } from "react-uploader/hooks/UseObjectDep";
+import { useEffect, useState } from "react";
+import { UploadWidgetMethods } from "uploader/dist/config/UploadWidgetMethods";
+
+export function useAutoUpdatingOptions(optionsMaybe: UploadWidgetConfig | undefined): UploadWidgetConfig {
+  const [methods, setMethods] = useState<UploadWidgetMethods | undefined>(undefined);
+  const optionsDep = useObjectDep(optionsMaybe ?? {});
+
+  useEffect(() => {
+    if (methods !== undefined) {
+      methods.updateConfig(optionsMaybe ?? {});
+    }
+  }, [optionsDep, methods]);
+
+  return {
+    ...optionsMaybe,
+    onInit: m => {
+      if (optionsMaybe?.onInit !== undefined) {
+        optionsMaybe.onInit(m);
+      }
+      setMethods(m);
+    }
+  };
+}

src/hooks/UseAutoUpdatingOptions.ts

@@ -0,0 +1,12 @@
+import { useRef } from "react";
+import isEqual from "lodash.isequal";
+
+export function useObjectDep<T>(value: T): T {
+  const ref = useRef<T>();
+
+  if (!isEqual(value, ref.current)) {
+    ref.current = value;
+  }
+
+  return ref.current ?? value;
+}

src/Utils.ts src/hooks/UseElementRef.tssrc/Utils.ts renamed to src/hooks/UseElementRef.ts

@@ -3,35 +3,40 @@ import React from "react";
 import { Uploader } from "uploader";
 import { configure, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
+import { act } from "react-dom/test-utils";
 
 (global as any).ResizeObserver = require("resize-observer-polyfill");
 const uploader = Uploader({ apiKey: "free" });
 configure({ adapter: new Adapter() });
 
 describe("UploadButton Component", () => {
   test("Renders the given child", () => {
-    const html = mount(
-      <UploadButton uploader={uploader}>{({ onClick }) => <button onClick={onClick}>Click Me</button>}</UploadButton>
-    );
-    expect(html.text()).toEqual("Click Me");
+    act(() => {
+      const html = mount(
+        <UploadButton uploader={uploader}>{({ onClick }) => <button onClick={onClick}>Click Me</button>}</UploadButton>
+      );
+      expect(html.text()).toEqual("Click Me");
+    });
   });
 
   test("Displays the Uploader modal when clicked", async () => {
-    const html = mount(
-      <div>
-        <UploadButton uploader={uploader} options={{ container: "#container" }}>
-          {({ onClick }) => <button onClick={onClick}>Click Me</button>}
-        </UploadButton>
-        <div id="container" />
-      </div>,
-      { attachTo: document.body }
-    );
+    await act(async () => {
+      const html = mount(
+        <div>
+          <UploadButton uploader={uploader} options={{ container: "#container" }}>
+            {({ onClick }) => <button onClick={onClick}>Click Me</button>}
+          </UploadButton>
+          <div id="container" />
+        </div>,
+        { attachTo: document.body }
+      );
 
-    html.find("button").simulate("click");
+      html.find("button").simulate("click");
 
-    await tick();
+      await tick();
 
-    expect(html.html()).toContain("Upload a File");
+      expect(html.html()).toContain("Upload a File");
+    });
   });
 });
 

src/hooks/UseObjectDep.ts

@@ -3,16 +3,19 @@ import { Uploader } from "uploader";
 import { configure, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
 import { UploadDropzone } from "react-uploader/UploadDropzone";
+import { act } from "react-dom/test-utils";
 
 (global as any).ResizeObserver = require("resize-observer-polyfill");
 const uploader = Uploader({ apiKey: "free" });
 configure({ adapter: new Adapter() });
 
 describe("UploadDropzone Component", () => {
   test("Renders the Uploader component inline", async () => {
-    const html = mount(<UploadDropzone uploader={uploader} />, { attachTo: document.body });
-    await tick();
-    expect(html.html()).toContain("Upload a File");
+    await act(async () => {
+      const html = mount(<UploadDropzone uploader={uploader} />, { attachTo: document.body });
+      await tick();
+      expect(html.html()).toContain("Upload a File");
+    });
   });
 });