Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 30x 1x 1x 7x 1x 1x 1x 1x 1x | import type React from "react";
import { HighlightedText } from "~components/highlighted-text";
import { Text } from "~components/text";
import { View } from "~components/view";
import type { Interval } from "~utils/array";
const getInterlacedResult = (intervals: Interval[], input: string) => {
const interlacedTexts = intervals.reduce<{
index: number;
text: string;
result: string[];
}>(
({ text, index, result }, [from, to]) => {
const regular = text.slice(0, from - index);
const marked = text.slice(from - index, to - index);
return {
index: to,
text: text.slice(to - index),
result: [...result, regular, marked],
};
},
{
index: 0,
text: input,
result: [],
},
);
return interlacedTexts.result.length % 2 === 0
? [...interlacedTexts.result, interlacedTexts.text]
: [
...interlacedTexts.result.slice(0, -1),
`${interlacedTexts.result.at(-1)}${interlacedTexts.text}`,
];
};
export const HighlightText: React.FC<
Omit<React.ComponentProps<typeof View>, "children"> & {
intervals: Interval[];
children: string;
}
> = ({ intervals, children, ...props }) => {
const interlacedResult = getInterlacedResult(intervals, children);
return (
<View {...props}>
{interlacedResult.map((element, index) => {
/* oxlint-disable react/no-array-index-key */
Eif (index % 2 === 0) {
return <Text key={index}>{element}</Text>;
}
return <HighlightedText key={index}>{element}</HighlightedText>;
/* oxlint-enable react/no-array-index-key */
})}
</View>
);
};
|