React
उपयोगकर्ता इंटरफ़ेस समाधान

परिचय

मूल फलक

import React from 'react';

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

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

पैनल

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

सरल फलक से प्रमुख अंतर हैं:

• पैनल को उदाहरण में फोकस किया जाता है जब इसे स्क्रिप्ट द्वारा बुलाया जाता है या माउस द्वारा क्लिक किया जाता है;
• पैनल में प्रति घटक स्थिर title , इसलिए इसे अन्य पैनल घटक द्वारा ओवरराइड title साथ बढ़ाया जा सकता है (कारण यहां बताया गया है कि फ़ंक्शन को स्थानीयकरण के प्रयोजनों के लिए फिर से प्रस्तुत किया जा सकता है, लेकिन इस उदाहरण की सीमा में title कोई मतलब नहीं है) ;
• इसमें css स्टैटिक विधि में घोषित अलग-अलग स्टाइलशीट हो सकते हैं (आप फाइल कंटेंट को PANEL.css से प्री-लोड कर सकते हैं)।

टैब

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()
            )
        );
    }
}

Tab उदाहरण की panelClass संपत्ति में वर्णन के लिए उपयोग किए जाने वाले पैनल का वर्ग होना चाहिए।

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();
    }
}

PanelGroup उदाहरण के panels संपत्ति में ऑब्जेक्ट के साथ सरणी होनी चाहिए। वहाँ हर वस्तु पैनलों के बारे में महत्वपूर्ण डेटा घोषित करती है:

• name - नियंत्रक स्क्रिप्ट द्वारा प्रयुक्त पैनल की पहचानकर्ता;
• class - पैनल की क्लास।

आवश्यक टैब के नाम पर संपत्ति activeTab सेट करने के लिए मत भूलना।

स्पष्टीकरण

जब टैब नीचे होता है, तो आवश्यक तत्व DOM तत्व पर क्लास का नाम active हो रहा है (इसका मतलब है कि यह दिखाई देने वाला है) और यह अब केंद्रित है।

उदाहरण के लिए `पैनलग्राफ` के साथ देखें

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