Skip to content

Commit aefbfaa

Browse files
authored
ref(feedback): Let CropCorner inherit the existing h prop (#12814)
I noticed this after #12784, but the `<CropCorner>` wasn't inside the `ScreenshotEditorFactory()` function. So of course it wasn't getting access to the `h` ref that is passed in. That variable is what the `<div>` gets transpiled into -> it becomes `h.createElement('div')`. So what i'm doing is moving `CropCorner` into a `CropCornerFactory` so we can pass `h` in and hopefully not have the extra `import .. from 'preact';` in the 2nd bundle. Related to #12535
1 parent 3883517 commit aefbfaa

File tree

2 files changed

+41
-30
lines changed

2 files changed

+41
-30
lines changed
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import type { VNode, h as hType } from 'preact';
2+
3+
interface FactoryParams {
4+
h: typeof hType;
5+
}
6+
7+
export default function CropCornerFactory({
8+
h, // eslint-disable-line @typescript-eslint/no-unused-vars
9+
}: FactoryParams) {
10+
return function CropCorner({
11+
top,
12+
left,
13+
corner,
14+
onGrabButton,
15+
}: {
16+
top: number;
17+
left: number;
18+
corner: string;
19+
onGrabButton: (e: Event, corner: string) => void;
20+
}): VNode {
21+
return (
22+
<button
23+
class={`editor__crop-corner editor__crop-corner--${corner} `}
24+
style={{
25+
top: top,
26+
left: left,
27+
}}
28+
onMouseDown={e => {
29+
e.preventDefault();
30+
onGrabButton(e, corner);
31+
}}
32+
onClick={e => {
33+
e.preventDefault();
34+
}}
35+
></button>
36+
);
37+
};
38+
}

packages/feedback/src/screenshot/components/ScreenshotEditor.tsx

Lines changed: 3 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import type { ComponentType, VNode, h as hType } from 'preact';
55
import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
66
import type * as Hooks from 'preact/hooks';
77
import { DOCUMENT, WINDOW } from '../../constants';
8+
import CropCornerFactory from './CropCorner';
89
import { createScreenshotInputStyles } from './ScreenshotInput.css';
910
import { useTakeScreenshotFactory } from './useTakeScreenshot';
1011

@@ -64,7 +65,7 @@ const getContainedSize = (img: HTMLCanvasElement): Box => {
6465
};
6566

6667
export function ScreenshotEditorFactory({
67-
h, // eslint-disable-line @typescript-eslint/no-unused-vars
68+
h,
6869
hooks,
6970
imageBuffer,
7071
dialog,
@@ -74,6 +75,7 @@ export function ScreenshotEditorFactory({
7475

7576
return function ScreenshotEditor({ onError }: Props): VNode {
7677
const styles = hooks.useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
78+
const CropCorner = CropCornerFactory({ h });
7779

7880
const canvasContainerRef = hooks.useRef<HTMLDivElement>(null);
7981
const cropContainerRef = hooks.useRef<HTMLDivElement>(null);
@@ -328,32 +330,3 @@ export function ScreenshotEditorFactory({
328330
);
329331
};
330332
}
331-
332-
function CropCorner({
333-
top,
334-
left,
335-
corner,
336-
onGrabButton,
337-
}: {
338-
top: number;
339-
left: number;
340-
corner: string;
341-
onGrabButton: (e: Event, corner: string) => void;
342-
}): VNode {
343-
return (
344-
<button
345-
class={`editor__crop-corner editor__crop-corner--${corner} `}
346-
style={{
347-
top: top,
348-
left: left,
349-
}}
350-
onMouseDown={e => {
351-
e.preventDefault();
352-
onGrabButton(e, corner);
353-
}}
354-
onClick={e => {
355-
e.preventDefault();
356-
}}
357-
></button>
358-
);
359-
}

0 commit comments

Comments
 (0)