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_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 Distributions

No source distribution files available for this release.See tutorial on generating distribution archives.

Built Distribution

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

pret_simple_dock-0.2.3-py3-none-any.whl (78.1 kB view details)

Uploaded Python 3

File details

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

File metadata

File hashes

Hashes for pret_simple_dock-0.2.3-py3-none-any.whl
Algorithm Hash digest
SHA256 c677fbd4ac1c0fd18e341c9b8d68bbbc902738f4d4a8ba4fc34f54f5d1dfadf9
MD5 1fca23afd11c3c6bef47ae1c1a2f44eb
BLAKE2b-256 4a6c9f226f5a4699c942ca0bf0d18ce1c3de19d91f3779838afa56f37d040d8b

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