Skip to content

Commit 8bbee3a

Browse files
MrOrzMrOrz
authored
Merge pull request #470 from cofacts/refactor-reply-action
Implement ActionMenu and refactor article replies
2 parents d10987d + 4755649 commit 8bbee3a

File tree

11 files changed

+1526
-1374
lines changed

11 files changed

+1526
-1374
lines changed

‎components/ActionMenu/ActionMenu.js

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { useState } from 'react';
2+
import { Button, Menu } from '@material-ui/core';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import MoreVertIcon from '@material-ui/icons/MoreVert';
5+
6+
import cx from 'clsx';
7+
8+
const useStyles = makeStyles(theme => ({
9+
button: {
10+
minWidth: 0, // Override material-ui style
11+
flexShrink: 0,
12+
padding: '3px',
13+
color: ({ open }) =>
14+
open ? theme.palette.primary[500] : theme.palette.secondary[500],
15+
border: ({ open }) =>
16+
`1px solid ${open ? theme.palette.primary[500] : 'transparent'}`,
17+
},
18+
menu: {
19+
marginTop: 4,
20+
},
21+
}));
22+
23+
function ActionMenu({ children, className, ...buttonProps }) {
24+
const [anchorEl, setAnchorEl] = useState(null);
25+
26+
const classes = useStyles({ open: !!anchorEl });
27+
28+
const handleClick = event => {
29+
setAnchorEl(event.currentTarget);
30+
};
31+
32+
const handleClose = () => {
33+
setAnchorEl(null);
34+
};
35+
36+
return (
37+
<>
38+
<Button
39+
className={cx(classes.button, className)}
40+
onClick={handleClick}
41+
aria-haspopup="true"
42+
{...buttonProps}
43+
>
44+
<MoreVertIcon />
45+
</Button>
46+
<Menu
47+
anchorEl={anchorEl}
48+
keepMounted
49+
open={!!anchorEl}
50+
onClose={handleClose}
51+
MenuListProps={{
52+
// auto-close when any click event propagates from <MenuItem>s to <MenuList>
53+
// delay a bit for user to see click animation
54+
onClick: () => {
55+
setTimeout(handleClose, 100);
56+
},
57+
}}
58+
className={classes.menu}
59+
/* set anchorOrigin: vertical - https://github.com/mui-org/material-ui/issues/7961#issuecomment-326215406 */
60+
getContentAnchorEl={null}
61+
anchorOrigin={{
62+
vertical: 'bottom',
63+
horizontal: 'right',
64+
}}
65+
transformOrigin={{
66+
vertical: 'top',
67+
horizontal: 'right',
68+
}}
69+
>
70+
{children}
71+
</Menu>
72+
</>
73+
);
74+
}
75+
76+
export default ActionMenu;

‎components/ActionMenu/ActionMenu.stories.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import ActionMenu from './';
3+
import { MenuItem } from '@material-ui/core';
4+
5+
export default {
6+
title: 'ActionMenu',
7+
component: ActionMenu,
8+
};
9+
10+
export const Default = () => (
11+
<div style={{ padding: 100, height: 400 }}>
12+
<ActionMenu>
13+
<MenuItem>Option 1</MenuItem>
14+
<MenuItem>Option 2</MenuItem>
15+
</ActionMenu>
16+
</div>
17+
);

‎components/ActionMenu/__snapshots__/ActionMenu.stories.storyshot

