display text instead of icon on mouseover - React material ui button - javascript

I am using material ui button in my project. Initially the add button is having only + icon.
When the mouse is hovered I need to change the content of button from the icon to the text "CREATE ITEM"
The code is as follows.
import Fab from '#material-ui/core/Fab';
import AddIcon from '#material-ui/icons/Add';
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(theme => ({
iconHover: {
'&:hover': {
border: '2px solid green',
//TODO display the text CREATE ITEM instead of AddIcon
}
},
floatBtn: {
marginRight: theme.spacing(1),
},
}));
const Index = () => {
const classes = useStyles();
return(
<div className={classes.floatBtn}>
<Fab size="small" color="secondary" aria-label="add" className={classes.iconHover}>
<AddIcon />
</Fab>
</div>
)};
Any idea on how to achieve this?

you can use onMouseOver and onMouseOut :
const Index = () => {
const [hover,sethover]=useState(false);
const classes = useStyles();
return(
<div className={classes.floatBtn}>
<Fab onMouseOver={()=>sethover(true)}
onMouseOut={()=>sethover(false)}
size="small" color="secondary" aria-label="add"
className={classes.iconHover}>
{hover?:("some text"):(<AddIcon />)
</Fab>
</div>
)};

Related

Dynamic input fields in React using functional component

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

How to use a Dialog box inside a Card Action Button Group

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 }}>

Styling a card causes TextField to lose focus in Material UI + React

I'm trying to style my card so that it's not so big but the problem is every time I do that, my TextField loses its' functionality and I have to keep on clicking on the TextField because it keeps on losing focus. I need to make my Card component smaller without losing the functionality of my TextField.
https://codesandbox.io/s/mutable-monad-dsvf8?file=/src/index.js
import React, { useState } from "react";
import ReactDOM from "react-dom";
import Grid from "#material-ui/core/Grid";
import Button from "#material-ui/core/Button";
import Card from "#material-ui/core/Card";
import TextField from "#material-ui/core/TextField";
import CreateIcon from "#material-ui/icons/Create";
import Box from "#material-ui/core/Box";
import CardMedia from "#material-ui/core/CardMedia";
import MuiAlert from "#material-ui/lab/Alert";
import Snackbar from "#material-ui/core/Snackbar";
import { withStyles } from "#material-ui/core/styles";
const PetitionCard = () => {
const StyledCard = withStyles({
root: { height: 450, width: 350 }
})(Card);
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [open, setOpen] = useState(false);
const [petition, newPetition] = useState(false);
const handleTitleChange = event => {
setTitle(event.target.value);
};
const handleDescriptionChange = event => setDescription(event.target.value);
const handleClose = (event, reason) => {
if (reason === "clickaway") {
return;
}
};
const Alert = props => <MuiAlert elevation={6} variant="filled" {...props} />;
const Message = (message, severity) => {
return (
<Snackbar open={!open} autoHideDuration={3000} onClose={handleClose}>
<Alert severity={severity}>{message}</Alert>
</Snackbar>
);
};
const clearField = event => {
setOpen(true);
if (title.length > 0 && description.length > 0) {
setTitle("");
setDescription("");
return (
<Message
open={open}
message={"You have successfully created a petition!"}
severity={"success"}
/>
);
} else {
return (
<Message
message={"You have one more more fields missing"}
severity={"error"}
/>
);
}
};
return (
<StyledCard>
<Box mt={1}>
<Grid container justify="center">
<TextField
id="outlined-multiline-static"
multiline
rows={1}
variant="outlined"
placeholder="Title"
value={title}
onChange={handleTitleChange}
/>
</Grid>
</Box>
<CardMedia title="Petition" style={{ height: 0, paddingTop: "40.25%" }} />
<Box mt={1} justify="center">
<Grid container justify="center">
<TextField
size="small"
inputProps={{
style: { fontSize: 15 }
}}
id="outlined-multiline-static"
multiline
rows={5}
placeholder="Description"
variant="outlined"
value={description}
onChange={handleDescriptionChange}
/>
</Grid>
</Box>
<Box mt={1}>
<Grid container justify="center">
<Button onClick={clearField}>
<CreateIcon />
Create Petition!
</Button>
</Grid>
</Box>
</StyledCard>
);
};
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<PetitionCard />
</React.StrictMode>,
rootElement
);
The problem is that you are re-creating StyledCard whenever PetitionCard is rendered:
const PetitionCard = () => {
const StyledCard = withStyles({
root: { height: 450, width: 350 }
})(Card);
[...]
}
Therefore, a new TextField is created on every render since its container changes. TextField is by default not focused and doesn't know whether the TextField from the previous render was focused.
The solution is to create StyledCard outside PetitionCard:
const StyledCard = withStyles({
root: { height: 450, width: 350 }
})(Card);
const PetitionCard = () => {
[...]
}

How to set a HTML element ID on a material-ui component?

