UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Lint fix

Browse Source
This commit is contained in:
eduardruzga 2024-12-05 12:17:12 +02:00
parent a8903cec11
commit b6eef57ab3
1 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
app/components/workbench/Preview.tsx
View File

@ -26,8 +26,6 @@ export const Preview = memo(() => {
// Use percentage for width // Use percentage for width
const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially const [widthPercent, setWidthPercent] = useState<number>(37.5); // 375px assuming 1000px window width initially
// Height is always 100%
const height = '100%';
const resizingState = useRef({ const resizingState = useRef({
isResizing: false, isResizing: false,
@ -44,6 +42,7 @@ export const Preview = memo(() => {
if (!activePreview) { if (!activePreview) {
setUrl(''); setUrl('');
setIframeUrl(undefined); setIframeUrl(undefined);
return; return;
} }
@ -54,7 +53,10 @@ export const Preview = memo(() => {
const validateUrl = useCallback( const validateUrl = useCallback(
(value: string) => { (value: string) => {
if (!activePreview) return false; if (!activePreview) {
return false;
}
const { baseUrl } = activePreview; const { baseUrl } = activePreview;
if (value === baseUrl) { if (value === baseUrl) {
@ -103,6 +105,7 @@ export const Preview = memo(() => {
}; };
document.addEventListener('fullscreenchange', handleFullscreenChange); document.addEventListener('fullscreenchange', handleFullscreenChange);
return () => { return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange); document.removeEventListener('fullscreenchange', handleFullscreenChange);
}; };
@ -113,7 +116,9 @@ export const Preview = memo(() => {
}; };
const startResizing = (e: React.MouseEvent, side: ResizeSide) => { const startResizing = (e: React.MouseEvent, side: ResizeSide) => {
if (!isDeviceModeOn) return; if (!isDeviceModeOn) {
return;
}
// Prevent text selection // Prevent text selection
document.body.style.userSelect = 'none'; document.body.style.userSelect = 'none';
@ -131,12 +136,15 @@ export const Preview = memo(() => {
}; };
const onMouseMove = (e: MouseEvent) => { const onMouseMove = (e: MouseEvent) => {
if (!resizingState.current.isResizing) return; if (!resizingState.current.isResizing) {
return;
}
const dx = e.clientX - resizingState.current.startX; const dx = e.clientX - resizingState.current.startX;
const windowWidth = resizingState.current.windowWidth; const windowWidth = resizingState.current.windowWidth;
// Apply scaling factor to increase sensitivity // Apply scaling factor to increase sensitivity
const dxPercent = ((dx / windowWidth) * 100) * SCALING_FACTOR; const dxPercent = (dx / windowWidth) * 100 * SCALING_FACTOR;
let newWidthPercent = resizingState.current.startWidthPercent; let newWidthPercent = resizingState.current.startWidthPercent;
@ -165,11 +173,14 @@ export const Preview = memo(() => {
// Handle window resize to ensure widthPercent remains valid // Handle window resize to ensure widthPercent remains valid
useEffect(() => { useEffect(() => {
const handleWindowResize = () => { const handleWindowResize = () => {
// Optional: Adjust widthPercent if necessary /*
// For now, since widthPercent is relative, no action is needed * Optional: Adjust widthPercent if necessary
* For now, since widthPercent is relative, no action is needed
*/
}; };
window.addEventListener('resize', handleWindowResize); window.addEventListener('resize', handleWindowResize);
return () => { return () => {
window.removeEventListener('resize', handleWindowResize); window.removeEventListener('resize', handleWindowResize);
}; };
@ -195,8 +206,7 @@ export const Preview = memo(() => {
marginLeft: '1px', marginLeft: '1px',
}} }}
> >
••• ••• •••
•••
</div> </div>
</div> </div>
); );
@ -204,10 +214,7 @@ export const Preview = memo(() => {
return ( return (
<div ref={containerRef} className="w-full h-full flex flex-col relative"> <div ref={containerRef} className="w-full h-full flex flex-col relative">
{isPortDropdownOpen && ( {isPortDropdownOpen && (
<div <div className="z-iframe-overlay w-full h-full absolute" onClick={() => setIsPortDropdownOpen(false)} />
className="z-iframe-overlay w-full h-full absolute"
onClick={() => setIsPortDropdownOpen(false)}
/>
)} )}
<div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5"> <div className="bg-bolt-elements-background-depth-2 p-2 flex items-center gap-1.5">
<IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} /> <IconButton icon="i-ph:arrow-clockwise" onClick={reloadPreview} />
@ -274,16 +281,9 @@ export const Preview = memo(() => {
}} }}
> >
{activePreview ? ( {activePreview ? (
<iframe <iframe ref={iframeRef} className="border-none w-full h-full bg-white" src={iframeUrl} allowFullScreen />
ref={iframeRef}
className="border-none w-full h-full bg-white"
src={iframeUrl}
allowFullScreen
/>
) : ( ) : (
<div className="flex w-full h-full justify-center items-center bg-white"> <div className="flex w-full h-full justify-center items-center bg-white">No preview available</div>
No preview available
</div>
)} )}
{isDeviceModeOn && ( {isDeviceModeOn && (