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 에서 파일 내용을 미리로드 할 수 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 하고 (즉, 표시 될 것임을 의미 함) 현재 집중화되어 있습니다.

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