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.
107 lines
3.1 KiB
JavaScript
107 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
import {Box, Button, ButtonGroup, Message, Panel} from './ui';
|
|
|
|
/**
|
|
* Error Boundary component that catches JavaScript errors in child components
|
|
* and displays a fallback UI instead of crashing the entire app.
|
|
*
|
|
* Usage:
|
|
* <ErrorBoundary>
|
|
* <ComponentThatMightThrow />
|
|
* </ErrorBoundary>
|
|
*
|
|
* With custom fallback:
|
|
* <ErrorBoundary fallback={<div>Something went wrong</div>}>
|
|
* <ComponentThatMightThrow />
|
|
* </ErrorBoundary>
|
|
*/
|
|
class ErrorBoundary extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {hasError: false, error: null, errorInfo: null};
|
|
}
|
|
|
|
static getDerivedStateFromError(error) {
|
|
// Update state so next render shows fallback UI
|
|
return {hasError: true, error};
|
|
}
|
|
|
|
componentDidCatch(error, errorInfo) {
|
|
// Log the error for debugging
|
|
console.error('ErrorBoundary caught an error:', error);
|
|
console.error('Component stack:', errorInfo?.componentStack);
|
|
this.setState({errorInfo});
|
|
}
|
|
|
|
handleReset = () => {
|
|
this.setState({hasError: false, error: null, errorInfo: null});
|
|
};
|
|
|
|
handleReload = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
// Allow custom fallback UI
|
|
if (this.props.fallback) {
|
|
return this.props.fallback;
|
|
}
|
|
|
|
const {error} = this.state;
|
|
const errorMessage = error?.message || 'An unexpected error occurred';
|
|
|
|
return (
|
|
<Box style={{padding: '2em'}}>
|
|
<Message kind='error' icon='warning sign' title='Something went wrong'>
|
|
<p>{errorMessage}</p>
|
|
<ButtonGroup>
|
|
<Button onClick={this.handleReset} role='primary' icon='refresh'>
|
|
Try Again
|
|
</Button>
|
|
<Button onClick={this.handleReload} icon='redo'>
|
|
Reload Page
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Message>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* A minimal error boundary for inline components that shows a simple error message.
|
|
*/
|
|
class InlineErrorBoundary extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {hasError: false};
|
|
}
|
|
|
|
static getDerivedStateFromError() {
|
|
return {hasError: true};
|
|
}
|
|
|
|
componentDidCatch(error, errorInfo) {
|
|
console.error('InlineErrorBoundary caught:', error, errorInfo?.componentStack);
|
|
}
|
|
|
|
render() {
|
|
if (this.state.hasError) {
|
|
return (
|
|
<Panel>
|
|
<Message kind='error' icon='warning'>
|
|
Failed to load this section
|
|
</Message>
|
|
</Panel>
|
|
);
|
|
}
|
|
return this.props.children;
|
|
}
|
|
}
|
|
|
|
export default ErrorBoundary;
|
|
export {ErrorBoundary, InlineErrorBoundary};
|