react-simple-dock 0.1.4 → 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

@@ -122,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,6 +1,6 @@
 import React from "react";
 import "./index.css";
-import { LayoutConfig, PanelProps } from "./types";
+import { PanelProps, DefaultLayoutConfig } from "./types";
 /**
  * A Panel component.
  *
@@ -21,10 +21,12 @@ export declare const Panel: (props: PanelProps) => any;
  * @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, }: {
+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;

package/index.js

@@ -1,13 +1,18 @@
 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";
 function useForceUpdate() {
     const [value, setValue] = useState(0); // integer state
     return () => setValue((value) => value + 1); // update state to force render
 }
+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") {
@@ -22,6 +27,26 @@ const getPanelElementMaxHeaderHeight = (config, panelElements) => {
         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,
@@ -162,6 +187,7 @@ const NestedPanel = React.memo(({ leaves, config, index, onResize, saveSizes, is
     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);
@@ -378,9 +404,10 @@ export const Panel = (props) => {
  * @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, }) {
+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}`),
@@ -390,15 +417,38 @@ export function Layout({ children, defaultConfig, wrapDnd = true, }) {
         },
     ]));
     const panelElements = useRef(new Map());
-    const [rootConfig, setRootConfig] = useState(defaultConfig || {
-        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,
-        })),
+    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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-simple-dock",
-  "version": "0.1.4",
+  "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.
  *