@capillarytech/blaze-ui 5.11.4 → 5.11.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CapErrorBoundary/CapErrorBoundary-use-cases.md +89 -0
- package/CapErrorBoundary/README.md +150 -0
- package/CapErrorBoundary/index.d.ts +10 -0
- package/CapErrorBoundary/index.d.ts.map +1 -0
- package/CapErrorBoundary/index.js +40 -75
- package/CapErrorBoundary/index.js.map +1 -1
- package/CapErrorBoundary/types.d.ts +46 -0
- package/CapErrorBoundary/types.d.ts.map +1 -0
- package/index.d.ts +2 -0
- package/index.d.ts.map +1 -1
- package/index.js +197 -2
- package/index.js.map +1 -1
- package/package.json +2 -1
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
# Test Cases: CapErrorBoundary (Antd v3→v6)
|
|
2
|
+
|
|
3
|
+
## Role
|
|
4
|
+
Senior frontend engineer documenting ESSENTIAL test cases for Storybook stories and migration validation.
|
|
5
|
+
|
|
6
|
+
## Input
|
|
7
|
+
- **Component**: CapErrorBoundary
|
|
8
|
+
- **Complexity**: medium (≤20 test cases)
|
|
9
|
+
- **Source**: blaze-ui/components/CapErrorBoundary/
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
## Google Sheets Output
|
|
14
|
+
|
|
15
|
+
**Spreadsheet ID**: `1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg`
|
|
16
|
+
**Tab**: CapErrorBoundary
|
|
17
|
+
|
|
18
|
+
### Steps
|
|
19
|
+
1. Check connection: `COMPOSIO_CHECK_ACTIVE_CONNECTION` toolkit="googlesheets"
|
|
20
|
+
2. Create tab: `GOOGLESHEETS_ADD_SHEET`
|
|
21
|
+
```json
|
|
22
|
+
{
|
|
23
|
+
"spreadsheetId": "1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg",
|
|
24
|
+
"properties": {
|
|
25
|
+
"title": "CapErrorBoundary",
|
|
26
|
+
"gridProperties": {"rowCount": 100, "columnCount": 6}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
3. Write data: `GOOGLESHEETS_VALUES_UPDATE`
|
|
31
|
+
```json
|
|
32
|
+
{
|
|
33
|
+
"spreadsheet_id": "1Xt8l8Q6Hw0cUYV65SlGvGcPnOtzprr0fukDR9UWJ3kg",
|
|
34
|
+
"range": "CapErrorBoundary!A1",
|
|
35
|
+
"value_input_option": "USER_ENTERED",
|
|
36
|
+
"values": [
|
|
37
|
+
["ID", "Use Case", "Props/Config", "Expected Visual/Behavior", "Priority", "Storybook Story", "Notes"],
|
|
38
|
+
["UC-001", "React ErrorBoundary mode: child throws", "children (component that throws), useSlideBox: false/true", "Error boundary catches; fallbackRender runs; errorHandler(error) called; error illustration shows inline or inside CapSlideBox per useSlideBox", "P0", "ReactErrorBoundaryMode", "Core ErrorBoundary behavior"],
|
|
39
|
+
["UC-002", "API error boundary mode", "isApiErrorBoundary: true, isApiError: true | false", "When isApiError true: error illustration only. When false: children render. No ErrorBoundary when isApiErrorBoundary", "P0", "ApiErrorBoundaryMode", "Grouped isApiErrorBoundary + isApiError"],
|
|
40
|
+
["UC-003", "SlideBox vs inline fallback", "useSlideBox: true | false, slideBoxProps (e.g. className)", "useSlideBox true: fallback in CapSlideBox with show, content, handleClose, slideBoxProps spread. false: inline illustration only", "P0", "SlideBoxVsInline", "Grouped useSlideBox and slideBoxProps"],
|
|
41
|
+
["UC-004", "Boolean and config variants", "showIllustrationImage, showAnimation, isExpired, refreshThreshold (e.g. 3, 1, 0)", "Image show/hide; animation class when showAnimation; isExpired or refreshCount >= refreshThreshold sets isRefreshExpired on illustration", "P1", "ConfigVariants", "Grouped boolean/config visual state"],
|
|
42
|
+
["UC-005", "Content props (copy and slots)", "refreshText, expiryTitle, refreshTitle, expiryDescription (string or node); prefix, suffix", "All text passed to illustration; prefix/suffix render before/after in same row", "P1", "ContentProps", "Grouped content and prefix/suffix"],
|
|
43
|
+
["UC-006", "Refresh interaction and expiry", "onRefreshClick, refreshThreshold, isApiErrorBoundary: false", "Click refresh → onRefreshClick called, refreshCount increments; refreshCount === refreshThreshold → isRefreshExpired; key updates so ErrorBoundary remounts", "P1", "RefreshInteraction", "Grouped click and threshold/remount"],
|
|
44
|
+
["UC-007", "SlideBox close interaction", "useSlideBox: true, onCloseSlideBox", "Closing slide box calls onCloseSlideBox; handleClose wired correctly", "P1", "SlideBoxClose", "Single interaction test"],
|
|
45
|
+
["UC-008", "Event handlers invoked", "errorHandler, onRefreshClick, onCloseSlideBox", "errorHandler called with error in fallbackRender; onRefreshClick on refresh; onCloseSlideBox when slide box closed", "P1", "EventHandlers", "Grouped all handler invocations"],
|
|
46
|
+
["UC-009", "Styling (className and slideBoxProps)", "className, slideBoxProps: { className }", "className on illustration container; slideBoxProps spread to CapSlideBox including className", "P2", "Styling", "Grouped className + slideBoxProps"],
|
|
47
|
+
["UC-010", "Default props and minimal usage", "No optional props (or only children)", "Defaults apply; component renders without error", "P1", "DefaultProps", "Sanity with defaults"],
|
|
48
|
+
["UC-011", "Edge: refreshThreshold 0 or 1", "refreshThreshold: 0 | 1, trigger refresh", "Expired state after 0 or 1 refresh click; no crash", "P2", "EdgeRefreshThreshold", "Production edge for quick expiry"],
|
|
49
|
+
["UC-012", "Edge: children null or valid content", "children: null | valid React node", "null children don't throw; valid children render until throw. API mode: children when isApiError false", "P2", "EdgeChildren", "Grouped empty/valid children"]
|
|
50
|
+
]
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
---
|
|
56
|
+
|
|
57
|
+
## Use Cases Table
|
|
58
|
+
|
|
59
|
+
| ID | Use Case | Props/Config | Expected Visual/Behavior | Priority | Storybook Story | Notes |
|
|
60
|
+
|----|----------|---------------|--------------------------|----------|-----------------|--------|
|
|
61
|
+
| UC-001 | React ErrorBoundary mode: child throws | children (component that throws), useSlideBox: false/true | Error boundary catches; fallbackRender runs; errorHandler(error) called; error illustration shows inline or inside CapSlideBox per useSlideBox | P0 | ReactErrorBoundaryMode | Core ErrorBoundary behavior |
|
|
62
|
+
| UC-002 | API error boundary mode | isApiErrorBoundary: true, isApiError: true \| false | When isApiError true: error illustration only (no ErrorBoundary wrapper). When false: children render. No ErrorBoundary when isApiErrorBoundary | P0 | ApiErrorBoundaryMode | Grouped isApiErrorBoundary + isApiError |
|
|
63
|
+
| UC-003 | SlideBox vs inline fallback | useSlideBox: true \| false, slideBoxProps (e.g. className) | useSlideBox true: fallback in CapSlideBox with show, content, handleClose, slideBoxProps spread. false: fallback is inline illustration only | P0 | SlideBoxVsInline | Grouped useSlideBox and slideBoxProps usage |
|
|
64
|
+
| UC-004 | Boolean and config variants | showIllustrationImage, showAnimation, isExpired, refreshThreshold (e.g. 3, 1, 0) | Illustration shows/hides image; animation class applied when showAnimation; isExpired or refreshCount >= refreshThreshold sets isRefreshExpired on CapErrorStateIllustration | P1 | ConfigVariants | Grouped all boolean/config that affect visual state |
|
|
65
|
+
| UC-005 | Content props (copy and slots) | refreshText, expiryTitle, refreshTitle, expiryDescription (string or node); prefix, suffix | All text/copy passed to CapErrorStateIllustration; prefix/suffix render before/after illustration in same row | P1 | ContentProps | Grouped all content and prefix/suffix |
|
|
66
|
+
| UC-006 | Refresh interaction and expiry | onRefreshClick, refreshThreshold, isApiErrorBoundary: false | Click refresh → onRefreshClick called, refreshCount increments; when refreshCount === refreshThreshold, isRefreshExpired true (expired state). When !isApiErrorBoundary, key updates so ErrorBoundary remounts | P1 | RefreshInteraction | Grouped click behavior and threshold/remount |
|
|
67
|
+
| UC-007 | SlideBox close interaction | useSlideBox: true, onCloseSlideBox | Closing slide box calls onCloseSlideBox; handleClose wired to onCloseSlideBox | P1 | SlideBoxClose | Single interaction test |
|
|
68
|
+
| UC-008 | Event handlers invoked | errorHandler, onRefreshClick, onCloseSlideBox | errorHandler called with error object in fallbackRender; onRefreshClick on refresh; onCloseSlideBox when slide box closed | P1 | EventHandlers | Grouped all handler invocations |
|
|
69
|
+
| UC-009 | Styling (className and slideBoxProps) | className, slideBoxProps: { className } | className on illustration container (CapRow); slideBoxProps spread to CapSlideBox including className for slide box | P2 | Styling | Grouped className + slideBoxProps styling |
|
|
70
|
+
| UC-010 | Default props and minimal usage | No optional props (or only children) | Defaults: empty strings for text, refreshThreshold 3, showIllustrationImage true, showAnimation true, useSlideBox false, isApiErrorBoundary false; component renders without error | P1 | DefaultProps | Sanity with defaults |
|
|
71
|
+
| UC-011 | Edge: refreshThreshold 0 or 1 | refreshThreshold: 0 \| 1, trigger refresh | Expired state (isRefreshExpired) after 0 or 1 refresh click; no crash | P2 | EdgeRefreshThreshold | Production edge for quick expiry |
|
|
72
|
+
| UC-012 | Edge: children null or valid content | children: null \| valid React node | With React ErrorBoundary: null children don’t throw; valid children render until throw. With API mode: children render when isApiError false | P2 | EdgeChildren | Grouped empty/valid children |
|
|
73
|
+
|
|
74
|
+
---
|
|
75
|
+
|
|
76
|
+
## Summary
|
|
77
|
+
|
|
78
|
+
- **Total use cases**: 12 (within medium limit of 20).
|
|
79
|
+
- **Grouping**: Config/boolean variants, content props, event handlers, styling, and edge cases each combined into single tests.
|
|
80
|
+
- **P0**: React vs API mode, SlideBox vs inline (3). **P1**: Config, content, refresh/slide interactions, handlers, defaults (6). **P2**: Styling, refreshThreshold edge, children edge (3).
|
|
81
|
+
- **Storybook stories**: ReactErrorBoundaryMode, ApiErrorBoundaryMode, SlideBoxVsInline, ConfigVariants, ContentProps, RefreshInteraction, SlideBoxClose, EventHandlers, Styling, DefaultProps, EdgeRefreshThreshold, EdgeChildren.
|
|
82
|
+
|
|
83
|
+
## Test Implementation Notes
|
|
84
|
+
|
|
85
|
+
- Use **React Testing Library** with **Jest**.
|
|
86
|
+
- Prefer `data-testid` for querying (add to component if needed).
|
|
87
|
+
- Clear mocks between tests where applicable.
|
|
88
|
+
- Do **not** mock Cap UI components (e.g. CapErrorStateIllustration, CapSlideBox, CapRow) unless instructed.
|
|
89
|
+
- Avoid relying on getByRole where avoidable; keep tests focused and not overly complex.
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
# CapErrorBoundary
|
|
2
|
+
|
|
3
|
+
A wrapper component that provides error boundary functionality for React applications, catching JavaScript errors anywhere in the child component tree and displaying a fallback UI.
|
|
4
|
+
|
|
5
|
+
## Migration from Ant Design v3 to v6
|
|
6
|
+
|
|
7
|
+
This component has been migrated from Ant Design v3 to v6 with the following changes:
|
|
8
|
+
|
|
9
|
+
### Breaking Changes
|
|
10
|
+
|
|
11
|
+
**None** - The component maintains full backward compatibility. No API changes were made.
|
|
12
|
+
|
|
13
|
+
### Style Changes
|
|
14
|
+
|
|
15
|
+
**Approach**: The component now uses CSS Modules with the `styles[classname]` pattern instead of global class names. All styling remains functionally identical.
|
|
16
|
+
|
|
17
|
+
### Code Improvements
|
|
18
|
+
|
|
19
|
+
1. **Removed PropTypes**: Replaced with TypeScript types from `types.ts`
|
|
20
|
+
2. **Removed defaultProps**: Converted to default parameters in function arguments
|
|
21
|
+
3. **TypeScript support**: Full TypeScript type definitions with proper types
|
|
22
|
+
4. **CSS Modules**: Using `styles[classname]` pattern for scoped styling
|
|
23
|
+
|
|
24
|
+
### What Stayed the Same
|
|
25
|
+
|
|
26
|
+
- All component props and behavior
|
|
27
|
+
- Error boundary functionality (React ErrorBoundary mode)
|
|
28
|
+
- API error boundary mode (`isApiErrorBoundary` prop)
|
|
29
|
+
- Slide box vs inline fallback rendering
|
|
30
|
+
- Refresh threshold and expiry logic
|
|
31
|
+
- Animation support
|
|
32
|
+
- Prefix/suffix content slots
|
|
33
|
+
- All event handlers
|
|
34
|
+
|
|
35
|
+
### What Changed
|
|
36
|
+
|
|
37
|
+
- **Removed**: `PropTypes` (replaced with TypeScript types)
|
|
38
|
+
- **Removed**: `defaultProps` (replaced with default parameters)
|
|
39
|
+
- **Updated**: CSS class names now use CSS Modules pattern
|
|
40
|
+
- **Added**: TypeScript type definitions in `types.ts`
|
|
41
|
+
- **Added**: CSS Modules for scoped styling
|
|
42
|
+
|
|
43
|
+
## Usage
|
|
44
|
+
|
|
45
|
+
### Basic Usage (React ErrorBoundary Mode)
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
import CapErrorBoundary from '@capillarytech/blaze-ui/components/CapErrorBoundary';
|
|
49
|
+
|
|
50
|
+
function App() {
|
|
51
|
+
return (
|
|
52
|
+
<CapErrorBoundary>
|
|
53
|
+
<YourComponent />
|
|
54
|
+
</CapErrorBoundary>
|
|
55
|
+
);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### With Custom Error Handler
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<CapErrorBoundary
|
|
63
|
+
errorHandler={(error) => {
|
|
64
|
+
console.error('Error caught:', error);
|
|
65
|
+
// Send to error tracking service
|
|
66
|
+
}}
|
|
67
|
+
>
|
|
68
|
+
<YourComponent />
|
|
69
|
+
</CapErrorBoundary>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### API Error Boundary Mode
|
|
73
|
+
|
|
74
|
+
```tsx
|
|
75
|
+
<CapErrorBoundary
|
|
76
|
+
isApiErrorBoundary
|
|
77
|
+
isApiError={hasApiError}
|
|
78
|
+
>
|
|
79
|
+
<YourComponent />
|
|
80
|
+
</CapErrorBoundary>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### With Slide Box
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
<CapErrorBoundary
|
|
87
|
+
useSlideBox
|
|
88
|
+
onCloseSlideBox={() => {
|
|
89
|
+
console.log('Slide box closed');
|
|
90
|
+
}}
|
|
91
|
+
>
|
|
92
|
+
<YourComponent />
|
|
93
|
+
</CapErrorBoundary>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### With Custom Content
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
<CapErrorBoundary
|
|
100
|
+
refreshText="Try Again"
|
|
101
|
+
refreshTitle="Something went wrong"
|
|
102
|
+
expiryTitle="Refresh limit reached"
|
|
103
|
+
expiryDescription="Please contact support"
|
|
104
|
+
prefix={<CustomHeader />}
|
|
105
|
+
suffix={<CustomFooter />}
|
|
106
|
+
>
|
|
107
|
+
<YourComponent />
|
|
108
|
+
</CapErrorBoundary>
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Props
|
|
112
|
+
|
|
113
|
+
| Prop | Type | Default | Description |
|
|
114
|
+
|------|------|---------|-------------|
|
|
115
|
+
| `children` | `React.ReactNode` | - | Child components to wrap with error boundary |
|
|
116
|
+
| `className` | `string` | `''` | Additional CSS class name |
|
|
117
|
+
| `isExpired` | `boolean` | `false` | Whether the refresh action has expired |
|
|
118
|
+
| `isApiError` | `boolean` | `false` | Whether to show API error state (only used when `isApiErrorBoundary` is true) |
|
|
119
|
+
| `refreshText` | `string \| React.ReactNode` | `''` | Text to display for refresh action |
|
|
120
|
+
| `expiryTitle` | `string \| React.ReactNode` | `''` | Title to display when refresh has expired |
|
|
121
|
+
| `refreshTitle` | `string \| React.ReactNode` | `''` | Title to display for refresh action |
|
|
122
|
+
| `useSlideBox` | `boolean` | `false` | Whether to display error in a slide box instead of inline |
|
|
123
|
+
| `errorHandler` | `(error: Error) => void` | `() => {}` | Handler called when an error is caught |
|
|
124
|
+
| `slideBoxProps` | `Record<string, unknown>` | `{}` | Props to pass to CapSlideBox when `useSlideBox` is true |
|
|
125
|
+
| `onRefreshClick` | `() => void` | `() => {}` | Handler called when refresh button is clicked |
|
|
126
|
+
| `onCloseSlideBox` | `() => void` | `() => {}` | Handler called when slide box is closed |
|
|
127
|
+
| `refreshThreshold` | `number` | `3` | Number of refresh clicks before showing expired state |
|
|
128
|
+
| `expiryDescription` | `string \| React.ReactNode` | `''` | Description to display when refresh has expired |
|
|
129
|
+
| `isApiErrorBoundary` | `boolean` | `false` | Whether to use API error boundary mode (shows error based on `isApiError` prop instead of catching React errors) |
|
|
130
|
+
| `showIllustrationImage` | `boolean` | `true` | Whether to show illustration image |
|
|
131
|
+
| `prefix` | `string \| React.ReactNode` | `''` | Content to render before the error illustration |
|
|
132
|
+
| `suffix` | `string \| React.ReactNode` | `''` | Content to render after the error illustration |
|
|
133
|
+
| `showAnimation` | `boolean` | `true` | Whether to show animation when error illustration appears |
|
|
134
|
+
|
|
135
|
+
## Modes
|
|
136
|
+
|
|
137
|
+
### React ErrorBoundary Mode (Default)
|
|
138
|
+
|
|
139
|
+
When `isApiErrorBoundary` is `false` (default), the component wraps children with React's `ErrorBoundary` from `react-error-boundary`. This catches JavaScript errors during rendering, in lifecycle methods, and in constructors of the whole tree below.
|
|
140
|
+
|
|
141
|
+
### API Error Boundary Mode
|
|
142
|
+
|
|
143
|
+
When `isApiErrorBoundary` is `true`, the component does not use React's ErrorBoundary. Instead, it conditionally renders the error illustration based on the `isApiError` prop. This is useful for handling API errors that don't cause React component errors.
|
|
144
|
+
|
|
145
|
+
## Notes
|
|
146
|
+
|
|
147
|
+
- The component uses `react-error-boundary` library for React error boundary functionality
|
|
148
|
+
- When refresh is clicked in React ErrorBoundary mode, the component remounts the ErrorBoundary by updating its key
|
|
149
|
+
- The refresh count is tracked internally and compared against `refreshThreshold` to determine expired state
|
|
150
|
+
- All additional props passed to `CapErrorBoundary` are spread to `CapErrorStateIllustration`
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapErrorBoundary/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAEhD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2FrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -8340,15 +8340,13 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
|
|
|
8340
8340
|
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
|
|
8341
8341
|
var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
|
|
8342
8342
|
// Module
|
|
8343
|
-
___CSS_LOADER_EXPORT___.push([module.id, `@keyframes errorBoundarySlide{from{transform:translateY(30%)}to{transform:translateY(0%)}}.
|
|
8343
|
+
___CSS_LOADER_EXPORT___.push([module.id, `@keyframes errorBoundarySlide{from{transform:translateY(30%)}to{transform:translateY(0%)}}.illustrationAnimation{position:relative;animation:errorBoundarySlide .3s ease}.slideBox .cap-slide-box-v2-container .slidebox-content-container{overflow:hidden}.illustrationContainer{height:100%;width:100%}`, ""]);
|
|
8344
8344
|
// Exports
|
|
8345
8345
|
___CSS_LOADER_EXPORT___.locals = {
|
|
8346
|
-
"
|
|
8346
|
+
"illustrationAnimation": `illustrationAnimation`,
|
|
8347
8347
|
"errorBoundarySlide": `errorBoundarySlide`,
|
|
8348
|
-
"
|
|
8349
|
-
"
|
|
8350
|
-
"slidebox-content-container": `slidebox-content-container`,
|
|
8351
|
-
"cap-error-boundary-illustration-container": `cap-error-boundary-illustration-container`
|
|
8348
|
+
"slideBox": `slideBox`,
|
|
8349
|
+
"illustrationContainer": `illustrationContainer`
|
|
8352
8350
|
};
|
|
8353
8351
|
module.exports = ___CSS_LOADER_EXPORT___;
|
|
8354
8352
|
|
|
@@ -16849,15 +16847,15 @@ var exports = __webpack_exports__;
|
|
|
16849
16847
|
exports.__esModule = true;
|
|
16850
16848
|
exports["default"] = void 0;
|
|
16851
16849
|
var _classnames = _interopRequireDefault(__webpack_require__(46942));
|
|
16852
|
-
var _propTypes = _interopRequireDefault(__webpack_require__(43363));
|
|
16853
16850
|
var _react = _interopRequireWildcard(__webpack_require__(9206));
|
|
16854
16851
|
var _reactErrorBoundary = __webpack_require__(59263);
|
|
16855
16852
|
var _CapErrorStateIllustration = _interopRequireDefault(__webpack_require__(30988));
|
|
16856
16853
|
var _CapRow = _interopRequireDefault(__webpack_require__(69813));
|
|
16857
16854
|
var _CapSlideBox = _interopRequireDefault(__webpack_require__(70225));
|
|
16858
|
-
__webpack_require__(26909);
|
|
16855
|
+
var _styles = _interopRequireDefault(__webpack_require__(26909));
|
|
16859
16856
|
var _jsxRuntime = __webpack_require__(74848);
|
|
16860
|
-
const _excluded = ["children", "className", "isExpired", "isApiError", "refreshText", "expiryTitle", "useSlideBox", "
|
|
16857
|
+
const _excluded = ["children", "className", "isExpired", "isApiError", "refreshText", "expiryTitle", "refreshTitle", "useSlideBox", "header", "errorHandler", "slideBoxProps", "onRefreshClick", "onCloseSlideBox", "refreshThreshold", "expiryDescription", "isApiErrorBoundary", "showIllustrationImage", "prefix", "suffix", "showAnimation"],
|
|
16858
|
+
_excluded2 = ["className", "header"];
|
|
16861
16859
|
/**
|
|
16862
16860
|
*
|
|
16863
16861
|
* CapErrorBoundary
|
|
@@ -16870,24 +16868,25 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
|
|
|
16870
16868
|
const CapErrorBoundary = _ref => {
|
|
16871
16869
|
let {
|
|
16872
16870
|
children,
|
|
16873
|
-
className,
|
|
16874
|
-
isExpired,
|
|
16875
|
-
isApiError,
|
|
16876
|
-
refreshText,
|
|
16877
|
-
expiryTitle,
|
|
16878
|
-
|
|
16879
|
-
|
|
16880
|
-
|
|
16881
|
-
|
|
16882
|
-
|
|
16883
|
-
|
|
16884
|
-
|
|
16885
|
-
|
|
16886
|
-
|
|
16887
|
-
|
|
16888
|
-
|
|
16889
|
-
|
|
16890
|
-
|
|
16871
|
+
className = '',
|
|
16872
|
+
isExpired = false,
|
|
16873
|
+
isApiError = false,
|
|
16874
|
+
refreshText = '',
|
|
16875
|
+
expiryTitle = '',
|
|
16876
|
+
refreshTitle = '',
|
|
16877
|
+
useSlideBox = false,
|
|
16878
|
+
header,
|
|
16879
|
+
errorHandler = () => {},
|
|
16880
|
+
slideBoxProps = {},
|
|
16881
|
+
onRefreshClick = () => {},
|
|
16882
|
+
onCloseSlideBox = () => {},
|
|
16883
|
+
refreshThreshold = 3,
|
|
16884
|
+
expiryDescription = '',
|
|
16885
|
+
isApiErrorBoundary = false,
|
|
16886
|
+
showIllustrationImage = true,
|
|
16887
|
+
prefix = '',
|
|
16888
|
+
suffix = '',
|
|
16889
|
+
showAnimation = true
|
|
16891
16890
|
} = _ref,
|
|
16892
16891
|
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
16893
16892
|
const [refreshCount, setRefreshCount] = (0, _react.useState)(0);
|
|
@@ -16900,10 +16899,10 @@ const CapErrorBoundary = _ref => {
|
|
|
16900
16899
|
}
|
|
16901
16900
|
};
|
|
16902
16901
|
const errorStateIllustration = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
|
|
16903
|
-
className: (0, _classnames.default)(
|
|
16902
|
+
className: (0, _classnames.default)(_styles.default.illustrationContainer, className),
|
|
16904
16903
|
children: [prefix, /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapErrorStateIllustration.default, _extends({
|
|
16905
16904
|
className: (0, _classnames.default)({
|
|
16906
|
-
|
|
16905
|
+
[_styles.default.illustrationAnimation]: showAnimation
|
|
16907
16906
|
}),
|
|
16908
16907
|
refreshText: refreshText,
|
|
16909
16908
|
expiryTitle: expiryTitle,
|
|
@@ -16920,15 +16919,22 @@ const CapErrorBoundary = _ref => {
|
|
|
16920
16919
|
} = _ref2;
|
|
16921
16920
|
errorHandler(error);
|
|
16922
16921
|
if (useSlideBox) {
|
|
16923
|
-
const
|
|
16924
|
-
|
|
16925
|
-
|
|
16922
|
+
const _ref3 = slideBoxProps,
|
|
16923
|
+
{
|
|
16924
|
+
className: slideBoxClassName,
|
|
16925
|
+
header: slideBoxHeaderProp = ''
|
|
16926
|
+
} = _ref3,
|
|
16927
|
+
restSlideBoxProps = _objectWithoutPropertiesLoose(_ref3, _excluded2);
|
|
16928
|
+
// Priority: 1) header prop, 2) slideBoxProps.header, 3) undefined if both not found
|
|
16929
|
+
const slideBoxHeader = header !== undefined ? header : slideBoxHeaderProp;
|
|
16926
16930
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapSlideBox.default, _extends({
|
|
16927
16931
|
show: true,
|
|
16932
|
+
header: slideBoxHeader //added header here because header is required prop in CapSlideBox
|
|
16933
|
+
,
|
|
16928
16934
|
content: errorStateIllustration,
|
|
16929
16935
|
handleClose: onCloseSlideBox,
|
|
16930
|
-
className: (0, _classnames.default)(
|
|
16931
|
-
},
|
|
16936
|
+
className: (0, _classnames.default)(_styles.default.slideBox, slideBoxClassName)
|
|
16937
|
+
}, restSlideBoxProps));
|
|
16932
16938
|
}
|
|
16933
16939
|
return errorStateIllustration;
|
|
16934
16940
|
};
|
|
@@ -16939,47 +16945,6 @@ const CapErrorBoundary = _ref => {
|
|
|
16939
16945
|
}), isApiErrorBoundary && (isApiError ? errorStateIllustration : children)]
|
|
16940
16946
|
}, updatedKey);
|
|
16941
16947
|
};
|
|
16942
|
-
CapErrorBoundary.defaultProps = {
|
|
16943
|
-
className: '',
|
|
16944
|
-
refreshText: '',
|
|
16945
|
-
expiryTitle: '',
|
|
16946
|
-
refreshTitle: '',
|
|
16947
|
-
isExpired: false,
|
|
16948
|
-
isApiError: false,
|
|
16949
|
-
slideBoxProps: {},
|
|
16950
|
-
useSlideBox: false,
|
|
16951
|
-
refreshThreshold: 3,
|
|
16952
|
-
expiryDescription: '',
|
|
16953
|
-
errorHandler: () => {},
|
|
16954
|
-
onRefreshClick: () => {},
|
|
16955
|
-
onCloseSlideBox: () => {},
|
|
16956
|
-
isApiErrorBoundary: false,
|
|
16957
|
-
showIllustrationImage: true,
|
|
16958
|
-
prefix: '',
|
|
16959
|
-
suffix: '',
|
|
16960
|
-
showAnimation: true
|
|
16961
|
-
};
|
|
16962
|
-
CapErrorBoundary.propTypes = {
|
|
16963
|
-
children: _propTypes.default.node,
|
|
16964
|
-
isExpired: _propTypes.default.bool,
|
|
16965
|
-
isApiError: _propTypes.default.bool,
|
|
16966
|
-
className: _propTypes.default.string,
|
|
16967
|
-
useSlideBox: _propTypes.default.bool,
|
|
16968
|
-
errorHandler: _propTypes.default.func,
|
|
16969
|
-
onRefreshClick: _propTypes.default.func,
|
|
16970
|
-
onCloseSlideBox: _propTypes.default.func,
|
|
16971
|
-
slideBoxProps: _propTypes.default.object,
|
|
16972
|
-
refreshThreshold: _propTypes.default.number,
|
|
16973
|
-
isApiErrorBoundary: _propTypes.default.bool,
|
|
16974
|
-
showIllustrationImage: _propTypes.default.bool,
|
|
16975
|
-
showAnimation: _propTypes.default.bool,
|
|
16976
|
-
refreshText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
16977
|
-
expiryTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
16978
|
-
refreshTitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
16979
|
-
expiryDescription: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
16980
|
-
prefix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
16981
|
-
suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
|
|
16982
|
-
};
|
|
16983
16948
|
var _default = exports["default"] = CapErrorBoundary;
|
|
16984
16949
|
})();
|
|
16985
16950
|
|