All files / components/header-bar/header-user-menu header-user-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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
 
 
 
 
1x
1x
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
 
import React from 'react';
import PropTypes from 'prop-types';
 
class HeaderUserMenu extends React.Component{
  constructor(props) {
    super(props);
    this.state = { open: false };
    this.toggleDropdown = this.toggleDropdown.bind(this);
    this.clickLinks = this.clickLinks.bind(this);
  }
 
  toggleDropdown(e) {
    if ((e.type === 'blur' && this.state.open) || e.type !== 'blur') {
      this.setState({ open: !this.state.open });
    }
  }
 
  clickLinks(e) {
    e.preventDefault();
    e.stopPropagation();
    switch (e.currentTarget.id.replace('user-menu-', '')) {
      case ('followers'):
        if (this.props.followersOnClick) { this.props.followersOnClick(); }
        break;
      case ('sales'):
        if (this.props.salesOnClick) { this.props.salesOnClick(); }
        break;
      case ('friends'):
        if (this.props.friendsOnClick) { this.props.friendsOnClick(); }
        break;
      case ('profile'):
        if (this.props.profileOnClick) { this.props.profileOnClick(); }
        break;
      default: break;
    }
  }
 
  render() {
    return (
      <li className={`dropdown user user-menu${this.state.open ? ' open' : ''}`} tabIndex="0" onBlur={this.toggleDropdown}>
        <a className="dropdown-toggle" data-toggle="dropdown-menu" onClick={this.toggleDropdown}>
          {this.props.img ? <img src={this.props.img} className="user-image" alt="User Avatar" /> : ''}
          <span className="hidden-xs">{this.props.username}</span>
        </a>
        <ul className="dropdown-menu">
          <li className="user-header">
            {this.props.img ? <img src={this.props.img} className="img-circle" alt="User Avatar" /> : ''}
            <p>
              {this.props.name}
              {this.props.jobTitle ? ` - ${this.props.jobTitle}` : ''}
              <small>Member since {this.props.joined}</small>
            </p>
          </li>
          {this.props.friendsLink || this.props.salesLink || this.props.followersLink || this.props.friendsOnClick || this.props.salesOnClick || this.props.followersOnClick || this.props.children ? (
            <li className="user-body">
              {this.props.children}
              {this.props.followersLink || this.props.followersOnClick ? (
                <div className="col-xs-4 text-center">
                  <a id="user-menu-followers" href={this.props.followersLink} onClick={this.clickLinks}>Followers</a>
                </div>
              ) : ''}
              {this.props.salesLink || this.props.salesOnClick ? (
                <div className="col-xs-4 text-center">
                  <a id="user-menu-sales" href={this.props.salesLink} onClick={this.clickLinks}>Sales</a>
                </div>
              ) : ''}
              {this.props.friendsLink || this.props.friendsOnClick ? (
                <div className="col-xs-4 text-center">
                  <a id="user-menu-friends" href={this.props.friendsLink} onClick={this.clickLinks}>Friends</a>
                </div>
              ) : ''}
            </li>
          ) : ''}
          <li className="user-footer">
            {this.props.profileLink || this.props.profileOnClick ? (
              <div className="pull-left">
                <a id="user-menu-profile" href={this.props.profileLink} onClick={this.clickLinks} className="btn btn-default btn-flat">Profile</a>
              </div>
            ) : ''}
            {this.props.signOut ? (
              <div className={this.props.profileLink || this.props.profileOnClick ? 'pull-right' : 'text-center'}>
                <a className="btn btn-default btn-flat" onClick={this.props.signOut}>
                  Sign Out
                </a>
              </div>
            ) : ''}
          </li>
        </ul>
      </li>
    );
  }
}
 
HeaderUserMenu.propTypes = {
  username: PropTypes.string,
  name: PropTypes.string,
  jobTitle: PropTypes.string,
  img: PropTypes.string,
  profileLink: PropTypes.string,
  profileOnClick: PropTypes.func,
  followersLink: PropTypes.string,
  followersOnClick: PropTypes.func,
  salesLink: PropTypes.string,
  salesOnClick: PropTypes.func,
  friendsLink: PropTypes.string,
  friendsOnClick: PropTypes.func,
  joined: PropTypes.string,
  signOut: PropTypes.func
};
 
HeaderUserMenu.defaultProps = {
  username: '',
  name: '',
  joined: ''
};
 
export default HeaderUserMenu;