Skip to content

Commit b630c80

Browse files
endernokeendernoke
committed
fix: linter errors
1 parent 2b544e3 commit b630c80

File tree

7 files changed

+235
-193
lines changed

7 files changed

+235
-193
lines changed

‎src/components/image/Ascii.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,12 @@ function AsciiImage(props: ImageProps) {
3131
const [hasError, setHasError] = useState<boolean>(false);
3232
const containerRef = useRef<DOMElement | null>(null);
3333
const terminalCapabilities = useTerminalCapabilities();
34+
const {
35+
onSupportDetected,
36+
src,
37+
width: propsWidth,
38+
height: propsHeight,
39+
} = props;
3440

3541
// Detect support and notify parent
3642
useEffect(() => {
@@ -39,12 +45,12 @@ function AsciiImage(props: ImageProps) {
3945
// ASCII rendering works in all terminals, but colored ASCII requires color support
4046
// Inclusion of color support is dynamically handled by conversion logic
4147
const isSupported = true; // ASCII always works as fallback
42-
props.onSupportDetected(isSupported);
43-
}, [props.onSupportDetected, terminalCapabilities]);
48+
onSupportDetected(isSupported);
49+
}, [onSupportDetected, terminalCapabilities]);
4450

4551
useEffect(() => {
4652
const generateImageOutput = async () => {
47-
const image = await fetchImage(props.src);
53+
const image = await fetchImage(src);
4854
if (!image) {
4955
setHasError(true);
5056
return;
@@ -63,8 +69,8 @@ function AsciiImage(props: ImageProps) {
6369
maxWidth,
6470
maxHeight,
6571
originalAspectRatio: metadata.width! / (metadata.height! / 2),
66-
specifiedWidth: props.width,
67-
specifiedHeight: props.height ? props.height / 2 : undefined,
72+
specifiedWidth: propsWidth,
73+
specifiedHeight: propsHeight ? propsHeight / 2 : undefined,
6874
});
6975

7076
const resizedImage = await image
@@ -79,13 +85,7 @@ function AsciiImage(props: ImageProps) {
7985
setImageOutput(output);
8086
};
8187
generateImageOutput();
82-
}, [
83-
props.src,
84-
props.width,
85-
props.height,
86-
containerRef.current,
87-
terminalCapabilities,
88-
]);
88+
}, [src, propsWidth, propsHeight, terminalCapabilities]);
8989

9090
return (
9191
<Box ref={containerRef} flexDirection="column" flexGrow={1}>

‎src/components/image/Braille.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,25 @@ function BrailleImage(props: ImageProps) {
4141
const [hasError, setHasError] = useState<boolean>(false);
4242
const containerRef = useRef<DOMElement | null>(null);
4343
const terminalCapabilities = useTerminalCapabilities();
44+
const {
45+
onSupportDetected,
46+
src,
47+
width: propsWidth,
48+
height: propsHeight,
49+
} = props;
4450

4551
// Detect support and notify parent
4652
useEffect(() => {
4753
if (!terminalCapabilities) return;
4854

4955
// Braille rendering requires Unicode support for braille characters
5056
const isSupported = terminalCapabilities.supportsUnicode;
51-
props.onSupportDetected?.(isSupported);
52-
}, [terminalCapabilities, props.onSupportDetected]);
57+
onSupportDetected?.(isSupported);
58+
}, [terminalCapabilities, onSupportDetected]);
5359

