Skip to content

Commit a192947

Browse files
mtrezzamtrezza
committed
Revert "fix: run menu item action before closing"
This reverts commit 4858d43.
1 parent 4858d43 commit a192947

File tree

3 files changed

+127
-39
lines changed

3 files changed

+127
-39
lines changed

‎src/components/BrowserMenu/BrowserMenu.react.js‎

Lines changed: 76 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,13 @@ export default class BrowserMenu extends React.Component {
1616
constructor() {
1717
super();
1818

19-
this.state = { open: false };
19+
this.state = { open: false, openToLeft: false };
2020
this.wrapRef = React.createRef();
2121
}
2222

2323
render() {
2424
let menu = null;
25+
const isSubmenu = !!this.props.parentClose;
2526
if (this.state.open) {
2627
const position = Position.inDocument(this.wrapRef.current);
2728
const titleStyle = [styles.title];
@@ -35,20 +36,54 @@ export default class BrowserMenu extends React.Component {
3536
onExternalClick={() => this.setState({ open: false })}
3637
>
3738
<div className={styles.menu}>
38-
<div className={titleStyle.join(' ')} onClick={() => this.setState({ open: false })}>
39-
<Icon name={this.props.icon} width={14} height={14} />
40-
<span>{this.props.title}</span>
41-
</div>
42-
<div className={styles.body} style={{ minWidth: this.wrapRef.current.clientWidth }}>
43-
{React.Children.map(this.props.children, child =>
44-
React.cloneElement(child, {
39+
{!isSubmenu && (
40+
<div
41+
className={titleStyle.join(' ')}
42+
onClick={() => this.setState({ open: false })}
43+
>
44+
{this.props.icon && <Icon name={this.props.icon} width={14} height={14} />}
45+
<span>{this.props.title}</span>
46+
</div>
47+
)}
48+
<div
49+
className={
50+
isSubmenu
51+
? this.state.openToLeft
52+
? styles.subMenuBodyLeft
53+
: styles.subMenuBody
54+
: styles.body
55+
}
56+
style={{
57+
minWidth: this.wrapRef.current.clientWidth,
58+
...(isSubmenu
59+
? {
60+
top: 0,
61+
left: this.state.openToLeft
62+
? 0
63+
: `${this.wrapRef.current.clientWidth - 3}px`,
64+
transform: this.state.openToLeft
65+
? 'translateX(calc(-100% + 3px))'
66+
: undefined,
67+
}
68+
: {}),
69+
}}
70+
>
71+
{React.Children.map(this.props.children, child => {
72+
if (child.type === BrowserMenu) {
73+
return React.cloneElement(child, {
74+
...child.props,
75+
parentClose: () => this.setState({ open: false }),
76+
});
77+
}
78+
return React.cloneElement(child, {
4579
...child.props,
4680
onClick: () => {
4781
child.props.onClick?.();
4882
this.setState({ open: false });
83+
this.props.parentClose?.();
4984
},
50-
})
51-
)}
85+
});
86+
})}
5287
</div>
5388
</div>
5489
</Popover>
@@ -61,18 +96,37 @@ export default class BrowserMenu extends React.Component {
6196
if (this.props.disabled) {
6297
classes.push(styles.disabled);
6398
}
64-
let onClick = null;
99+
const entryEvents = {};
65100
if (!this.props.disabled) {
66-
onClick = () => {
67-
this.setState({ open: true });
68-
this.props.setCurrent(null);
69-
};
101+
if (isSubmenu) {
102+
entryEvents.onMouseEnter = () => {
103+
const rect = this.wrapRef.current.getBoundingClientRect();
104+
const width = this.wrapRef.current.clientWidth;
105+
const openToLeft = rect.right + width > window.innerWidth;
106+
this.setState({ open: true, openToLeft });
107+
this.props.setCurrent?.(null);
108+
};
109+
} else {
110+
entryEvents.onClick = () => {
111+
this.setState({ open: true, openToLeft: false });
112+
this.props.setCurrent(null);
113+
};
114+
}
70115
}
71116
return (
72117
<div className={styles.wrap} ref={this.wrapRef}>
73-
<div className={classes.join(' ')} onClick={onClick}>
74-
<Icon name={this.props.icon} width={14} height={14} />
118+
<div className={classes.join(' ')} {...entryEvents}>
119+
{this.props.icon && <Icon name={this.props.icon} width={14} height={14} />}
75120
<span>{this.props.title}</span>
121+
{isSubmenu &&
122+
React.Children.toArray(this.props.children).some(c => c.type === BrowserMenu) && (
123+
<Icon
124+
name="right-outline"
125+
width={12}
126+
height={12}
127+
className={styles.submenuArrow}
128+
/>
129+
)}
76130
</div>
77131
{menu}
78132
</div>
@@ -81,12 +135,12 @@ export default class BrowserMenu extends React.Component {
81135
}
82136

83137
BrowserMenu.propTypes = {
84-
icon: PropTypes.string.isRequired.describe('The name of the icon to place in the menu.'),
138+
icon: PropTypes.string.describe('The name of the icon to place in the menu.'),
85139
title: PropTypes.string.isRequired.describe('The title text of the menu.'),
86-
children: PropTypes.oneOfType([
87-
PropTypes.arrayOf(PropTypes.node),
88-
PropTypes.node,
89-
]).describe(
140+
children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).describe(
90141
'The contents of the menu when open. It should be a set of MenuItem and Separator components.'
91142
),
143+
parentClose: PropTypes.func.describe(
144+
'Closes the parent menu when a nested menu item is selected.'
145+
),
92146
};

‎src/components/BrowserMenu/BrowserMenu.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,38 @@
8989
font-size: 14px;
9090
}
9191

92+
93+
.subMenuBody {
94+
position: absolute;
95+
top: 0;
96+
border-radius: 0 5px 5px 5px;
97+
background: #797592;
98+
padding: 8px 0;
99+
font-size: 14px;
100+
border: 1px solid rgba(0, 0, 0, 0.1);
101+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
102+
}
103+
104+
.subMenuBodyLeft {
105+
position: absolute;
106+
top: 0;
107+
border-radius: 5px 0 5px 5px;
108+
background: #797592;
109+
padding: 8px 0;
110+
font-size: 14px;
111+
border: 1px solid rgba(0, 0, 0, 0.1);
112+
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
113+
}
114+
115+
.submenuArrow {
116+
margin-left: 4px;
117+
fill: #66637A;
118+
}
119+
120+
.entry:hover .submenuArrow {
121+
fill: white;
122+
}
123+
92124
.item {
93125
padding: 4px 14px;
94126
white-space: nowrap;

‎src/dashboard/Data/Browser/BrowserToolbar.react.js‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -447,23 +447,25 @@ const BrowserToolbar = ({
447447
)}
448448
<div className={styles.toolbarSeparator} />
449449
<BrowserMenu setCurrent={setCurrent} title="Settings" icon="gear-solid">
450-
<MenuItem
451-
text={
452-
<span>
453-
{scrollToTop && (
454-
<Icon
455-
name="check"
456-
width={12}
457-
height={12}
458-
fill="#ffffffff"
459-
className="menuCheck"
460-
/>
461-
)}
462-
Scroll to top
463-
</span>
464-
}
465-
onClick={toggleScrollToTop}
466-
/>
450+
<BrowserMenu title="Info Panel">
451+
<MenuItem
452+
text={
453+
<span>
454+
{scrollToTop && (
455+
<Icon
456+
name="check"
457+
width={12}
458+
height={12}
459+
fill="#ffffffff"
460+
className="menuCheck"
461+
/>
462+
)}
463+
Scroll to top
464+
</span>
465+
}
466+
onClick={toggleScrollToTop}
467+
/>
468+
</BrowserMenu>
467469
</BrowserMenu>
468470
</Toolbar>
469471
);

0 commit comments

Comments
 (0)