I need some help...
I'm working with a material UI Popover: currently, it shows when hovering over a certain place and it will only hide when clicking anywhere away from it. I want it to hide automatically as soon as my mouse isn't hovering anymore.
Can you tell me what's wrong with my code?
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openModal = Boolean(anchorEl);
const id = openModal ? "simple-popover" : undefined;
const handleClick = (event: any, params: any) => {
setOrganization({...params});
setAnchorEl(event.currentTarget);
console.log("hola", "Hola")
};
const handlePopover = () => {
setAnchorEl(null);
setOrganization({ idor: null });
};
<Grid container direction="column" height="60%">
<Grid item container justifyContent="center">
<Badge
style={{ cursor: "pointer" }}
badgeContent={params.row.active ? "Active" : "Inactive"}
color={params.row.active ? "success" : "error"}
onMouseEnter={(e: any) => handleClick(e, params.row)}
/>
<Popover
id={id}
onExit={handlePopover}
open={openModal}
anchorEl={anchorEl}
onClose={handlePopover}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<Grid container justifyContent="center">
<Tooltip title="View Window">
<IconButton
onClick={() => handleToOrganization(params.row, "view")}
style={{ marginLeft: 16 }}
>
<LaunchOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
onClick={() => handleToOrganization(params.row, "edit")}
style={{ marginLeft: 16 }}
>
<EditOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
onClick={() => handleOpen()}
style={{ marginLeft: 16 }}
>
<DeleteOutlineOutlinedIcon />
</IconButton>
</Tooltip>
</Grid>
</Popover>
</Grid>
</Grid>```
Thank you in advance! :)
Related
I am using MUI to develop my dashboard.
I am using MUI dropdown component to select the vendor details and there are two options for the Vendor dropdown. i.e "Surya Kumar Yadav", "Eswar". I used the same dropdown in all my cards. When I select the one of the dropdown in any card, it is reflected in all the other cards.
import React from "react";
import {
Box,
Card,
CardContent,
Typography,
Button,
CardActionArea,
CardActions,
Grid,
Select,
MenuItem,
FormControl,
InputLabel,
} from "#mui/material";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { HttpClient } from "../http/http";
import { ConfirmDialog, confirmDialog } from "./ConfirmDialog";
const Services = () => {
const [services, setServices] = useState([]);
const [vendors, setVednors] = useState([]);
const [selectedVendor, setSelectedVendor] = useState("");
const PF =
"https://firebasestorage.googleapis.com/v0/b/mern-stack-service-app.appspot.com/o/";
const navigate = useNavigate();
useEffect(() => {
init();
}, []);
const init = () => fetchServices();
const fetchServices = async () => {
const services = await HttpClient.get(`services`);
const vendors = await HttpClient.get(`vendor`);
setVednors(vendors);
setServices(services);
};
const handleChange = (event) => {
setSelectedVendor(event.target.value);
};
console.log(services);
return services.length === 0 ? (
<Grid>
<Typography
sx={{
fontSize: 32,
color: "blue",
display: "flex",
justifyContent: "center",
alignItems: "center",
textDecoration: "underline",
}}
>
Loading your services.....
</Typography>
</Grid>
) : (
<Grid container>
<ConfirmDialog />
<Grid container item xs={12} columnGap={2}>
<Box sx={{ float: "right" }}>
<Button
variant="outlined"
onClick={() => {
confirmDialog("Are you sure want to logout?", () => {
localStorage.clear();
navigate("/login");
});
}}
>
Logout
</Button>
</Box>
</Grid>
<Grid container item xs={12} rowGap={2}>
{services.map((service, index) => (
<Grid item xs={12} sm={6} md={4} key={index}>
<Card>
<CardActionArea>
<CardContent>
<Grid
component="img"
sx={{
height: 150,
width: 350,
maxHeight: { xs: 150, md: 175 },
maxWidth: { xs: 350, md: 375 },
objectFit: "cover",
}}
alt="The house from the offer."
src={
PF +
service.photo +
"?alt=media&token=c19f2d0a-f254-4391-b589-ef7ee3cad9f5"
}
></Grid>
<Grid item xs={12}>
<Typography textAlign="center">
{service.service}
</Typography>
</Grid>
<Grid item xs={12}>
<FormControl sx={{ minWidth: 120 }} size="small" fullWidth>
<InputLabel id="demo-select-small">
Select Vendor
</InputLabel>
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendor}
label="Select Vendor"
onChange={handleChange}
>
{vendors.map((vendor) => (
<MenuItem
key={vendor._id}
value={vendor.name}
id={vendor.name}
>
{vendor.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
</CardContent>
</CardActionArea>
<CardActions>
<Grid item xs={12}>
<Button variant="outlined" color="primary" fullWidth>
Book Service
</Button>
</Grid>
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Grid>
);
};
export default Services;
I want the dropdown action reflect in the selected card.
It's because all of your mapped Select elements get their value from selectedVendor. you can change the code like this using these steps:
First:
Change the selectingVendor useState like this:
const [selectedVendors, setSelectedVendors] = useState([]);
Second:
And the handleChange function
const handleChange = (event,index) => {
const currentSelectedVendors = [...selectedVendors];
currentSelectedVendors[index] = event.target.value
setSelectedVendors(currentSelectedVendors);
};
Third:
You need to change the Select Mui component props.
<Select
size="small"
labelId="demo-select-small"
id="demo-select-small"
value={selectedVendors[index] || ""}
label="Select Vendor"
onChange={(e) => handleChange(e,index)}
>
Although there is another solution for this problem and you can pull <Select> logic out of Services component , I mean it's selectingVendor hook and it's change handler and create a new separate component which handles it.
PS: I think it should be better to use vendor._id as the value prop of your MenuItems
I have a component that opens/closes a material-ui table. I use a switch to open/close that component. This largely works exactly as I want. I have a minor aesthetic issue with the placement of the Hide/Show text. The top of the text aligns with the horizontal center of the switch control.
Here is the switch code.
<FormControlLabel
className={classes.switch}
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
Notice that the Show/Hide label is not aligned with the switch itself. It's too low. How can I fix this?
Here is the makeStyles function.
const useStyles = makeStyles((theme) => ({
root: {
paddingLeft: theme.spacing(2),
paddingRight: theme.spacing(1),
flexDirection: "column",
display: 'flex'
},
container: {
width: (props) => (props.show ? "inherit" : "0px"),
height: (props) => (props.show ? "inherit" : "0px")
},
switch: {
justifyContent: "flex-end",
alignItems: "flex-end"
},
}
Here is the wrapper code:
return (
<div className={classes.root}>
<Typography>{title}</Typography>
<div className={classes.container}>
<Fade in={show}>
<Paper className={classes.paper}>{frames_view}</Paper>
</Fade>
</div>
<FormControlLabel
className={classes.switch}
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
</div>
Ok.. Looks like it was solved by wrapping in a FormGroup:
<FormGroup
className={classes.switch}
row
>
<FormControlLabel
control={<Switch checked={show} onChange={handleChangeShow} />}
label={show ? "Hide" : "Show"}
/>
</FormGroup>
I have a button and a CircularProgress component that are next to each other on the same row. I want to add a little bit of space between them. How can I achieve this? I've been trying using style etc but failing.
<Grid
container
direction="row"
// justify="space-between"
spacing={50}
>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
//code
}}
>
Import Games
</Button>
{showCircularProgress === true ? (
<CircularProgress style={{ marginTop: '1em' }} />
) : (
''
)}
</Grid>;
For that you would need to use marginRight to the direction of you next element
<Grid container direction="row">
<Button
variant="contained"
color="primary"
size="large"
style={{ marginRight: "32px" }}
>
Import Games
</Button>
<CircularProgress style={{ marginTop: "1em" }} />
</Grid>;
You could read more about CSS margin here
Simplified Working Example:
I have a staff monitoring project that contains many components and among these components is "creating a workspace" and how clear in the picture I made a component and put many elements in it, but the problem is that the "TextField" I want it to be until the end of the page And although I put "Full Width", it is only complete in the middle.
How can I solve the problem?
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
resize:{
fontSize:24
}
}),
);
const Settings: FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
{/*<Container maxWidth="lg" style={{backgroundColor: 'red'}}>*/}
<Grid container direction="row">
<Grid item>
<Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
src="/static/images/avatar/1.jpg"/>
</Grid>
<Grid item >
<TextField
fullWidth
name="workspaceName"
placeholder="Workspace Name"
variant="standard"
style={{
paddingLeft: '1.4rem',
transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="nameeeee"
/>
</Grid>
</Grid>
<Grid container spacing={5} direction="row" mt={14}>
<Grid item xs>
<Button style={{
minWidth: '10rem',
fontSize: '1.5rem',
height: '44px',
fontWeight: 400,
textShadow: 'none',
color: '#fd71af',
border: 0,
background: 'none'
}}>Delete Workspace</Button>
</Grid>
<Grid item >
<Button
color="primary"
component={RouterLink}
to="/dashboard/workspaces/1"
variant="contained"
style={{
minWidth: '13rem',
minHeight: '4.3rem',
fontSize: '1.4rem',
backgroundColor: '#7b68ee',
borderRadius: 6,
marginLeft:'60rem'
}}
>
Saved
</Button>
</Grid>
</Grid>
{/*</Container>*/}
</div>
);
}
export default Settings;
The fullWidth attribute sets the width to 100% of its parent. Its parent (The <Grid> component) isn't occupying the full space. Add css style { flexGrow: 1 } to the <TextField>'s <Grid> parent or set the xs attribute for the <Grid>
Check this part of the docs for reference
I am completely new to react, Using TouchableHighlight, I have created a class,
import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
render() {
return (
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
>
<View
style={{
marginRight: this.props.mr,
borderRadius: 3,
backgroundColor: "#ffffff",
borderWidth: 0.7,
borderColor: "#e1e1e1",
}}
>
<View style={{ flexDirection: "row", padding: 8 }}>
<Image
style={{
width: 26,
height: 26
}}
source={this.props.typeImage}
/>
<Text
style={{
fontSize: 13,
alignSelf: "center",
marginLeft: 8,
color: "#737f8d"
}}
>
{this.props.type}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
}
I have imported ChooseProComp class in a different component like this, I am not sure whether I have to add a custom method.
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
type="Medical"
onPress={() => this.renderType("Medical")
}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
type="Dental"
onPress={() => this.renderType("Dental")}
/>
</View>
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
type="Homeopathy"
onPress={() => this.renderType("Homeopathy")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
type="Ayurveda"
onPress={() => this.renderType("Ayurveda")}
/>
</View>
<View
style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
type="Yogic science"
onPress={() => this.renderType("Yogic science")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
type="Unani"
onPress={() => this.renderType("Unani")}
/>
</View>
So when I select a particular type, like Medical, I want to disable the ChooseProComp classes of other types. Please help me with this. Other types opacity needs to be decreased as well.
Since it seems you just want one item (<ChooseProComp>) to be selected, I suggest you to simply handle the selected one in your main component state, which at the beginning will be undefined:
state = {
selected: undefined
};
Then define onPress function of each <ChooseProComp> like:
onPress={() => {
this.renderType("Medical"); // I don't know how this works so I won't modify it
if(!this.state.selected){ // if the state is undefined, then set it!
this.setState({
selected: "Medical"
})
}
}
Then, again for each <ChooseProComp> pass a prop disabled like:
<ChooseProComp
...
disabled={this.state.selected && this.state.selected !== 'Medical'}
/>
So, in <ChooseProComp> component (class) you can use it in <TouchableHighlight>:
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
disabled={this.props.disabled}
>
Let me know if this fits your question, or I've misunderstood, or it's not clear enough!