I have a website built with Gatsby.js using the Material-UI.
Specific problem is this: I want to use the Google Tag Manager "Element Visibility" triggers. If some HTML element becomes visible, GTM should fire some GA tag.
Question is this: how can I specify the HTML ID for a material-ui component for GTM (or anything else) to find it?
First example:
// ...react imports omitted...
import makeStyles from '#material-ui/core/styles/makeStyles';
import Box from '#material-ui/core/Box';
import Grid from '#material-ui/core/Grid';
import CloseIcon from '#material-ui/icons/Close';
import Link from '~components/Link';
import ButtonSubmit from '~components/form-buttons/ButtonSubmit';
import Container from '~components/Container';
// ... all other imports are in-house code
const useStyles = makeStyles(theme => ({ /* ...styles... */}));
const GuestUserSoftSaleSecondPopup = ({ which, ...rest }) => {
const classes = useStyles();
// ...setup code omitted...
return (
<Box bgcolor="#474d5c" width="100%" py={4} className={classes.banner}>
<Container>
<Grid container direction="row" justify="space-between" alignItems="center" spacing={2}>
<Grid item xs={12} sm={1} md={3} lg={4}>
<CloseIcon onClick={handleClose} size="large" className={classes.closeIcon} />
</Grid>
<Grid item xs={12} sm={7} md={5} lg={4}>
<Link to="/subscribe" variant="h5" className={classes.linkStyle}>
Become a member for full access
</Link>
</Grid>
<Grid item xs={12} sm={4} className={classes.buttonPosition}>
<Link to="/subscribe" underline="none" className={classes.linkStyle}>
<ButtonSubmit type="button" fullWidth={false}>
See my option
</ButtonSubmit>
</Link>
</Grid>
</Grid>
</Container>
</Box>
);
};
// ...proptypes and `export` clause
Second example:
// ...react imports omitted...
import makeStyles from '#material-ui/core/styles/makeStyles';
import MuiDialog from '#material-ui/core/Dialog';
const useStyles = makeStyles(() => ({ /* ...styles... */ }));
const Dialog = ({ children, background, backdrop, isOpen, ...rest }) => {
const classes = useStyles({ background });
return (
<MuiDialog
open={isOpen}
maxWidth="sm"
fullWidth
disableBackdropClick
disableEscapeKeyDown
BackdropProps={{
className: backdrop ? classes.backdropBM : classes.backdrop
}}
PaperProps={{
className: classes.paper
}}
scroll="body"
{...rest}
>
{children}
</MuiDialog>
);
};
If you look at the API documentation for almost any of the Material-UI components, you will find at the end of the "Props" section a statement like the following example from Dialog:
Any other props supplied will be provided to the root element (Modal).
This means that any props not explicitly recognized by this component will be passed along eventually to whatever HTML element is the outermost element rendered. So for most Material-UI components, in order to add an id property, you just specify it.
My example below (a modification of the Simple Dialog demo) includes three different ids: one on the Dialog element which will be placed on the outermost div of the Modal, one specified via the PaperProps which will go on the main Paper div of the visible content of the dialog, and one on the Box wrapped around the dialog content.
import React from "react";
import PropTypes from "prop-types";
import { makeStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import Avatar from "#material-ui/core/Avatar";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemAvatar from "#material-ui/core/ListItemAvatar";
import ListItemText from "#material-ui/core/ListItemText";
import DialogTitle from "#material-ui/core/DialogTitle";
import Dialog from "#material-ui/core/Dialog";
import PersonIcon from "#material-ui/icons/Person";
import Typography from "#material-ui/core/Typography";
import { blue } from "#material-ui/core/colors";
import Box from "#material-ui/core/Box";
const emails = ["username#gmail.com", "user02#gmail.com"];
const useStyles = makeStyles({
avatar: {
backgroundColor: blue[100],
color: blue[600]
}
});
function SimpleDialog(props) {
const classes = useStyles();
const { onClose, selectedValue, open } = props;
const handleClose = () => {
onClose(selectedValue);
};
const handleListItemClick = value => {
onClose(value);
};
return (
<Dialog
onClose={handleClose}
aria-labelledby="simple-dialog-title"
open={open}
PaperProps={{ id: "MyDialogPaperID" }}
id="ThisIDWillBeOnTheModal"
>
<DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
<Box id="MyBoxID">
<List>
{emails.map(email => (
<ListItem
button
onClick={() => handleListItemClick(email)}
key={email}
>
<ListItemAvatar>
<Avatar className={classes.avatar}>
<PersonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={email} />
</ListItem>
))}
</List>
</Box>
</Dialog>
);
}
SimpleDialog.propTypes = {
onClose: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired,
selectedValue: PropTypes.string.isRequired
};
export default function SimpleDialogDemo() {
const [open, setOpen] = React.useState(false);
const [selectedValue, setSelectedValue] = React.useState(emails[1]);
const handleClickOpen = () => {
setOpen(true);
};
const handleClose = value => {
setOpen(false);
setSelectedValue(value);
};
return (
<div>
<Typography variant="subtitle1">Selected: {selectedValue}</Typography>
<br />
<Button variant="outlined" color="primary" onClick={handleClickOpen}>
Open simple dialog
</Button>
<SimpleDialog
selectedValue={selectedValue}
open={open}
onClose={handleClose}
/>
</div>
);
}
Material UI components don't let you set an id for them since the implementation inside should be a black box and may contain multiple html element. See if you can wrap the element in a div and put the id on that instead.
Another option would be to add a class (via the classes prop) to the element instead but I'm not sure if Google Tag Manager can use those instead of ids.

Not able to copy to clipboard from Popper which is inside Dialogue in material-UI

Steps to reproduce the bug here: (Try to open in Firefox, I was almost crashed the chrome :P) https://codesandbox.io/s/73z5293391
Click on the OPEN SIMPLE DIALOGUE button. Now you see a dialogue, Click on the TOGGLE POPPER button.
Now you see a Popper which has an input box and a COPY button.
You need to copy on the text inside the input box in this case hello.
So I am not able to copy to clipboard actually.
First I thought it might be a problem with Dialogue. But no. In just a Dialogue it works. But not on Popper which pops up from the Dialogue(Only for Popper also it works).
Can you help me to copy to clipboard in this situation?
Once again the source code:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import Button from "#material-ui/core/Button";
import Avatar from "#material-ui/core/Avatar";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemAvatar from "#material-ui/core/ListItemAvatar";
import ListItemText from "#material-ui/core/ListItemText";
import DialogTitle from "#material-ui/core/DialogTitle";
import Dialog from "#material-ui/core/Dialog";
import PersonIcon from "#material-ui/icons/Person";
import AddIcon from "#material-ui/icons/Add";
import Typography from "#material-ui/core/Typography";
import blue from "#material-ui/core/colors/blue";
import DialogContent from "#material-ui/core/DialogContent";
import Popper from "#material-ui/core/Popper";
const emails = ["username#gmail.com", "user02#gmail.com"];
const styles = {
avatar: {
backgroundColor: blue[100],
color: blue[600]
}
};
class SimpleDialog extends React.Component {
state = {
anchorEl: null,
openPopper: false
};
handleClose = () => {
this.props.onClose(this.props.selectedValue);
};
handleListItemClick = value => {
this.props.onClose(value);
};
copytoClipBoard = () => {
this.hello.select();
try {
return document.execCommand("copy");
} catch (err) {
console.log("Oops, unable to copy");
}
};
handleClick = event => {
const { currentTarget } = event;
this.setState(state => ({
anchorEl: currentTarget,
openPopper: !state.openPopper
}));
};
render() {
const { classes, onClose, selectedValue, ...other } = this.props;
const { anchorEl, openPopper } = this.state;
const id = openPopper ? "simple-popper" : null;
return (
<Dialog
onClose={this.handleClose}
aria-labelledby="simple-dialog-title"
{...other}
>
<DialogTitle id="simple-dialog-title">Set backup account</DialogTitle>
<DialogContent>
<Button
aria-describedby={id}
variant="contained"
onClick={this.handleClick}
>
Toggle Popper
</Button>
<Popper
id={id}
open={openPopper}
anchorEl={anchorEl}
style={{ zIndex: 10000 }}
>
<input
value="hello"
readOnly
type="text"
ref={node => (this.hello = node)}
/>
<Button onClick={this.copytoClipBoard}> Copy </Button>
</Popper>
<List>
{emails.map(email => (
<ListItem
button
onClick={() => this.handleListItemClick(email)}
key={email}
>
<ListItemAvatar>
<Avatar className={classes.avatar}>
<PersonIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={email} />
</ListItem>
))}
<ListItem
button
onClick={() => this.handleListItemClick("addAccount")}
>
<ListItemAvatar>
<Avatar>
<AddIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary="add account" />
</ListItem>
</List>
</DialogContent>
</Dialog>
);
}
}
SimpleDialog.propTypes = {
classes: PropTypes.object.isRequired,
onClose: PropTypes.func,
selectedValue: PropTypes.string
};
const SimpleDialogWrapped = withStyles(styles)(SimpleDialog);
class SimpleDialogDemo extends React.Component {
state = {
open: false,
selectedValue: emails[1]
};
handleClickOpen = () => {
this.setState({
open: true
});
};
handleClose = value => {
this.setState({ selectedValue: value, open: false });
};
render() {
return (
<div>
<Typography variant="subtitle1">
Selected: {this.state.selectedValue}
</Typography>
<br />
<Button
variant="outlined"
color="primary"
onClick={this.handleClickOpen}
>
Open simple dialog
</Button>
<SimpleDialogWrapped
selectedValue={this.state.selectedValue}
open={this.state.open}
onClose={this.handleClose}
/>
</div>
);
}
}
export default SimpleDialogDemo;
#akhila-hegde You can add disablePortal to the Popper to solve this.
Note that problem is not with Copy to clipboard. Problem is that you are not able to select the text in the field (because it is in a Portal).
Here is Sandbox link with disablePortal set to true - https://codesandbox.io/s/lxjwj3p8m9

Categories