64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import { styled } from '@mui/material/styles';
|
|
import Paper from '@mui/material/Paper';
|
|
import List from '@mui/material/List';
|
|
import ListItem from '@mui/material/ListItem';
|
|
import Grid from '@mui/material/Grid';
|
|
import Typography from '@mui/material/Typography';
|
|
import TextField from '@mui/material/TextField';
|
|
|
|
|
|
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 ListLabelInputs(props) {
|
|
|
|
const [dense, setDense] = useState(false);
|
|
|
|
const [items, setItems] = useState(false);
|
|
|
|
useEffect(function () {
|
|
setItems(props.items);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [props]);
|
|
|
|
useEffect(function () {
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
|
|
}, [items]);
|
|
|
|
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={10} >
|
|
<Item sx={{ px: 0, '&': { boxShadow: 'none', color: '#ffffff', fontWeight: '600', fontSize: '18px', backgroundColor: 'transparent', lineHeight: '40px' }}}>{props.title}</Item>
|
|
</Grid>
|
|
</Grid>
|
|
</Typography>
|
|
<Demo>
|
|
<List dense={dense}>
|
|
{
|
|
items &&
|
|
Object.entries(items).map(([key, value], index) => (
|
|
<ListItem key={index} >
|
|
<TextField sx={{ '&': { width: '100%' }}} id="standard-basic" label={key} variant="standard" value={value ? value : ""} inputProps={{ readOnly: true, }} />
|
|
</ListItem>
|
|
))
|
|
}
|
|
</List>
|
|
</Demo>
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
export default ListLabelInputs; |