add maximized, and show[button] props (#2956)

This commit is contained in:
Jonathan Dobson
2025-07-15 11:44:31 -04:00
committed by GitHub
parent d5dd229620
commit 67a10c472f

View File

@@ -100,6 +100,10 @@ function FloatingWindow({
children, children,
initialWidth, initialWidth,
initialHeight, initialHeight,
maximized,
showCloseButton,
showMaximizeButton,
showMinimizeButton,
title, title,
zIndex, zIndex,
// -- // --
@@ -108,12 +112,15 @@ function FloatingWindow({
children: React.ReactNode; children: React.ReactNode;
initialHeight?: number; initialHeight?: number;
initialWidth?: number; initialWidth?: number;
maximized?: boolean;
showCloseButton?: boolean;
showMaximizeButton?: boolean;
showMinimizeButton?: boolean;
title: string; title: string;
zIndex?: string; zIndex?: string;
// -- // --
onInteract?: () => void; onInteract?: () => void;
}) { }) {
console.log(title, initialWidth, initialHeight);
const [position, setPosition] = useState({ x: 0, y: 0 }); const [position, setPosition] = useState({ x: 0, y: 0 });
const [size, setSize] = useState({ const [size, setSize] = useState({
left: 0, left: 0,
@@ -133,7 +140,7 @@ function FloatingWindow({
height: initialHeight ?? Constants.MinHeight, height: initialHeight ?? Constants.MinHeight,
width: initialWidth ?? Constants.MinWidth, width: initialWidth ?? Constants.MinWidth,
}); });
const [isMaximized, setIsMaximized] = useState(false); const [isMaximized, setIsMaximized] = useState(maximized ?? false);
const [isMinimized, setIsMinimized] = useState(false); const [isMinimized, setIsMinimized] = useState(false);
const parentRef = useRef<HTMLDivElement>(null); const parentRef = useRef<HTMLDivElement>(null);
const resizableRef = useRef<HTMLDivElement>(null); const resizableRef = useRef<HTMLDivElement>(null);
@@ -464,23 +471,31 @@ function FloatingWindow({
{os === "macOS" ? ( {os === "macOS" ? (
<> <>
<div className="buttons-container flex items-center gap-2"> <div className="buttons-container flex items-center gap-2">
<MacOsButton {showCloseButton && (
color="#FF605C" <MacOsButton
disabled={true} color="#FF605C"
tip="close" disabled={true}
onClick={() => {}} tip="close"
/> onClick={() => {}}
<MacOsButton />
color="#FFBD44" )}
disabled={true} {showMinimizeButton && (
tip="minimize" <MacOsButton
onClick={onMinimize} color="#FFBD44"
/> disabled={true}
<MacOsButton tip="minimize"
color="#00CA4E" onClick={onMinimize}
tip={isMaximized || isMinimized ? "restore" : "maximize"} />
onClick={toggleMaximized} )}
/> {showMaximizeButton && (
<MacOsButton
color="#00CA4E"
tip={
isMaximized || isMinimized ? "restore" : "maximize"
}
onClick={toggleMaximized}
/>
)}
</div> </div>
<div className="ml-auto">{title}</div> <div className="ml-auto">{title}</div>
</> </>
@@ -488,9 +503,11 @@ function FloatingWindow({
<> <>
<div>{title}</div> <div>{title}</div>
<div className="buttons-container ml-auto flex h-full items-center gap-4"> <div className="buttons-container ml-auto flex h-full items-center gap-4">
<WindowsButton onClick={toggleMaximized}> {showMaximizeButton && (
<div>{isMaximized ? "-" : "□"}</div> <WindowsButton onClick={toggleMaximized}>
</WindowsButton> <div>{isMaximized ? "-" : "□"}</div>
</WindowsButton>
)}
</div> </div>
</> </>
)} )}