mirror of
https://github.com/lrnselfreliance/wrolpi.git
synced 2026-10-26 19:01:39 -04:00
3454e042f9
Phase 2, part 2. Baseline 72 -> 63.
Migrated: Tables, SortableTable, DonatePage, Share, Headline, ErrorBoundary,
and the QR code, VIN decoder, and temperature calculators.
New in the library, all in the gallery and tested:
SearchBox Semantic's `<Search category>`, keeping its grouped `results`
shape because four call sites already build it. A real
combobox: arrows move, Enter takes the highlighted suggestion
or submits the raw text, Escape closes without clearing.
Pagination Semantic's prop names, but onPageChange gets the page number
rather than an (event, data) pair.
TabBar the strip and its house style only; routing stays at the call
site, which is what decides what is active.
IconStack two glyphs composed into one symbol, named once for assistive
technology (Semantic's IconGroup).
Table.HeaderCell gains `sorted` and `onSort`.
That last one is a fix, not just a port. Semantic's `sorted` prop set
`aria-sort`; migrating a table by hand dropped it, leaving a clickable <th>
that no keyboard could reach and no screen reader could describe. Putting it
in the library means the next table gets it right without anyone remembering.
Night mode holes closed along the way: the QR codes on the donate, share, and
calculator pages are white by necessity — a scanner needs the contrast — and
they render as SVG, which the media filter does not target. In night mode that
was a lit panel. They now carry `.media`, so the filter remaps the block as a
unit and the contrast survives the mapping.
Also: `paypal` joins the icon map rather than being imported ad hoc in a page,
and FileBrowser stops passing Semantic-only table props into a DOM element.
49 lines
1.5 KiB
JavaScript
49 lines
1.5 KiB
JavaScript
import {Checkbox, Table} from "./ui";
|
|
import React from "react";
|
|
|
|
export function SelectableTable({headerContents, selectOn, onSelect, selectedKeys, footer, rows}) {
|
|
footer = footer ? <Table.Footer>
|
|
<Table.Row>
|
|
{footer}
|
|
</Table.Row>
|
|
</Table.Footer> : null;
|
|
|
|
return <Table>
|
|
<Table.Header>
|
|
<Table.Row>
|
|
{selectOn && <Table.HeaderCell/>}
|
|
{headerContents.map(i => <Table.HeaderCell key={i}>{i}</Table.HeaderCell>)}
|
|
</Table.Row>
|
|
</Table.Header>
|
|
<Table.Body>
|
|
{rows.map(row =>
|
|
<SelectableRow key={row.key} selectOn={selectOn} onSelect={onSelect} selectedKeys={selectedKeys}>
|
|
{row}
|
|
</SelectableRow>)}
|
|
</Table.Body>
|
|
{footer}
|
|
</Table>
|
|
}
|
|
|
|
function SelectableRow(props) {
|
|
const {selectOn, onSelect, selectedKeys} = props;
|
|
const key = props.children.key;
|
|
const c = selectedKeys && selectedKeys.indexOf(key) >= 0;
|
|
let selectCell;
|
|
if (selectOn) {
|
|
const localOnSelect = (e) => {
|
|
try {
|
|
onSelect(key, e.currentTarget.checked);
|
|
} catch (e) {
|
|
console.error('No onSelect declared');
|
|
}
|
|
};
|
|
selectCell = <Table.Cell>
|
|
<Checkbox onChange={localOnSelect} checked={c}/>
|
|
</Table.Cell>;
|
|
}
|
|
return <Table.Row key={key}>
|
|
{selectCell}
|
|
{props.children}
|
|
</Table.Row>
|
|
}
|