Added support for passing null/undefiend as parameters to useData (#518)

Shopify · May 30, 2022 · c7fe708 · c7fe708
1 parent d55f839
commit c7fe708
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 25 deletions.
diff --git a/example/src/Examples/API/Images.tsx b/example/src/Examples/API/Images.tsx
@@ -42,6 +42,10 @@ export const Images = () => {
     }
   });
 
+  // Verifies that we can use this hook with a null/undefined input parameter
+  useImage(null);
+  useImage(undefined);
+
   const oslo = useImage(require("../../assets/oslo.jpg"));
 
   return (

diff --git a/package/src/skia/core/Data.ts b/package/src/skia/core/Data.ts
@@ -33,40 +33,46 @@ export const useDataCollection = <T>(
 };
 
 export const useRawData = <T>(
-  source: DataSource,
+  source: DataSource | null | undefined,
   factory: (data: Data) => T,
   onError?: (err: Error) => void
 ) => {
   const [data, setData] = useState<T | null>(null);
-  const prevSourceRef = useRef<DataSource>();
+  const prevSourceRef = useRef<DataSource | null | undefined>();
   useEffect(() => {
     // Track to avoid re-fetching the same data
     if (prevSourceRef.current !== source) {
       prevSourceRef.current = source;
-      const factoryWrapper = (data2: Data) => {
-        const factoryResult = factory(data2);
-        if (factoryResult === null) {
-          onError && onError(new Error("Could not load data"));
-          setData(null);
+      if (source !== null && source !== undefined) {
+        const factoryWrapper = (data2: Data) => {
+          const factoryResult = factory(data2);
+          if (factoryResult === null) {
+            onError && onError(new Error("Could not load data"));
+            setData(null);
+          } else {
+            setData(factoryResult);
+          }
+        };
+        if (source instanceof Uint8Array) {
+          factoryWrapper(Skia.Data.fromBytes(source));
         } else {
-          setData(factoryResult);
+          const uri =
+            typeof source === "string"
+              ? source
+              : Image.resolveAssetSource(source).uri;
+          Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
         }
-      };
-      if (source instanceof Uint8Array) {
-        factoryWrapper(Skia.Data.fromBytes(source));
-      } else {
-        const uri =
-          typeof source === "string"
-            ? source
-            : Image.resolveAssetSource(source).uri;
-        Skia.Data.fromURI(uri).then((d) => factoryWrapper(d));
       }
+    } else {
+      setData(null);
     }
   }, [factory, onError, source]);
   return data;
 };
 
 const identity = (data: Data) => data;
 
-export const useData = (source: DataSource, onError?: (err: Error) => void) =>
-  useRawData(source, identity, onError);
+export const useData = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, identity, onError);
diff --git a/package/src/skia/core/Font.ts b/package/src/skia/core/Font.ts
@@ -10,7 +10,7 @@ import { useTypeface } from "./Typeface";
  * Returns a Skia Font object
  * */
 export const useFont = (
-  font: DataSource,
+  font: DataSource | null | undefined,
   size?: number,
   onError?: (err: Error) => void
 ): SkFont | null => {

diff --git a/package/src/skia/core/Image.ts b/package/src/skia/core/Image.ts
@@ -6,5 +6,7 @@ import { useRawData } from "./Data";
 /**
  * Returns a Skia Image object
  * */
-export const useImage = (source: DataSource, onError?: (err: Error) => void) =>
-  useRawData(source, Skia.Image.MakeImageFromEncoded, onError);
+export const useImage = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.Image.MakeImageFromEncoded, onError);
diff --git a/package/src/skia/core/SVG.ts b/package/src/skia/core/SVG.ts
@@ -3,5 +3,7 @@ import type { DataSource } from "../types";
 
 import { useRawData } from "./Data";
 
-export const useSVG = (source: DataSource, onError?: (err: Error) => void) =>
-  useRawData(source, Skia.SVG.MakeFromData, onError);
+export const useSVG = (
+  source: DataSource | null | undefined,
+  onError?: (err: Error) => void
+) => useRawData(source, Skia.SVG.MakeFromData, onError);
diff --git a/package/src/skia/core/Typeface.ts b/package/src/skia/core/Typeface.ts
@@ -6,6 +6,6 @@ import { useRawData } from "./Data";
  * Returns a Skia Typeface object
  * */
 export const useTypeface = (
-  source: DataSource,
+  source: DataSource | null | undefined,
   onError?: (err: Error) => void
 ) => useRawData(source, Skia.Typeface.MakeFreeTypeFaceFromData, onError);