Skip to content

Commit d269a9f

Browse files
author
Mat Brown
committed
Hamburger menu uses createMenu
Makes less use of `<MenuItem>` because the functionality is fairly bespoke
1 parent 52dc783 commit d269a9f

4 files changed

Lines changed: 84 additions & 103 deletions

File tree

‎src/components/TopBar/HamburgerMenu.jsx‎

Lines changed: 74 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,84 @@
1-
import classnames from 'classnames';
2-
import {noop} from 'lodash/noop';
1+
import noop from 'lodash/noop';
32
import {t} from 'i18next';
3+
import tap from 'lodash/tap';
44
import PropTypes from 'prop-types';
55
import React from 'react';
66
import config from '../../config';
7+
import createMenu, {MenuItem} from './createMenu';
8+
import HamburgerMenuButton from './HamburgerMenuButton';
79

8-
export default function HamburgerMenu({
9-
isExperimental,
10-
isGistExportInProgress,
11-
isOpen,
12-
isUserAuthenticated,
13-
onExportGist,
14-
onExportRepo,
15-
}) {
16-
if (!isOpen) {
17-
return null;
18-
}
10+
const HamburgerMenu = createMenu({
11+
name: 'hamburger',
1912

13+
renderItems({
14+
isExperimental,
15+
isGistExportInProgress,
16+
isUserAuthenticated,
17+
onExportGist,
18+
onExportRepo,
19+
}) {
20+
return tap([], (items) => {
21+
items.push(
22+
<MenuItem
23+
key="exportGist"
24+
onClick={isGistExportInProgress ? noop : onExportGist}
25+
>
26+
{t('top-bar.export-gist')}
27+
</MenuItem>,
28+
);
2029

21-
return (
22-
<div className="top-bar__menu">
23-
<div
24-
className="top-bar__menu-item"
25-
onClick={isGistExportInProgress ? noop : onExportGist}
26-
>
27-
{t('top-bar.export-gist')}
28-
</div>
29-
<div
30-
className={
31-
classnames(
32-
'top-bar__menu-item',
33-
{u__hidden: !(isUserAuthenticated && isExperimental)},
34-
)
35-
}
36-
onClick={onExportRepo}
37-
>
38-
{t('top-bar.export-repo')}
39-
</div>
40-
<a
41-
className="top-bar__menu-item"
42-
href={config.feedbackUrl}
43-
rel="noopener noreferrer"
44-
target="blank"
45-
>
46-
{t('top-bar.send-feedback')}
47-
</a>
48-
<div className="top-bar__menu-item top-bar__menu-item_icons">
49-
<a
50-
className="u__icon"
51-
href="https://github.com/popcodeorg/popcode"
52-
rel="noopener noreferrer"
53-
target="_blank"
54-
>&#xf09b;</a>
55-
<a
56-
className="u__icon"
57-
href="https://twitter.com/popcodeorg"
58-
rel="noopener noreferrer"
59-
target="_blank"
60-
>&#xf099;</a>
30+
if (isUserAuthenticated && isExperimental) {
31+
items.push(
32+
<MenuItem
33+
key="exportRepo"
34+
onClick={onExportRepo}
35+
>
36+
{t('top-bar.export-repo')}
37+
</MenuItem>,
38+
);
39+
}
40+
41+
items.push(
6142
<a
62-
className="u__icon"
63-
href="https://slack.popcode.org/"
43+
className="top-bar__menu-item"
44+
href={config.feedbackUrl}
45+
key="feedback"
6446
rel="noopener noreferrer"
65-
target="_blank"
66-
>&#xf198;</a>
67-
</div>
68-
</div>
69-
);
70-
}
47+
target="blank"
48+
>
49+
{t('top-bar.send-feedback')}
50+
</a>,
51+
);
52+
53+
items.push(
54+
<div
55+
className="top-bar__menu-item top-bar__menu-item_icons"
56+
key="social"
57+
>
58+
<a
59+
className="u__icon"
60+
href="https://github.com/popcodeorg/popcode"
61+
rel="noopener noreferrer"
62+
target="_blank"
63+
>&#xf09b;</a>
64+
<a
65+
className="u__icon"
66+
href="https://twitter.com/popcodeorg"
67+
rel="noopener noreferrer"
68+
target="_blank"
69+
>&#xf099;</a>
70+
<a
71+
className="u__icon"
72+
href="https://slack.popcode.org/"
73+
rel="noopener noreferrer"
74+
target="_blank"
75+
>&#xf198;</a>
76+
</div>,
77+
);
78+
});
79+
},
80+
})(HamburgerMenuButton);
81+
7182

