2020-11-20 01:59:16 +03:00
|
|
|
import { Text } from '@tlon/indigo-react';
|
2021-05-06 01:22:08 +03:00
|
|
|
import React from 'react';
|
2021-05-14 01:39:54 +03:00
|
|
|
// @ts-ignore line isn't in props?
|
2021-05-06 01:22:08 +03:00
|
|
|
export default React.memo(({ line }) => {
|
2020-11-09 17:49:30 +03:00
|
|
|
// line body to jsx
|
2021-05-06 01:22:08 +03:00
|
|
|
// NOTE lines are lists of characters that might span multiple codepoints
|
2020-11-09 17:49:30 +03:00
|
|
|
//
|
|
|
|
let text = '';
|
|
|
|
if (line.lin) {
|
2020-11-10 22:42:28 +03:00
|
|
|
text = line.lin.join('');
|
2021-05-06 01:22:08 +03:00
|
|
|
} else if (line.klr) {
|
2020-11-09 17:49:30 +03:00
|
|
|
text = line.klr.map((part, i) => {
|
2021-05-06 01:22:08 +03:00
|
|
|
const prop = part.stye.deco.reduce((prop, deco) => {
|
2020-11-09 17:49:30 +03:00
|
|
|
switch (deco) {
|
|
|
|
case null: return prop;
|
2021-05-06 01:22:08 +03:00
|
|
|
case 'br': return { bold: true, ...prop };
|
|
|
|
case 'bl': return { className: 'blink', ...prop };
|
|
|
|
case 'un': return { style: { textDecoration: 'underline' }, ...prop };
|
2020-11-09 17:49:30 +03:00
|
|
|
default: console.log('weird deco', deco); return prop;
|
2020-10-24 02:25:44 +03:00
|
|
|
}
|
2020-11-09 17:49:30 +03:00
|
|
|
}, {});
|
|
|
|
switch (part.stye.fore) {
|
|
|
|
case null: break;
|
|
|
|
case 'r': prop.color = 'red'; break;
|
|
|
|
case 'g': prop.color = 'green'; break;
|
|
|
|
case 'b': prop.color = 'blue'; break;
|
|
|
|
case 'c': prop.color = 'cyan'; break;
|
|
|
|
case 'm': prop.color = 'purple'; break;
|
|
|
|
case 'y': prop.color = 'yellow'; break;
|
|
|
|
case 'k': prop.color = 'black'; break;
|
|
|
|
case 'w': prop.color = 'white'; break;
|
2020-12-01 21:32:29 +03:00
|
|
|
default: prop.color = '#' + part.stye.fore;
|
2020-11-09 17:49:30 +03:00
|
|
|
}
|
|
|
|
switch (part.stye.back) {
|
|
|
|
case null: break;
|
|
|
|
case 'r': prop.backgroundColor = 'red'; break;
|
|
|
|
case 'g': prop.backgroundColor = 'green'; break;
|
|
|
|
case 'b': prop.backgroundColor = 'blue'; break;
|
|
|
|
case 'c': prop.backgroundColor = 'cyan'; break;
|
|
|
|
case 'm': prop.backgroundColor = 'purple'; break;
|
|
|
|
case 'y': prop.backgroundColor = 'yellow'; break;
|
|
|
|
case 'k': prop.backgroundColor = 'black'; break;
|
|
|
|
case 'w': prop.backgroundColor = 'white'; break;
|
2020-12-01 21:32:29 +03:00
|
|
|
default: prop.backgroundColor = '#' + part.stye.back;
|
2020-11-09 17:49:30 +03:00
|
|
|
}
|
2021-05-06 01:22:08 +03:00
|
|
|
if (Object.keys(prop).length === 0) {
|
2020-11-09 17:49:30 +03:00
|
|
|
return part.text;
|
|
|
|
} else {
|
2020-11-10 22:42:28 +03:00
|
|
|
return (<Text mono fontSize='inherit' key={i} {...prop}>
|
|
|
|
{part.text.join('')}
|
|
|
|
</Text>);
|
2020-11-09 17:49:30 +03:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
2020-10-24 02:25:44 +03:00
|
|
|
|
2020-11-09 17:49:30 +03:00
|
|
|
// render line
|
|
|
|
//
|
|
|
|
return (
|
2021-05-06 01:22:08 +03:00
|
|
|
<Text mono display='flex'
|
2021-05-06 07:20:34 +03:00
|
|
|
fontSize={0}
|
2020-11-09 17:49:30 +03:00
|
|
|
style={{ overflowWrap: 'break-word', whiteSpace: 'pre-wrap' }}
|
|
|
|
>
|
|
|
|
{text}
|
|
|
|
</Text>
|
|
|
|
);
|
|
|
|
});
|