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

Nexshop Web Contents Project

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {HORIZONTAL_LAYOUTS, VERTICAL_LAYOUTS} from '../../../constants/layouts';

export default class SceneLayoutItemView extends Component {

    render() {
        const {changeLayout, selectedLayoutId, orientation} = this.props;
        const layouts = orientation === 'horizontal' ? HORIZONTAL_LAYOUTS : VERTICAL_LAYOUTS;
        return (
            <div className='scene-layout'>
                <div className='scene-layout-info'>
                    <div className='scene-layout-info-message'>
                        <div className='scene-layout-info-icon'/>
                        Choose a layout and go to <span>CONTENTS</span> to upload media files.
                    </div>
                </div>
                <div className='layout-item-wrapper'>
                    {layouts.map((layout) =>
                        <div className='scene-layout-wrapper' key={layout.id}>
                            {selectedLayoutId === layout.id && <div className='scene-layout--selected'/>}
                            <div className={`scene-layout-${layout.type}`}
                                 onClick={(e) => changeLayout(layout.id)}
                            />
                        </div>)}
                </div>
            </div>
        )
    }
}

SceneLayoutItemView.propTypes = {
    changeLayout: PropTypes.func.isRequired,
    selectedLayoutId: PropTypes.string.isRequired,
    orientation: PropTypes.string.isRequired,
};