@hiro-graph/hiro-react-workspace v2.8.1
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 Group
s 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"));