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) <ListItem key={i} classes={{ root: classes.nopadding }}>
return ( {item instanceof Output && <ANSIITypography text={item.text} color={item.color} />}
<ListItem key={i} classes={{ root: classes.nopadding }}> {item instanceof RawOutput && (
<ANSIITypography text={item.text} color={item.color} /> <Typography classes={{ root: classes.preformatted }} paragraph={false}>
</ListItem> {item.raw}
); </Typography>
if (item instanceof RawOutput) )}
return ( {item instanceof Link && (
<ListItem key={i} classes={{ root: classes.nopadding }}> <>
<Typography classes={{ root: classes.preformatted }} paragraph={false}>
{item.raw}
</Typography>
</ListItem>
);
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>
); );