All files / nexshop-web-contents/src/component/resolution-drop-down resolution-drop-down.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
1x
1x
1x
1x
1x
 
 
 
16x
 
16x
 
 
 
 
16x
16x
16x
 
 
 
1x
 
 
 
1x
 
 
 
2x
 
2x
 
2x
 
 
 
31x
 
31x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
import React, {Component} from 'react';
import {resolutionItems} from "nexshop-web-store";
import ResolutionView from "./resolution-view";
import ResolutionMenu from "./resolution-menu";
import PropTypes from 'prop-types';
 
export default class ResolutionDropDown extends Component {
    constructor(props) {
        super(props);
 
        this.state = {
            menuOpened: false,
            resolution: null,
        };
 
        this.openMenu = this.openMenu.bind(this);
        this.closeMenu = this.closeMenu.bind(this);
        this.selectResolutionAndCloseMenu = this.selectResolutionAndCloseMenu.bind(this);
    }
 
    openMenu() {
        this.setState({menuOpened: true});
    }
 
    closeMenu() {
        this.setState({menuOpened: false});
    }
 
    selectResolutionAndCloseMenu(resolution) {
        const {onChange} = this.props;
 
        this.setState({resolution, menuOpened: false});
 
        onChange(resolution);
    }
 
    render() {
        const {resolution, menuOpened} = this.state;
 
        return (
            <div>
                <ResolutionView onClick={this.openMenu} resolution={resolution} menuOpened={menuOpened}/>
                {
                    this.state.menuOpened &&
                    <ResolutionMenu items={resolutionItems.RESOLUTION_ITEMS}
                                    onItemSelected={this.selectResolutionAndCloseMenu}
                                    selectedItem={this.state.resolution}
                                    onBlur={this.closeMenu}
                    />
                }
            </div>
        )
    }
}
 
ResolutionDropDown.propTypes = {
    onChange: PropTypes.func
};