Merge pull request #80 from DiamondLightSource/79-Separate_exports

79 separate exports

Author: adaudon

src/components/OavVideoStream.tsx

@@ -7,30 +7,7 @@ import {
   useParsedPvConnection,
 } from "../pv/util";
 import React from "react";
-
-export const useContainerDimensions = (
-  ref: React.MutableRefObject<HTMLHeadingElement | null>,
-) => {
-  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
-  React.useEffect(() => {
-    const getDimensions = () => ({
-      width: ref.current?.offsetWidth || 0,
-      height: ref.current?.offsetWidth || 0,
-    });
-    const handleResize = () => {
-      setDimensions(getDimensions());
-    };
-    if (ref.current) {
-      setDimensions(getDimensions());
-    }
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [ref]);
-
-  return dimensions;
-};
+import { useContainerDimensions } from "./OavVideoStreamHelper";
 
 /*
  * A viewer which allows overlaying a crosshair (takes numbers which could be the values from a react useState hook)

src/components/OavVideoStreamHelper.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+export const useContainerDimensions = (
+  ref: React.MutableRefObject<HTMLHeadingElement | null>,
+) => {
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  useEffect(() => {
+    const getDimensions = () => ({
+      width: ref.current?.offsetWidth || 0,
+      height: ref.current?.offsetWidth || 0,
+    });
+    const handleResize = () => {
+      setDimensions(getDimensions());
+    };
+    if (ref.current) {
+      setDimensions(getDimensions());
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [ref]);
+
+  return dimensions;
+};