5460
useEffect(() => {
5561
const generateImageOutput = async () => {
56-
const image = await fetchImage(props.src);
62+
const image = await fetchImage(src);
5763
if (!image) {
5864
setHasError(true);
5965
return;
@@ -70,8 +76,8 @@ function BrailleImage(props: ImageProps) {
7076
maxWidth: maxWidth * 2,
7177
maxHeight: maxHeight * 4,
7278
originalAspectRatio: metadata.width / metadata.height,
73-
specifiedWidth: props.width ? props.width * 2 : undefined,
74-
specifiedHeight: props.height ? props.height * 4 : undefined,
79+
specifiedWidth: propsWidth ? propsWidth * 2 : undefined,
80+
specifiedHeight: propsHeight ? propsHeight * 4 : undefined,
7581
});
7682

7783
const resizedImage = await image
@@ -83,7 +89,7 @@ function BrailleImage(props: ImageProps) {
8389
setImageOutput(output);
8490
};
8591
generateImageOutput();
86-
}, [props.src, props.width, props.height, containerRef.current]);
92+
}, [src, propsWidth, propsHeight]);
8793

8894
return (
8995
<Box ref={containerRef} flexDirection="column" flexGrow={1}>

‎src/components/image/HalfBlock.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,12 @@ function HalfBlockImage(props: ImageProps) {
3434
const [hasError, setHasError] = useState<boolean>(false);
3535
const containerRef = useRef<DOMElement | null>(null);
3636
const terminalCapabilities = useTerminalCapabilities();
37+
const {
38+
onSupportDetected,
39+
src,
40+
width: propsWidth,
41+
height: propsHeight,
42+
} = props;
3743

3844
// Detect support and notify parent
3945
useEffect(() => {
@@ -42,12 +48,12 @@ function HalfBlockImage(props: ImageProps) {
4248
const isSupported =
4349
terminalCapabilities.supportsColor &&
4450
terminalCapabilities.supportsUnicode;
45-
props.onSupportDetected(isSupported);
46-
}, [props.onSupportDetected, terminalCapabilities]);
51+
onSupportDetected?.(isSupported);
52+
}, [onSupportDetected, terminalCapabilities]);
4753

4854
useEffect(() => {
4955
const generateImageOutput = async () => {
50-
const image = await fetchImage(props.src);
56+
const image = await fetchImage(src);
5157
if (!image) {
5258
setHasError(true);
5359
return;
@@ -64,8 +70,8 @@ function HalfBlockImage(props: ImageProps) {
6470
maxWidth: maxWidth,
6571
maxHeight: maxHeight * 2,
6672
originalAspectRatio: metadata.width / metadata.height,
67-
specifiedWidth: props.width,
68-
specifiedHeight: props.height ? props.height * 2 : undefined,
73+
specifiedWidth: propsWidth,
74+
specifiedHeight: propsHeight ? propsHeight * 2 : undefined,
6975
});
7076

7177
const resizedImage = await image
@@ -77,7 +83,7 @@ function HalfBlockImage(props: ImageProps) {
7783
setImageOutput(output);
7884
};
7985
generateImageOutput();
80-
}, [props.src, props.width, props.height, containerRef.current]);
86+
}, [src, propsWidth, propsHeight]);
8187

8288
return (
8389
<Box ref={containerRef} flexDirection="column" flexGrow={1}>

‎src/components/image/ITerm2.tsx‎

Lines changed: 58 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -61,15 +61,21 @@ function ITerm2Image(props: ImageProps) {
6161
height: number;
6262
} | null>(null);
6363
const shouldCleanupRef = useRef<boolean>(true);
64+
const {
65+
onSupportDetected,
66+
src,
67+
width: propsWidth,
68+
height: propsHeight,
69+
} = props;
6470

6571
// Detect support and notify parent
6672
useEffect(() => {
6773
if (!terminalCapabilities) return;
6874

6975
// ITerm2 rendering requires explicit iTerm2 graphics support
7076
const isSupported = terminalCapabilities.supportsITerm2Graphics;
71-
props.onSupportDetected?.(isSupported);
72-
}, [terminalCapabilities, props.onSupportDetected]);
77+
onSupportDetected?.(isSupported);
78+
}, [terminalCapabilities, onSupportDetected]);
7379

