1  import React from 'react'
 2  import PropTypes from 'prop-types'
 3  import styles from './DesktopMenu.module.scss'
 4  import CategorySelector from '../CategorySelector/CategorySelector.container'
 5  
 6  class DesktopMenu extends React.Component {
 7    constructor(props) {
 8      super(props)
 9      this.nodes = { root: React.createRef() }
10      this.onClickBody = this.onClickBody.bind(this)
11    }
12  
13    componentDidMount() {
14      document.addEventListener('click', this.onClickBody)
15    }
16  
17    componentWillUnmount() {
18      document.removeEventListener('click', this.onClickBody)
19    }
20  
21    onClickBody(e) {
22      if (this.nodes.root.current.contains(e.target) === true) return
23  
24      const { onClickClose } = this.props
25      onClickClose()
26    }
27  
28    render() {
29      const { visible, onClickShow } = this.props
30      const cssClassVisible = visible ? styles.visible : ''
31      const cssClassNameVisibleDim = visible ? styles.dimVisible : ''
32  
33      return (
34        <>
35          <div className={`${styles.dim} ${cssClassNameVisibleDim}`} />
36          <div ref={this.nodes.root} className={styles.cnt} onClick={onClickShow}>
37            <div className={`${styles.dropDown} ${cssClassVisible}`}>
38              <CategorySelector
39                className={styles.categorySelector}
40                alwaysOpen
41                showLists
42                showSubmitDApp
43              />
44            </div>
45          </div>
46        </>
47      )
48    }
49  }
50  
51  DesktopMenu.propTypes = {
52    visible: PropTypes.bool.isRequired,
53    onClickShow: PropTypes.func.isRequired,
54    onClickClose: PropTypes.func.isRequired,
55  }
56  
57  export default DesktopMenu