React-Simple-Dock

A set of React components to create a dockable interface, allowing to arrange and resize tabs.

Installation of the javascript package

npm install react-simple-dock

Installation of the PRET python package

pip install pret-simple-dock

Demo

Usage

import React from "react";
import ReactDOM from "react-dom";
import { Layout, Panel } from "react-simple-dock";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

const DEFAULT_CONFIG = {
    kind: "row",
    size: 100,
    children: [
        {
            kind: "column",
            size: 50,
            children: [
                { kind: "leaf", tabs: ["Panel 1"], tabIndex: 0, size: 50 },
                { kind: "leaf", tabs: ["Panel 2"], tabIndex: 0, size: 50 },
            ],
        },
        { kind: "leaf", tabs: ["Panel 3"], tabIndex: 0, size: 50 },
    ],
};

const App = () => (
    <div style={{ background: "#bdbdbd", width: "100vw", height: "100vh" }}>
        <Layout
            /* optional initial layout config */
            defaultConfig={DEFAULT_CONFIG}
        >
            <Panel key="Panel 1">
                <p>Content 1</p>
            </Panel>
            <Panel key="Panel 2" header={<i>Italic title</i>}>
                <p>Content 2</p>
            </Panel>
            <Panel key="Panel 3">
                <p>Content 3</p>
            </Panel>
        </Layout>
    </div>
);

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<App />);

Dynamic tab placement

When children are added/removed dynamically, Layout now preserves user-arranged layout and applies place only when a panel appears for the first time in the current layout.

<Layout
    defaultConfig={{
        kind: "row",
        children: [
            { kind: "leaf", tabs: ["Panel 1", "@anchor-1"] },
            { kind: "leaf", tabs: ["Panel 2"] },
        ],
    }}
>
    <Panel key="Panel 1">...</Panel>
    <Panel key="Panel 2">...</Panel>

    {/* Insert into the same tab list */}
    <Panel key="Panel 3" place={{ where: "after-tab", of: "Panel 1" }}>
        ...
    </Panel>

    {/* Insert as a sibling leaf around the target leaf */}
    <Panel key="Panel 4" place={{ where: "right", of: "@anchor-1" }}>
        ...
    </Panel>
</Layout>

• where supports: before-tab, after-tab, first-tab, last-tab, left, right, top, bottom.
• of references panel keys (or anchor tabs in defaultConfig, such as @anchor-1).
• If of is missing, placement falls back to the first tab currently present in the layout.
• Tabs prefixed with @ are treated as virtual anchors: preserved for placement, but never rendered as visible tabs or leaves.

Development

Installation

Clone the repository:

git clone https://github.com/percevalw/react-simple-dock.git
cd react-simple-dock

Install the dependencies:

yarn install

Make your changes and run the demo:

yarn start

Build the javascript library

To build the javascript library:

yarn build:lib

Build the PRET python package

Ensure pret is installed.

pip install pret

If you have changed the signature of the components, you will need to update the python stubs.

pret stub . SimpleDock pret_simple_dock/__init__.py

To build the python library and make it available in your environment:

pip install .