7480
// TODO: If we upgrade to Ink 6 we will need to deal with Box background colors when rendering/cleaning up
7581
// const inheritedBackgroundColor = useContext(backgroundContext);
@@ -85,57 +91,61 @@ function ITerm2Image(props: ImageProps) {
8591
* 5. Converts processed image data to ITerm2 format
8692
* 6. Tracks actual size in terminal cells for cleanup purposes
8793
*/
88-
useEffect(() => {
89-
const generateImageOutput = async () => {
90-
if (!componentPosition) return;
91-
if (!terminalDimensions) return;
94+
useEffect(
95+
() => {
96+
const generateImageOutput = async () => {
97+
if (!componentPosition) return;
98+
if (!terminalDimensions) return;
9299

93-
const image = await fetchImage(props.src);
94-
if (!image) {
95-
setHasError(true);
96-
return;
97-
}
98-
setHasError(false);
100+
const image = await fetchImage(src);
101+
if (!image) {
102+
setHasError(true);
103+
return;
104+
}
105+
setHasError(false);
99106

100-
const metadata = await image.metadata();
107+
const metadata = await image.metadata();
101108

102-
const { width: maxWidth, height: maxHeight } = componentPosition;
103-
const { width, height } = calculateImageSize({
104-
maxWidth: maxWidth * terminalDimensions.cellWidth,
105-
maxHeight: maxHeight * terminalDimensions.cellHeight,
106-
originalAspectRatio: metadata.width / metadata.height,
107-
specifiedWidth: props.width
108-
? props.width * terminalDimensions.cellWidth
109-
: undefined,
110-
specifiedHeight: props.height
111-
? props.height * terminalDimensions.cellHeight
112-
: undefined,
113-
});
109+
const { width: maxWidth, height: maxHeight } = componentPosition;
110+
const { width, height } = calculateImageSize({
111+
maxWidth: maxWidth * terminalDimensions.cellWidth,
112+
maxHeight: maxHeight * terminalDimensions.cellHeight,
113+
originalAspectRatio: metadata.width / metadata.height,
114+
specifiedWidth: propsWidth
115+
? propsWidth * terminalDimensions.cellWidth
116+
: undefined,
117+
specifiedHeight: propsHeight
118+
? propsHeight * terminalDimensions.cellHeight
119+
: undefined,
120+
});
114121

115-
const resizedImage = await image
116-
.png() // iTerm2 expects a FILE, not raw pixel data
117-
.toBuffer({ resolveWithObject: true });
118-
setActualSizeInCells({
119-
width: Math.ceil(
120-
resizedImage.info.width / terminalDimensions.cellWidth,
121-
),
122-
height: Math.ceil(
123-
resizedImage.info.height / terminalDimensions.cellHeight,
124-
),
125-
});
122+
const resizedImage = await image
123+
.png() // iTerm2 expects a FILE, not raw pixel data
124+
.toBuffer({ resolveWithObject: true });
125+
setActualSizeInCells({
126+
width: Math.ceil(
127+
resizedImage.info.width / terminalDimensions.cellWidth,
128+
),
129+
height: Math.ceil(
130+
resizedImage.info.height / terminalDimensions.cellHeight,
131+
),
132+
});
126133

127-
const output = toITerm2(resizedImage, { width, height });
128-
setImageOutput(output);
129-
};
130-
generateImageOutput();
131-
}, [
132-
props.src,
133-
props.width,
134-
props.height,
135-
componentPosition?.width,
136-
componentPosition?.height,
137-
terminalDimensions,
138-
]);
134+
const output = toITerm2(resizedImage, { width, height });
135+
setImageOutput(output);
136+
};
137+
generateImageOutput();
138+
},
139+
// eslint-disable-next-line react-hooks/exhaustive-deps
140+
[
141+
src,
142+
propsWidth,
143+
propsHeight,
144+
componentPosition?.width,
145+
componentPosition?.height,
146+
terminalDimensions,
147+
],
148+
);
139149

140150
/**
141151
* Critical rendering effect for ITerm2 image display.

0 commit comments

Comments
 (0)