| 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146 |
6x
6x
6x
6x
6x
6x
24x
24x
24x
14x
6x
6x
6x
6x
6x
6x
4x
| /* Copyright © 2016 Kuali, Inc. - All Rights Reserved
* You may use and modify this code under the terms of the Kuali, Inc.
* Pre-Release License Agreement. You may not distribute it.
*
* You should have received a copy of the Kuali, Inc. Pre-Release License
* Agreement with this file. If not, please write to license@kuali.co.
*/
import cx from 'classnames'
import { compact, map, omit } from 'lodash'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import Button from 'react-md/lib/Buttons'
import ListItem from 'react-md/lib/Lists/ListItem'
import Menu from 'react-md/lib/Menus/Menu'
import MenuButton from 'react-md/lib/Menus/MenuButton'
import AppMenu from './parts/app-menu'
import Boolean from './parts/boolean-state'
import TopBarLink from './parts/top-bar-link'
import styles from './style.css'
import mediaQueryify from '../media-query'
export class RawKualiTopBar extends Component {
static displayName = 'KualiTopBar';
static propTypes = {
handleMenuClick: PropTypes.func,
logo: PropTypes.string.isRequired,
mq: PropTypes.oneOf(['small', 'medium', 'large', 'huge']).isRequired,
title: PropTypes.string.isRequired,
user: PropTypes.shape({
displayName: PropTypes.string.isRequired,
id: PropTypes.string.isRequired,
role: PropTypes.oneOf(['admin', 'user']).isRequired,
}).isRequired,
};
getProfileTrigger(user, small) {
const title = user.displayName || 'Profile'
const props = { small, title, imgSrc: 'profile' }
const userUrl = `/users/#/${user.id}/details/view`
return (
<MenuButton
buttonChildren={<TopBarLink {...props} />}
className={styles.userSettingsBtn}
flat
id="user-settings-menu"
key="user-settings-menu"
position={Menu.Positions.BELOW}
>
<ListItem component="a" href={userUrl} primaryText="User Settings" />
<ListItem component="a" href="/auth/signout" primaryText="Sign Out" />
</MenuButton>
)
}
getLinks = (small) => {
const links = [
{
to: '/actions/#/list',
title: 'Action List',
imgSrc: 'action_list',
},
{
hide: small,
el: this.getProfileTrigger(this.props.user, small),
},
{
hide: !small,
to: `/users/#/${this.props.user.id}/details/view`,
title: 'User Settings',
imgSrc: 'profile',
},
{
hide: !small,
to: '/auth/signout',
title: 'Sign Out',
imgSrc: 'sign-out',
},
]
return compact(map(links, (link) => {
const { hide, el } = link
const linkData = omit(link, ['hide', 'el'])
if (hide) return null
return el || <TopBarLink key={linkData.to} small={small} {...linkData} />
}))
}
render() {
const { mq, handleMenuClick, user, logo, title } = this.props
const small = mq === 'small'
const renderedLinks = this.getLinks(small)
const wrapperStyle = cx('navigation', styles.wrapper, { [styles.small]: small })
const logoImg = (
<img
className={styles.logoImg}
role="presentation"
src={logo}
/>
)
return (
<Boolean>
{(open, toggle) => (
<nav className={wrapperStyle}>
<div className={styles.nav}>
{(small && handleMenuClick) && <Button icon onClick={handleMenuClick}>menu</Button>}
<div className={styles.leftContent}>
{small && (
<MenuButton
buttonChildren={logoImg}
className={styles.appMenuBtn}
flat
id="apps-menu"
>
<AppMenu small={small} user={user} />
</MenuButton>
)}
{!small && (
<div style={{ display: 'flex', alignItems: 'center' }}>
<img role="presentation" src={logo} className={styles.logo} />
<div style={{ backgroundColor: '#d4d5d7', width: 1, height: 20 }} />
<div style={{ fontSize: 20, marginLeft: 30, marginRight: 10 }}>
<span style={{ fontWeight: 100 }}>{title}</span>
</div>
<MenuButton icon id="apps-menu" buttonChildren="apps" position="below">
<AppMenu small={small} user={user} />
</MenuButton>
</div>
)}
</div>
{!small && renderedLinks}
{small && <Button icon onClick={toggle}>menu</Button>}
</div>
{(open && small) && <div className={styles.dropdown}>{renderedLinks}</div>}
</nav>
)}
</Boolean>
)
}
}
export default mediaQueryify(RawKualiTopBar)
|