25 lines
1.6 KiB
TypeScript
25 lines
1.6 KiB
TypeScript
import { memo, useMemo } from 'react';
|
|
import type { FindingRecord } from '../../domain/finding';
|
|
import { highlightText } from '../../components/HighlightText/highlight-text';
|
|
import { RelatedFindingRing, useRelatedFindings } from '../related-findings/RelatedFindings';
|
|
|
|
/** Building the complete text belongs exclusively to the Raw Data view. */
|
|
export const RawDataView = memo(function RawDataView({ records, raw, filtered, search }: {
|
|
records: FindingRecord[]; raw: string; filtered: boolean; search: string;
|
|
}) {
|
|
const related = useRelatedFindings();
|
|
const text = useMemo(() => filtered
|
|
? records.map(record => [`# Record ${record.index + 1}`,
|
|
...record.fields.filter(field => field.value).map(field => `${field.label}: ${field.value}`)].join('\n')).join('\n\n')
|
|
: raw, [filtered, raw, records]);
|
|
return <div className="viewer-scroll" data-group-scroll="work-raw">
|
|
{!filtered && related?.groups.size ? <div className="raw-related-findings" aria-label="Related findings">
|
|
{records.filter(record => related.groups.has(record.id)).map(record => <div className="related-raw-record" key={record.id}><span>{record.title}</span><RelatedFindingRing record={record}/></div>)}
|
|
</div> : null}
|
|
{filtered && related?.groups.size ? records.map(record => <div className="related-raw-record" key={record.id}>
|
|
<RelatedFindingRing record={record}/>
|
|
<pre className="raw-view">{highlightText([`# Record ${record.index + 1}`, ...record.fields.filter(field => field.value).map(field => `${field.label}: ${field.value}`)].join('\n'), search)}</pre>
|
|
</div>) : <pre className="raw-view">{highlightText(text, search)}</pre>}
|
|
</div>;
|
|
});
|