Lint fix
Browse files
app/components/workbench/Preview.tsx
CHANGED
@@ -26,8 +26,6 @@ export const Preview = memo(() => {
|
|
26 |
|
27 |
// Use percentage for width
|
28 |
const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
|
29 |
-
// Height is always 100%
|
30 |
-
const height = '100%';
|
31 |
|
32 |
const resizingState = useRef({
|
33 |
isResizing: false,
|
@@ -44,6 +42,7 @@ export const Preview = memo(() => {
|
|
44 |
if (!activePreview) {
|
45 |
setUrl('');
|
46 |
setIframeUrl(undefined);
|
|
|
47 |
return;
|
48 |
}
|
49 |
|
@@ -54,7 +53,10 @@ export const Preview = memo(() => {
|
|
54 |
|
55 |
const validateUrl = useCallback(
|
56 |
(value: string) => {
|
57 |
-
if (!activePreview)
|
|
|
|
|
|
|
58 |
const { baseUrl } = activePreview;
|
59 |
|
60 |
if (value === baseUrl) {
|
@@ -103,6 +105,7 @@ export const Preview = memo(() => {
|
|
103 |
};
|
104 |
|
105 |
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
|
|
106 |
return () => {
|
107 |
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
108 |
};
|
@@ -113,7 +116,9 @@ export const Preview = memo(() => {
|
|
113 |
};
|
114 |
|
115 |
const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
|
116 |
-
if (!isDeviceModeOn)
|
|
|
|
|
117 |
|
118 |
// Prevent text selection
|
119 |
document.body.style.userSelect = 'none';
|
@@ -131,12 +136,15 @@ export const Preview = memo(() => {
|
|
131 |
};
|
132 |
|
133 |
const onMouseMove = (e: MouseEvent) => {
|
134 |
-
if (!resizingState.current.isResizing)
|
|
|
|
|
|
|
135 |
const dx = e.clientX - resizingState.current.startX;
|
136 |
const windowWidth = resizingState.current.windowWidth;
|
137 |
|
138 |
// Apply scaling factor to increase sensitivity
|
139 |
-
const dxPercent = (
|
140 |
|
141 |
let newWidthPercent = resizingState.current.startWidthPercent;
|
142 |
|
@@ -165,11 +173,14 @@ export const Preview = memo(() => {
|
|
165 |
// Handle window resize to ensure widthPercent remains valid
|
166 |
useEffect(() => {
|
167 |
const handleWindowResize = () => {
|
168 |
-
|
169 |
-
|
|
|
|
|
170 |
};
|
171 |
|
172 |
window.addEventListener('resize', handleWindowResize);
|
|
|
173 |
return () => {
|
174 |
window.removeEventListener('resize', handleWindowResize);
|
175 |
};
|
@@ -195,8 +206,7 @@ export const Preview = memo(() => {
|
|
195 |
marginLeft: '1px',
|
196 |
}}
|
197 |
>
|
198 |
-
•••
|
199 |
-
•••
|
200 |
</div>
|
201 |
</div>
|
202 |
);
|
@@ -204,10 +214,7 @@ export const Preview = memo(() => {
|
|
204 |
return (
|
205 |
<div ref={containerRef} className="w-full h-full flex flex-col relative">
|
206 |
{isPortDropdownOpen && (
|
207 |
-
<div
|
208 |
-
className="z-iframe-overlay w-full h-full absolute"
|
209 |
-
onClick={() => setIsPortDropdownOpen(false)}
|
210 |
-
/>
|
211 |
)}
|
212 |
<div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
|
213 |
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
|
@@ -274,16 +281,9 @@ export const Preview = memo(() => {
|
|
274 |
}}
|
275 |
>
|
276 |
{activePreview ? (
|
277 |
-
<iframe
|
278 |
-
ref={iframeRef}
|
279 |
-
className="border-none w-full h-full bg-white"
|
280 |
-
src={iframeUrl}
|
281 |
-
allowFullScreen
|
282 |
-
/>
|
283 |
) : (
|
284 |
-
<div className="flex w-full h-full justify-center items-center bg-white">
|
285 |
-
No preview available
|
286 |
-
</div>
|
287 |
)}
|
288 |
|
289 |
{isDeviceModeOn && (
|
|
|
26 |
|
27 |
// Use percentage for width
|
28 |
const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
|
|
|
|
|
29 |
|
30 |
const resizingState = useRef({
|
31 |
isResizing: false,
|
|
|
42 |
if (!activePreview) {
|
43 |
setUrl('');
|
44 |
setIframeUrl(undefined);
|
45 |
+
|
46 |
return;
|
47 |
}
|
48 |
|
|
|
53 |
|
54 |
const validateUrl = useCallback(
|
55 |
(value: string) => {
|
56 |
+
if (!activePreview) {
|
57 |
+
return false;
|
58 |
+
}
|
59 |
+
|
60 |
const { baseUrl } = activePreview;
|
61 |
|
62 |
if (value === baseUrl) {
|
|
|
105 |
};
|
106 |
|
107 |
document.addEventListener('fullscreenchange', handleFullscreenChange);
|
108 |
+
|
109 |
return () => {
|
110 |
document.removeEventListener('fullscreenchange', handleFullscreenChange);
|
111 |
};
|
|
|
116 |
};
|
117 |
|
118 |
const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
|
119 |
+
if (!isDeviceModeOn) {
|
120 |
+
return;
|
121 |
+
}
|
122 |
|
123 |
// Prevent text selection
|
124 |
document.body.style.userSelect = 'none';
|
|
|
136 |
};
|
137 |
|
138 |
const onMouseMove = (e: MouseEvent) => {
|
139 |
+
if (!resizingState.current.isResizing) {
|
140 |
+
return;
|
141 |
+
}
|
142 |
+
|
143 |
const dx = e.clientX - resizingState.current.startX;
|
144 |
const windowWidth = resizingState.current.windowWidth;
|
145 |
|
146 |
// Apply scaling factor to increase sensitivity
|
147 |
+
const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
|
148 |
|
149 |
let newWidthPercent = resizingState.current.startWidthPercent;
|
150 |
|
|
|
173 |
// Handle window resize to ensure widthPercent remains valid
|
174 |
useEffect(() => {
|
175 |
const handleWindowResize = () => {
|
176 |
+
/*
|
177 |
+
* Optional: Adjust widthPercent if necessary
|
178 |
+
* For now, since widthPercent is relative, no action is needed
|
179 |
+
*/
|
180 |
};
|
181 |
|
182 |
window.addEventListener('resize', handleWindowResize);
|
183 |
+
|
184 |
return () => {
|
185 |
window.removeEventListener('resize', handleWindowResize);
|
186 |
};
|
|
|
206 |
marginLeft: '1px',
|
207 |
}}
|
208 |
>
|
209 |
+
••• •••
|
|
|
210 |
</div>
|
211 |
</div>
|
212 |
);
|
|
|
214 |
return (
|
215 |
<div ref={containerRef} className="w-full h-full flex flex-col relative">
|
216 |
{isPortDropdownOpen && (
|
217 |
+
<div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
|
|
|
|
|
|
|
218 |
)}
|
219 |
<div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
|
220 |
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
|
|
|
281 |
}}
|
282 |
>
|
283 |
{activePreview ? (
|
284 |
+
<iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
|
|
|
|
|
|
|
|
|
|
|
285 |
) : (
|
286 |
+
<div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
|
|
|
|
|
287 |
)}
|
288 |
|
289 |
{isDeviceModeOn && (
|