All files / components/sideMenu SideMenuCmp.tsx

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
 
 
 
5x
 
 
 
 
 
 
 
 
 
 
5x
 
 
 
5x
2x
 
 
 
 
 
 
 
 
 
5x
2x
2x
 
 
 
 
 
 
 
 
 
 
 
5x
 
 
 
 
5x
6x
2x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5x
import React from 'react';
import {ISideMenuItem} from "./SideMenuItems";
import './SideMenuCmp.css';
const btnCloseSvg = require('./icons/close-btn.svg');
 
 
interface IProps {
  title?: any;
  items?: ISideMenuItem[];
  itemActive: string;
  children?: any;
  [otherAttrs: string]: any
}
 
export default class SideMenu extends React.PureComponent<IProps> {
 
  private sideMenuContainer: HTMLDivElement;
 
  public componentWillMount() {
    Iif (this.props.items) {
      // Initialize all sideMenuItems to inactive
      this.props.items.forEach( item => {
        item.active = false;
      });
      // Set side menu item as active using array index passed as prop
      this.props.items[this.props.itemActive].active = true;
    }
  }
 
  public componentDidMount() {
    const parentElement = this.sideMenuContainer && this.sideMenuContainer.parentElement as HTMLElement;
    parentElement && parentElement.addEventListener('click', () => {
      this.hide(); // Hide side menu when click outside
    });
  }
 
  // For simplicity show() and hide() operations are implemented in imperative way
  public show() {
    this.sideMenuContainer.style.display = 'block';
    this.sideMenuContainer.classList.remove('slide-out-left');
    this.sideMenuContainer.classList.add('slide-in-left');
  }
 
  public hide() {
    this.sideMenuContainer.classList.add('slide-out-left');
    this.sideMenuContainer.classList.remove('slide-in-left');
  }
 
  public render() {
    const {title, items, children} = this.props;
    return (
      <div ref={ (sideMenuContainer: HTMLDivElement) => this.sideMenuContainer = sideMenuContainer }
        className="sideMenuContainer slide-in-left">
        <div className="sideMenuContent">
          <h1 className="side-menu-title">{ title }</h1>
          <hr/>
          <div className="side-menu-btn-close" onClick={ this.hide.bind(this) }>
            <img src={ btnCloseSvg } className="vertical-center"/>
          </div>
          <div className="items-container">
            {
              items && items.map( (item: ISideMenuItem) => {
                return (
                  <div key={ item.name } className={ item.active ? "side-menu-item active" : "side-menu-item" }>
                    <img src={ item.ico } className="icon-item" />
                    <a href={ item.url }>{ item.name }</a>
                  </div>
                )
              })
            }
            { children && <div className="side-menu-item">{ children }</div> }
          </div>
        </div>
      </div>
    )
  }
}