Skip to content

Commit 39bb40d

Browse files
agentcooperagentcooper
committed
Refactor most components from class to function
1 parent c6ee680 commit 39bb40d

14 files changed

+208
-266
lines changed

‎example/src/Sidebar.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import type { IHighlight } from "./react-pdf-highlighter";
32

43
interface Props {

‎example/src/Spinner.tsx

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import React from "react";
2-
31
import "./style/Spinner.css";
42

53
export function Spinner() {

‎example/src/index.tsx

-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import React from "react";
21
import { createRoot } from "react-dom/client";
32
import { App } from "./App";
43

‎src/components/AreaHighlight.tsx

+48-53
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
1-
import React, { Component } from "react";
2-
31
import { Rnd } from "react-rnd";
42
import { getPageFromElement } from "../lib/pdfjs-dom";
5-
63
import styles from "../style/AreaHighlight.module.css";
7-
84
import type { LTWHP, ViewportHighlight } from "../types";
95

106
interface Props {
@@ -13,55 +9,54 @@ interface Props {
139
isScrolledTo: boolean;
1410
}
1511

16-
export class AreaHighlight extends Component<Props> {
17-
render() {
18-
const { highlight, onChange, isScrolledTo, ...otherProps } = this.props;
19-
20-
return (
21-
<div
22-
className={`${styles.areaHighlight} ${
23-
isScrolledTo ? styles.scrolledTo : ""
24-
}`}
25-
>
26-
<Rnd
27-
className={styles.part}
28-
onDragStop={(_, data) => {
29-
const boundingRect: LTWHP = {
30-
...highlight.position.boundingRect,
31-
top: data.y,
32-
left: data.x,
33-
};
34-
35-
onChange(boundingRect);
36-
}}
37-
onResizeStop={(_mouseEvent, _direction, ref, _delta, position) => {
38-
const boundingRect: LTWHP = {
39-
top: position.y,
40-
left: position.x,
41-
width: ref.offsetWidth,
42-
height: ref.offsetHeight,
43-
pageNumber: getPageFromElement(ref)?.number || -1,
44-
};
45-
46-
onChange(boundingRect);
47-
}}
48-
position={{
49-
x: highlight.position.boundingRect.left,
50-
y: highlight.position.boundingRect.top,
51-
}}
52-
size={{
53-
width: highlight.position.boundingRect.width,
54-
height: highlight.position.boundingRect.height,
55-
}}
56-
onClick={(event: Event) => {
57-
event.stopPropagation();
58-
event.preventDefault();
59-
}}
60-
{...otherProps}
61-
/>
62-
</div>
63-
);
64-
}
12+
export function AreaHighlight({
13+
highlight,
14+
onChange,
15+
isScrolledTo,
16+
...otherProps
17+
}: Props) {
18+
return (
19+
<div
20+
className={`${styles.areaHighlight} ${
21+
isScrolledTo ? styles.scrolledTo : ""
22+
}`}
23+
>
24+
<Rnd
25+
className={styles.part}
26+
onDragStop={(_, data) => {
27+
const boundingRect: LTWHP = {
28+
...highlight.position.boundingRect,
29+
top: data.y,
30+
left: data.x,
31+
};
32+
onChange(boundingRect);
33+
}}
34+
onResizeStop={(_mouseEvent, _direction, ref, _delta, position) => {
35+
const boundingRect: LTWHP = {
36+
top: position.y,
37+
left: position.x,
38+
width: ref.offsetWidth,
39+
height: ref.offsetHeight,
40+
pageNumber: getPageFromElement(ref)?.number || -1,
41+
};
42+
onChange(boundingRect);
43+
}}
44+
position={{
45+
x: highlight.position.boundingRect.left,
46+
y: highlight.position.boundingRect.top,
47+
}}
48+
size={{
49+
width: highlight.position.boundingRect.width,
50+
height: highlight.position.boundingRect.height,
51+
}}
52+
onClick={(event: React.MouseEvent) => {
53+
event.stopPropagation();
54+
event.preventDefault();
55+
}}
56+
{...otherProps}
57+
/>
58+
</div>
59+
);
6560
}
6661

6762
export default AreaHighlight;

‎src/components/Highlight.tsx

+37-46
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import React, { Component } from "react";
2-
31
import styles from "../style/Highlight.module.css";
4-
52
import type { LTWHP } from "../types.js";
63

74
interface Props {
@@ -19,50 +16,44 @@ interface Props {
1916
isScrolledTo: boolean;
2017
}
2118

22-
export class Highlight extends Component<Props> {
23-
render() {
24-
const {
25-
position,
26-
onClick,
27-
onMouseOver,
28-
onMouseOut,
29-
comment,
30-
isScrolledTo,
31-
} = this.props;
32-
33-
const { rects, boundingRect } = position;
19+
export function Highlight({
20+
position,
21+
onClick,
22+
onMouseOver,
23+
onMouseOut,
24+
comment,
25+
isScrolledTo,
26+
}: Props) {
27+
const { rects, boundingRect } = position;
3428

35-
return (
36-
<div
37-
className={`Highlight ${styles.highlight} ${isScrolledTo ? styles.scrolledTo : ""}`}
38-
>
39-
{comment ? (
40-
<div
41-
className={`Highlight__emoji ${styles.emoji}`}
42-
style={{
43-
left: 20,
44-
top: boundingRect.top,
45-
}}
46-
>
47-
{comment.emoji}
48-
</div>
49-
) : null}
50-
<div className={`Highlight__parts ${styles.parts}`}>
51-
{rects.map((rect, index) => (
52-
<div
53-
onMouseOver={onMouseOver}
54-
onMouseOut={onMouseOut}
55-
onClick={onClick}
56-
// biome-ignore lint/suspicious/noArrayIndexKey: We can use position hash at some point in future
57-
key={index}
58-
style={rect}
59-
className={`Highlight__part ${styles.part}`}
60-
/>
61-
))}
29+
return (
30+
<div
31+
className={`Highlight ${styles.highlight} ${isScrolledTo ? styles.scrolledTo : ""}`}
32+
>
33+
{comment ? (
34+
<div
35+
className={`Highlight__emoji ${styles.emoji}`}
36+
style={{
37+
left: 20,
38+
top: boundingRect.top,
39+
}}
40+
>
41+
{comment.emoji}
6242
</div>
43+
) : null}
44+
<div className={`Highlight__parts ${styles.parts}`}>
45+
{rects.map((rect, index) => (
46+
<div
47+
onMouseOver={onMouseOver}
48+
onMouseOut={onMouseOut}
49+
onClick={onClick}
50+
// biome-ignore lint/suspicious/noArrayIndexKey: We can use position hash at some point in future
51+
key={index}
52+
style={rect}
53+
className={`Highlight__part ${styles.part}`}
54+
/>
55+
))}
6356
</div>
64-
);
65-
}
57+
</div>
58+
);
6659
}
67-
68-
export default Highlight;

‎src/components/HighlightLayer.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from "react";
1+
import type { PDFViewer } from "pdfjs-dist/web/pdf_viewer.mjs";
22
import { viewportToScaled } from "../lib/coordinates";
33
import type {
44
IHighlight,
@@ -8,8 +8,6 @@ import type {
88
Scaled,
99
ScaledPosition,
1010
} from "../types";
11-
12-
import type { PDFViewer } from "pdfjs-dist/web/pdf_viewer.mjs";
1311
import type { T_ViewportHighlight } from "./PdfHighlighter";
1412

1513
interface HighlightLayerProps<T_HT> {

‎src/components/MouseSelection.tsx

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
1-
import React, { Component } from "react";
2-
1+
import { Component } from "react";
32
import { isHTMLElement } from "../lib/pdfjs-dom";
43
import styles from "../style/MouseSelection.module.css";
5-
64
import type { LTWH } from "../types.js";
75

86
interface Coords {

‎src/components/PdfHighlighter.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import type {
3030
} from "../types";
3131
import { HighlightLayer } from "./HighlightLayer";
3232
import MouseSelection from "./MouseSelection";
33-
import TipContainer from "./TipContainer";
33+
import { TipContainer } from "./TipContainer";
3434

3535
export type T_ViewportHighlight<T_HT> = { position: Position } & T_HT;
3636

‎src/components/PdfLoader.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
1-
import React, { Component } from "react";
2-
31
import { GlobalWorkerOptions, getDocument } from "pdfjs-dist";
42
import type { PDFDocumentProxy } from "pdfjs-dist";
3+
import React, { Component } from "react";
54

65
interface Props {
76
/** See `GlobalWorkerOptionsType`. */

‎src/components/Popup.tsx

+36-45
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { Component } from "react";
2-
1+
import { useState } from "react";
32
import MouseMonitor from "./MouseMonitor";
43

54
interface Props {
@@ -9,47 +8,39 @@ interface Props {
98
children: JSX.Element;
109
}
1110

12-
interface State {
13-
mouseIn: boolean;
14-
}
15-
16-
export class Popup extends Component<Props, State> {
17-
state: State = {
18-
mouseIn: false,
19-
};
20-
21-
render() {
22-
const { onMouseOver, popupContent, onMouseOut } = this.props;
23-
24-
return (
25-
<div
26-
onMouseOver={() => {
27-
this.setState({ mouseIn: true });
28-
29-
onMouseOver(
30-
<MouseMonitor
31-
onMoveAway={() => {
32-
if (this.state.mouseIn) {
33-
return;
34-
}
35-
36-
onMouseOut();
37-
}}
38-
paddingX={60}
39-
paddingY={30}
40-
>
41-
{popupContent}
42-
</MouseMonitor>,
43-
);
44-
}}
45-
onMouseOut={() => {
46-
this.setState({ mouseIn: false });
47-
}}
48-
>
49-
{this.props.children}
50-
</div>
51-
);
52-
}
11+
export function Popup({
12+
onMouseOver,
13+
popupContent,
14+
onMouseOut,
15+
children,
16+
}: Props) {
17+
const [mouseIn, setMouseIn] = useState(false);
18+
19+
return (
20+
<div
21+
onMouseOver={() => {
22+
setMouseIn(true);
23+
onMouseOver(
24+
<MouseMonitor
25+
onMoveAway={() => {
26+
if (mouseIn) {
27+
return;
28+
}
29+
30+
onMouseOut();
31+
}}
32+
paddingX={60}
33+
paddingY={30}
34+
>
35+
{popupContent}
36+
</MouseMonitor>,
37+
);
38+
}}
39+
onMouseOut={() => {
40+
setMouseIn(false);
41+
}}
42+
>
43+
{children}
44+
</div>
45+
);
5346
}
54-
55-
export default Popup;

‎src/components/Tip.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, { Component } from "react";
2-
1+
import { Component } from "react";
32
import styles from "../style/Tip.module.css";
43

54
interface State {
@@ -22,7 +21,7 @@ export class Tip extends Component<Props, State> {
2221
};
2322

2423
// for TipContainer
25-
componentDidUpdate(nextProps: Props, nextState: State) {
24+
componentDidUpdate(_: Props, nextState: State) {
2625
const { onUpdate } = this.props;
2726

2827
if (onUpdate && this.state.compact !== nextState.compact) {

0 commit comments

Comments
 (0)