/
Header.jsx
executable file
·115 lines (108 loc) · 3.49 KB
/
Header.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
import React, { useCallback } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Icon, Menu } from 'semantic-ui-react';
import Paths from '../../constants/Paths';
import NotificationsPopup from './NotificationsPopup';
import UserPopup from '../UserPopup';
import styles from './Header.module.scss';
const Header = React.memo(
({
project,
user,
notifications,
isLogouting,
canEditProject,
canEditUsers,
onProjectSettingsClick,
onUsersClick,
onNotificationDelete,
onUserSettingsClick,
onLogout,
}) => {
const handleProjectSettingsClick = useCallback(() => {
if (canEditProject) {
onProjectSettingsClick();
}
}, [canEditProject, onProjectSettingsClick]);
return (
<div className={styles.wrapper}>
{!project && (
<Link to={Paths.ROOT} className={classNames(styles.logo, styles.title)}>
Planka
</Link>
)}
<Menu inverted size="large" className={styles.menu}>
{project && (
<Menu.Menu position="left">
<Menu.Item
as={Link}
to={Paths.ROOT}
className={classNames(styles.item, styles.itemHoverable)}
>
<Icon fitted name="arrow left" />
</Menu.Item>
<Menu.Item
className={classNames(
styles.item,
canEditProject && styles.itemHoverable,
styles.title,
)}
onClick={handleProjectSettingsClick}
>
{project.name}
</Menu.Item>
</Menu.Menu>
)}
<Menu.Menu position="right">
{canEditUsers && (
<Menu.Item
className={classNames(styles.item, styles.itemHoverable)}
onClick={onUsersClick}
>
<Icon fitted name="users" />
</Menu.Item>
)}
<NotificationsPopup items={notifications} onDelete={onNotificationDelete}>
<Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
<Icon fitted name="bell" />
{notifications.length > 0 && (
<span className={styles.notification}>{notifications.length}</span>
)}
</Menu.Item>
</NotificationsPopup>
<UserPopup
isLogouting={isLogouting}
onSettingsClick={onUserSettingsClick}
onLogout={onLogout}
>
<Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
{user.name}
</Menu.Item>
</UserPopup>
</Menu.Menu>
</Menu>
</div>
);
},
);
Header.propTypes = {
/* eslint-disable react/forbid-prop-types */
project: PropTypes.object,
user: PropTypes.object.isRequired,
notifications: PropTypes.array.isRequired,
/* eslint-enable react/forbid-prop-types */
isLogouting: PropTypes.bool.isRequired,
canEditProject: PropTypes.bool.isRequired,
canEditUsers: PropTypes.bool.isRequired,
onProjectSettingsClick: PropTypes.func.isRequired,
onUsersClick: PropTypes.func.isRequired,
onNotificationDelete: PropTypes.func.isRequired,
onUserSettingsClick: PropTypes.func.isRequired,
onLogout: PropTypes.func.isRequired,
};
Header.defaultProps = {
project: undefined,
};
export default Header;