react-simple-dock 0.1.3 → 0.1.4

package/index.css

@@ -1,6 +1,7 @@
 /* Light Theme, feel free to override */
 :root {
     --sd-grid-gap: 3px;
+    --sd-panel-border: solid;
 }
 
 :root[data-theme="light"] {
@@ -110,6 +111,8 @@ body[data-jp-theme-light] {
 .leaf > .panel-content {
     position: relative;
     flex: 1;
+    border: var(--sd-panel-border, solid) var(--sd-tab-border-color, #bdbdbd);
+    border-width: 0 1px 1px 1px;
 }
 
 .leaf > .panel-content > div {

package/index.d.ts

@@ -1,14 +1,30 @@
 import React from "react";
 import "./index.css";
 import { LayoutConfig, PanelProps } from "./types";
+/**
+ * A Panel component.
+ *
+ * This component represents a Panel within the layout.
+ *
+ * @param props.name The unique identifier of the panel.
+ * @param props.header The content to render in the panel header.
+ * @param props.children The content to render within the panel.
+ */
 export declare const Panel: (props: PanelProps) => any;
-export declare function Layout(props: {
+/**
+ * Main layout component that organizes panels and handles drag and drop.
+ *
+ * The Layout component takes child panel components, constructs an initial layout configuration,
+ * and renders the panel structure using NestedPanel. It also wraps the layout in a DndProvider
+ * if drag and drop support is enabled.
+ *
+ * @param children The children `Panel` components to render within the layout.
+ * @param defaultConfig The default layout configuration to use.
+ * @param wrapDnd A boolean flag to enable or disable drag and drop support (default: true).
+ * @returns A React element representing the complete panel layout.
+ */
+export declare function Layout({ children, defaultConfig, wrapDnd, }: {
     children: React.ReactElement<PanelProps>[] | React.ReactElement<PanelProps>;
     defaultConfig?: LayoutConfig;
     wrapDnd?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-export declare namespace Layout {
-    var defaultProps: {
-        wrapDnd: boolean;
-    };
-}

package/index.js

@@ -4,14 +4,24 @@ import "./index.css";
 import { DndProvider, useDrag, useDragDropManager, useDrop } from "react-dnd";
 import { filterPanels, movePanel } from "./utils";
 import { HTML5Backend } from "react-dnd-html5-backend";
-export const Panel = (props) => {
-    return null;
-};
 function useForceUpdate() {
     const [value, setValue] = useState(0); // integer state
     return () => setValue((value) => value + 1); // update state to force render
 }
-const getPanelElementHeader = (node) => node.children[0];
+const getPanelElementMaxHeaderHeight = (config, panelElements) => {
+    // If we have a leaf, then the header height is the max of each tabs header height
+    if (config.kind === "leaf") {
+        return Math.max(...config.tabs.map((tab) => panelElements.get(config).children[0].offsetHeight));
+    }
+    // If we have a row, then the header height is the max of each child's max header height
+    else if (config.kind === "row") {
+        return Math.max(...config.children.map((c) => getPanelElementMaxHeaderHeight(c, panelElements)));
+    }
+    // If we have a column, then the header height is the sum of each child's max header height
+    else {
+        return config.children.reduce((a, b) => a + getPanelElementMaxHeaderHeight(b, panelElements), 0);
+    }
+};
 const TabHandle = ({ name, index, visible, onClick, children, }) => {
     const getItem = () => ({
         name,
@@ -119,15 +129,16 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
         let size = savedSizes.current[idx] * ratio;
         let nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
         const total = savedSizes.current.reduce((a, b) => a + b, 0);
-        const headerHeight = getPanelElementHeader(target.parentElement).offsetHeight;
         if (config.kind === "column") {
+            const headerHeightBefore = getPanelElementMaxHeaderHeight(config.children[idx], panelElements);
+            const headerHeightAfter = getPanelElementMaxHeaderHeight(config.children[idx + 1], panelElements);
             const parentHeight = panelContentRef.current.offsetHeight;
-            if ((size * parentHeight) / total < headerHeight) {
-                size = (headerHeight / parentHeight) * total;
+            if ((size * parentHeight) / total < headerHeightBefore) {
+                size = (headerHeightBefore / parentHeight) * total;
                 nextSize = savedSizes.current[idx + 1] + (savedSizes.current[idx] - size);
             }
-            else if ((nextSize * parentHeight) / total < headerHeight) {
-                nextSize = (headerHeight / parentHeight) * total;
+            else if ((nextSize * parentHeight) / total < headerHeightAfter) {
+                nextSize = (headerHeightAfter / parentHeight) * total;
                 size = savedSizes.current[idx] + (savedSizes.current[idx + 1] - nextSize);
             }
         }
@@ -148,7 +159,7 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
     };
     const panelContentRef = useRef(null);
     const panelRef = useRef(null);
-    return (_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (config.tabIndex < config.tabs.length ? (_jsx("div", { children: leaves[config.tabs[config.tabIndex]].element })) : (_jsx("div", { style: { width: "100%", height: "100%" } }))) : (config.children.map((c, i) => (_jsx(NestedPanel, { config: c, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === config.children.length - 1, direction: config.kind, panelElements: panelElements }, i)))) }), !isLast && direction === "column" && (_jsx("div", { className: "resize-border bottom", onMouseDown: (e) => handleMouseDown(e, "bottom") })), !isLast && direction === "row" && (_jsx("div", { className: "resize-border right", onMouseDown: (e) => handleMouseDown(e, "right") }))] }));
+    return (_jsxs("div", { className: `${config.kind} panel`, style: style, ref: panelRef, children: [config.kind === "leaf" ? (_jsx(TabHeader, { config: config, leaves: leaves, onClick: handleHeaderClick })) : null, _jsx("div", { className: "panel-content", ref: panelContentRef, style: makeStyle(), children: config.kind === "leaf" ? (config.tabIndex < config.tabs.length ? (_jsx("div", { children: leaves[config.tabs[config.tabIndex]].element }, config.tabs[config.tabIndex])) : (_jsx("div", { style: { width: "100%", height: "100%" } }))) : (config.children.map((c, i) => (_jsx(NestedPanel, { config: c, leaves: leaves, saveSizes: handleSaveSizes, index: i, onResize: handleResize, isLast: i === config.children.length - 1, direction: config.kind, panelElements: panelElements }, i)))) }), !isLast && direction === "column" && (_jsx("div", { className: "resize-border bottom", onMouseDown: (e) => handleMouseDown(e, "bottom") })), !isLast && direction === "row" && (_jsx("div", { className: "resize-border right", onMouseDown: (e) => handleMouseDown(e, "right") }))] }));
 });
 const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
     const closestRef = useRef(null);
@@ -208,14 +219,19 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
                         zones.push({ rect, config, index, element });
                     };
                     if (config.kind === "leaf") {
-                        if (!config.tabs.includes(name)) {
+                        if (!(config.tabs.length == 1 && config.tabs[0] == name)) {
                             pushZone("TOP", left, top, width, height / 2);
                             pushZone("BOTTOM", left, top + height / 2, width, height / 2);
                             pushZone("LEFT", left, top, width / 2, height);
                             pushZone("RIGHT", left + width / 2, top, width / 2, height);
                         }
-                        pushZone("CENTER", left, top, width, height);
-                        pushZone("TAB", left, top, width, getPanelElementHeader(element).offsetHeight);
+                        // Only allow center zone if it's for the panel to stay at the same spot.
+                        // Indeed, it was confusing since it appears like it's going to create
+                        // a new panel, when in reality it just creates a new tab in the target panel.
+                        else {
+                            pushZone("CENTER", left, top, width, height);
+                        }
+                        pushZone("TAB", left, top, width, element.children[0].offsetHeight);
                     }
                     else {
                         const firstTabs = config.children?.[0]?.tabs || [null];
@@ -340,9 +356,33 @@ const Overlay = ({ panelElements, onDrop, rootConfig, }) => {
     const overlayRef = useRef(null);
     return _jsx("div", { className: "tab-handle-overlay", ref: overlayRef });
 };
-export function Layout(props) {
-    const children = React.Children.toArray(props.children);
-    const namedChildren = Object.fromEntries(children.map((c, i) => [
+/**
+ * A Panel component.
+ *
+ * This component represents a Panel within the layout.
+ *
+ * @param props.name The unique identifier of the panel.
+ * @param props.header The content to render in the panel header.
+ * @param props.children The content to render within the panel.
+ */
+export const Panel = (props) => {
+    return null;
+};
+/**
+ * Main layout component that organizes panels and handles drag and drop.
+ *
+ * The Layout component takes child panel components, constructs an initial layout configuration,
+ * and renders the panel structure using NestedPanel. It also wraps the layout in a DndProvider
+ * if drag and drop support is enabled.
+ *
+ * @param children The children `Panel` components to render within the layout.
+ * @param defaultConfig The default layout configuration to use.
+ * @param wrapDnd A boolean flag to enable or disable drag and drop support (default: true).
+ * @returns A React element representing the complete panel layout.
+ */
+export function Layout({ children, defaultConfig, wrapDnd = true, }) {
+    const children_array = React.Children.toArray(children);
+    const namedChildren = Object.fromEntries(children_array.map((c, i) => [
         c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`),
         {
             element: c.props.children,
@@ -350,14 +390,14 @@ export function Layout(props) {
         },
     ]));
     const panelElements = useRef(new Map());
-    const [rootConfig, setRootConfig] = useState(props.defaultConfig || {
+    const [rootConfig, setRootConfig] = useState(defaultConfig || {
         kind: "row",
         size: 1,
-        children: children.map((c, i) => ({
+        children: children_array.map((c, i) => ({
             kind: "leaf",
             tabs: [c.props.name || (c.key !== null ? c.key.toString().slice(2) : `unnamed-${i}`)],
             tabIndex: 0,
-            size: 100 / children.length,
+            size: 100 / children_array.length,
         })),
     });
     let config = rootConfig;
@@ -373,11 +413,8 @@ export function Layout(props) {
         setRootConfig(newConfig);
     };
     const container = (_jsxs("div", { className: "container", children: [_jsx(NestedPanel, { leaves: namedChildren, config: config, panelElements: panelElements.current }), _jsx(Overlay, { panelElements: panelElements, onDrop: handleDrop, rootConfig: config })] }));
-    if (props.wrapDnd) {
+    if (wrapDnd) {
         return _jsx(DndProvider, { backend: HTML5Backend, children: container });
     }
     return container;
 }
-Layout.defaultProps = {
-    wrapDnd: true,
-};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-dock",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "main": "index.js",
   "description": "Simple dock component for React",
   "repository": "https://github.com/percevalw/react-simple-dock",