In React, is it possible to disable a redirection when a switch button is placed inside a redirection component?
I have a clickable TableRow which redirects to another component and a switch button (checkbox) inside, like this:
The TableRow component with his TableCell and the Switch button inside:
<TableRow
className="h-40 cursor-pointer"
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
onClick={event => handleClick(n)}
>
<TableCell component="th" scope="row" align="left">
<Switch
checked={state.checkedB}
onChange={handleChange("checkedB")}
value="checkedB"
/>
</TableCell>
</TableRow>
Here is the handleChange function and the state of the Switch button:
const [state, setState] = React.useState({
checkedB: true,
});
const handleChange = name => event => {
setState({ ...state, [name]: event.target.checked });
};
And here is the handleClick function in the TableRow component which redirect to another component:
function handleClick(item){
props.history.push('/apps/fournisseurs/'+item.id+'/'+ item.handle);
}
You'll want to stop propagation (event.stopPropagation()) when you click on the Switch. This will stop the event from bubbling up the chain and will essentially "ignore" the parent click handler (onClick in this case).
const handleChange = name => event => {
event.stopPropagation();
setState({ ...state, [name]: event.target.checked });
};
<TableRow
className="h-40 cursor-pointer"
hover
role="checkbox"
aria-checked={isSelected}
tabIndex={-1}
key={n.id}
selected={isSelected}
onClick={event => handleClick(n)}
>
<TableCell component="th" scope="row" align="left">
<Switch
checked={state.checkedB}
onChange={handleChange("checkedB")}
value="checkedB"
onClick={e => e.stopPropagation()}
/>
</TableCell>
</TableRow>
Edit:
After finding another answer, unfortunately the way for the above code to work would be to add an additional handler to the Switch component of onClick={e => e.stopPropagation()}
Related
I m building a React 18.2 app using MUI 5.10.5, but I have run into a problem creating a <Menu /> element that opens in response to a button click. The menu appears, but it seems the anchorEl is not configured properly, because the menu appears in the top-left of the screen and the browser console has this complaint:
The issue is complicated by the fact that the menus pertain to each row in a <Table /> so, besides anything else, I am not sure if I am supposed to have a single menu outside the table, or repeat the menu for each row in the table. Which seems expensive. But I have organised the code so that the menu is currently duplicated.
export const MetricsQuery = () => {
const [menuState, setMenuState] = useState<{
open: boolean;
anchorEl: null | Element;
}>({open: false, anchorEl: null});
const handleOpenMenuClick = ({currentTarget}: MouseEvent) =>
setMenuState({open: true, anchorEl: currentTarget});
return (
<TableContainer component={Paper}>
<StyledTable>
{/*Header*/}
<TableBody>
{queryMetrics.map((row: QueryMetric) => (
<TableRow>
<TableCell component="th" scope="row">
{row.locationName}
</TableCell>
<TableCell>{row.deviceName}</TableCell>
<TableCell>{row.pointName}</TableCell>
<TableCell>
<Stack>
<IconButton
id="basic-button"
aria-controls={menuState.open ? 'basic-menu' : undefined}
aria-haspopup="true"
aria-expanded={menuState.open ? 'true' : undefined}
onClick={handleOpenMenuClick}
>
<MoreVertIcon sx={{color: theme.palette.primary.light}} fontSize="small"/>
</IconButton>
<Menu
anchorEl={menuState.anchorEl}
open={menuState.open}
onClose={handleClose}
MenuListProps={{
'aria-labelledby': 'basic-button'
}}
>
<MenuItem onClick={handleClose}>Remove</MenuItem>
<MenuItem onClick={handleClose}>Disable</MenuItem>
<MenuItem onClick={handleClose}>Pin to Top</MenuItem>
</Menu>
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</StyledTable>
</TableContainer>
)
}
I have tried quite a number of configurations; such as
omitting the ID of the <IconButton />
making this ID unique for each row
having a single menu outside of the <StyledTable />
following the menu documentation more literally
Not sure what else to try..suggestions?
I am not sure if I am supposed to have a single menu outside the table, or repeat the menu for each row in the table.
You can have just one Menu outside of the table. The anchorEl will determine where it is positioned.
You can also have a Menu for every table row, as it will not be rendered to the DOM when it is closed. The advantage of this approach is that each menu can transition independently, so that one can animate closed while another animates open. But if you want to do it this way then you will need a separate menuState for each row, as they all have their own anchors.
What you have right now will open many copies of the same menu, all on top of each other, when any one of the buttons is clicked.
I would move the button and its menu into a new component so that you can have a separate state for each.
const RowMenu = ({ id }: QueryMetric) => {
const [menuState, setMenuState] = useState<{
open: boolean;
anchorEl: null | Element;
}>({ open: false, anchorEl: null });
const handleOpenMenuClick = ({ currentTarget }: { currentTarget: Element }) =>
setMenuState({ open: true, anchorEl: currentTarget });
const handleClose = () => {
setMenuState((prevState) => ({ ...prevState, open: false }));
};
const menuId = `basic-menu-${id}`;
const buttonId = `basic-button-${id}`;
return (
<>
<IconButton
id={buttonId}
aria-controls={menuState.open ? menuId : undefined}
aria-haspopup="true"
aria-expanded={menuState.open ? "true" : undefined}
onClick={handleOpenMenuClick}
sx={{ alignSelf: "center" }}
>
<MoreVertIcon
sx={{ color: (theme) => theme.palette.primary.light }}
fontSize="small"
/>
</IconButton>
<Menu
id={menuId}
anchorEl={menuState.anchorEl}
open={menuState.open}
onClose={handleClose}
MenuListProps={{
"aria-labelledby": buttonId
}}
>
<MenuItem onClick={handleClose}>Remove</MenuItem>
<MenuItem onClick={handleClose}>Disable</MenuItem>
<MenuItem onClick={handleClose}>Pin to Top</MenuItem>
</Menu>
</>
);
};
export const MetricsQuery = () => {
return (
<TableContainer component={Paper}>
<StyledTable>
{/*Header*/}
<TableBody>
{queryMetrics.map((row) => (
<TableRow key={row.id}>
<TableCell component="th" scope="row">
{row.locationName}
</TableCell>
<TableCell>{row.deviceName}</TableCell>
<TableCell>{row.pointName}</TableCell>
<TableCell>
<Stack>
<RowMenu {...row} />
</Stack>
</TableCell>
</TableRow>
))}
</TableBody>
</StyledTable>
</TableContainer>
);
};
CodeSandbox Link
making this ID unique for each row
If you have ids in your DOM then they need to be unique. Your aria attributes don't make sense if they are all the same. But this is a separate issue and I don't think that this would cause any of the issues that you are having with anchor elements.
I have a problem selecting a single checkbox or multiple checkbox in a table in React. I'm using Material-UI. Please see my codesandbox here
CLICK HERE
I wanted to achieve something like this in the picture below:
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={false}
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
{head.map((el) => (
<TableCell key={el} align="left">
{el}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{body?.excluded_persons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox checked={true} />
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
Seems you are just missing local component state to track the checked status of each checkbox, including the checkbox in the table header.
Here is the implementation for the AddedPersons component since it's more interesting because it has more than one row of data.
Create state to hold the selected persons state. Only add the additional local state, no need to duplicate the passed body prop data (this is anti-pattern anyway) nor add any derived state, i.e. is indeterminate or is all selected (also anti-pattern).
const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});
Create handlers to toggle the states.
const toggleAllSelected = () => setAllSelected((t) => !t);
const toggleSelected = (id) => () => {
setSelected((selected) => ({
...selected,
[id]: !selected[id]
}));
};
Use a useEffect hook to toggle all the selected users when the allSelected state is updated.
React.useEffect(() => {
body.persons?.added_persons &&
setSelected(
body.persons.added_persons.reduce(
(selected, { id }) => ({
...selected,
[id]: allSelected
}),
{}
)
);
}, [allSelected, body]);
Compute the selected person count to determine if all users are selected manually or if it is "indeterminate".
const selectedCount = Object.values(selected).filter(Boolean).length;
const isAllSelected = selectedCount === body?.persons?.added_persons?.length;
const isIndeterminate =
selectedCount && selectedCount !== body?.persons?.added_persons?.length;
Attach all the state and callback handlers.
return (
<>
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell colSpan={4}>{selectedCount} selected</TableCell>
</TableRow>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={allSelected || isAllSelected} // <-- all selected
onChange={toggleAllSelected} // <-- toggle state
indeterminate={isIndeterminate} // <-- some selected
inputProps={{ "aria-label": "select all desserts" }}
/>
</TableCell>
...
</TableRow>
</TableHead>
<TableBody>
{body?.persons?.added_persons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox
checked={selected[row.id] || allSelected} // <-- is selected
onChange={toggleSelected(row.id)} // <-- toggle state
/>
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
Update
Seems there was a bug in my first implementation that disallowed manually deselecting people while the select all checkbox was checked. The fix is to move the logic in the useEffect into the toggleAllSelected handler and use the onChange event to toggle all the correct states. Also to add a check to toggleSelected to deselect "select all" when any person checkboxes have been deselected.
const [allSelected, setAllSelected] = React.useState(false);
const [selected, setSelected] = React.useState({});
const toggleAllSelected = (e) => {
const { checked } = e.target;
setAllSelected(checked);
body?.persons?.added_persons &&
setSelected(
body.persons.added_persons.reduce(
(selected, { id }) => ({
...selected,
[id]: checked
}),
{}
)
);
};
const toggleSelected = (id) => (e) => {
if (!e.target.checked) {
setAllSelected(false);
}
setSelected((selected) => ({
...selected,
[id]: !selected[id]
}));
};
Note: Since both AddedPersons and ExcludedPersons components are basically the same component, i.e. it's a table with same headers and row rendering and selected state, you should refactor these into a single table component and just pass in the row data that is different. This would make your code more DRY.
I have updated your added person table as below,
please note that I am using the component state to update the table state,
const AddedPersons = ({ classes, head, body }) => {
const [addedPersons, setAddedPersons] = useState(
body?.persons?.added_persons.map((person) => ({
...person,
checked: false
}))
);
const [isAllSelected, setAllSelected] = useState(false);
const [isIndeterminate, setIndeterminate] = useState(false);
const onSelectAll = (event) => {
setAllSelected(event.target.checked);
setIndeterminate(false);
setAddedPersons(
addedPersons.map((person) => ({
...person,
checked: event.target.checked
}))
);
};
const onSelect = (event) => {
const index = addedPersons.findIndex(
(person) => person.id === event.target.name
);
// shallow clone
const updatedArray = [...addedPersons];
updatedArray[index].checked = event.target.checked;
setAddedPersons(updatedArray);
// change all select checkbox
if (updatedArray.every((person) => person.checked)) {
setAllSelected(true);
setIndeterminate(false);
} else if (updatedArray.every((person) => !person.checked)) {
setAllSelected(false);
setIndeterminate(false);
} else {
setIndeterminate(true);
}
};
const numSelected = addedPersons.reduce((acc, curr) => {
if (curr.checked) return acc + 1;
return acc;
}, 0);
return (
<>
<Toolbar>
{numSelected > 0 ? (
<Typography color="inherit" variant="subtitle1" component="div">
{numSelected} selected
</Typography>
) : (
<Typography variant="h6" id="tableTitle" component="div">
Added Persons
</Typography>
)}
</Toolbar>
<TableContainer className={classes.tableContainer}>
<Table>
<TableHead className={classes.tableHead}>
<TableRow>
<TableCell padding="checkbox">
<Checkbox
checked={isAllSelected}
inputProps={{ "aria-label": "select all desserts" }}
onChange={onSelectAll}
indeterminate={isIndeterminate}
/>
</TableCell>
{head.map((el) => (
<TableCell key={el} align="left">
{el}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{addedPersons?.map((row, index) => (
<TableRow key={row.id}>
<TableCell padding="checkbox">
<Checkbox
checked={row.checked}
onChange={onSelect}
name={row.id}
/>
</TableCell>
<TableCell align="left">{row.id}</TableCell>
<TableCell align="left">{row.name}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</>
);
};
export default AddedPersons;
Please refer to this for a working example: https://codesandbox.io/s/redux-react-forked-cuy51
-- Material-UI / React / Redux --
I have a material-ui table. Inside each <TableRow> there are some <TableCell> components with their own <Chip> components. These <Chip> components are rendering text through the label property.
I need to be able to extract the label inside the onClick handler, which in my case is the chipFilter() function.
I am going to use that label to filter my redux state and return new data for the larger component rendering the table.
Click Handler
chipFilter = () => {
console.log(this)
console.log(this.props)
console.log(this.props.label)
}
Component render
Each row that is rendered in the table:
<TableRow key={n.id}>
<TableCell
component="th"
align="center"
scope="row">
<Chip
label={n.procedure}
variant="outlined"
color="primary"
clickable={true}
onClick={this.chipFilter} />
</TableCell>
<TableCell align="center">
<Chip
label={n.doctor}
variant="outlined"
color="primary"
clickable={true}
onClick={this.chipFilter} />
</TableCell>
.
.
.
</TableRow>
Thanks for the help!!
A simple solution would be to update your onClick handler so that the n object which contains the meta data of the clicked <Chip> is passed through to chipFilter() like so:
<Chip label={n.procedure} variant="outlined" color="primary" clickable={true}
onClick={ () => this.chipFilter(n) } />
And then update the chipFilter function as follows:
/* Item argument contains data for clicked chip component */
chipFilter = (item) => {
console.log(this)
console.log(item)
console.log(item.label)
}
I would like to implement Google's Material UI Menu Item inside of a TableCell, as shown in their docs here, as seen below:
Here is my current approach:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import {
Grid,
IconButton,
Table,
TableBody,
TableCell,
TableHead,
TableRow,
Paper,
Menu,
MenuItem,
Button,
} from '#material-ui/core';
import { ExpandLess, ExpandMore } from '#material-ui/icons';
const styles = theme => ({});
const Questions = ({ data, classes, openMenu, anchorEls, handleClose }) => {
const CustomTableCell = withStyles(theme => ({
head: {
backgroundColor: theme.palette.common.black,
color: theme.palette.common.white,
},
body: {
fontSize: 14,
},
}))(TableCell);
const formatData = rawData => Object.keys(rawData).map(key => rawData[key]);
const n = { key: 'hi', rating: 55, text: 'wassup' };
return (
<Grid container alignItems={'center'} direction={'column'} spacing={8}>
<Paper className={classes.root}>
<Button
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={e => openMenu('dude', e)}
>
<ExpandMore />
</Button>
<Menu
id={`dude`}
key="menu"
anchorEl={anchorEls.dude}
open={Boolean(anchorEls.dude)}
onClose={e => handleClose('dude', e)}
>
<MenuItem onClick={e => handleClose('dude', e)}>Delete</MenuItem>
<MenuItem onClick={e => handleClose('dude', e)}>Flag</MenuItem>
<MenuItem onClick={e => handleClose('dude', e)}>
Mark Answered
</MenuItem>
</Menu>
<Table className={classes.table}>
<TableHead>
<TableRow>
<CustomTableCell>Question</CustomTableCell>
<CustomTableCell numeric>Rating</CustomTableCell>
<CustomTableCell>Upvote</CustomTableCell>
<CustomTableCell>Downvote</CustomTableCell>
<CustomTableCell>Options</CustomTableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow className={classes.row} key={n.key}>
<CustomTableCell component="th" scope="row">
{n.text}
</CustomTableCell>
<CustomTableCell numeric>{n.rating}</CustomTableCell>
<CustomTableCell>
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={() => ''}
>
<ExpandLess />
</IconButton>
</CustomTableCell>
<CustomTableCell>
<IconButton
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={() => ''}
>
<ExpandMore />
</IconButton>
</CustomTableCell>
<CustomTableCell>
<Button
key="close"
aria-label="Close"
color="inherit"
className={classes.close}
onClick={e => openMenu(n.key, e)}
>
<ExpandMore />
</Button>
<Menu
id={`simple-menu-${n.key}`}
key="menu"
anchorEl={anchorEls[n.key]}
open={Boolean(anchorEls[n.key])}
onClose={e => handleClose(n.key, e)}
>
<MenuItem onClick={e => handleClose(n.key, e)}>
Delete
</MenuItem>
<MenuItem onClick={e => handleClose(n.key, e)}>dude</MenuItem>
<MenuItem onClick={e => handleClose(n.key, e)}>choc</MenuItem>
</Menu>
</CustomTableCell>
</TableRow>
</TableBody>
</Table>
</Paper>
</Grid>
);
};
Questions.propTypes = {
data: PropTypes.object.isRequired,
anchorEls: PropTypes.object.isRequired,
classes: PropTypes.object.isRequired,
openMenu: PropTypes.func.isRequired,
handleClose: PropTypes.func.isRequired,
};
Questions.defaultProps = {};
export default withStyles(styles)(Questions);
This is working, however the menu is not appearing in the correct place, even when passing in the related event e. I put in a dummy element before the table to test whether or not the table was affecting the menu, and found that the dummy worked just fine, as you can see in the screenshot below.
And the improperly placed menu from the button in the table:
Any ideas on what could be happening? Obviously, the context and anchorEl isn't correctly identifying the location on the page, but not sure what to do to combat that.
Problem in your openMenu function.You need to set the event target in your openMenu function, and set null in handleClose function. I am giving here a little example which may help you:
class DemoList extends Component {
constructor(props) {
super(props);
this.state = {
data: [],
anchorEls: []
}
}
handleActionClick = (id, event) => {
let { anchorEls } = this.state;
anchorEls[id] = event.target;
this.setState({ anchorEls });
}
handleActionClose = (id, event) => {
let { anchorEls } = this.state;
anchorEls[id] = null;
this.setState({ anchorEls });
}
render() {
let { classes } = this.props;
const { data, anchorEls } = this.state;
return (
<Paper className="main">
<Table className={classes.table} aria-label="simple table">
<TableHead>
<TableRow>
<TableCell>Dessert (100g serving)</TableCell>
<TableCell align="right">Calories</TableCell>
<TableCell align="right">Fat (g)</TableCell>
<TableCell align="right">Carbs (g)</TableCell>
<TableCell align="right">Action</TableCell>
</TableRow>
</TableHead>
<TableBody>
{data.map(row => (
<TableRow key={row.id}>
<TableCell component="th" scope="row"> {row.name} </TableCell>
<TableCell align="right">{row.calories}</TableCell>
<TableCell align="right">{row.fat}</TableCell>
<TableCell align="right">{row.carbs}</TableCell>
<TableCell align="right">
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={e => this.handleActionClick(row.id, e)}
>
<MoreVert />
</IconButton>
<Menu
id={row.id}
anchorEl={anchorEls[row.id]}
keepMounted
open={Boolean(this.state.anchorEls[row.id])}
onClose={e => this.handleActionClose(row.id, e)}
>
<MenuItem onClick={e => this.handleActionClose(row.id, e)}> View Details </MenuItem>
<MenuItem onClick={e => this.handleActionClose(row.id, e)}> Assign </MenuItem>
</Menu>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Paper>
)
}
}
After hacking away I found that removing the CustomTableCell declaration and changing all the CustomTableCells to normal TableCells resolved the problem. 😫 Not sure why that would fix it given that the CustomTableCell code was pulled straight from the Demos page.
I have made a table using Material UI where I have two buttons in the first column of every row. I wish to edit/delete rows on clicking these but Im stuck on logic. Is it even possible with my implementation ? If not then what's the preferred way of doing so?
render() {
var deleteIcon =
(<IconButton onClick={console.log("delete")}>
<DeleteIcon color="secondary" />
</IconButton>
);
const editIcon = (
<IconButton onClick={console.log("edited")}>
<EditIcon color="primary" />
</IconButton>
);
return(
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id}>
<TableCell style={styles.editor} component="th" scope="row">
{deleteIcon}
{editIcon}
</TableCell>
<TableCell>{n.domain}</TableCell>
<TableCell>{n.service_name}</TableCell>
</TableCell>
</TableRow>
)};
And my result is :
Building on #st4rl00rd's comment, I was able to tie the buttons using :
const editIcon = (
<IconButton onClick={this.editItem}>
<EditIcon color="primary" />
</IconButton>
);
and binding them in the constructor. I was able to get the selected row data by doing :
<TableBody>
{this.state.serviceData.map(n => {
return (
<TableRow key={n.id} onClick={this.getData.bind(this,n)}>
I have recreated your problem and solved the problem with my logic.
I passed the index of each element as a parameter to the handler functions.
Eg:
const editIcon = index => (
<IconButton onClick={() => this.editComponent(index)}>
<EditIcon color="primary" />
</IconButton>
);
DELETION
For deletion, pass the index as params to the handler function and delete the element at specified index using splice operator.
deleteComponent(index) {
const serviceData = this.state.serviceData.slice();
serviceData.splice(index, 1);
this.setState({ serviceData });
}
EDITING
I have used a state called index to keep track of the index the user is currently editing. Initially the index is -1
So whenever the user clicks edit button the editedIndex is updated.
editComponent(index) {
this.setState({ editedIndex: index });
}
I created two TextField Component which is shown at the specified cell (the cell where editbutton is clicked)
const editDomain = (
<TextField
id="domain"
label="Domain"
className={classes.textField}
value={this.state.editedDomain}
margin="normal"
onChange={this.handleChange('editedDomain')}
/>
);
So Whenever the rendering component Index is equal to editedIndex the editing Compomemts are shown at corresponding Tablecell
<TableCell>
{serviceData.indexOf(n) === editedIndex
? editDomain
: n.domain}
</TableCell>
I suppose you want to do this
I have done same using React-Table here is the link for my project repo you can consider this as an example:
https://github.com/AdnanShah/ReactJS-KretaHub-/blob/Thank_You_Init/src/app/routes/dashboard/routes/Default/rows.js