Skip to main content

Simple dock component for Pret

Project description

React-Simple-Dock

PyPI - pret-simple-dock npm - react-simple-dock GitHub Workflow Status

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

Edit react-simple-dock

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 />);

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/ui/simple_dock/__init__.py

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

pip install .

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

pret_simple_dock-0.2.2.tar.gz (8.1 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

pret_simple_dock-0.2.2-py3-none-any.whl (45.4 kB view details)

Uploaded Python 3

File details

Details for the file pret_simple_dock-0.2.2.tar.gz.

File metadata

  • Download URL: pret_simple_dock-0.2.2.tar.gz
  • Upload date:
  • Size: 8.1 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/6.1.0 CPython/3.10.9

File hashes

Hashes for pret_simple_dock-0.2.2.tar.gz
Algorithm Hash digest
SHA256 d246d89285a81f2c056e82cb3bf862ee61aa9d7f748313ef75ffd7d2a5c3a7dc
MD5 77ecd9d075d33622764e401da4a4bf2b
BLAKE2b-256 46310dd0b6a5bb732a36a1221b02936a3e64ed6c8f3b6a3c85f2c58943d946e4

See more details on using hashes here.

File details

Details for the file pret_simple_dock-0.2.2-py3-none-any.whl.

File metadata

File hashes

Hashes for pret_simple_dock-0.2.2-py3-none-any.whl
Algorithm Hash digest
SHA256 ce4d2b6ba1a623aee815b7c097a399eb030bb8a0cfaef1dcdb5dd973c66e0980
MD5 43d44b287f394f0cb29167d914136696
BLAKE2b-256 f547900382672ca6308702a6ebe8e948fc47b666c87d4060d5ea8b9925fca6b5

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page