import React from
"react"
;
import Grid from
'@mui/material/Grid'
;
import List from
'@mui/material/List'
;
import Card from
'@mui/material/Card'
;
import CardHeader from
'@mui/material/CardHeader'
;
import ListItem from
'@mui/material/ListItem'
;
import ListItemText from
'@mui/material/ListItemText'
;
import ListItemIcon from
'@mui/material/ListItemIcon'
;
import Checkbox from
'@mui/material/Checkbox'
;
import Button from
'@mui/material/Button'
;
import Divider from
'@mui/material/Divider'
;
function
not(a, b) {
return
a.filter((value) => b.indexOf(value) === -1);
}
function
intersection(a, b) {
return
a.filter((value) => b.indexOf(value) !== -1);
}
function
union(a, b) {
return
[...a, ...not(b, a)];
}
function
App() {
const [checked, setChecked] = React.useState([]);
const [left, setLeft] = React.useState([0, 1, 2]);
const [right, setRight] = React.useState([3, 4, 5]);
const leftChecked = intersection(checked, left);
const rightChecked = intersection(checked, right);
const handleToggle = (value) => () => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];
if
(currentIndex === -1) {
newChecked.push(value);
}
else
{
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
const numberOfChecked = (items) =>
intersection(checked, items).length;
const handleToggleAll = (items) => () => {
if
(numberOfChecked(items) === items.length) {
setChecked(not(checked, items));
}
else
{
setChecked(union(checked, items));
}
};
const handleCheckedRight = () => {
setRight(right.concat(leftChecked));
setLeft(not(left, leftChecked));
setChecked(not(checked, leftChecked));
};
const handleCheckedLeft = () => {
setLeft(left.concat(rightChecked));
setRight(not(right, rightChecked));
setChecked(not(checked, rightChecked));
};
const customList = (title, items) => (
<Card>
<CardHeader
sx={{ px: 2, py: 1 }}
avatar={
<Checkbox
onClick={handleToggleAll(items)}
checked={numberOfChecked(items) ===
items.length && items.length !== 0}
indeterminate={
numberOfChecked(items) !==
items.length && numberOfChecked(items) !== 0
}
disabled={items.length === 0}
inputProps={{
'aria-label'
:
'all items selected'
,
}}
color=
"success"
/>
}
title={title}
subheader={`${numberOfChecked(items)}/${items.length}
selected`}
/>
<Divider />
<List
sx={{
width: 200,
height: 230,
bgcolor:
'background.paper'
,
overflow:
'auto'
,
}}
dense
component=
"div"
role=
"list"
>
{items.map((value) => {
const labelId =
`transfer-list-all-item-${value}-label`;
return
(
<ListItem
key={value}
role=
"listitem"
button
onClick={handleToggle(value)}
>
<ListItemIcon>
<Checkbox
checked={checked.indexOf(value)
!== -1}
tabIndex={-1}
color=
"success"
disableRipple
inputProps={{
'aria-labelledby'
: labelId,
}}
/>
</ListItemIcon>
<ListItemText id={labelId}
primary={`Item ${value + 1}`} />
</ListItem>
);
})}
<ListItem />
</List>
</Card>
);
return
(
<div>
<div style={{ textAlign:
"center"
, color:
"green"
}}>
<h1>GeeksforGeeks</h1>
<h2>React MUI Transfer List Input</h2>
</div>
<div style={{ textAlign:
"center"
}}>
<Grid container spacing={2} justifyContent=
"center"
alignItems=
"center"
>
<Grid item>{customList(
'Choices'
, left)}</Grid>
<Grid item>
<Grid container direction=
"column"
alignItems=
"center"
>
<Button
sx={{ my: 0.5 }}
variant=
"contained"
size=
"medium"
color=
"success"
onClick={handleCheckedRight}
disabled={leftChecked.length === 0}
aria-label=
"move selected right"
>
>
</Button>
<Button
sx={{ my: 0.5 }}
variant=
"contained"
color=
"success"
size=
"medium"
onClick={handleCheckedLeft}
disabled={rightChecked.length === 0}
aria-label=
"move selected left"
>
<
</Button>
</Grid>
</Grid>
<Grid item>{customList(
'Chosen'
, right)}</Grid>
</Grid>
</div>
</div>
);
}
export
default
App;