+171
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Storyshots ActionMenu Default 1`] = `
4+
<div
5+
style={
6+
Object {
7+
"height": 400,
8+
"padding": 100,
9+
}
10+
}
11+
>
12+
<ActionMenu>
13+
<button
14+
aria-haspopup="true"
15+
className="MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button makeStyles-button"
16+
disabled={false}
17+
onBlur={[Function]}
18+
onClick={[Function]}
19+
onDragLeave={[Function]}
20+
onFocus={[Function]}
21+
onKeyDown={[Function]}
22+
onKeyUp={[Function]}
23+
onMouseDown={[Function]}
24+
onMouseLeave={[Function]}
25+
onMouseUp={[Function]}
26+
onTouchEnd={[Function]}
27+
onTouchMove={[Function]}
28+
onTouchStart={[Function]}
29+
tabIndex={0}
30+
type="button"
31+
>
32+
<span
33+
className="MuiButton-label"
34+
>
35+
<svg
36+
aria-hidden="true"
37+
className="MuiSvgIcon-root"
38+
focusable="false"
39+
viewBox="0 0 24 24"
40+
>
41+
<path
42+
d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
43+
/>
44+
</svg>
45+
</span>
46+
<NoSsr>
47+
<span
48+
className="MuiTouchRipple-root"
49+
>
50+
<TransitionGroup
51+
childFactory={[Function]}
52+
component={null}
53+
exit={true}
54+
/>
55+
</span>
56+
</NoSsr>
57+
</button>
58+
<Portal>
59+
<div
60+
className="MuiPopover-root makeStyles-menu"
61+
onKeyDown={[Function]}
62+
role="presentation"
63+
style={
64+
Object {
65+
"bottom": 0,
66+
"left": 0,
67+
"position": "fixed",
68+
"right": 0,
69+
"top": 0,
70+
"visibility": "hidden",
71+
"zIndex": 1300,
72+
}
73+
}
74+
>
75+
<TrapFocus>
76+
<div
77+
data-test="sentinelStart"
78+
tabIndex={0}
79+
/>
80+
<Transition>
81+
<div
82+
className="MuiPaper-root MuiMenu-paper MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded"
83+
style={
84+
Object {
85+
"opacity": 0,
86+
"transform": "scale(0.75, 0.5625)",
87+
"visibility": "hidden",
88+
}
89+
}
90+
tabIndex="-1"
91+
>
92+
<ul
93+
className="MuiList-root MuiMenu-list MuiList-padding"
94+
onClick={[Function]}
95+
onKeyDown={[Function]}
96+
role="menu"
97+
tabIndex={-1}
98+
>
99+
<li
100+
aria-disabled={false}
101+
className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
102+
onBlur={[Function]}
103+
onDragLeave={[Function]}
104+
onFocus={[Function]}
105+
onKeyDown={[Function]}
106+
onKeyUp={[Function]}
107+
onMouseDown={[Function]}
108+
onMouseLeave={[Function]}
109+
onMouseUp={[Function]}
110+
onTouchEnd={[Function]}
111+
onTouchMove={[Function]}
112+
onTouchStart={[Function]}
113+
role="menuitem"
114+
tabIndex={0}
115+
>
116+
Option 1
117+
<NoSsr>
118+
<span
119+
className="MuiTouchRipple-root"
120+
>
121+
<TransitionGroup
122+
childFactory={[Function]}
123+
component={null}
124+
exit={true}
125+
/>
126+
</span>
127+
</NoSsr>
128+
</li>
129+
<li
130+
aria-disabled={false}
131+
className="MuiButtonBase-root MuiListItem-root MuiMenuItem-root MuiMenuItem-gutters MuiListItem-gutters MuiListItem-button"
132+
onBlur={[Function]}
133+
onDragLeave={[Function]}
134+
onFocus={[Function]}
135+
onKeyDown={[Function]}
136+
onKeyUp={[Function]}
137+
onMouseDown={[Function]}
138+
onMouseLeave={[Function]}
139+
onMouseUp={[Function]}
140+
onTouchEnd={[Function]}
141+
onTouchMove={[Function]}
142+
onTouchStart={[Function]}
143+
role="menuitem"
144+
tabIndex={-1}
145+
>
146+
Option 2
147+
<NoSsr>
148+
<span
149+
className="MuiTouchRipple-root"
150+
>
151+
<TransitionGroup
152+
childFactory={[Function]}
153+
component={null}
154+
exit={true}
155+
/>
156+
</span>
157+
</NoSsr>
158+
</li>
159+
</ul>
160+
</div>
161+
</Transition>
162+
<div
163+
data-test="sentinelEnd"
164+
tabIndex={0}
165+
/>
166+
</TrapFocus>
167+
</div>
168+
</Portal>
169+
</ActionMenu>
170+
</div>
171+
`;

‎components/ActionMenu/index.js

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import ActionMenu from './ActionMenu';
2+
export default ActionMenu;

0 commit comments

Comments
 (0)