-
Notifications
You must be signed in to change notification settings - Fork 87
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Improve tunnel to a new version
- Loading branch information
Showing
27 changed files
with
16,001 additions
and
23,302 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
82 changes: 64 additions & 18 deletions
82
tools/awps-tunnel/client/src/components/ResizablePanel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,38 +1,84 @@ | ||
| import React, { useState } from "react"; | ||
| import React, { useState, useRef, useCallback } from "react"; | ||
|
|
||
| export interface ResizablePanelProps { | ||
| left: React.ReactNode; | ||
| right: React.ReactNode; | ||
| className?: string; | ||
| initialLeftWidth?: string; | ||
| initialLeftWidth?: string; // Supports both percentage and pixel-based width | ||
| } | ||
|
|
||
| export function ResizablePanel({ left, right, className, initialLeftWidth = "30%" }: ResizablePanelProps) { | ||
| const [leftWidth, setLeftWidth] = useState(initialLeftWidth); | ||
| export function ResizablePanel({ | ||
| left, | ||
| right, | ||
| className, | ||
| initialLeftWidth = "30%", | ||
| }: ResizablePanelProps) { | ||
| const [leftWidth, setLeftWidth] = useState<string>(initialLeftWidth); | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
| const splitterRef = useRef<HTMLDivElement>(null); | ||
| const isResizing = useRef<boolean>(false); | ||
|
|
||
| // Handle mouse move event to update width | ||
| const handleMouseMove = useCallback((e: MouseEvent) => { | ||
| if (isResizing.current && containerRef.current) { | ||
| const newWidth = Math.max(50, e.pageX - containerRef.current.getBoundingClientRect().left); | ||
| setLeftWidth(`${newWidth}px`); | ||
| } | ||
| }, []); | ||
|
|
||
| // Handle mouse up event to stop resizing | ||
| const handleMouseUp = useCallback(() => { | ||
| isResizing.current = false; | ||
| document.removeEventListener("mousemove", handleMouseMove); | ||
| document.removeEventListener("mouseup", handleMouseUp); | ||
| document.body.style.userSelect = "auto"; // Re-enable text selection | ||
| }, [handleMouseMove]); | ||
|
|
||
| // Handle mouse down event to start resizing | ||
| const handleMouseDown = useCallback((e: React.MouseEvent) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
| isResizing.current = true; | ||
| document.addEventListener("mousemove", handleMouseMove); | ||
| document.addEventListener("mouseup", handleMouseUp); | ||
| document.body.style.userSelect = "none"; // Disable text selection | ||
| }, [handleMouseMove, handleMouseUp]); | ||
|
|
||
| const handleResize = (e: MouseEvent) => { | ||
| setLeftWidth(`${e.pageX}px`); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={`resizablePanel d-flex ${className || ""} overflow-auto`}> | ||
| <div className="d-flex flex-column overflow-auto" style={{ flex: `0 0 ${leftWidth}`, resize: "horizontal" }}> | ||
| <div | ||
| ref={containerRef} | ||
| className={`resizablePanel d-flex ${className || ""}`} | ||
| style={{ width: "100%", height: "100%", overflow: "hidden" }} | ||
| > | ||
| {/* Left Panel */} | ||
| <div | ||
| className="d-flex flex-column" | ||
| style={{ flex: `0 0 ${leftWidth}`, overflow: "auto" }} | ||
| > | ||
| {left} | ||
| </div> | ||
|
|
||
| {/* Splitter */} | ||
| <div | ||
| ref={splitterRef} | ||
| onMouseDown={handleMouseDown} | ||
| className="d-flex flex-column" | ||
| style={{ | ||
| flex: `0 0 3px`, | ||
| backgroundColor: "#ccc", | ||
| width: "3px", | ||
| background: "linear-gradient(to right, #ccc, #eee, #ccc)", | ||
| cursor: "col-resize", | ||
| }} | ||
| onMouseDown={(e) => { | ||
| document.addEventListener("mousemove", handleResize); | ||
| document.addEventListener("mouseup", () => { | ||
| document.removeEventListener("mousemove", handleResize); | ||
| }); | ||
| flexShrink: 0, // Prevent shrinking | ||
| }} | ||
| ></div> | ||
| <div className="d-flex flex-column overflow-auto flex-fill">{right}</div> | ||
|
|
||
| {/* Right Panel */} | ||
| <div | ||
| className="d-flex flex-column flex-fill" | ||
| style={{ overflow: "auto" }} | ||
| > | ||
| {right} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.