add maximized, and show[button] props (#2956)
This commit is contained in:
@@ -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>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user