I am using Material UI and I want to change the default animation when a Dialog is open so that when it opens up it appears from bottom to top.
Is there a way to do this?
Thanks
Use the transition property.
<Dialog
transition={props => (
<Slide direction="left" {...props} />
)}
>
</Dialog>
Related
Tried converting Tooltip to a controlled component which depends on onClick event
This works fine in mobile and web but it looses it's original behaviour to show Tooltip on hover
Is there a solution that makes Tooltip work both on hover and onClick
As part of styling
Wanted to have touch event for mobile
Wanted to have hover event for desktop to also work
But had difficulty making it working due to hover for mobile.
Making enterTouchDelay value to 0 worked on mobile, 700ms is default value:
import Tooltip from '#mui/material/Tooltip';
import Button from '#mui/material/Button';
<Tooltip title="Some message" enterTouchDelay={0}>
<Button>Some message</Button>
</Tooltip>
So ultimately we need a tooltip that works both on hover and onClick.
Default Material-UI tooltip works fine both on web and mobile.
<Tooltip title="Show Tooltip">
<Button>Long press for 1s to show tooltip on mobile</Button>
</Tooltip>
Long-pressing on mobile shows tooltip but it also opens the dailog box which opens when we right-click(ctrl + click on mac) on web. So it is not UX friendly.
So enabling onClick by not loosing the hover functionality is ideal for both web and mobile devices.
<Tooltip
title="I am tooltip"
open={showTooltip}
onOpen={() => setShowTooltip(true)}
onClose={() => setShowTooltip(false)}
>
<Button
variant="outlined"
color="primary"
onClick={() => setShowTooltip(!showTooltip)}
>
Hoverme to open Tooltip
</Button>
</Tooltip>
Click here for complete code snippet.
For mobile, the click solution seems the best.
The docs provides one example with it,
<ClickAwayListener onClickAway={handleTooltipClose}>
<div>
<Tooltip
PopperProps={{
disablePortal: true,
}}
onClose={handleTooltipClose}
open={open}
disableFocusListener
disableHoverListener
disableTouchListener
title="Add"
>
<Button onClick={handleTooltipOpen}>Click</Button>
</Tooltip>
</div>
</ClickAwayListener>
https://mui.com/components/tooltips/#triggers
I'm trying to use as a trigger of a Popup in React a button with custom theme:
<PopUp modal trigger={
<MuiThemeProvider theme={buttonTheme}>
<Button variant="contained" color="secondary">Excluir</Button>
</MuiThemeProvider>
}>
But when I do this, I get this error: "Failed prop type: The following props are not supported: onClick. Please remove them. in ThemeProvider" and "Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?". I would like to stop the error.
The button gets colorful, but it doesn't open the Popup.
You just need to put the tag outside the trigger.
<MuiThemeProvider theme={buttonTheme}>
<PopUp modal trigger={<Button variant="contained" color="secondary">Excluir</Button>>}
</MuiThemeProvider>
I am having issues with rendering a pop up loading screen. So assume i have a imported component called ( LoadingDialog ) and i want it to render when the state property, loading is true. When the user clicks a button on the current component, it triggers an api call which also changes the loading state to true, thus rendering the loading dialog.
I understand I can use conditional rendering to achive this, eg:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return(
<div> OTHER UI ELEMENTS </div>
)
but now i have a problem because, when my loadingDialog is rendered, my other ui (text area, background card, button ) all disappear, which is the opposite of what im trying to achieve. With this approach, i can only display my actual ui elements or the loading dialog.
I've tried separating the other ui elements into a separate container but it doesn't help as i need to call the api on click of an button and the entire problem i'm having now occurs in that child container.
I've also tried the above approach with passing a parent on click method as a prop and calling that when the button is clicked but somehow ended up with a recursive loop of the parent/child component
Heres my actual code:
if(this.state.loading){
return (
<div>
<LoadingDialog />
</div>
)
}
else{
return (
<div>
<Card className="center card">
<div className="row">
<div class="column" >
<TextField
id="outlined-name"
name="searchContent"
onChange={this.handleChange}
value={this.state.searchContent}
label="Name"
variant="outlined"
/>
</div>
<div className="column">
<Button
variant="outlined"
color="primary"
onClick={this.handleClick}
>
Search
</Button>
</div>
</div>
</Card>
</div>
);
}
and this is my handle click function:
handleClick = (event, name) => {
this.setState({loading : true})
fetch(uri)
.then(res => res.json())
.then(data => {
console.log(data);
this.setState({loading : false})
});
};
As i said before, I tried separating the UI bit on the else block to a different component but the problem still persisted. To summarise it again,
I can only render my actual ui or a popup box but not both at any given time.
I want to be able to render both at the same time, if needed.
I am very new to react and staying away from the likes of redux, hooks etc.
SOLVED Thanks to Chris G
So the issue was easily fixed by using a logical and operator to check if loading is true or false, like so {this.state.loading && <LoadingDialog />}
eg.
render(){
return(
<div>
{this.state.loading && <LoadingDialog />}
<div>
//REST OF THE STUFF THAT SHOULD BE RENDERED REGARDLESS
</div>
</div>
)
}
I'm writing a single-page web application using React and Material UI, with React-Mini-Router for routing. I have a drawer on the side that is activated by a hamburger icon in the top app bar. Each of the items in the drawer is a Material UI ListItem that should navigate to their respective views when clicked. However, when the hamburger icon is clicked, it seems that all of the onClick events are being triggered, and the view changes to that of the last item on the list. If I type in the correct url for a view I want to go to, it works, but clicking the buttons in the drawer does not redirect away from the last page in the list.
I've tried changing which item is last on the list, and the problem follows the last item (which is why I think they're all getting triggered consecutively). I've made sure that the event for the hamburger button only triggers the drawer state change. I've also noticed that when the page changes, it goes to something like http://localhost:3000/#!/help instead of what I would expect to be http://localhost:3000/help or http://localhost:3000/help#!/
This is the setup for my drawer list:
const drawerList = (
<div width="250">
<ListItem button key='Home' onClick={this.ChangeView('/')}>
<ListItemIcon><HomeIcon /></ListItemIcon>
<ListItemText primary='Home' />
</ListItem>
<ListItem button key='Vote' onClick={this.ChangeView('/vote')}>
<ListItemIcon><VoteIcon /></ListItemIcon>
<ListItemText primary='Vote' />
</ListItem>
<ListItem button key='Organizer Login' onClick={this.ChangeView('/organizer')}>
<ListItemIcon><OrganizerIcon /></ListItemIcon>
<ListItemText primary='Organizer Login' />
</ListItem>
<Divider />
<ListItem button key='Help' onClick={this.ChangeView('/help')}>
<ListItemIcon><HelpOutlineIcon /></ListItemIcon>
<ListItemText primary='Help' />
</ListItem>
</div>
);
Thanks!
You are executing ChangeView on the component mount instead of binding the method to the click event. Just rewrite those lines like this:
<ListItem button key="Home" onClick={() => this.ChangeView('/')>...</ListItem>
I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>
Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>