Tweak variable naming and types

Author: omgovich

src/components/common/AlphaColorPicker.tsx

@@ -20,15 +20,15 @@ export const AlphaColorPicker = <T extends AnyColor>({
   onChange,
   ...rest
 }: Props<T>): JSX.Element => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useStyleSheet(containerRef);
+  const nodeRef = useRef<HTMLDivElement>(null);
+  useStyleSheet(nodeRef);
 
   const [hsva, updateHsva] = useColorManipulation<T>(colorModel, color, onChange);
 
   const nodeClassName = formatClassName(["react-colorful", className]);
 
   return (
-    <div {...rest} ref={containerRef} className={nodeClassName}>
+    <div {...rest} ref={nodeRef} className={nodeClassName}>
       <Saturation hsva={hsva} onChange={updateHsva} />
       <Hue hue={hsva.h} onChange={updateHsva} />
       <Alpha hsva={hsva} onChange={updateHsva} className="react-colorful__last-control" />

src/components/common/ColorPicker.tsx

@@ -19,15 +19,15 @@ export const ColorPicker = <T extends AnyColor>({
   onChange,
   ...rest
 }: Props<T>): JSX.Element => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  useStyleSheet(containerRef);
+  const nodeRef = useRef<HTMLDivElement>(null);
+  useStyleSheet(nodeRef);
 
   const [hsva, updateHsva] = useColorManipulation<T>(colorModel, color, onChange);
 
   const nodeClassName = formatClassName(["react-colorful", className]);
 
   return (
-    <div {...rest} ref={containerRef} className={nodeClassName}>
+    <div {...rest} ref={nodeRef} className={nodeClassName}>
       <Saturation hsva={hsva} onChange={updateHsva} />
       <Hue hue={hsva.h} onChange={updateHsva} className="react-colorful__last-control" />
     </div>

src/components/common/Interactive.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useMemo, useEffect } from "react";
 
 import { useEventCallback } from "../../hooks/useEventCallback";
 import { clamp } from "../../utils/clamp";
+
 export interface Interaction {
   left: number;
   top: number;
@@ -18,6 +19,11 @@ const getTouchPoint = (touches: TouchList, touchId: null | number): Touch => {
   return touches[0];
 };
 
+// Finds the proper window object to fix iframe embedding issues
+const getParentWindow = (node?: HTMLDivElement | null): Window => {
+  return (node && node.ownerDocument.defaultView) || self;
+};
+
 // Returns a relative position of the pointer inside the node's bounding box
 const getRelativePosition = (
   node: HTMLDivElement,
@@ -28,11 +34,10 @@ const getRelativePosition = (
 
   // Get user's pointer position from `touches` array if it's a `TouchEvent`
   const pointer = isTouch(event) ? getTouchPoint(event.touches, touchId) : (event as MouseEvent);
-  const nodeWindow = node.ownerDocument.defaultView || window;
 
   return {
-    left: clamp((pointer.pageX - (rect.left + nodeWindow.pageXOffset)) / rect.width),
-    top: clamp((pointer.pageY - (rect.top + nodeWindow.pageYOffset)) / rect.height),
+    left: clamp((pointer.pageX - (rect.left + getParentWindow(node).pageXOffset)) / rect.width),
+    top: clamp((pointer.pageY - (rect.top + getParentWindow(node).pageYOffset)) / rect.height),
   };
 };
 
@@ -122,12 +127,10 @@ const InteractiveBase = ({ onMove, onKey, ...rest }: Props) => {
     function toggleDocumentEvents(state?: boolean) {
       const touch = hasTouch.current;
       const el = container.current;
-      const containerWindow = (el && el.ownerDocument.defaultView) || self;
+      const parentWindow = getParentWindow(el);
 
-      // add or remove additional pointer event listeners
-      const toggleEvent = state
-        ? containerWindow.addEventListener
-        : containerWindow.removeEventListener;
+      // Add or remove additional pointer event listeners
+      const toggleEvent = state ? parentWindow.addEventListener : parentWindow.removeEventListener;
       toggleEvent(touch ? "touchmove" : "mousemove", handleMove);
       toggleEvent(touch ? "touchend" : "mouseup", handleMoveEnd);
     }

src/hooks/useStyleSheet.ts

@@ -1,29 +1,30 @@
+import { RefObject } from "react";
+
 import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
 import { getNonce } from "../utils/nonce";
 
 // Bundler is configured to load this as a processed minified CSS-string
 import styles from "../css/styles.css";
-import { RefObject } from "react";
 
 const styleElementMap: Map<Document, HTMLStyleElement> = new Map();
 
 /**
  * Injects CSS code into the document's <head>
  */
-export const useStyleSheet = (containerRef?: RefObject<HTMLDivElement>): void => {
+export const useStyleSheet = (nodeRef: RefObject<HTMLDivElement>): void => {
   useIsomorphicLayoutEffect(() => {
-    const containerDocument =
-      containerRef && containerRef.current ? containerRef.current.ownerDocument : document;
-    if (typeof containerDocument !== "undefined" && !styleElementMap.has(containerDocument)) {
-      const styleElement = containerDocument.createElement("style");
+    const parentDocument = nodeRef.current ? nodeRef.current.ownerDocument : document;
+
+    if (typeof parentDocument !== "undefined" && !styleElementMap.has(parentDocument)) {
+      const styleElement = parentDocument.createElement("style");
       styleElement.innerHTML = styles;
-      styleElementMap.set(containerDocument, styleElement);
+      styleElementMap.set(parentDocument, styleElement);
 
       // Conform to CSP rules by setting `nonce` attribute to the inline styles
       const nonce = getNonce();
       if (nonce) styleElement.setAttribute("nonce", nonce);
 
-      containerDocument.head.appendChild(styleElement);
+      parentDocument.head.appendChild(styleElement);
     }
   }, []);
 };