# User interface solutions
# Basic Pane
import React from 'react';
class Pane extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'section', this.props
);
}
}
# Panel
import React from 'react';
class Panel extends React.Component {
constructor(props) {
super(props);
}
render(...elements) {
var props = Object.assign({
className: this.props.active ? 'active' : '',
tabIndex: -1
}, this.props);
var css = this.css();
if (css != '') {
elements.unshift(React.createElement(
'style', null,
css
));
}
return React.createElement(
'div', props,
...elements
);
}
static title() {
return '';
}
static css() {
return '';
}
}
Major differences from simple pane are:
- panel has focus in instance when it is called by script or clicked by mouse;
- panel has
title
static method per component, so it may be extended by other panel component with overriddentitle
(reason here is that function can be then called again on rendering for localization purposes, but in bounds of this exampletitle
doesn't make sense); - it can contain individual stylesheet declared in
css
static method (you can pre-load file contents fromPANEL.css
).
# Tab
import React from 'react';
class Tab extends React.Component {
constructor(props) {
super(props);
}
render() {
var props = Object.assign({
className: this.props.active ? 'active' : ''
}, this.props);
return React.createElement(
'li', props,
React.createElement(
'span', props,
props.panelClass.title()
)
);
}
}
panelClass
property of Tab
instance must contain class of panel used for description.
# PanelGroup
import React from 'react';
import Tab from './Tab.js';
class PanelGroup extends React.Component {
constructor(props) {
super(props);
this.setState({
panels: props.panels
});
}
render() {
this.tabSet = [];
this.panelSet = [];
for (let panelData of this.state.panels) {
var tabIsActive = this.state.activeTab == panelData.name;
this.tabSet.push(React.createElement(
Tab, {
name: panelData.name,
active: tabIsActive,
panelClass: panelData.class,
onMouseDown: () => this.openTab(panelData.name)
}
));
this.panelSet.push(React.createElement(
panelData.class, {
id: panelData.name,
active: tabIsActive,
ref: tabIsActive ? 'activePanel' : null
}
));
}
return React.createElement(
'div', { className: 'PanelGroup' },
React.createElement(
'nav', null,
React.createElement(
'ul', null,
...this.tabSet
)
),
...this.panelSet
);
}
openTab(name) {
this.setState({ activeTab: name });
this.findDOMNode(this.refs.activePanel).focus();
}
}
panels
property of PanelGroup
instance must contain array with objects. Every object there declares important data about panels:
name
- identifier of panel used by controller script;class
- panel's class.
Don't forget to set property activeTab
to name of needed tab.
# Clarification
When tab is down, needed panel is getting class name active
on DOM element (means that it gonna be visible) and it's focused now.
# Example view with PanelGroup
s
import React from 'react';
import Pane from './components/Pane.js';
import Panel from './components/Panel.js';
import PanelGroup from './components/PanelGroup.js';
class MainView extends React.Component {
constructor(props) {
super(props);
}
render() {
return React.createElement(
'main', null,
React.createElement(
Pane, { id: 'common' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'console',
panelClass: ConsolePanel
},
{
name: 'figures',
panelClass: FiguresPanel
}
],
activeTab: 'console'
}
)
),
React.createElement(
Pane, { id: 'side' },
React.createElement(
PanelGroup, {
panels: [
{
name: 'properties',
panelClass: PropertiesPanel
}
],
activeTab: 'properties'
}
)
)
);
}
}
class ConsolePanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Console';
}
}
class FiguresPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Figures';
}
}
class PropertiesPanel extends Panel {
constructor(props) {
super(props);
}
static title() {
return 'Properties';
}
}