From d637d0e39deaaabed10e13fbac0c7cfb5068517a Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Mon, 8 Jul 2024 17:39:46 -0700
Subject: [PATCH] ref(feedback): Let CropCorner inherit the existing h prop

---
 .../src/screenshot/components/CropCorner.tsx  | 38 +++++++++++++++++++
 .../components/ScreenshotEditor.tsx           | 33 ++--------------
 2 files changed, 41 insertions(+), 30 deletions(-)
 create mode 100644 packages/feedback/src/screenshot/components/CropCorner.tsx

diff --git a/packages/feedback/src/screenshot/components/CropCorner.tsx b/packages/feedback/src/screenshot/components/CropCorner.tsx
new file mode 100644
index 000000000000..de3b6e506e71
--- /dev/null
+++ b/packages/feedback/src/screenshot/components/CropCorner.tsx
@@ -0,0 +1,38 @@
+import type { VNode, h as hType } from 'preact';
+
+interface FactoryParams {
+  h: typeof hType;
+}
+
+export default function CropCornerFactory({
+  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+}: FactoryParams) {
+  return function CropCorner({
+    top,
+    left,
+    corner,
+    onGrabButton,
+  }: {
+    top: number;
+    left: number;
+    corner: string;
+    onGrabButton: (e: Event, corner: string) => void;
+  }): VNode {
+    return (
+      <button
+        class={`editor__crop-corner editor__crop-corner--${corner} `}
+        style={{
+          top: top,
+          left: left,
+        }}
+        onMouseDown={e => {
+          e.preventDefault();
+          onGrabButton(e, corner);
+        }}
+        onClick={e => {
+          e.preventDefault();
+        }}
+      ></button>
+    );
+  };
+}
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index 84528d2908a1..9c572cbdd5aa 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -3,6 +3,7 @@ import type { FeedbackInternalOptions, FeedbackModalIntegration } from '@sentry/
 import type { ComponentType, VNode, h as hType } from 'preact';
 import type * as Hooks from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
+import CropCornerFactory from './CropCorner';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshotFactory } from './useTakeScreenshot';
 
@@ -62,7 +63,7 @@ const getContainedSize = (img: HTMLCanvasElement): Box => {
 };
 
 export function ScreenshotEditorFactory({
-  h, // eslint-disable-line @typescript-eslint/no-unused-vars
+  h,
   hooks,
   imageBuffer,
   dialog,
@@ -72,6 +73,7 @@ export function ScreenshotEditorFactory({
 
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+    const CropCorner = CropCornerFactory({ h });
 
     const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
     const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
@@ -326,32 +328,3 @@ export function ScreenshotEditorFactory({
     );
   };
 }
-
-function CropCorner({
-  top,
-  left,
-  corner,
-  onGrabButton,
-}: {
-  top: number;
-  left: number;
-  corner: string;
-  onGrabButton: (e: Event, corner: string) => void;
-}): VNode {
-  return (
-    <button
-      class={`editor__crop-corner editor__crop-corner--${corner} `}
-      style={{
-        top: top,
-        left: left,
-      }}
-      onMouseDown={e => {
-        e.preventDefault();
-        onGrabButton(e, corner);
-      }}
-      onClick={e => {
-        e.preventDefault();
-      }}
-    ></button>
-  );
-}