nexshop-web-contents/src/component/scene/scene-resource/scene-resource-view.js

Nexshop Web Contents Project

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {ContentsMini} from "nexshop-web-contents-mini-view";
import SceneLayoutItemView from "./scene-layout-item-view";

class SceneResourceView extends Component {
    render() {
        const {changeLayout, selectedTabId, selectTab, selectedLayoutId, orientation} = this.props;

        return (
            <div className="scene-resource-wrapper">
                <div className='scene-tab__header'>
                    <div className={`scene-tab__button${selectedTabId === 'layout' ? '--selected' : ''}`} onClick={() => selectTab('layout')}>Layout</div>
                    <div className={`scene-tab__button${selectedTabId === 'template' ? '--selected' : ''}`}>Templates</div>
                    <div className={`scene-tab__button${selectedTabId === 'contents' ? '--selected' : ''}`} onClick={() => selectTab('contents')}>Contents</div>
                    <div className={`scene-tab__button${selectedTabId === 'widget' ? '--selected' : ''}`}/>
                </div>
                <div className='scene-tab__body'>
                    {
                        selectedTabId === 'layout' &&
                        <SceneLayoutItemView changeLayout={changeLayout}
                                             orientation={orientation}
                                             selectedLayoutId={selectedLayoutId} />
                    }
                    {
                        selectedTabId === 'contents' &&
                        <ContentsMini className="scene-tab__body__contents" contentsIgnore={['playlist', 'scene']}/>
                    }
                </div>
            </div>
        );
    }
}

SceneResourceView.propTypes = {
    changeLayout: PropTypes.func.isRequired,
    selectTab: PropTypes.func.isRequired,
    selectedTabId: PropTypes.string.isRequired,
    selectedLayoutId: PropTypes.string.isRequired,
    orientation: PropTypes.string.isRequired,
};

export default SceneResourceView;