82 lines
3.3 KiB
React
82 lines
3.3 KiB
React
|
import React from 'react';
|
||
|
|
import { styled } from '@mui/material/styles';
|
||
|
|
import Box from '@mui/material/Box';
|
||
|
|
import Paper from '@mui/material/Paper';
|
||
|
|
import List from '@mui/material/List';
|
||
|
|
import ListItem from '@mui/material/ListItem';
|
||
|
|
import EditIcon from '@mui/icons-material/Edit';
|
||
|
|
import ListItemText from '@mui/material/ListItemText';
|
||
|
|
import IconButton from '@mui/material/IconButton';
|
||
|
|
import Grid from '@mui/material/Grid';
|
||
|
|
import Typography from '@mui/material/Typography';
|
||
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
||
|
|
import AddIcon from '@mui/icons-material/Add';
|
||
|
|
|
||
|
|
|
||
|
|
function generate(items, element) {
|
||
|
|
return items.map((value) =>
|
||
|
|
React.cloneElement(element, {
|
||
|
|
key: value,
|
||
|
|
}, <ListItemText
|
||
|
|
primary={value}
|
||
|
|
/>),
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
const Demo = styled('div')(({ theme }) => ({
|
||
|
|
backgroundColor: theme.palette.background.paper,
|
||
|
|
}));
|
||
|
|
|
||
|
|
const Item = styled(Paper)(({ theme }) => ({
|
||
|
|
backgroundColor: theme.palette.mode === 'dark' ? '#1A2027' : '#fff',
|
||
|
|
...theme.typography.body2,
|
||
|
|
padding: theme.spacing(1),
|
||
|
|
textAlign: 'center',
|
||
|
|
color: theme.palette.text.secondary,
|
||
|
|
}));
|
||
|
|
|
||
|
|
function ListCreateUpdateDelete(props) {
|
||
|
|
|
||
|
|
const [dense, setDense] = React.useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Paper>
|
||
|
|
<Typography sx={{ p: 0 }} variant="h6" component="div">
|
||
|
|
<Grid container spacing={0} columns={10} sx={{ '&': { backgroundColor: '#333333', height: '56px'}}}>
|
||
|
|
<Grid item xs={6} md={8} >
|
||
|
|
<Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
|
||
|
|
</Grid>
|
||
|
|
<Grid item xs={0} md={2} sx={{ pl: 0, '&': {backgroundColor: 'transparent' }}}>
|
||
|
|
<Item sx={{ p: 0, '&': { boxShadow: 'none', backgroundColor: '#169bd5', borderRadius: '0px'} }}>
|
||
|
|
<IconButton aria-label="add" sx={{ px: 0, borderRadius: '0px', width: '100%', height: '56px'}}>
|
||
|
|
<AddIcon sx={{ px: 0, '&': {color: '#ffffff', width: '30px', height: '30px' }}} />
|
||
|
|
</IconButton>
|
||
|
|
</Item>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Typography>
|
||
|
|
<Demo>
|
||
|
|
<List dense={dense}>
|
||
|
|
{generate(
|
||
|
|
props.items,
|
||
|
|
<ListItem
|
||
|
|
secondaryAction={
|
||
|
|
<div>
|
||
|
|
<IconButton sx={{ mx: 0 }} edge="start" aria-label="edit">
|
||
|
|
<EditIcon />
|
||
|
|
</IconButton>
|
||
|
|
<IconButton edge="end" aria-label="delete">
|
||
|
|
<DeleteIcon />
|
||
|
|
</IconButton>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
>
|
||
|
|
</ListItem>,
|
||
|
|
)}
|
||
|
|
</List>
|
||
|
|
</Demo>
|
||
|
|
</Paper>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ListCreateUpdateDelete;
|