I have a menu which I is opening on mouse click of a tab
...
<Tab
label={page.title}
title={page.description}
onMouseDown={this.pageMenuOpen}
/>
...
<Menu
id="simple-menu"
anchorReference="anchorPosition"
anchorPosition={{top: this.state.pageMenu.y, left: this.state.pageMenu.x}}
open={this.state.pageMenu.open}
onClose={this.pageMenuClose}
>
This works as expected, the pageMenuOpen function is changing the state of the pageMenu.open to true and the menu opens, also the pageMenuClose is changing it to false and that works as well.
The Menu onClose function runs on ESC and on mouse left clicking away from the menu.
Is there an option to make it run the function on right clicking away as well? Or override when onClose shall be run? I have noticed the same is happening on the Dialog as well.
No you can't override onClose trigger event, but you can get a look at the other events in here https://material-ui.com/api/menu/
Related
I am using the ant d Drawer component as a pop up modal. I wanted to disable the mask as I didnt want the dark mask it applies to the left hand side, however this seems to prevent the component from mantaining its mask closable parameter which allows you to close the modal by clicking on the left side of the screen (mask)
A possible solution would be to mantain the mask param as true but change the css styling so its completely transparent but I am not sure how to do this?
Any other solutions are welcomed
Thanks in advance
<div>
<Drawer
className="add-days-modal"
placement="right"
closable={false}
onClose={props.handleCancel}
visible={props.addDayModalVisible}
key="right"
width="500px"
maskClosable={true}
mask={false}
>
{props.content}
</Drawer>
</div>
Without the mask there is nothing for the user to click on which would trigger the close event.
What you can try doing instead to achieve what you are after is set the opacity on the mask to 0, this will mean that it is invisible to the user but they can still click on it which will close the Drawer.
The other option which is much more complex is to add an event handler to the screen click. Then when the user clicks anywhere away from the draw you set the state of the Drawer to closed.
My advice is go with option 1
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
Currently I'm trying to overlay a button on another button in Material UI:
https://codesandbox.io/s/responsivedrawer-demo-material-ui-forked-inc7xz?file=/demo.js
I'd like if pressing the X would only print B, rather than printing A and B. I know nesting buttons is not the correct way to do it, but I'd like to overlay the button with the exact look and ripple behavior I'm currently seeing with the nesting. I like how it looks so well aligned on the right, clicking the X doesn't ripple the effect to the entire ListButton the ListButtons takes up the entire drawer width without any extra work, and clicking the ListButton ripples under the X.
I'd really appreciate it if someone has the time to help. Thanks so much!
The solution would be to stopPropagation inside the onClick function since this is where the click event happens.
onClick={(e) => {
e.stopPropagation();
console.log("B");
}}
I'm using react and typescript.
The animation is done using framer-motion.
When the button is pressed, the menubar opens. frame-motion animation is implemented in the menuItem, but the menuItem is not moving.
I made it myself.
https://codesandbox.io/s/elastic-elion-lgpnh?file=/src/App.tsx
Refarence site
https://codesandbox.io/s/framer-motion-side-menu-mx2rw?fontsize=14&module=%2Fsrc%2FExample.tsx
You need to inform the children that the animation changed from open to closed or vice-versa upon the menu button click.
With little modifications, I made it work for staggering the menu items upon menu open. You can check the codesandbox here
Project to replicate the issue
https://github.com/jainniket/drawer-issue
Code
render() {
return (
<View>
<Button
title="Open Drawer"
onPress={() => this.props.navigation.navigate('DrawerOpen')}
/>
<Text>Notifications</Text>
</View>
);
}
Github issue
https://github.com/react-community/react-navigation/issues/1960
Current Behavior
There is a Hamburger Menu on whose click DrawerOpen action is triggered.
But when, that menu is tapped twice very fast, the drawer opens and closes back, but the state is still set as Open.
So the error is, once the menu is clicked, it opens the drawer, but in the transition phase, when the drawer is opening, another tap happens which eventually happens to be on the View being presented by Drawer. This tap forces the menu to close back but the action DrawerClose doesn't get registered.
Whereas the redux state says the current route as DrawerOpen even though the drawer is closed. So any further taps on the menu icon becomes un-responsive.
Reason - The drawer presented and drawer state are out of sync.
Expected Behavior
The double tap should be disabled.
The presenting view of drawer shouldn't take any touch event.
Environment
react-navigation -> ^1.0.0-beta.11
react-native -> 0.45.1
node -> v7.6.0
npm or yarn -> v4.1.2