All files / nexshop-web-contents/src/component/resolution-drop-down resolution-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
37
38
39
40
1x
1x
 
1x
16x
16x
16x
16x
16x
4x
 
 
16x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
const ResolutionView = (props) => {
    const {onClick, resolution, menuOpened} = props;
    let value = 'Target Resolution';
    let text = '';
    let orientation = '';
    if (resolution) {
        ({value, text, orientation} = resolution);
    }
 
    return (
        <div className="resolution-drop-down" onClick={onClick}>
            {
                resolution ?
                    (
                        <div className="resolution-drop-down-selected">
                            <label className="resolution-drop-down-selected__title">{value}</label>
                            <label className="resolution-drop-down-selected__resolution">{text}</label>
                            <div className={orientation === "horizontal" ?
                                "resolution-drop-down-selected__horizontal" : "resolution-drop-down-selected__vertical"}/>
                        </div>
                    ) :
                    (
                        <label className="resolution-drop-down__placeholder">{value}</label>
                    )
            }
            <span className="resolution-drop-down__arrow">{menuOpened ? '▲' : '▼'}</span>
        </div>
    );
};
 
ResolutionView.propTypes = {
    onClick: PropTypes.func,
    resolution: PropTypes.object,
    menuOpened: PropTypes.bool.isRequired
};
 
export default ResolutionView;