Closed g4rry420 closed 1 year ago
dcasella
commented
1 year ago Hi, could you reply with the code snippet and provide the following information?
Thanks
g4rry420
commented
1 year ago The editor is vs code and language selected is Javascript (Babel)
import { Fragment, useState } from 'react';
import { Box, Card, CardContent, Grid, Slider, Skeleton, Typography, TableContainer, Table, TableHead, TableBody, TableRow, TableCell, Tooltip } from '@mui/material';
import LockOpenIcon from '@mui/icons-material/LockOpen';
import LockIcon from '@mui/icons-material/Lock';
import moment from 'moment';
export default function TEST() {
const [invoices, setInvoices] = useState(null);
return (
<Fragment>
{loading ? (
<Skeleton variant="rounded" animation="wave" width="400px" height="115px" />
) : (
<Fragment>
<Card>
<CardContent>
<Typography variant="h4" color="primary">
branchName
</Typography>
<Typography variant="h6">
invoiceFromDate - invoiceToDate
</Typography>
<Box>
<Box>
<Typography variant="h6">
unlockedInvoices
</Typography>
<LockOpenIcon />
</Box>
<Box>
<Slider getAriaLabel={() => 'Locked and Unlocked Invoice value'} value={sliderValue} min={0} max={totalInvoices} />
</Box>
<Box>
<LockIcon />
<Typography variant="h6">
lockedInvoices
</Typography>
</Box>
</Box>
</CardContent>
</Card>
<Grid container spacing={3} sx={{ marginTop: '1rem' }}>
{invoices &&
invoices.length > 0 &&
invoices.map((invoice) => {
const shiftHours = hours[invoice.id];
return (
<Grid item xs={12} sm={6} key={invoice.id}>
<Card>
<CardContent>
<Box sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between' }}>
<Box>
<Typography variant="h5" color="primary">
Invoice {invoice.id}
</Typography>
<Typography variant="h6">
{invoice.wafNumber} ({invoice.description})
</Typography>
<Typography variant="h6">
{invoice.customer} @ {invoice.site}
</Typography>
</Box>
<Box>{invoice.isLocked ? <LockIcon sx={{ fontSize: '4rem' }} /> : <LockOpenIcon sx={{ fontSize: '4rem' }} />}</Box>
</Box>
<TableContainer>
<Table aria-label="Days for Inspector table">
<TableHead>
<TableRow
sx={{
'& td, & th': {
padding: '0.5rem',
border: 0,
fontWeight: 'bold',
},
}}
>
<TableCell>Title</TableCell>
{shiftHours.weekDates?.map((week, idx) => (
<TableCell key={week.shiftDate + idx}>
<Tooltip title={moment(week.shiftDate).format('MMMM DD, yyyy')} arrow>
<span>{week.dayName.substring(0, 1)}</span>
</Tooltip>
</TableCell>
))}
<TableCell>Total</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow
sx={{
'& td, & th': {
padding: '0.5rem',
border: 0,
},
}}
>
<TableCell>Inspector</TableCell>
{shiftHours.weekDates?.map(week => (
<EditableElement
key={week.dayName + week.shiftDate}
invoiceId={invoice.id}
shiftDate={week.shiftDate}
>
<TableCell>{week?.inspectorHours?.toFixed(2)}</TableCell>
</EditableElement>
))}
<TableCell>{shiftHours?.inspector?.total?.toFixed(2)}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow
sx={{
'& td, & th': {
padding: '0.5rem',
border: 0,
},
}}
>
<TableCell>Shift Leader</TableCell>
{shiftHours.weekDates?.map(week => (
<TableCell key={week.dayName + week.shiftDate}>{week.shiftLeaderHours?.toFixed(2)}</TableCell>
))}
<TableCell>{shiftHours?.shiftLeader?.total?.toFixed(2)}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow
sx={{
'& td, & th': {
padding: '0.5rem',
border: 0,
},
}}
>
<TableCell>Other Leader</TableCell>
{shiftHours.weekDates?.map(week => (
<TableCell key={week.dayName + week.shiftDate}>{week.otherLeaderHours?.toFixed(2)}</TableCell>
))}
<TableCell>{shiftHours?.otherLeader?.total?.toFixed(2)}</TableCell>
</TableRow>
</TableBody>
<TableBody>
<TableRow
sx={{
'& td, & th': {
padding: '0.5rem',
border: 0,
},
}}
>
<TableCell>Balance</TableCell>
{shiftHours.weekDates?.map(week => {
const value = (((week.shiftLeaderHours || 0) / (week.inspectorHours || 0)) + (week.otherLeaderHours || 0)).toFixed(2);
return (
<TableCell key={week.dayName + week.shiftDate}>
{isNaN(value) ? '' : `${value}%`}
</TableCell>
)})}
<TableCell>{calculateTotalBalance(shiftHours.weekDates).toFixed(2)}%</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
</CardContent>
</Card>
</Grid>
)})}
</Grid>
</Fragment>
)}
</Fragment>
);
}
Doing some research I found the dzannotti.vscode-babel-coloring plugin which provides the Javascript (Babel) language syntax highlighting.
As you can see from the screenshot below, Dark+ (which is the default VS Code theme) has the same problem, which indicates a bug within the syntax highlighter. I advise you open an issue over to the plugin I linked or use a different syntax highlighting.
g4rry420
commented
1 year ago Thanks for the info and your thorough research :)
Hi, This happens with optional chaining and Nullish coalescing operator (??) too.