react-simple-dock 0.1.3 → 0.2.2

package/README.md

@@ -1,5 +1,9 @@
 # React-Simple-Dock
 
+[![PyPI - pret-simple-dock](https://img.shields.io/pypi/v/pret-simple-dock?style=flat-square&color=blue)](https://pypi.org/project/pret-simple-dock/)
+[![npm - react-simple-dock](https://img.shields.io/npm/v/react-simple-dock?style=flat-square&color=blue)](https://www.npmjs.com/package/react-simple-dock)
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/percevalw/react-simple-dock/playwright.yml?style=flat-square)](https://github.com/percevalw/react-simple-dock/actions/workflows/playwright.yml)
+
 A set of React components to create a dockable interface, allowing to arrange and resize tabs.
 
 ## Installation of the javascript package

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 {
@@ -119,7 +122,7 @@ body[data-jp-theme-light] {
     left: 0;
     width: 100%;
     height: 100%;
-    overflow: scroll;
+    overflow: auto;
 }
 
 /* TAB HEADER */

package/index.d.ts

@@ -1,14 +1,32 @@
 import React from "react";
 import "./index.css";
-import { LayoutConfig, PanelProps } from "./types";
+import { PanelProps, DefaultLayoutConfig } 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).
+ * @param collapseTabsOnMobile If true, auto-detect mobile devices and collapse the whole layout into a single tabbed panel.
+ * @returns A React element representing the complete panel layout.
+ */
+export declare function Layout({ children, defaultConfig, wrapDnd, collapseTabsOnMobile, }: {
     children: React.ReactElement<PanelProps>[] | React.ReactElement<PanelProps>;
-    defaultConfig?: LayoutConfig;
+    defaultConfig?: DefaultLayoutConfig;
     wrapDnd?: boolean;
+    collapseTabsOnMobile?: boolean | string[];
 }): import("react/jsx-runtime").JSX.Element;
-export declare namespace Layout {
-    var defaultProps: {
-        wrapDnd: boolean;
-    };
-}

package/index.js

@@ -1,17 +1,52 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { DndProvider, useDrag, useDrop, useDragDropManager } from "react-dnd";
 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 isMobileDevice = () => {
+    if (typeof window === "undefined" || typeof navigator === "undefined")
+        return false;
+    return /Mobi|Android|iPhone|iPad|iPod|Windows Phone|IEMobile|Opera Mini/i.test(navigator.userAgent || "");
+};
+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);
+    }
+};
+function normalizeConfig(config, siblingsCount, depth = 0, default_kind = depth % 2 === 0 ? "row" : "column") {
+    if (typeof config === "string") {
+        config = { tabs: [config] };
+    }
+    if (Array.isArray(config)) {
+        config = { children: config };
+    }
+    // Leaf panel if tabs provided
+    if (config.tabs) {
+        const leaf = config;
+        const tabIndex = typeof leaf.tabIndex === "number" ? leaf.tabIndex : 0;
+        const size = typeof leaf.size === "number" ? leaf.size : 100 / siblingsCount;
+        return { kind: "leaf", tabs: leaf.tabs, tabIndex, size, nesting: leaf.nesting };
+    }
+    const container = config;
+    const kind = container.kind || default_kind;
+    const size = typeof container.size === "number" ? container.size : 100 / siblingsCount;
+    const children = container.children.map((child) => normalizeConfig(child, container.children.length, depth + 1, kind === "row" ? "column" : "row"));
+    return { kind, children, size, nesting: container.nesting };
+}
 const TabHandle = ({ name, index, visible, onClick, children, }) => {
     const getItem = () => ({
         name,
@@ -119,15 +154,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,9 +184,10 @@ 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 [, set] = useState();
     const closestRef = useRef(null);
     const lastItem = useRef(null);
     let lastPlaceholder = useRef(null);
@@ -208,14 +245,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 +382,34 @@ 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).
+ * @param collapseTabsOnMobile If true, auto-detect mobile devices and collapse the whole layout into a single tabbed panel.
+ * @returns A React element representing the complete panel layout.
+ */
+export function Layout({ children, defaultConfig, wrapDnd = true, collapseTabsOnMobile = 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,15 +417,38 @@ export function Layout(props) {
         },
     ]));
     const panelElements = useRef(new Map());
-    const [rootConfig, setRootConfig] = useState(props.defaultConfig || {
-        kind: "row",
-        size: 1,
-        children: children.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,
-        })),
+    const [rootConfig, setRootConfig] = useState(() => {
+        const base = defaultConfig
+            ? normalizeConfig(defaultConfig, children_array.length)
+            : {
+                kind: "row",
+                size: 1,
+                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_array.length,
+                })),
+            };
+        if (collapseTabsOnMobile && isMobileDevice()) {
+            // If collapseTabsOnMobile is a list, use the names in the list as the first tabs
+            // then complete with the rest of the named children
+            const actualTabs = Object.keys(namedChildren);
+            const tabs = [
+                ...(Array.isArray(collapseTabsOnMobile)
+                    ? collapseTabsOnMobile.filter((name) => actualTabs.includes(name))
+                    : []),
+                ...actualTabs.filter((name) => !Array.isArray(collapseTabsOnMobile) ||
+                    !collapseTabsOnMobile.includes(name)),
+            ];
+            return {
+                kind: "leaf",
+                tabs: tabs,
+                tabIndex: 0,
+                size: 100,
+            };
+        }
+        return base;
     });
     let config = rootConfig;
     if (rootConfig.kind !== "leaf" || rootConfig.tabs.length > 0) {
@@ -373,11 +463,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.2.2",
   "main": "index.js",
   "description": "Simple dock component for React",
   "repository": "https://github.com/percevalw/react-simple-dock",

package/types.d.ts

@@ -28,6 +28,23 @@ export type ContainerLayoutConfig = {
  * A union type that represents either a leaf panel (with tabs) or a container panel (row/column with children).
  */
 export type LayoutConfig = LeafLayoutConfig | ContainerLayoutConfig;
+/**
+ * User-provided config can omit kind, size, and tabIndex for inference
+ */
+export type DefaultLeafConfig = {
+    kind?: "leaf";
+    tabs: string[];
+    tabIndex?: number;
+    size?: number;
+    nesting?: number;
+};
+export type DefaultContainerConfig = {
+    kind?: "row" | "column";
+    children: DefaultLayoutConfig[];
+    size?: number;
+    nesting?: number;
+};
+export type DefaultLayoutConfig = string | DefaultLeafConfig | DefaultContainerConfig | DefaultLayoutConfig[];
 /**
  * Properties for a panel component.
  *