React 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

npm install @unparallel/react-sliding-panes

Usage

Basic usage example showing all the features

import {Pane, PaneManager, PaneManagerControls, ViewMode} from "@unparallel/react-sliding-panes";
import "@unparallel/react-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,shouldClose:()=>confirm("Should close pane?")})
    }

    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: 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
baseZIndex	number	yes	2000	Where the z index should start, defining this value could be required ensure that pane manager is rendered as the last layer
paneStartPadding	number	yes	0	X position of the first pane
paneClassName	string	yes	null	Custom classname for sliding pane container
paneBackgroundClassName	string	yes	null	Custom classname for sliding pane background
paneContentClassName	string	yes	null	Custom classname for sliding pane content
onPaneClose	(index:number)=>void	yes	null	Event fired after closing the pane
paneWillClose	(index: number)=>void	yes	null	Event fired before closing a pane
onPaneOpen	(index: number, pane:Pane)=>void	yes	null	Event fired after open the pane
onSidePaneOpen	(paneIndex: number, sidePane:SidePane)=>void	yes	null	Event fired after opened the side pane

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
updateLastPaneProps	(props:object)=>void	Update props sent to the last pane, this update will re fire a render of the pane content
updateSidePaneProps	(props:object)=>void	Update props sent to the side pane, this update will re fire a render of the side pane content
compressPanes	()=>void	Forces all panes to collapses until the meet the "minPaneDistance" regarding its distance
decompressPanes	()=>void	Set panes distance to their default distance
getPaneCount	()=>number or null	Number of panes stacked on the pane manager

Pane

Object describing a pane

Name	Type	is Optional	Default Value	Description
content	(paneManagerControls: PaneManagerControls, props: object)=>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
onClose	()=>void	yes		Fired after closing the pane
willClose	()=>void	yes		Fired before closing the pane
props	object	yes		Properties object sent on the content method

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
onClose	()=>void	yes		Fired after closing the side pane
willClose	()=>void	yes		Fired before closing the side pane
props	object	yes		Properties object sent on the content method

Development

npm install
npm start