@linzjs/windows 3.4.3 → 3.5.0

package/dist/panel/Panel.scss

@@ -118,4 +118,5 @@
   flex: 1;
   overflow: auto;
   display: flex;
+  flex-direction: column;
 }

package/dist/panel/Panel.tsx

@@ -7,7 +7,16 @@ import { PanelInstanceContext, PanelSize } from "./PanelInstanceContext";
 import { PanelPosition, PanelsContext } from "./PanelsContext";
 import { PopoutWindow } from "./PopoutWindow";
 import clsx from "clsx";
-import React, { ReactElement, ReactNode, useContext, useEffect, useState } from "react";
+import React, {
+  PropsWithChildren,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { createPortal } from "react-dom";
 import { Rnd } from "react-rnd";
 
@@ -17,16 +26,16 @@ export interface PanelProps {
   size?: PanelSize;
   className?: string;
   children: ReactNode;
-  maxHeight?: number;
-  maxWidth?: number;
-  minHeight?: number;
-  minWidth?: number;
+  maxHeight?: number | string;
+  maxWidth?: number | string;
+  minHeight?: number | string;
+  minWidth?: number | string;
   modal?: boolean;
+  resizeable?: boolean;
 }
 
 export const Panel = ({
   title,
-  position = "tile",
   size = { width: 320, height: 200 },
   maxHeight,
   maxWidth,
@@ -34,8 +43,12 @@ export const Panel = ({
   minWidth = 100,
   modal,
   className,
+  position = modal ? "center" : "tile",
+  resizeable = modal !== true,
   children,
 }: PanelProps): ReactElement => {
+  const panelRef = useRef<Rnd>(null);
+
   const { nextStackPosition, dockElements } = useContext(PanelsContext);
   const { panelPoppedOut, bounds, zIndex, bringPanelToFront, uniqueId, setTitle, dockId, docked } =
     useContext(PanelInstanceContext);
@@ -44,8 +57,8 @@ export const Panel = ({
     switch (position) {
       case "center":
         return {
-          x: (window.innerWidth - size.width) / 2,
-          y: (window.innerHeight - size.height) / 2,
+          x: Math.max((window.innerWidth - size.width) / 2, 0),
+          y: Math.max((window.innerHeight - size.height) / 2, 0),
         };
       case "tile":
         return nextStackPosition();
@@ -54,6 +67,24 @@ export const Panel = ({
     }
   });
 
+  const centerWindow = useCallback(() => {
+    const b = panelRef.current?.getSelfElement()?.getBoundingClientRect();
+    setPanelPosition({
+      x: Math.max((window.innerWidth - (b?.width ?? size.width)) / 2, 0),
+      y: Math.max((window.innerHeight - (b?.height ?? size.height)) / 2, 0),
+    });
+  }, [size]);
+
+  useEffect(() => {
+    if (!panelPoppedOut && position === "center" && !resizeable) {
+      centerWindow();
+
+      window.addEventListener("resize", centerWindow);
+      return () => window.removeEventListener("resize", centerWindow);
+    }
+    return;
+  }, [centerWindow, panelPoppedOut, position, resizeable]);
+
   const [panelSize, setPanelSize] = useState(size ?? { width: 320, height: 200 });
 
   const resizePanel = (newPanelSize: Partial<PanelSize>) => {
@@ -71,7 +102,7 @@ export const Panel = ({
   const dockElement = docked && dockId && dockElements[dockId];
 
   return (
-    <PanelContext.Provider value={{ resizePanel }}>
+    <PanelContext.Provider value={{ resizePanel, resizeable }}>
       {dockElement && dockElement.isConnected ? (
         createPortal(children, dockElement)
       ) : panelPoppedOut ? (
@@ -104,6 +135,7 @@ export const Panel = ({
             />
           )}
           <Rnd
+            ref={panelRef}
             className={clsx("WindowPanel", className)}
             dragHandleClassName={"draggable-handle"}
             maxHeight={maxHeight}
@@ -113,6 +145,8 @@ export const Panel = ({
             position={panelPosition}
             size={panelSize}
             style={{ zIndex }}
+            disableDragging={!resizeable}
+            enableResizing={resizeable}
             bounds={bounds ?? document.body}
             onDragStop={(_evt, data) => {
               setPanelPosition({ x: data.x, y: data.y });
@@ -143,6 +177,10 @@ export const Panel = ({
   );
 };
 
-export const PanelContent = ({ children }: { children: ReactNode }) => (
-  <div className={"WindowPanel-content"}>{children}</div>
+export interface PanelContentProps {
+  className?: string | undefined;
+}
+
+export const PanelContent = ({ children, className }: PropsWithChildren<PanelContentProps>) => (
+  <div className={clsx(`WindowPanel-content`, className)}>{children}</div>
 );

package/dist/panel/PanelContext.ts

@@ -3,6 +3,7 @@ import { createContext } from "react";
 
 export interface PanelContextType {
   resizePanel: (size: Partial<PanelSize>) => void;
+  resizeable: boolean;
 }
 
 const NoContextError = () => {
@@ -14,4 +15,5 @@ const NoContextError = () => {
  */
 export const PanelContext = createContext<PanelContextType>({
   resizePanel: NoContextError,
+  resizeable: true,
 });

package/dist/panel/PanelHeader.tsx

@@ -4,6 +4,8 @@ import { ReactNode, useContext, useState } from "react";
 
 import { LuiIcon } from "@linzjs/lui";
 import { LuiIconName } from "@linzjs/lui/dist/assets/svg-content";
+import { PanelContext } from "./PanelContext";
+import clsx from "clsx";
 
 export interface PanelHeaderProps {
   icon?: LuiIconName;
@@ -26,6 +28,7 @@ export const PanelHeader = ({
   disableClose,
   disablePopout,
 }: PanelHeaderProps) => {
+  const { resizeable } = useContext(PanelContext);
   const { panelClose, panelTogglePopout, panelPoppedOut, title, dock, undock, docked } =
     useContext(PanelInstanceContext);
   const [cursor, setCursor] = useState<"grab" | "grabbing">("grab");
@@ -36,10 +39,10 @@ export const PanelHeader = ({
 
   return (
     <div
-      className={"WindowPanel-header draggable-handle"}
+      className={clsx("WindowPanel-header", resizeable && "draggable-handle")}
       onMouseDown={headerMouseDown}
       onMouseUp={() => !panelPoppedOut && setCursor("grab")}
-      style={{ cursor }}
+      style={resizeable ? { cursor } : {}}
     >
       <div className={"WindowPanel-header-title"}>
         {icon && <LuiIcon name={icon} alt={"icon"} size={"md"} className={"WindowPanel-header-title-icon"} />}

package/package.json

@@ -13,7 +13,7 @@
     "popout"
   ],
   "main": "./dist/index.ts",
-  "version": "3.4.3",
+  "version": "3.5.0",
   "peerDependencies": {
     "@linzjs/lui": "^21",
     "lodash-es": ">=4",