Fix unique key problem with ascii elements

This commit is contained in:
Olivier Gagnon 2022-08-29 16:59:38 -04:00
parent c88ac1c26e
commit 759de85559
2 changed files with 18 additions and 23 deletions

@ -108,24 +108,16 @@ export function TerminalRoot({ terminal, router, player }: IProps): React.ReactE
<> <>
<Box width="100%" minHeight="100vh" display={"flex"} alignItems={"flex-end"}> <Box width="100%" minHeight="100vh" display={"flex"} alignItems={"flex-end"}>
<List key={key} id="terminal" classes={{ root: classes.list }}> <List key={key} id="terminal" classes={{ root: classes.list }}>
{terminal.outputHistory.map((item, i) => { {terminal.outputHistory.map((item, i) => (
if (item instanceof Output)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<ANSIITypography text={item.text} color={item.color} />
</ListItem>
);
if (item instanceof RawOutput)
return (
<ListItem key={i} classes={{ root: classes.nopadding }}> <ListItem key={i} classes={{ root: classes.nopadding }}>
{item instanceof Output && <ANSIITypography text={item.text} color={item.color} />}
{item instanceof RawOutput && (
<Typography classes={{ root: classes.preformatted }} paragraph={false}> <Typography classes={{ root: classes.preformatted }} paragraph={false}>
{item.raw} {item.raw}
</Typography> </Typography>
</ListItem> )}
); {item instanceof Link && (
if (item instanceof Link) <>
return (
<ListItem key={i} classes={{ root: classes.nopadding }}>
<Typography>{item.dashes}&gt;&nbsp;</Typography> <Typography>{item.dashes}&gt;&nbsp;</Typography>
<MuiLink <MuiLink
classes={{ root: classes.preformatted }} classes={{ root: classes.preformatted }}
@ -135,9 +127,10 @@ export function TerminalRoot({ terminal, router, player }: IProps): React.ReactE
> >
<Typography>{item.hostname}</Typography> <Typography>{item.hostname}</Typography>
</MuiLink> </MuiLink>
</>
)}
</ListItem> </ListItem>
); ))}
})}
{terminal.action !== null && ( {terminal.action !== null && (
<ListItem classes={{ root: classes.nopadding }}> <ListItem classes={{ root: classes.nopadding }}>

@ -92,8 +92,10 @@ export const ANSIITypography = React.memo((props: IProps): React.ReactElement =>
} }
return ( return (
<Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}> <Typography classes={{ root: lineClass(classes, props.color) }} paragraph={false}>
{parts.map((part) => ( {parts.map((part, i) => (
<span style={ansiCodeStyle(part.code)}>{part.text}</span> <span key={i} style={ansiCodeStyle(part.code)}>
{part.text}
</span>
))} ))}
</Typography> </Typography>
); );