# @unparallel/sliding-panes

> Sliding pane component used for react, providing the following features: * Stack panes in top of each other * Open a pane side by side * Open a pane in fullscreen mode

Latest version **1.0.0-0** (published 2022-09-30) · ISC license · 0 weekly downloads

## Install

```sh
npm install @unparallel/sliding-panes
pnpm add @unparallel/sliding-panes
yarn add @unparallel/sliding-panes
bun add @unparallel/sliding-panes
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-0 |
| Published | 2022-09-30 |
| First published | 2022-09-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 89.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | goncalorolo, pms.ferreira, amr.goncalves, unparallel-owner |

## Links

- npm: https://www.npmjs.com/package/@unparallel/sliding-panes
- npm.io page: https://npm.io/package/@unparallel/sliding-panes

## Recent versions

- 1.0.0-0 (latest) — 2022-09-30
- 1.0.0-1 (next) — 2022-10-03

## README

# Sliding panes

Sliding pane component used for react, providing the following features:
* Stack panes in top of each other
* Open a pane side by side
* Open a pane in fullscreen mode

# Install

```shell
npm install @unparallel/sliding-panes
```

# Usage

Basic usage example showing all the features

```typescript jsx
import {Pane, PaneManager, PaneManagerControls, ViewMode} from "@unparallel/sliding-panes";
import "@unparallel/sliding-panes/dist/main.css";

interface SideContentProps {
    title: string,
    paneManagerControls:PaneManagerControls
}


interface ContentProps {
    title: string,
    paneManagerControls:PaneManagerControls
}


function SideContent({paneManagerControls, title}:SideContentProps){
    const {closeSidePane} = paneManagerControls
    return (
        (
            <div>
                <h1>{title}</h1>
                <button onClick={closeSidePane}>Close</button>
            </div>
        )
    )
}

function Content({title,paneManagerControls}:ContentProps){
    const {setSidePane, closeSidePane,addPane,closeLastPane} = paneManagerControls

    function setSidePaneBtn(){
        setSidePane({content:()=><SideContent title={"Side Content"} paneManagerControls={paneManagerControls} />,shouldClose:()=>confirm("Should close side pane?")})
    }

    function openNewPane(){
        addPane({content:()=><Content title={"Other panes"} paneManagerControls={paneManagerControls} />,shouldClose:()=>confirm("Should close pane?")})
    }

    function openNewPaneAsFullscreen(){
        addPane({content:()=><Content title={"Second Pane as fullscreen"} paneManagerControls={paneManagerControls} />,viewMode:ViewMode.FullScreen})
    }

    return(
        <div>
            <h1>{title}</h1>
            <button onClick={closeLastPane}>Close Pane</button>
            <button onClick={closeSidePane}>Close side Pane</button>
            <button onClick={setSidePaneBtn}>Set side pane</button>
            <button onClick={openNewPane}>Open new pane</button>
            <button onClick={openNewPaneAsFullscreen}>Open new pane as fullscreen</button>
        </div>

    )
}

export const Main = function(){

    const pane:Pane = {
        content:((paneManagerControls) =><Content title={"First Pane"}   paneManagerControls={paneManagerControls}/> ),shouldClose:()=>confirm("Should close pane?")
    }


    return (
        <PaneManager>
            {(paneManagerControls)=>(
                <div>
                    <h1>Root Content</h1>
                    <button onClick={()=>{paneManagerControls.addPane(pane)}}>Add first pane</button>
                </div>
            )}
        </PaneManager>
    )
}
```

# PaneManager component

Wrapper component which will provide the "paneManagerControls" object containing methods required to open and close panes


## Properties

| Name      | Type | is Optional | Default Value | Description |
| ----------- | ----------- | ---- | --- | --- |
| children      | (paneManagerControls)=>React.ReactNode     | no |  | Render of Pane Manager root content, the object "paneManagerControls" is provided and could be used to launch new panes |
| minPaneDistance   | number        | yes |  10 | Minimum distance (in px) between panes |
| maxPaneDistance   | number        | yes |  200 | Maximum distance (in px) between panes |
| paneWidth   | number        | yes |  300 | Width for each pane  |
| timeoutMS   | number        | yes |  500 | Duration of the animation during pane opening, close and adjustment |

## Structures

### PaneManagerControls

Object containing several methods to control the behaviour of the Pane manager

| Name      | Type |  Description |
| ----------- | ----------- |  --- |
| addPane | (pane:Pane)=>void | Used to add a new pane  |
| closeLastPane | ()=>void | Close the last pane |
| closePane | (index: number)=>void | Close a specific pane |
| setSidePane | (sidePane: SidePane)=>void | Add a side pane to the last pane |
| closeSidePane | ()=>void | Close side pane |

### Pane

Object describing a pane

| Name      | Type | is Optional | Default Value | Description |
| --- | --- | --- | --- | --- |
| content | (paneManagerControls)=>React.ReactNode | no | null | Content of the new pane, a "paneManagerControls" object will be sent to the content |
| viewMode | ViewMode | yes | ViewMode.Default | View mode of the new pane, allowed options ViewMode.Default or ViewMode.Fullscreen |
| shouldClose | ()=>boolean | yes | ()=>true | Confirmation step before closing the pane

### SidePane

Object describing a side pane

| Name      | Type | is Optional | Default Value | Description |
| --- | --- | --- | --- | --- |
| content | (paneManagerControls)=>React.ReactNode | no | null | Content of the new pane, a "paneManagerControls" object is sent to the content |
| shouldClose | ()=>boolean | yes | ()=>true | Confirmation step before closing the pane |

# Development

```shell
npm install
npm start
```

---
_Source: https://npm.io/package/@unparallel/sliding-panes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._