React
Soluzioni di interfaccia utente

introduzione

Riquadro di base

import React from 'react';

class Pane extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return React.createElement(
            'section', this.props
        );
    }
}

Pannello

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 '';
    }
}

Le principali differenze dal pannello semplice sono:

• il pannello è focalizzato, ad esempio, quando viene richiamato dallo script o cliccato con il mouse;
• il pannello ha il title metodo statico per componente, quindi può essere esteso da un altro componente del pannello con title sottoposto a override (la ragione è che la funzione può essere richiamata di nuovo sul rendering per scopi di localizzazione, ma nei limiti di questo esempio il title non ha senso) ;
• può contenere singoli fogli di stile dichiarati nel metodo statico css (puoi precaricare il contenuto del file da PANEL.css ).

linguetta

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 proprietà panelClass dell'istanza Tab deve contenere la classe del pannello utilizzata per la descrizione.

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 proprietà PanelGroup dell'istanza PanelGroup deve contenere una matrice con oggetti. Ogni oggetto lì dichiara importanti dati sui pannelli:

• name - identificatore del pannello usato dallo script del controllore;
• class - class pannello.

Non dimenticare di impostare proprietà activeTab sul nome della scheda necessaria.

Una precisazione

Quando il tab è disattivato, il pannello necessario sta ottenendo il nome della classe active sull'elemento DOM (significa che sarà visibile) ed è ora focalizzato.

Esempio di vista con `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';
    }
}