@hiro-graph/hiro-react-workspace

react-workspace

A customisable tabbed UI with the ability to add/remove Panels & Groups, resize and change orientation. The library has 4 main concepts which need to be understood in order to be used effectively. Workspace, Groups, Panels and resolver

Workspace

The Workspace is dervied from a given schema, the store can have many workspaces serialized, the workspace Component renders its content based on the given workspaceId which will automatically select from state.

Example schema

// Basic
{
  [workspaceId]: {
    orientation: "vertical|horizontal", // Determines whether the view is column or row based
    groups: [], // Array of group objects
    panels: [] // Array of panel data
  }
}

// With data
{
  [workspaceId]: {
    orientation: "vertical|horizontal", // Determines whether the view is column or row based
    groups: [{
      activePanel: 0, // panels[0] is active ("panelA" will be rendered)
      panels: [ "panelA", "panelB"]\
    }],
    panels: {
      [{
        id: "panelA",
        name: "Panel A"
      },{
        id: "panelB",
        name: "Panel B"
      }]
  }
}

The workspace component is essentially a container which can have 1 or more Groups. The workspace requires a resolver function to be passed in as a prop which should return a valid React Component from the given Panel data.

Groups

A Workspace is split into 1 or more Groups which can contain 1 or more Panels each group only renders the active Panel.

Example group object in the schema:

{
  active: Boolean, // Whether or not the current group has been focussed
  activePanel: Number, // Active index in the groups panels Array, determines which panel is resolved & rendered
  panels: [panelId1, panelId2, panelId3....] // Array of the Panel unique ids. Array order determines the view order
  size: Number|String // Set when resizing in the UI or can be provided upfront, Number by default is coerced into a percentage. String is parsed as px measure.
  minSize: Number|String // Set min size of group, Number by default is coerced into a percentage. String is parsed as px measure.
  resizable: Boolean // Enables/Disables user resizing of the UI. Defaults to `true`
}

Panels

Panels can be in 0 or more groups (referenced by id). The panels require id and name properties, all other data is custom and given to the resolver function to render its component.

Example panel object

{
  id: String, // UUID of the panel, should not be changed.
  name: String, // Panel name (displayed in the panel tab), can be changed
  ...data // Any other primative data can be stored here.
} // This whole object is passed to the resolver

resolver

Example usage

const workspaceId = "my-workspace";
const schema = {
  [workspaceId]: {
    groups: [{
      activePanel: 0,
      panels: [ "panelA", "panelB"]\
    }],
    panels: {
      [{
        id: "panelA",
        name: "Panel A",
        text: "This is panel A"
      },{
        id: "panelB",
        name: "Panel B",
        text: "This is panel B"
      }]
  }
}

function resolver(props) {
    return (
      <div>
        <h1>{ props.name }</h1>
        <p>{ props.text }</p>
      </div>
    )
}

// Schema should actually be set into redux store initalState but this is a simple example
render(<Workspace workspaceId={workspaceId} schema={schema} resolver={resolver} />, document.getElementById("root"));