101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Register, RegisterAccess, Note } from '@/utils/register_parser';
|
|
import { Form, Container, Row, Table, OverlayTrigger, Tooltip } from 'react-bootstrap';
|
|
import RegisterDetail from "@/app/registers/RegisterDetail";
|
|
|
|
interface RegisterBrowserProps {
|
|
registers: Register[];
|
|
}
|
|
|
|
/**
|
|
* Renders the access details for a register, including its description, operations, and notes.
|
|
* @param access The register access data to render.
|
|
* @param extraNotes Non access footnotes to include in the tooltip.
|
|
* @returns A React component that displays the register access details.
|
|
*/
|
|
export function renderAccess(access: RegisterAccess, extraNotes: Note[] = []) {
|
|
const renderTooltip = (notes: Note[]) => (
|
|
<Tooltip id="tooltip">
|
|
{notes.map((note, index) => (
|
|
<div key={index}><code>{note.ref}</code> {note.text}</div>
|
|
))}
|
|
</Tooltip>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{access.description && <pre>{access.description}</pre>}
|
|
{access.operations.length > 0 &&
|
|
<Table striped bordered hover size="sm" className="bits-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Bits</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{access.operations.map((op, index) => {
|
|
const access_notes = access.notes.filter(note => note.ref === op.footnoteRef);
|
|
const extra_notes = extraNotes.filter(note => note.ref === op.footnoteRef);
|
|
|
|
const notes = [...access_notes, ...extra_notes].filter(note => note.text.length > 0);
|
|
|
|
return (
|
|
<tr key={index}>
|
|
<td>{op.bits}</td>
|
|
<td>
|
|
{op.description}
|
|
{op.footnoteRef && notes.length > 0 && (
|
|
<OverlayTrigger placement="top" overlay={renderTooltip(notes)}>
|
|
<span className="footnote-ref">{op.footnoteRef}</span>
|
|
</OverlayTrigger>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
}
|
|
{access.notes.map((note, index) => (
|
|
<p key={index} className="small text-muted">{note.ref} {note.text}</p>
|
|
))}
|
|
</>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* A component for browsing and searching through a list of registers.
|
|
* @param registers An array of Register objects to display.
|
|
* @returns A React component that allows users to browse and search registers.
|
|
*/
|
|
export default function RegisterBrowser({ registers }: RegisterBrowserProps) {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const filteredRegisters = registers.filter(register =>
|
|
register.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
register.description.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
|
|
return (
|
|
<Container fluid>
|
|
<Form.Group className="mb-3">
|
|
<Form.Control
|
|
type="text"
|
|
placeholder="Search registers..."
|
|
value={searchTerm}
|
|
onChange={e => setSearchTerm(e.target.value)}
|
|
/>
|
|
</Form.Group>
|
|
<Row>
|
|
{filteredRegisters.map(register => (
|
|
<RegisterDetail key={register.hex_address} register={register} />
|
|
))}
|
|
</Row>
|
|
</Container>
|
|
);
|
|
}
|