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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
1x
1x
1x
 
 
 
 
2x
2x
2x
 
 
 
 
 
 
 
 
 
28x
 
 
1x
 
 
 
 
 
 
 
 
1x
 
 
 
 
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,
};