All files / components/controls-menu controls-menu.jsx

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
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
1x
 
 
 
 
 
 
import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import ControlsMenuTab from './controls-menu-tab.jsx';
import PropTypes from 'prop-types';
 
class ControlsMenu extends React.Component {
  constructor(props) {
    super(props);
    this.navHandler = this.navHandler.bind(this);
  }
 
  navHandler(e) {
    const thisTab = e.currentTarget;
    const allTabs = ReactDOM.findDOMNode(this).children[0].children;
    if (thisTab.className.indexOf('active') === -1) {
      thisTab.className = 'active';
      for (let i = 0; i < allTabs.length; i++) {
        if (allTabs[i] !== thisTab) {
          allTabs[i].className = '';
        }
      }
      this.props.children.forEach((child, i) => {
        if (child.props.id === thisTab.firstElementChild.getAttribute('href').replace('#','')) {
          document.getElementById(child.props.id).classList.add('active');
        } else {
          document.getElementById(child.props.id).classList.remove('active');
        }
      });
    }
  }
 
  componentDidMount() {
    for (let i = 0; i < this.props.children.length; i++) {
      if (this.props.children[i].props.id === this.props.tabs[0].name) {
        document.getElementById(this.props.children[i].props.id).classList.add('active');
      }
    }
  }
 
  render() {
    const tabNames = this.props.tabs.map((tab, i) => {
      const tabClass = i === 0 ? 'active' : '';
      return (
        <li key={tab.name} onClick={this.navHandler} className={tabClass}><a href={`#${tab.name}`} data-toggle="tab"><i className={`fa ${tab.icon}`} /></a></li>
      );
    });
    return (
      <aside className={`control-sidebar ${this.props.theme}`}>
        <ul className="nav nav-tabs nav-justified control-sidebar-tabs">
          {tabNames}
        </ul>
        <div className="tab-content">
          {this.props.children}
        </div>
      </aside>
    );
  }
}
ControlsMenu.propTypes = {
  theme: PropTypes.string,
  tabs: PropTypes.array
};
ControlsMenu.defaultProps = {
  theme: 'control-sidebar-dark',
  tabs: []
};
 
export default ControlsMenu;