7283
HamburgerMenu.propTypes = {
7384
isExperimental: PropTypes.bool.isRequired,
@@ -77,3 +88,5 @@ HamburgerMenu.propTypes = {
7788
onExportGist: PropTypes.func.isRequired,
7889
onExportRepo: PropTypes.func.isRequired,
7990
};
91+
92+
export default HamburgerMenu;

‎src/components/TopBar/HamburgerMenuButton.jsx‎

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,9 @@
1-
import classnames from 'classnames';
21
import React from 'react';
3-
import PropTypes from 'prop-types';
4-
import HamburgerMenu from './HamburgerMenu';
52

6-
export default function HamburgerMenuButton({
7-
isExperimental,
8-
isGistExportInProgress,
9-
isOpen,
10-
isUserAuthenticated,
11-
onClick,
12-
onExportGist,
13-
onExportRepo,
14-
}) {
3+
export default function HamburgerMenuButton() {
154
return (
16-
<div
17-
className={classnames(
18-
'top-bar__menu-button',
19-
'top-bar__menu-button_hamburger',
20-
{'top-bar__menu-button_active': isOpen},
21-
)}
22-
onClick={onClick}
23-
>
24-
<span className="u__icon top-bar__hamburger">&#xf0c9;</span>
25-
<HamburgerMenu
26-
isExperimental={isExperimental}
27-
isGistExportInProgress={isGistExportInProgress}
28-
isOpen={isOpen}
29-
isUserAuthenticated={isUserAuthenticated}
30-
onExportGist={onExportGist}
31-
onExportRepo={onExportRepo}
32-
/>
33-
</div>
5+
<span className="u__icon top-bar__hamburger">&#xf0c9;</span>
346
);
357
}
368

37-
HamburgerMenuButton.propTypes = {
38-
isExperimental: PropTypes.bool.isRequired,
39-
isGistExportInProgress: PropTypes.bool.isRequired,
40-
isOpen: PropTypes.bool.isRequired,
41-
isUserAuthenticated: PropTypes.bool.isRequired,
42-
onClick: PropTypes.func.isRequired,
43-
onExportGist: PropTypes.func.isRequired,
44-
onExportRepo: PropTypes.func.isRequired,
45-
};
9+
HamburgerMenuButton.propTypes = {};

‎src/components/TopBar/createMenu.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,14 @@ export function MenuItem({children, isEnabled, onClick}) {
2626

2727
MenuItem.propTypes = {
2828
children: PropTypes.node.isRequired,
29-
isEnabled: PropTypes.bool.isRequired,
29+
isEnabled: PropTypes.bool,
3030
onClick: PropTypes.func.isRequired,
3131
};
3232

33+
MenuItem.defaultProps = {
34+
isEnabled: false,
35+
};
36+
3337
export default function createMenu({
3438
isVisible = constant(true),
3539
renderItems,

‎src/components/TopBar/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import partial from 'lodash/partial';
55
import Wordmark from '../../static/images/wordmark.svg';
66
import Pop from '../Pop';
77
import CurrentUser from './CurrentUser';
8-
import HamburgerMenuButton from './HamburgerMenuButton';
8+
import HamburgerMenu from './HamburgerMenu';
99
import LibraryPicker from './LibraryPicker';
1010
import NewProjectButton from './NewProjectButton';
1111
import ProjectPicker from './ProjectPicker';
@@ -54,7 +54,7 @@ export default function TopBar({
5454

5555
return (
5656
<div className={classnames('top-bar', modifier)}>
57-
<HamburgerMenuButton
57+
<HamburgerMenu
5858
isExperimental={isExperimental}
5959
isGistExportInProgress={isGistExportInProgress}
6060
isOpen={openMenu === 'hamburger'}

0 commit comments

Comments
 (0)