I am trying to say on submit to hide the dialog box and show my cat images, very new to react and i have gotten this far already and this is the last function i need to set in my app to add the other smaller details like validation etc....
I am having problems getting this change to happen,is there any refactoring i could do as well?
import React from 'react';
import ImageGrid from './ImageGrid';
import '../index.css'
// Material UI
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import Input from '#material-ui/core/Input'
import Dialog from '#material-ui/core/Dialog';
import Button from '#material-ui/core/Button';
import Grid from '#material-ui/core/Grid';
const DialogBox = () => {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
// function to hide the dialog box and show the ImageGrid
function showCats() {
// Get the modal
const startPage = document.getElementsByClassName('modal');
// get the image elements
const catImages = document.getElementsByTagName(ImageGrid);
// target the submit button
const button = document.getElementsByClassName('toggle');
if (Input === '') {
alert('Please enter a valid search')
button.current.disabled = true;
} else if (Input === String) {
startPage.style.display = 'none';
catImages.style.display = 'show';
} else {
button.style.display = 'disabled'
}
showCats();
}
const handleSubmit = () => {
console.log('i work')
showCats()
}
return (
<div className='modal'>
<Grid container justifyContent='center'>
{/* Button To Open Dialog Box */}
<Button
style={{border: '1px solid #ebc340', color: '#ebc340'}}
variant="outlined"
color="secondary"
onClick={handleClickOpen}>
Welcome to my Case Study, Click to begin
</Button>
</Grid>
{/* Dialog Box Content */}
<Dialog
className='dialog-btn'
open={open}
onClose={handleClose}>
<DialogTitle>
To begin the application, please insert your URL below:
</DialogTitle>
<DialogContent>
<Input
placeholder="Enter Your Link Here"
// inputProps={ariaLabel}
fullWidth/>
</DialogContent>
{/* Dialog Box Actions */}
<DialogActions>
<Button
onClick={handleClose}
color="secondary">
Cancel
</Button>
<Button
className='toggle'
onClick={handleSubmit}
color='primary'
autoFocus
type='submit'>
Submit
</Button>
</DialogActions>
</Dialog>
</div>
);
}
export default DialogBox
set open to false inside your handleSubmit function:
import React from 'react';
import ImageGrid from './ImageGrid';
import '../index.css'
// Material UI
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogTitle from '#material-ui/core/DialogTitle';
import Input from '#material-ui/core/Input'
import Dialog from '#material-ui/core/Dialog';
import Button from '#material-ui/core/Button';
import Grid from '#material-ui/core/Grid';
const DialogBox = () => {
const [open, setOpen] = React.useState(false);
const [url, setUrl] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const handleSubmit = () => {
setOpen(false)
}
return (
<div className='modal'>
<Grid container justifyContent='center'>
{/* Button To Open Dialog Box */}
<Button
style={{border: '1px solid #ebc340', color: '#ebc340'}}
variant="outlined"
color="secondary"
onClick={handleClickOpen}>
Welcome to my Case Study, Click to begin
</Button>
</Grid>
{/* Dialog Box Content */}
<Dialog
className='dialog-btn'
open={open}
onClose={handleClose}>
<DialogTitle>
To begin the application, please insert your URL below:
</DialogTitle>
<DialogContent>
<Input
placeholder="Enter Your Link Here"
fullWidth
onChange={(e)=> setUrl(e.target.value)}
/>
</DialogContent>
{/* Dialog Box Actions */}
<DialogActions>
<Button
onClick={handleClose}
color="secondary">
Cancel
</Button>
<Button
className='toggle'
onClick={handleSubmit}
color='primary'
autoFocus
type='submit'>
Submit
</Button>
</DialogActions>
</Dialog>
{/* Show the image */}
{!open && url.trim()
? <img src={url} alt="cat"/>
: <p>Open the dialog and insert your url to see the image<p/>
}
</div>
);
}
export default DialogBox
Related
i'm using the datetime picker from: https://material-ui.com/components/pickers/ I want the default value to come from props.note.NoteDate but I can't seem to set or even see the default value as Note date has the annoying format string I cannot remove. Any help is appreciated.
here is my react control:
import React from 'react';
import Button from '#material-ui/core/Button';
import TextField from '#material-ui/core/TextField';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
export default function EditNoteDialog(props) {
const [open, setOpen] = React.useState(true);
const [notetext, setNoteText] = React.useState();
const [notedate, setNoteDate] = React.useState();
React.useEffect (() => {
//notedate is a string like 2021-09-01T01:34:00.000Z
setNoteDate(props.note.NoteDate);
setNoteText(props.note.NoteText);
},[props.note.NoteDate, props.note.NoteText])
let handleNoteTextChange = (e) => {
setNoteText(e.currentTarget.value);
};
let handleNoteDateChange = (e) => {
console.log(e.currentTarget.value);
setNoteDate(e.currentTarget.value);
};
const handleClose = () => {
let editednote = {
NoteID: props.note.NoteID,
NoteText: notetext,
NoteType: props.note.NoteType,
NoteDate: notedate
};
//console.log(editednote.NoteDate)
setOpen(false);
props.SaveEditedNote(editednote);
};
const handleCancel = () => {
setOpen(false);
props.handleCancel(0);
};
return (
<div>
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Edit Note</DialogTitle>
<DialogContent>
<DialogContentText>
Edit Note
</DialogContentText>
{/* <TextField
autoFocus
margin="dense"
id="noteid"
label="NoteID"
defaultValue = {noteid}
fullWidth
/> */}
<TextField
autoFocus
margin="dense"
id="notetext"
label="NoteText"
defaultValue = {notetext}
fullWidth
onChange = {handleNoteTextChange}
/>
<TextField
autoFocus
type = 'datetime-local'
margin="dense"
id="notedate"
defaultValue = "2021/8/15T03:12:05"
//value = {notedate}
label="Note Date"
fullWidth
onChange = {handleNoteDateChange}
/>
</DialogContent>
<DialogActions>
<Button onClick={handleCancel} color="primary">
Cancel
</Button>
<Button onClick={handleClose} color="primary">
Subscribe
</Button>
</DialogActions>
</Dialog>
</div>
);
}
per briosheje's comment datetime-local's default value doesn't seem to allow for milliseconds. Fortunately I didn't either so I just chopped the milliseconds off.
defaultValue = {props.note.NoteDate.split(".")[0]}
I am trying to set the props data in the state of material-ui dialog when the dialog open and the button that opens the dialog is in a separate page and the dialog is in another page. But i am not able do it , but i am struggling with this. Please tell me its answer.
import React from 'react';
export default class Home extends React.Component{
state ={
data:{
id:"20",
name:"aman",
email:"aman#gmail.com"
}
}
render(){
return(
<>
<button>Dialog Open</button>
<Dialog data={this.state.data} />
</>
)
}
}
The dialog component doesn't have data prop
What you probably want is to show that info inside it?
import React from "react";
import Button from "#material-ui/core/Button";
import Dialog from "#material-ui/core/Dialog";
function CustomDialog({ name, lastname, open, handleClose }) {
return (
<Dialog open={open} onClose={handleClose}>
<span>{name}</span>
<span>{lastname}</span>
</Dialog>
);
}
export default function DraggableDialog() {
const [open, setOpen] = React.useState(false);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open form dialog
</Button>
<CustomDialog
open={open}
handleClose={handleClose}
name="Nome"
lastname="Lastname"
/>
</div>
);
}
Take a look at Dialog API
I am trying to create dynamic input fields in my react application(using Material UI) on the click of a button. Whenever the add button is clicked, it creates a new input field inside a dialog box but I can't seem to enter any values in the text-field. Following is my app.js file -
import React from "react";
import "./styles.css";
import Button from "#material-ui/core/Button";
import TextField from "#material-ui/core/TextField";
import Dialog from "#material-ui/core/Dialog";
import DialogActions from "#material-ui/core/DialogActions";
import DialogContent from "#material-ui/core/DialogContent";
import DialogContentText from "#material-ui/core/DialogContentText";
import DialogTitle from "#material-ui/core/DialogTitle";
import IconButton from "#material-ui/core/IconButton";
import DeleteIcon from "#material-ui/icons/Delete";
import { Box, Grid } from "#material-ui/core";
export default function App() {
const [open, setOpen] = React.useState(false);
const [values, setValues] = React.useState([]);
const [text, setText] = React.useState("");
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
setValues([]);
};
const handleChangeText = (e) => {
setText(e.target.value);
};
const addValue = () => {
setValues([...values, ""]);
};
const handleValueChange = (index, e) => {
values[index] = e.target.value;
console.log(values);
setValues(values);
};
const deleteValue = (jump) => {
setValues(values.filter((j) => j !== jump));
};
return (
<div>
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Create
</Button>
<Dialog
open={open}
onClose={handleClose}
aria-labelledby="form-dialog-title"
>
<DialogTitle id="form-dialog-title">New Dialog</DialogTitle>
<DialogContent>
<DialogContentText>Sample Text.</DialogContentText>
<TextField
autoFocus
margin="dense"
value={text}
onChange={handleChangeText}
label="Text"
fullWidth
/>
{values.map((jump, index) => (
<Box key={"jump" + index}>
<Grid container spacing={1} alignItems="flex-end">
<Grid item xs={10}>
<TextField
autoFocus
margin="dense"
label="Value"
value={jump || ""}
onChange={(e) => handleValueChange(index, e)}
fullWidth
/>
</Grid>
<Grid item xs={2}>
<div
className="font-icon-wrapper"
onClick={() => deleteValue(jump)}
>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
</div>
</Grid>
</Grid>
</Box>
))}
</DialogContent>
<Button onClick={addValue} color="primary">
Add
</Button>
<DialogActions>
<Button onClick={handleClose} variant="contained" color="secondary">
Cancel
</Button>
<Button onClick={handleClose} variant="contained" color="primary">
Create
</Button>
</DialogActions>
</Dialog>
</div>
);
}
Here is the code sandbox link.
I have a simple text field inside the dialog box also that works perfectly. The problem is with the dynamic fields. I don't know what mistake I am making in this code. Someone please help me out. Thanks in advance
You a have problem in the function handleValueChanges, don't use mutation use immutable data.
the correct code:
const handleValueChange = (index, e) => {
const updatedValues = values.map((value, i) => {
if(i === index) {
return e.target.value
}else {
return value
}
})
setValues(updatedValues);
};
You can test from here: https://codesandbox.io/s/dynamic-textfield-forked-gck25?file=/src/App.js
I'm trying to figure out if it's possible to have a Dialog box as a button inside a Button Group, inside a CardActions component in Material UI.
When I use a regular Button instead of a Dialog, the 3 buttons in the CardActions are evenly justified across the width of the component - which is what I'm trying to preserve, whilst making the onClick action of the button, a pop up dialog box.
I have:
<CardActions>
<ButtonGroup
orientation="horizontal"
color="secondary"
aria-label="vertical contained primary button group"
variant="text"
fullWidth
>
<1 />
<2 />
<3 Services</Button>
</ButtonGroup>
</CardActions>
Each of 1, 2 and 3 are files which have:
import React from 'react';
import Button from '#material-ui/core/Button';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import LaunchIcon from '#material-ui/icons/Launch';
export default function ScrollDialog() {
const [open, setOpen] = React.useState(false);
const [scroll, setScroll] = React.useState('paper');
const handleClickOpen = (scrollType) => () => {
setOpen(true);
setScroll(scrollType);
};
const handleClose = () => {
setOpen(false);
};
const descriptionElementRef = React.useRef(null);
React.useEffect(() => {
if (open) {
const { current: descriptionElement } = descriptionElementRef;
if (descriptionElement !== null) {
descriptionElement.focus();
}
}
}, [open]);
return (
<div>
<Button color="secondary" onClick={handleClickOpen('paper')}>
1
</Button>
<Dialog
open={open}
onClose={handleClose}
scroll={scroll}
aria-labelledby="scroll-dialog-title"
aria-describedby="scroll-dialog-description"
maxWidth="sm"
>
<DialogTitle id="scroll-dialog-title">Sampling Techniques</DialogTitle>
<DialogContent dividers={scroll === 'paper'}>
<DialogContentText
id="scroll-dialog-description"
ref={descriptionElementRef}
tabIndex={-1}
>
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</div>
);
}
When I try this, the Dialog pops up like a modal, but the buttons do not preserve the justification styling of the ButtonGroup (that worked when I just used buttons inside that Card Action component).
Is it possible to have a Dialog box inside a Card Action?
The .MuiButtonGroup-root is an inline-flex container. Use width: "100%" and justifyContent: "space-evenly" so that
the 3 buttons in the CardActions are evenly justified across the width
of the component
const useStyles = makeStyles({
customBtnGroup: {
width: "100%",
justifyContent: "space-evenly"
}
});
<ButtonGroup classes={{ root: classes.customBtnGroup }}>
I need to open two seperate Material UI dialogs (Terms & Privacy) from their parent component which is a material UI 'simple menu'. I have them imported and nested in the parent already, I just don't know how to get them to open from their parent while being seperate files. I played around with this similar question for way too long but couldn't get it working. Thanks.
Parent component (Menu):
import React from 'react';
import Menu from '#material-ui/core/Menu';
import MenuItem from '#material-ui/core/MenuItem';
import IconButton from '#material-ui/core/IconButton';
import MoreVertIcon from '#material-ui/icons/MoreVert';
import Terms from './Terms';
import Privacy from './Privacy'
const More = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<div>
<IconButton
aria-label="more"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={handleClick}
edge='end'
>
<MoreVertIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={anchorEl}
keepMounted
open={Boolean(anchorEl)}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Terms of Use</MenuItem>
<MenuItem onClick={handleClose}>Privacy Policy</MenuItem>
</Menu>
<Terms />
<Privacy />
</div>
);
}
export default More;
Child component 1 ('Terms' dialog):
import React from 'react';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import Button from '#material-ui/core/Button';
const Terms = () => {
const [openTerms, setOpen] = React.useState(false);
const openTermsDialog = () => {
setOpen(true);
};
const handleCloseTerms = () => {
setOpen(false);
};
return (
<Dialog
open={openTerms}
onClose={handleCloseTerms}
aria-labelledby="terms-dialog-title"
aria-describedby="terms-dialog-description"
>
<DialogTitle id="terms-dialog-title">{"Terms of Use"}</DialogTitle>
<DialogContent>
<DialogContentText id="terms-dialog-description">
Terms go here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleCloseTerms} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Terms;
Child component 2 ('Privacy' dialog):
import React from 'react';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import Button from '#material-ui/core/Button';
const Privacy = () => {
const [openPrivacy, setOpen] = React.useState(false);
const handleOpenPrivacy = () => {
setOpen(true);
};
const handleClosePrivacy = () => {
setOpen(false);
};
return (
<Dialog
open={openPrivacy}
onClose={handleClosePrivacy}
aria-labelledby="privacy-dialog-title"
aria-describedby="privacy-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Privacy Policy"}</DialogTitle>
<DialogContent>
<DialogContentText id="privacy-dialog-description">
Privacy policy goes here
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={handleClosePrivacy} color="primary" autoFocus>
Agree
</Button>
</DialogActions>
</Dialog>
)
}
export default Privacy;
Just lift up the state from the dialog components to the parent component, and pass it down to the child components.
const More = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const [openDialogName, setOpenDialog] = React.useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const openTermsDialog = () => {
setOpenDialog('TERMS');
handleClose();
};
const openPrivacyDialog = () => {
setOpenDialog('PRIVACY');
handleClose();
};
const closeDialog = () => {
setOpenDialog(null);
};
return (
<div>
{/* ... */}
<MenuItem onClick={openTermsDialog}>Terms of Use</MenuItem>
<MenuItem onClick={openPrivacyDialog}>Privacy Policy</MenuItem>
{/* ... */}
<Terms open={openDialogName === 'TERMS'} onClose={closeDialog} />
<Privacy open={openDialogName === 'PRIVACY'} onClose={closeDialog} />
</div>
);
}
export default More;
And in Privacy for example (and the same idea for Terms as well):
const Privacy = ({ open, onClose }) => {
return (
<Dialog
open={open}
onClose={onClose}
>
{/* ... */}
);
};