I'm using Material UI and im trying to make a Modal pop up from a Responsive Drawer component. The problem is that when i click on the button, the Modal is rendered and instantly closed. I think that is because of the closing animation of the modal.
I tried a lot of workarounds, played with the z-index a little bit but nothing is working. Any ideas? This is the Modal code:
<div>
<Button
onClick={handleOpen}
sx={{
backgroundColor: "black",
color: "white",
borderBottom: "1px solid #f14d59",
borderRadius: "0px",
}}
>
Log In
</Button>
<Modal
open={open}
onClose={handleClose}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={style} className="modal-box">
<button className="close-popup" onClick={handleClose}>
x
</button>
<Validations />
</Box>
</Modal>
</div>
and this is the Drawer:
const toggleDrawer = (anchor, open) => (event) => {
if (
event.type === "keydown" &&
(event.key === "Tab" || event.key === "Shift")
) {
return;
}
setState({ ...state, [anchor]: open });
};
const list = (anchor) => (
<Box
sx={{
width: 250,
}}
role="presentation"
onClick={toggleDrawer(anchor, false)}
onKeyDown={toggleDrawer(anchor, false)}
>
<List>
{icons.map((icon) => (
<a to={icon.route} key={icon.title} href={icon.href}>
<ListItem disablePadding>
<ListItemButton>
<ListItemIcon sx={{ color: "#f14d59" }}>
<icon.icon />
</ListItemIcon>
<ListItemText
primary={icon.title}
sx={{ color: "#f14d59", fontWeight: "700" }}
/>
</ListItemButton>
</ListItem>
</a>
))}
</List>
<Divider sx={{ backgroundColor: "lightgrey" }} />
<List>
<ListItem disablePadding>
<ListItemButton>
<Modal />
</ListItemButton>
</ListItem>
</List>
</Box>
);
<nav>
<React.Fragment key={"left"}>
<Button onClick={toggleDrawer("left", true)}>
<MenuIcon sx={{ color: "white" }} />
</Button>
<Drawer
anchor={"left"}
open={state["left"]}
onClose={toggleDrawer("left", false)}
>
{list("left")}
</Drawer>
</React.Fragment>
</nav>
Related
i am building a ecommerce web app with react and i am unable to set state profileOptionsLayer when i click on the highlighted listitem both the logs are displayed on the console but component dosent rerender and state "profileOptionsLayer" is not updated either ,i am unable to locate the reason need help!
ALL imports .....
const TemporaryDrawer = ({
profileDrawerlayer,
setprofileDrawerlayer,
setuserDetails,
userDetails,
}) => {
const [profileOptionsLayer, setprofileOptionsLayer] = useState();
console.log(profileOptionsLayer);
return (
<>
<Drawer
anchor={"right"}
open={profileDrawerlayer}
onClose={() => {
setprofileDrawerlayer(false);
}}
>
<Box
sx={{ width: 250, background: "lightblue", height: "100%" }}
role="presentation"
onClick={() => {
setprofileDrawerlayer(false);
}}
onKeyDown={() => {
setprofileDrawerlayer(false);
}}
>
<List>
////////////////////////////////////// Below ///////////////////////////////////////////////
<ListItem disablePadding>
<ListItemButton
onClick={() => {
console.log("dsadsa");
setprofileOptionsLayer("View"); <= unable to set this state
console.log(profileOptionsLayer);
console.log("dsadsa");
}}
>
<ListItemIcon>
<VisibilityIcon />
</ListItemIcon>
<ListItemText primary={"View Profile"} />
</ListItemButton>
</ListItem>
/////////////////////////////////////// UP /////////////////////////////////////////
<ListItem
disablePadding
onClick={() => {
localStorage.removeItem("userId");
setuserDetails("");
}}
>
<ListItemButton>
<ListItemIcon>
<LogoutIcon />
</ListItemIcon>
<ListItemText primary={"Logout"} />
</ListItemButton>
</ListItem>
</List>
<Divider />
</Box>
</Drawer>
{profileOptionsLayer &&<ProfileOptions {...{ userDetails }} />}
</>
);
};
export default TemporaryDrawer;
I would like to change the colors of each title={note.title} subheader={note.category} I have tried
const theme = createTheme ({
palette: {
category: {
color: blue
}
}
})
But that hasn't worked I have also tried inline
sx={{fontSize: 16,color: '#000000'}} again no luck.
How can I go about editing the color for those 2 sections?
<div>
<Card elevation={10} className={classes.test}>
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={note.title}
subheader={note.category}
/>
<CardContent>
<FormGroup>
<FormControlLabel sx={{fontSize: 16,color: '#000000'}} control={<Checkbox />} label={note.details} />
<FormControlLabel sx={{fontSize: 16,color: '#555555'}} control={<Checkbox />} label={note.details2} />
</FormGroup>
</CardContent>
</Card>
</div>
)
Full code here : https://github.com/Orelso/Project-notes
You can pass node in the title and subheader -
<CardHeader
action={ // 200
<IconButton onClick={() => handleDelete(note.id)}>
<DeleteOutlined />
</IconButton>
}
title={<span style={{fontSize: 16, color: "#000000"}}>{note.title}</span>}
subheader={<span style={{fontSize: 12, color: "#000000"}}>{note.category}</span>}
/>
For each checkbox i need to show/hide values in a dialog.
The code for adding and removing selecteditems is working.
How can I show each input after the checkbox with React hide/show for multiple fields?
The React is correct and if the second function is removed from the JS code this will work with the first checkbox and input... but, I don't know how to write the React code for multiple fields for this React structure.
Image
Here is the code
const [selectedItems, setSelectedItems] = React.useState<any>([]);
const handleToggle = (record: any) => () => {
const currentIndex = selectedItems.indexOf(record);
const newChecked = [...selectedItems];
if (currentIndex === -1) {
newChecked.push(record);
} else {
newChecked.splice(currentIndex, 1);
}
setSelectedItems(newChecked);
};
This is view
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
PaperProps={{
style: {
width: 500,
backgroundColor: "#222",
color: "white"
}
}}
maxWidth="lg"
>
<DialogContent>
<List sx={{ width: '100%', maxWidth: 500 }}>
{expensesType.map((record: any) => {
const labelId = `checkbox-list-label-${record.id}`;
return (
<ListItem
key={record}
secondaryAction={showInput(record)}
>
<ListItemButton role={undefined} onClick={handleToggle(record)} dense>
<ListItemIcon>
<Checkbox
edge="start"
checked={selectedItems.indexOf(record) !== -1}
tabIndex={-1}
value={record.value}
disableRipple
inputProps={{ 'aria-labelledby': labelId }}
/>
</ListItemIcon>
<ListItemText id={labelId} primary={record.name} />
</ListItemButton>
</ListItem>
);
})}
</List>
</DialogContent>
<DialogActions>
<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleClose} autoFocus>
Done
</Button>
</DialogActions>
</Dialog>
I'm trying to put the delete icon at the right side of the screen and using the edge= "end" does not work.
sandbox link: https://codesandbox.io/s/admiring-silence-vwfoe?file=/src/App.js:0-1733
These are the codes:
<Card className={classes.root}>
<Typography variant="h5">Announcement </Typography>
<Grid container justify="flex-end">
{/* <Link to="#" className={classes.link}>
<Button>
<AddIcon /> Add Announcement
</Button>
</Link> */}
</Grid>
<Grid container justify="flex-start">
<Card className={classes.root}>
<CardHeader
title="Name of Announcement"
action={
<IconButton aria-lable="edit" style={{ color: "green" }}>
<EditIcon />
</IconButton>
}
/>
<CardContent>Schedule</CardContent>
<CardActions>
<IconButton
aria-label="delete"
edge="end"
style={{ color: "#c70000 " }}
>
<DeleteIcon edge="end" />
</IconButton>
</CardActions>
</Card>
</Grid>
</Card>
You could achieve this by setting CardActions's style prop justifyContent to flex-end in this way:
...
<CardActions style={{ justifyContent: "flex-end" }}> //<-- add this style
<IconButton
aria-label="delete"
edge="end"
style={{ color: "#c70000 " }}
>
<DeleteIcon />
</IconButton>
</CardActions>
...
And the result is:
Here your codesandbox modified.
So, there is a similar question on Stack Overflow, but that's not what I need. I want to make a regular full width footer at the bottom of the page. Here is the code for it, borrowed straight from Material-UI Drawer. Whatever I try to add here, I can't make my footer to appear at all. Once I managed to make it appear but it still was under the drawer, so I could only see a part of it to the right of the drawer.
const drawerWidth = 240;
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
marginLeft: drawerWidth,
},
drawer: {
width: drawerWidth,
flexShrink: 0,
},
drawerPaper: {
width: drawerWidth,
},
// necessary for content to be below app bar
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: theme.palette.background.default,
padding: theme.spacing(3),
},
}),
);
export default function PermanentDrawerLeft() {
const classes = useStyles();
return (
<div className={classes.root}>
<CssBaseline />
<AppBar position="fixed" className={classes.appBar}>
<Toolbar>
<Typography variant="h6" noWrap>
Permanent drawer
</Typography>
</Toolbar>
</AppBar>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
anchor="left"
>
<div className={classes.toolbar} />
<Divider />
<List>
{['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</Drawer>
<main className={classes.content}>
<div className={classes.toolbar} />
<Typography paragraph>
Text
</Typography>
<Typography paragraph>
Text
</Typography>
</main>
</div>
);
}