I'm using Dialog component in Material-UI.
I set up onClick so that I can open the dialog when clicking the image.
<img
onClick={this.handleClickOpen}
alt="..."
src={studio2}
className={navImageClasses}
/>
This is how the dialog looks in the code level
<Dialog
open={this.state.open}
TransitionComponent={Transition}
keepMounted
onClose={this.handleClose}
>
<DialogTitle id="alert-dialog-slide-title">
{"Test title"}
</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-slide-description">
{"I wanna put the image here."}
</DialogContentText>
</DialogContent>
</Dialog>
When I click the image, I wanna pass the whole image tag inside , so that I can show the magnified image. Since I'm new to React, I'm very lost here to do that. Can anyone help me do this?
e.target hold all props you need:
handleClickOpen = e => {
console.log(e.target.src)
}
Related
to display popups, I use the <Dialog /> component from the material-ui library, please tell me how can I show this popup automatically every hour?
<Dialog fullScreen onClose={this.hidePopup} open={this.state.popupShow === 'testPopup'}>
<DialogTitle disableTypography className={styles.dialogTitle}>
Title
<button className={styles.dialogCloser} onClick={this.hidePopup}>
<CloseIcon />
</button>
</DialogTitle>
<DialogContent className={`${styles.testPopup}`}>
<p>O-Yama Mania soba ipame luipamis: das sobolo vepe zodomeda poamal, od bogira aai
ta piape Piamoel od Vaoan! Zodacare, eca, od zodameranu! odo cicale Qaa Ili e-Ol
balazodareji, od aala tahilanu-os netaabe: daluga vaomesareji elonusa cape-mi-ali
varoesa cala homila;
</p>
</DialogContent>
</Dialog>
You can use setTimeout function in loop. It could set some variable in state like isTimeToShowDialog. And then render Dialog only if isTimeToShowDialog === true
I put the fullscreen parametere in Dialog comoponebt but following code doesn work.
Please give me an adivce... Thank you~~
const theme = useTheme();
const fullScreen = useMediaQuery(theme.breakpoints.down("xl"));
return (
<Dialog fullWidth={fullScreen} open={open} onClose={handleClose}>
//Omit
</Dialog>
solved it by myself
<Dialog maxWidth={"xl"} open={open} onClose={handleClose}>
Use fullScreen property of the Dialog API:
This should do:
<Dialog fullScreen open={open} onClose={handleClose}>
I have a React JS app that uses the Dialog component and I cannot seem to find any documentation on how I can prevent the dialog from being automatically dismissed by merely clicking the backdrop. I have an explicit action within the dialog that I want to use for control of the dismissal.
I have tried reading the docs and of course searching here but am not finding anything helpful or that contains an example. Any help is appreciated; this is my first time using React.
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
There was mention of this being a possible duplicate of How to handle "outside" click on Dialog (Modal) with material-ui but do not find it helpful as I am using a Dialog component instead of a Modal.
Material 4
Try this:
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title"
open={open} onBackdropClick="false">
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
You can also achieve it setting disableBackdropClick="true", which maybe is more appropriate for your use case.
Material 5
onBackdropClick and disableBackdropClick were deprecated in Material v5, use this instead:
<Dialog onClose={handleClose} aria-labelledby="simple-dialog-title"
open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
And checking whether the backdrop was clicked in the onClose handler:
const handleClose = (event, reason) => {
if (reason && reason == "backdropClick")
return;
myCloseModal();
}
Try to remove onClose prop to Dialog component, it will solve your problem.
Also you can trigger handleClose on cancel button.
It was a quick fix for me.
<Dialog aria-labelledby="simple-dialog-title" open={open}>
<DialogTitle id="simple-dialog-title">Uploading Media To Server</DialogTitle>
<React.Fragment>
<Grid container alignItems="center" justify="center">
<img src={LoadingGif} width="150" />
</Grid>
</React.Fragment>
</Dialog>
I look on another questions, but cant really solve my problem. Im trying to call a function to open a modal with reactJS, but the call button is in one page and the modal files are in another to be reused if necessary, but when i click in it, its return a not a fuction error; Here is my code.
This is the button. The openModal is not working
<TableCell>
<DbButton
onClick={(e) => openModal(event.id)}
>{<FormattedMessage id='delete' />}</DbButton>
</TableCell>
This is the modal in another file
const openModal = (eventId) => {
setOpen(true)
setEventId(eventId)
}
return (
<Panel border={false}>
<TableEventsComponent
data={dataList}
goTo={goTo}
onChangePage={onChangePage}
onChangeRowsPerPage={onChangeRowsPerPage}
rowsPerPage={rowsPerPage}
page={page}
deleting={deleting}
></TableEventsComponent>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{<FormattedMessage id='alert-title' />}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
{<FormattedMessage id='alert-body' />}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button
onClick={handleClose}
color="primary">
{<FormattedMessage id='cancel' />}
</Button>
<Button
onClick={handleConfirm}
color="primary"
autoFocus>
{<FormattedMessage id='confirm' />}
</Button>
</DialogActions>
</Dialog>
</Panel>
)
Any advice?
Basically, this project is abstracting most of the components, to be reusable and easier to do maintenance. The father index where the modal construction and the logic handles things had a events listener to receive the props passed by, and the son index where the page shows to the user and had the delete button just passa the props to call the function to do the job.
So, on the TableEventsComponent that i put on my second block of code on the question, i put a
openModal={openModal}
And, on the page i got the button, i had
const TableEventsComponent = ({
openModal,
...
})
Thats it, i just not communicating the way it should be.
I am using material-ui library where I have a popper inside a loop each loop has one event object stored in cards. I want to open popper based on button click which is placed on each cards but all the popper gets opened since on button click I am setting 'open' state as true. I want to make this value unique for each popper so that I set the value for that popper which needs to be opened.
I tried to make open as unique but don't know how.
this.state = {
open: false,
}
handleClickButton = event => {
console.log(event.target)
this.setState(state => ({
open: !state.open,
}));
};
Here is the render method code:
{this.props.events.map((event) =>
(
<Card>
<CardContent>
<Typography variant="h5" component="h2">
{event.completionIntent.toUpperCase()}
</Typography>
<Typography color="textSecondary" gutterBottom>
<span><FontAwesomeIcon icon="clock"/></span>
</Typography>
<Typography component="p">
{event.eventTime}
<br />
</Typography>
</CardContent>
<CardActions>
<Link href={event.audio?"":null} style={{color:event.audio?'#3f51b5':'#bdbdbd', fontSize:'12px',}}
underline="none"
>
Download Audio
</Link>
<Button
id={event.completionIntent+'Button'}
buttonRef={node => {
this.anchorEl = node;
}}
variant="contained"
onClick={this.handleClickButton}
aria-describedby={event.completionIntent}
title="Send"
style={{backgroundColor:!event.audio && '#3f51b5',color:'#eeeeee',padding:'2px 0px', marginLeft:'14px', }}
disabled={event.audio}
>
Send
<Send className={classes.rightIcon}/>
</Button>
<Popper
id={event.completionIntent}
open={open}
anchorEl={this.anchorEl}
placement='bottom'
disablePortal={false}
className={classes.popper}
modifiers={{
preventOverflow: {
enabled: false,
boundariesElement:'scrollParent'
},
}}
>
<Paper className={classes.paper}>
<DialogTitle>{"Manual Task Updation"}</DialogTitle>
<DialogContent>
<DialogContentText>
Are you sure you want to update {event.completionIntent.toUpperCase()}?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={this.handleClickButton} color="primary">
Disagree
</Button>
<Button onClick={this.handleClickButton} color="primary">
Agree
</Button>
</DialogActions>
</Paper>
</Popper>
</CardActions>
</Card>
</div>
))}
I want to open the popper only for one card where I clicked the button since open state variable is same for all popper then all popper gets opened. How to make it unique
It maybe too late, but i hope it will help someone out there.
You can use dom manipulation to do that.
In your button handler, set unique id:
<Button
...
onClick={() => this.handleClickButton(some-unique-id)}
...
>
...
</Button>
And then in your popper state:
<Popper
...
open={open[some-unique-id]}
...
>
...
</Popper>
And finally change your handler:
handleClickButton = (event,some-unique-id) => {
...
this.setState({
open: {
[some-unique-id]: true
}
});
};
Instead of making unique open values for all possible cards. It would be a better and simpler solution to make the card implementation as a seperate component. Each card would then have its own state, and you would only need one open value to handle the popper, thus seperating concerns.
So move the card into a seperate component, design some props that handles the data you need to pass down from the parent component, something like this:
{
this.props.events.map((event) =>
(<MyCustomCardImplementation key={someUniqueProperty {...myCustomCardProps} />)
}