Panes

models | content types | usage | usage with redux | operations

Panes helps arranging your app into several views, they can be split and resized.

Models

The pane system is built upon two models: Pane and PaneContent.

 interface IPane<Data> {
     id:         string        // unique identifier of the pane
     isCurrent:  boolean
     split:      boolean
     splitAxis?: PaneSplitAxis // 'vertical' or 'horizontal'
     childOf?:   string        // parent pane id
     children:   string[]      // ids of child panes
     contents:   Array<IPaneContent<Data>>
 }

 interface IPaneContent<Data> {
     id:        string
     type:      string  // id of the content type used for rendering
     isCurrent: boolean
     isUnique:  boolean
     data?:     Data
 }

Content types

Content types define how a pane content should be rendered and must expose:

• An id used to identify the content type, e.g. settings could be used for a content type rendering a settings control pane. This is what you'll use for the type property of pane contents.
• A renderButton function used to render the content's button label used in pane header, it will receive the rendering context.
• A renderIcon function used to render the content's icon in pane header, it will also receive the rendering context.
• And the most important one, the renderPane function used to render the content itself, it will also receive the rendering context.

Definitions:

 interface IContentRenderContext<Data> {
     content: IPaneContent<Data>
     pane:    IPane<Data>
     extra: {
         close: () => void
     }
 }

 interface IContentType<Data> {
     id: string
     renderButton: (context: IContentRenderContext<Data>) => React.ReactNode
     renderIcon:   (context: IContentRenderContext<Data>) => React.ReactNode
     renderPane:   (context: IContentRenderContext<Data>) => React.ReactNode
 }

Usage

If you plan to use edikit without redux, you can use the PanesManager component:

 import { PanesManager, RootPanee } from 'edikit'

 const contentTypes = [{
    id: 'demo',
    renderButton: () => 'demo content',
    renderIcon: () => <span>D</span>,
    renderPane: () => <div>demo content</div>,
 }]

 const panes = [{
     id: 'root',
     isCurrent: true,
     contents: [{
        id: 'demo',
        type: 'demo',
        isCurrent: true,
     }],
     children: [],
 }]

 const MyPanes = () => (
     <PanesManager
         panes={panes}
         contentTypes={contentTypes}
         render={props => <RootPane {...props}/>}
     />
 )

Usage with Redux

You can connect panes to redux store using the createConnectedPanes helper.

Preparing the store

@todo

Operations

When working with panes, you'll deal with an array of pane items, and render the top pane (the one without any parent) which will then handle the rendering of the whole tree. Manipulating this collection of pane can be tedious, and for optimal performance, we must keep it immutable, that's why edikit provides helpers (aka. operations) which ease the process:

Those operations are bound to component methods when using PanesManager component and mapped to actions when using createConnectedPanes.