@j2inn/fin5-ui-utils 6.0.3 → 6.0.5-beta.0
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/README.md +5 -5
- package/dist/fantomProps/createFin5Props/index.d.ts +12 -12
- package/dist/fantomProps/createFin5Props/index.js +146 -146
- package/dist/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
- package/dist/fantomProps/createFin5Props/runCreateFin5Props.js +16 -16
- package/dist/fantomProps/fantomPropsToObject.d.ts +8 -8
- package/dist/fantomProps/fantomPropsToObject.js +183 -183
- package/dist/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
- package/dist/fantomProps/generateJsonFromFantomPropsFile.js +41 -41
- package/dist/fantomProps/localePropsToJson.d.ts +1 -1
- package/dist/fantomProps/localePropsToJson.js +50 -50
- package/dist/fantomProps/readFantomPropsFile.d.ts +5 -5
- package/dist/fantomProps/readFantomPropsFile.js +66 -61
- package/dist/fantomProps/readFantomPropsFile.js.map +1 -1
- package/dist/fin5Top/fin5FileUpload.d.ts +24 -24
- package/dist/fin5Top/fin5FileUpload.js +51 -51
- package/dist/fin5Top/fin5Top.d.ts +124 -124
- package/dist/fin5Top/fin5Top.js +53 -53
- package/dist/fin5Top/finEdge2Cloud.d.ts +6 -6
- package/dist/fin5Top/finEdge2Cloud.js +15 -15
- package/dist/fin5Top/getFin5BinUrl.d.ts +2 -2
- package/dist/fin5Top/getFin5BinUrl.js +9 -9
- package/dist/fin5Top/openFin5Alarm.d.ts +22 -22
- package/dist/fin5Top/openFin5Alarm.js +23 -23
- package/dist/fin5Top/openFin5Historian.d.ts +3 -3
- package/dist/fin5Top/openFin5Historian.js +19 -19
- package/dist/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
- package/dist/fin5Top/useFin5AppURLHashParameter.js +133 -133
- package/dist/index.d.ts +35 -35
- package/dist/index.js +69 -69
- package/dist/jobs/jobUtils.d.ts +14 -14
- package/dist/jobs/jobUtils.js +15 -15
- package/dist/react/app/Fin5AppContainer.d.ts +36 -36
- package/dist/react/app/Fin5AppContainer.js +102 -102
- package/dist/react/app/Fin5AppContainer.js.map +1 -1
- package/dist/react/app/Fin5AppRootStore.d.ts +40 -38
- package/dist/react/app/Fin5AppRootStore.js +69 -68
- package/dist/react/app/Fin5AppRootStore.js.map +1 -1
- package/dist/react/components/ErrorBoundary.d.ts +57 -57
- package/dist/react/components/ErrorBoundary.js +150 -150
- package/dist/react/components/ErrorDisplayer.d.ts +19 -19
- package/dist/react/components/ErrorDisplayer.js +36 -36
- package/dist/react/components/Loader.d.ts +9 -9
- package/dist/react/components/Loader.js +17 -17
- package/dist/react/components/LoadingSpinner.d.ts +2 -2
- package/dist/react/components/LoadingSpinner.js +27 -27
- package/dist/react/components/RecordImage.d.ts +20 -20
- package/dist/react/components/RecordImage.js +51 -51
- package/dist/react/components/charts/QRCode.d.ts +25 -25
- package/dist/react/components/charts/QRCode.js +82 -82
- package/dist/react/components/charts/line-bar/Chart.d.ts +166 -166
- package/dist/react/components/charts/line-bar/Chart.js +442 -442
- package/dist/react/components/charts/line-bar/HGridChart.d.ts +58 -58
- package/dist/react/components/charts/line-bar/HGridChart.js +285 -285
- package/dist/react/components/charts/pie/PieChart.d.ts +94 -94
- package/dist/react/components/charts/pie/PieChart.js +204 -204
- package/dist/react/components/charts/pie/SimplePieChart.d.ts +21 -21
- package/dist/react/components/charts/pie/SimplePieChart.js +55 -55
- package/dist/react/components/graphics/GraphicViewer.d.ts +10 -10
- package/dist/react/components/graphics/GraphicViewer.js +29 -29
- package/dist/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
- package/dist/react/components/graphics/GraphicsTabViewer.js +90 -90
- package/dist/react/components/makeCustomElement.d.ts +16 -16
- package/dist/react/components/makeCustomElement.js +150 -150
- package/dist/react/components/navigation/BasicLayout.d.ts +41 -41
- package/dist/react/components/navigation/BasicLayout.js +155 -155
- package/dist/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
- package/dist/react/components/navigation/HeaderSiderLayout.js +110 -110
- package/dist/react/components/navigation/MenuPage.d.ts +37 -37
- package/dist/react/components/navigation/MenuPage.js +36 -36
- package/dist/react/components/navigation/MenuTrigger.d.ts +9 -9
- package/dist/react/components/navigation/MenuTrigger.js +33 -33
- package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
- package/dist/react/components/navigation/ReactRouterHeaderSiderLayout.js +25 -25
- package/dist/react/components/navigation/ReactRouterLayout.d.ts +46 -46
- package/dist/react/components/navigation/ReactRouterLayout.js +132 -132
- package/dist/react/components/navigation/customRouting/Router.d.ts +12 -12
- package/dist/react/components/navigation/customRouting/Router.js +45 -45
- package/dist/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
- package/dist/react/components/navigation/customRouting/RouterLayout.js +61 -61
- package/dist/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
- package/dist/react/components/resolvable/configurationForm/ConfigurationForm.js +95 -95
- package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
- package/dist/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +88 -88
- package/dist/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
- package/dist/react/components/resolvable/configurationForm/getSectionDefault.js +99 -99
- package/dist/react/hooks/useFin5BinUrl.d.ts +6 -6
- package/dist/react/hooks/useFin5BinUrl.js +15 -15
- package/dist/react/hooks/useFin5ColorScheme.d.ts +2 -2
- package/dist/react/hooks/useFin5ColorScheme.js +49 -49
- package/dist/react/hooks/useScreenSize.d.ts +7 -7
- package/dist/react/hooks/useScreenSize.js +31 -31
- package/dist_es/fantomProps/createFin5Props/index.d.ts +12 -12
- package/dist_es/fantomProps/createFin5Props/index.js +140 -140
- package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.d.ts +2 -2
- package/dist_es/fantomProps/createFin5Props/runCreateFin5Props.js +11 -11
- package/dist_es/fantomProps/fantomPropsToObject.d.ts +8 -8
- package/dist_es/fantomProps/fantomPropsToObject.js +178 -178
- package/dist_es/fantomProps/generateJsonFromFantomPropsFile.d.ts +4 -4
- package/dist_es/fantomProps/generateJsonFromFantomPropsFile.js +12 -12
- package/dist_es/fantomProps/localePropsToJson.d.ts +1 -1
- package/dist_es/fantomProps/localePropsToJson.js +21 -21
- package/dist_es/fantomProps/readFantomPropsFile.d.ts +5 -5
- package/dist_es/fantomProps/readFantomPropsFile.js +40 -35
- package/dist_es/fantomProps/readFantomPropsFile.js.map +1 -1
- package/dist_es/fin5Top/fin5FileUpload.d.ts +24 -24
- package/dist_es/fin5Top/fin5FileUpload.js +47 -47
- package/dist_es/fin5Top/fin5Top.d.ts +124 -124
- package/dist_es/fin5Top/fin5Top.js +49 -49
- package/dist_es/fin5Top/finEdge2Cloud.d.ts +6 -6
- package/dist_es/fin5Top/finEdge2Cloud.js +11 -11
- package/dist_es/fin5Top/getFin5BinUrl.d.ts +2 -2
- package/dist_es/fin5Top/getFin5BinUrl.js +5 -5
- package/dist_es/fin5Top/openFin5Alarm.d.ts +22 -22
- package/dist_es/fin5Top/openFin5Alarm.js +19 -19
- package/dist_es/fin5Top/openFin5Historian.d.ts +3 -3
- package/dist_es/fin5Top/openFin5Historian.js +15 -15
- package/dist_es/fin5Top/useFin5AppURLHashParameter.d.ts +18 -18
- package/dist_es/fin5Top/useFin5AppURLHashParameter.js +124 -124
- package/dist_es/index.d.ts +35 -35
- package/dist_es/index.js +53 -53
- package/dist_es/jobs/jobUtils.d.ts +14 -14
- package/dist_es/jobs/jobUtils.js +9 -9
- package/dist_es/react/app/Fin5AppContainer.d.ts +36 -36
- package/dist_es/react/app/Fin5AppContainer.js +73 -73
- package/dist_es/react/app/Fin5AppContainer.js.map +1 -1
- package/dist_es/react/app/Fin5AppContainer.jsx +82 -0
- package/dist_es/react/app/Fin5AppContainer.jsx.map +1 -0
- package/dist_es/react/app/Fin5AppRootStore.d.ts +40 -38
- package/dist_es/react/app/Fin5AppRootStore.js +65 -64
- package/dist_es/react/app/Fin5AppRootStore.js.map +1 -1
- package/dist_es/react/components/ErrorBoundary.d.ts +57 -57
- package/dist_es/react/components/ErrorBoundary.js +123 -123
- package/dist_es/react/components/ErrorBoundary.jsx +150 -0
- package/dist_es/react/components/ErrorBoundary.jsx.map +1 -0
- package/dist_es/react/components/ErrorDisplayer.d.ts +19 -19
- package/dist_es/react/components/ErrorDisplayer.js +28 -28
- package/dist_es/react/components/ErrorDisplayer.jsx +36 -0
- package/dist_es/react/components/ErrorDisplayer.jsx.map +1 -0
- package/dist_es/react/components/Loader.d.ts +9 -9
- package/dist_es/react/components/Loader.js +12 -12
- package/dist_es/react/components/Loader.jsx +13 -0
- package/dist_es/react/components/Loader.jsx.map +1 -0
- package/dist_es/react/components/LoadingSpinner.d.ts +2 -2
- package/dist_es/react/components/LoadingSpinner.js +20 -20
- package/dist_es/react/components/LoadingSpinner.jsx +22 -0
- package/dist_es/react/components/LoadingSpinner.jsx.map +1 -0
- package/dist_es/react/components/RecordImage.d.ts +20 -20
- package/dist_es/react/components/RecordImage.js +24 -24
- package/dist_es/react/components/charts/QRCode.d.ts +25 -25
- package/dist_es/react/components/charts/QRCode.js +52 -52
- package/dist_es/react/components/charts/line-bar/Chart.d.ts +166 -166
- package/dist_es/react/components/charts/line-bar/Chart.js +415 -415
- package/dist_es/react/components/charts/line-bar/HGridChart.d.ts +58 -58
- package/dist_es/react/components/charts/line-bar/HGridChart.js +250 -250
- package/dist_es/react/components/charts/line-bar/ZincGridChart.d.ts +12 -0
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js +17 -0
- package/dist_es/react/components/charts/line-bar/ZincGridChart.js.map +1 -0
- package/dist_es/react/components/charts/pie/PieChart.d.ts +94 -94
- package/dist_es/react/components/charts/pie/PieChart.js +177 -177
- package/dist_es/react/components/charts/pie/SimplePieChart.d.ts +21 -21
- package/dist_es/react/components/charts/pie/SimplePieChart.js +25 -25
- package/dist_es/react/components/graphics/GraphicViewer.d.ts +10 -10
- package/dist_es/react/components/graphics/GraphicViewer.js +22 -22
- package/dist_es/react/components/graphics/GraphicViewer.jsx +23 -0
- package/dist_es/react/components/graphics/GraphicViewer.jsx.map +1 -0
- package/dist_es/react/components/graphics/GraphicsTabViewer.d.ts +17 -17
- package/dist_es/react/components/graphics/GraphicsTabViewer.js +60 -60
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx +63 -0
- package/dist_es/react/components/graphics/GraphicsTabViewer.jsx.map +1 -0
- package/dist_es/react/components/makeCustomElement.d.ts +16 -16
- package/dist_es/react/components/makeCustomElement.js +142 -142
- package/dist_es/react/components/navigation/BasicLayout.d.ts +41 -41
- package/dist_es/react/components/navigation/BasicLayout.js +124 -124
- package/dist_es/react/components/navigation/BasicLayout.jsx +133 -0
- package/dist_es/react/components/navigation/BasicLayout.jsx.map +1 -0
- package/dist_es/react/components/navigation/HeaderSiderLayout.d.ts +13 -13
- package/dist_es/react/components/navigation/HeaderSiderLayout.js +80 -80
- package/dist_es/react/components/navigation/MenuPage.d.ts +37 -37
- package/dist_es/react/components/navigation/MenuPage.js +30 -30
- package/dist_es/react/components/navigation/MenuPage.jsx +31 -0
- package/dist_es/react/components/navigation/MenuPage.jsx.map +1 -0
- package/dist_es/react/components/navigation/MenuTrigger.d.ts +9 -9
- package/dist_es/react/components/navigation/MenuTrigger.js +28 -28
- package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.d.ts +11 -11
- package/dist_es/react/components/navigation/ReactRouterHeaderSiderLayout.js +18 -18
- package/dist_es/react/components/navigation/ReactRouterLayout.d.ts +46 -46
- package/dist_es/react/components/navigation/ReactRouterLayout.js +99 -99
- package/dist_es/react/components/navigation/Router.d.ts +12 -0
- package/dist_es/react/components/navigation/Router.js +19 -0
- package/dist_es/react/components/navigation/Router.js.map +1 -0
- package/dist_es/react/components/navigation/Router.jsx +19 -0
- package/dist_es/react/components/navigation/Router.jsx.map +1 -0
- package/dist_es/react/components/navigation/customRouting/Router.d.ts +12 -12
- package/dist_es/react/components/navigation/customRouting/Router.js +18 -18
- package/dist_es/react/components/navigation/customRouting/RouterLayout.d.ts +11 -11
- package/dist_es/react/components/navigation/customRouting/RouterLayout.js +34 -34
- package/dist_es/react/components/navigation/react-router/BasicLayout.d.ts +23 -0
- package/dist_es/react/components/navigation/react-router/BasicLayout.js +82 -0
- package/dist_es/react/components/navigation/react-router/BasicLayout.js.map +1 -0
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.d.ts +24 -0
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js +82 -0
- package/dist_es/react/components/navigation/react-router/ReactRouterBasicLayout.js.map +1 -0
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.d.ts +27 -27
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationForm.js +64 -64
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.d.ts +16 -16
- package/dist_es/react/components/resolvable/configurationForm/ConfigurationFormEntry.js +58 -58
- package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.d.ts +16 -16
- package/dist_es/react/components/resolvable/configurationForm/getSectionDefault.js +94 -94
- package/dist_es/react/hooks/useFin5BinUrl.d.ts +6 -6
- package/dist_es/react/hooks/useFin5BinUrl.js +11 -11
- package/dist_es/react/hooks/useFin5ColorScheme.d.ts +2 -2
- package/dist_es/react/hooks/useFin5ColorScheme.js +45 -45
- package/dist_es/react/hooks/useScreenSize.d.ts +7 -7
- package/dist_es/react/hooks/useScreenSize.js +27 -27
- package/package.json +2 -2
|
@@ -1,124 +1,124 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
-
*/
|
|
4
|
-
import React, { useState } from 'react';
|
|
5
|
-
import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
|
|
6
|
-
import { usei18n } from '@j2inn/utils';
|
|
7
|
-
import { createUseStyles, useTheme } from 'react-jss';
|
|
8
|
-
const boundryStyles = createUseStyles((theme) => ({
|
|
9
|
-
errorBoundry: {
|
|
10
|
-
backgroundColor: theme.bodyBg,
|
|
11
|
-
flex: `1 1 auto`,
|
|
12
|
-
},
|
|
13
|
-
boundryContainer: {
|
|
14
|
-
margin: '0 auto',
|
|
15
|
-
flex: `1 1 auto`,
|
|
16
|
-
padding: `2rem`,
|
|
17
|
-
maxWidth: 1024,
|
|
18
|
-
backgroundColor: theme.bgColor,
|
|
19
|
-
[`& h1, & h3`]: {
|
|
20
|
-
paddingBottom: `1rem`,
|
|
21
|
-
},
|
|
22
|
-
},
|
|
23
|
-
errorDetails: {
|
|
24
|
-
[`& pre`]: {
|
|
25
|
-
overflow: 'auto',
|
|
26
|
-
marginTop: '1rem',
|
|
27
|
-
backgroundColor: ColorVals.Black,
|
|
28
|
-
color: ColorVals.White,
|
|
29
|
-
padding: '0.3rem',
|
|
30
|
-
},
|
|
31
|
-
},
|
|
32
|
-
}));
|
|
33
|
-
function get(i18n, key, fallback) {
|
|
34
|
-
return i18n.has(key) ? i18n.get(key) : fallback;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* Format an error message into something more useful for the clipboard.
|
|
38
|
-
*/
|
|
39
|
-
function formatErrorMessage(error, appId) {
|
|
40
|
-
return JSON.stringify({
|
|
41
|
-
timestamp: new Date().toISOString(),
|
|
42
|
-
appId: appId ?? '',
|
|
43
|
-
location: location.href,
|
|
44
|
-
navigator: {
|
|
45
|
-
cookieEnabled: navigator.cookieEnabled,
|
|
46
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
-
deviceMemory: navigator.deviceMemory,
|
|
48
|
-
language: navigator.language,
|
|
49
|
-
languages: navigator.languages,
|
|
50
|
-
onLine: navigator.onLine,
|
|
51
|
-
userAgent: navigator.userAgent,
|
|
52
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
53
|
-
userAgentData: navigator.userAgentData,
|
|
54
|
-
vendor: navigator.vendor,
|
|
55
|
-
},
|
|
56
|
-
error: String(error.stack),
|
|
57
|
-
}, null, 2);
|
|
58
|
-
}
|
|
59
|
-
/**
|
|
60
|
-
* Shows the internal error details to a user.
|
|
61
|
-
*/
|
|
62
|
-
const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
|
|
63
|
-
const i18n = usei18n();
|
|
64
|
-
const classes = boundryStyles();
|
|
65
|
-
const theme = useTheme();
|
|
66
|
-
const copyToClipboard = () => {
|
|
67
|
-
navigator.clipboard.writeText(formatErrorMessage(error, appId));
|
|
68
|
-
Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
|
|
69
|
-
};
|
|
70
|
-
return (React.createElement("div", { className: classes.errorDetails },
|
|
71
|
-
React.createElement(Checkbox, { onChange: (e) => {
|
|
72
|
-
setShowDetails(e.target.checked);
|
|
73
|
-
}, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
|
|
74
|
-
showDetails && (React.createElement(React.Fragment, null,
|
|
75
|
-
React.createElement("pre", null, error.stack),
|
|
76
|
-
React.createElement(Container, { horizontal: true, middle: true, right: true },
|
|
77
|
-
React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
|
|
78
|
-
};
|
|
79
|
-
/**
|
|
80
|
-
* The inner error boundary component. This is required so
|
|
81
|
-
* we can use hooks that can't be used in a normal class component.
|
|
82
|
-
*/
|
|
83
|
-
const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
|
|
84
|
-
const i18n = usei18n();
|
|
85
|
-
const [showDetails, setShowDetails] = useState(true);
|
|
86
|
-
const classes = boundryStyles();
|
|
87
|
-
const title = `finUi.errorBoundary.${mode}.title`;
|
|
88
|
-
const appName = `${appId}.name`;
|
|
89
|
-
const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
|
|
90
|
-
(appId ? `: ${get(i18n, appName, appName)}` : '');
|
|
91
|
-
const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
|
|
92
|
-
? 'To continue, please reload or navigate to the home page.'
|
|
93
|
-
: 'To continue, please reload, navigate to the home page or another application.');
|
|
94
|
-
return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
|
|
95
|
-
React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
|
|
96
|
-
React.createElement("h1", null, header),
|
|
97
|
-
React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
|
|
98
|
-
React.createElement("p", null, continueMsg),
|
|
99
|
-
React.createElement("div", null,
|
|
100
|
-
React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
|
|
101
|
-
React.createElement(Divider, null),
|
|
102
|
-
React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
|
|
103
|
-
React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
|
|
104
|
-
React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
|
|
105
|
-
showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
|
|
106
|
-
React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
|
|
107
|
-
};
|
|
108
|
-
/**
|
|
109
|
-
* A common error boundary used to capture errors.
|
|
110
|
-
*/
|
|
111
|
-
export class ErrorBoundary extends React.Component {
|
|
112
|
-
state = {};
|
|
113
|
-
componentDidCatch(error, info) {
|
|
114
|
-
this.props.onError?.(error);
|
|
115
|
-
console.error(error, info);
|
|
116
|
-
}
|
|
117
|
-
static getDerivedStateFromError(error) {
|
|
118
|
-
return { error };
|
|
119
|
-
}
|
|
120
|
-
render() {
|
|
121
|
-
return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
|
|
122
|
-
}
|
|
123
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import React, { useState } from 'react';
|
|
5
|
+
import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
|
|
6
|
+
import { usei18n } from '@j2inn/utils';
|
|
7
|
+
import { createUseStyles, useTheme } from 'react-jss';
|
|
8
|
+
const boundryStyles = createUseStyles((theme) => ({
|
|
9
|
+
errorBoundry: {
|
|
10
|
+
backgroundColor: theme.bodyBg,
|
|
11
|
+
flex: `1 1 auto`,
|
|
12
|
+
},
|
|
13
|
+
boundryContainer: {
|
|
14
|
+
margin: '0 auto',
|
|
15
|
+
flex: `1 1 auto`,
|
|
16
|
+
padding: `2rem`,
|
|
17
|
+
maxWidth: 1024,
|
|
18
|
+
backgroundColor: theme.bgColor,
|
|
19
|
+
[`& h1, & h3`]: {
|
|
20
|
+
paddingBottom: `1rem`,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
errorDetails: {
|
|
24
|
+
[`& pre`]: {
|
|
25
|
+
overflow: 'auto',
|
|
26
|
+
marginTop: '1rem',
|
|
27
|
+
backgroundColor: ColorVals.Black,
|
|
28
|
+
color: ColorVals.White,
|
|
29
|
+
padding: '0.3rem',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
}));
|
|
33
|
+
function get(i18n, key, fallback) {
|
|
34
|
+
return i18n.has(key) ? i18n.get(key) : fallback;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Format an error message into something more useful for the clipboard.
|
|
38
|
+
*/
|
|
39
|
+
function formatErrorMessage(error, appId) {
|
|
40
|
+
return JSON.stringify({
|
|
41
|
+
timestamp: new Date().toISOString(),
|
|
42
|
+
appId: appId ?? '',
|
|
43
|
+
location: location.href,
|
|
44
|
+
navigator: {
|
|
45
|
+
cookieEnabled: navigator.cookieEnabled,
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
+
deviceMemory: navigator.deviceMemory,
|
|
48
|
+
language: navigator.language,
|
|
49
|
+
languages: navigator.languages,
|
|
50
|
+
onLine: navigator.onLine,
|
|
51
|
+
userAgent: navigator.userAgent,
|
|
52
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
53
|
+
userAgentData: navigator.userAgentData,
|
|
54
|
+
vendor: navigator.vendor,
|
|
55
|
+
},
|
|
56
|
+
error: String(error.stack),
|
|
57
|
+
}, null, 2);
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Shows the internal error details to a user.
|
|
61
|
+
*/
|
|
62
|
+
const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
|
|
63
|
+
const i18n = usei18n();
|
|
64
|
+
const classes = boundryStyles();
|
|
65
|
+
const theme = useTheme();
|
|
66
|
+
const copyToClipboard = () => {
|
|
67
|
+
navigator.clipboard.writeText(formatErrorMessage(error, appId));
|
|
68
|
+
Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
|
|
69
|
+
};
|
|
70
|
+
return (React.createElement("div", { className: classes.errorDetails },
|
|
71
|
+
React.createElement(Checkbox, { onChange: (e) => {
|
|
72
|
+
setShowDetails(e.target.checked);
|
|
73
|
+
}, defaultChecked: showDetails, value: showDetails }, get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')),
|
|
74
|
+
showDetails && (React.createElement(React.Fragment, null,
|
|
75
|
+
React.createElement("pre", null, error.stack),
|
|
76
|
+
React.createElement(Container, { horizontal: true, middle: true, right: true },
|
|
77
|
+
React.createElement(Button, { onClick: copyToClipboard }, get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')))))));
|
|
78
|
+
};
|
|
79
|
+
/**
|
|
80
|
+
* The inner error boundary component. This is required so
|
|
81
|
+
* we can use hooks that can't be used in a normal class component.
|
|
82
|
+
*/
|
|
83
|
+
const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
|
|
84
|
+
const i18n = usei18n();
|
|
85
|
+
const [showDetails, setShowDetails] = useState(true);
|
|
86
|
+
const classes = boundryStyles();
|
|
87
|
+
const title = `finUi.errorBoundary.${mode}.title`;
|
|
88
|
+
const appName = `${appId}.name`;
|
|
89
|
+
const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
|
|
90
|
+
(appId ? `: ${get(i18n, appName, appName)}` : '');
|
|
91
|
+
const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
|
|
92
|
+
? 'To continue, please reload or navigate to the home page.'
|
|
93
|
+
: 'To continue, please reload, navigate to the home page or another application.');
|
|
94
|
+
return (React.createElement(Container, { vertical: true, top: true, center: true, className: classes.errorBoundry },
|
|
95
|
+
React.createElement("div", { className: classes.boundryContainer, style: { gap: `1rem` } },
|
|
96
|
+
React.createElement("h1", null, header),
|
|
97
|
+
React.createElement("h3", null, get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')),
|
|
98
|
+
React.createElement("p", null, continueMsg),
|
|
99
|
+
React.createElement("div", null,
|
|
100
|
+
React.createElement(ErrorDetails, { showDetails: showDetails, setShowDetails: setShowDetails, error: error, appId: appId })),
|
|
101
|
+
React.createElement(Divider, null),
|
|
102
|
+
React.createElement(Container, { horizontal: true, middle: true, left: true, style: { gap: `1rem` } },
|
|
103
|
+
React.createElement(Button, { onClick: () => window.location.reload(), type: 'primary' }, get(i18n, 'finUi.common.reload', 'Reload')),
|
|
104
|
+
React.createElement(Button, { onClick: () => window.location.assign('/') }, get(i18n, 'finUi.common.home', 'Home'))),
|
|
105
|
+
showReportDialog && (React.createElement("div", { style: { marginTop: `0.5rem` } },
|
|
106
|
+
React.createElement("small", { onClick: showReportDialog }, get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')))))));
|
|
107
|
+
};
|
|
108
|
+
/**
|
|
109
|
+
* A common error boundary used to capture errors.
|
|
110
|
+
*/
|
|
111
|
+
export class ErrorBoundary extends React.Component {
|
|
112
|
+
state = {};
|
|
113
|
+
componentDidCatch(error, info) {
|
|
114
|
+
this.props.onError?.(error);
|
|
115
|
+
console.error(error, info);
|
|
116
|
+
}
|
|
117
|
+
static getDerivedStateFromError(error) {
|
|
118
|
+
return { error };
|
|
119
|
+
}
|
|
120
|
+
render() {
|
|
121
|
+
return this.state.error ? (React.createElement(ErrorBoundaryInner, { error: this.state.error, mode: this.props.mode, appId: this.props.appId, showReportDialog: this.props.showReportDialog })) : (this.props.children);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
124
|
//# sourceMappingURL=ErrorBoundary.js.map
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import React, { useState } from 'react';
|
|
5
|
+
import { Button, Checkbox, Divider, Message, Container, ColorVals, } from '@j2inn/ui';
|
|
6
|
+
import { usei18n } from '@j2inn/utils';
|
|
7
|
+
import { createUseStyles, useTheme } from 'react-jss';
|
|
8
|
+
const boundryStyles = createUseStyles((theme) => ({
|
|
9
|
+
errorBoundry: {
|
|
10
|
+
backgroundColor: theme.bodyBg,
|
|
11
|
+
flex: `1 1 auto`,
|
|
12
|
+
},
|
|
13
|
+
boundryContainer: {
|
|
14
|
+
margin: '0 auto',
|
|
15
|
+
flex: `1 1 auto`,
|
|
16
|
+
padding: `2rem`,
|
|
17
|
+
maxWidth: 1024,
|
|
18
|
+
backgroundColor: theme.bgColor,
|
|
19
|
+
[`& h1, & h3`]: {
|
|
20
|
+
paddingBottom: `1rem`,
|
|
21
|
+
},
|
|
22
|
+
},
|
|
23
|
+
errorDetails: {
|
|
24
|
+
[`& pre`]: {
|
|
25
|
+
overflow: 'auto',
|
|
26
|
+
marginTop: '1rem',
|
|
27
|
+
backgroundColor: ColorVals.Black,
|
|
28
|
+
color: ColorVals.White,
|
|
29
|
+
padding: '0.3rem',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
}));
|
|
33
|
+
function get(i18n, key, fallback) {
|
|
34
|
+
return i18n.has(key) ? i18n.get(key) : fallback;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Format an error message into something more useful for the clipboard.
|
|
38
|
+
*/
|
|
39
|
+
function formatErrorMessage(error, appId) {
|
|
40
|
+
return JSON.stringify({
|
|
41
|
+
timestamp: new Date().toISOString(),
|
|
42
|
+
appId: appId ?? '',
|
|
43
|
+
location: location.href,
|
|
44
|
+
navigator: {
|
|
45
|
+
cookieEnabled: navigator.cookieEnabled,
|
|
46
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
47
|
+
deviceMemory: navigator.deviceMemory,
|
|
48
|
+
language: navigator.language,
|
|
49
|
+
languages: navigator.languages,
|
|
50
|
+
onLine: navigator.onLine,
|
|
51
|
+
userAgent: navigator.userAgent,
|
|
52
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
53
|
+
userAgentData: navigator.userAgentData,
|
|
54
|
+
vendor: navigator.vendor,
|
|
55
|
+
},
|
|
56
|
+
error: String(error.stack),
|
|
57
|
+
}, null, 2);
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Shows the internal error details to a user.
|
|
61
|
+
*/
|
|
62
|
+
const ErrorDetails = ({ showDetails, setShowDetails, error, appId, }) => {
|
|
63
|
+
const i18n = usei18n();
|
|
64
|
+
const classes = boundryStyles();
|
|
65
|
+
const theme = useTheme();
|
|
66
|
+
const copyToClipboard = () => {
|
|
67
|
+
navigator.clipboard.writeText(formatErrorMessage(error, appId));
|
|
68
|
+
Message.success(theme, get(i18n, 'finUi.errorBoundary.copiedErrorToClipboard', 'Copied error to clipboard'));
|
|
69
|
+
};
|
|
70
|
+
return (<div className={classes.errorDetails}>
|
|
71
|
+
<Checkbox onChange={(e) => {
|
|
72
|
+
setShowDetails(e.target.checked);
|
|
73
|
+
}} defaultChecked={showDetails} value={showDetails}>
|
|
74
|
+
{get(i18n, 'finUi.errorBoundary.showDetails', 'Show details')}
|
|
75
|
+
</Checkbox>
|
|
76
|
+
{showDetails && (<>
|
|
77
|
+
<pre>{error.stack}</pre>
|
|
78
|
+
<Container horizontal middle right>
|
|
79
|
+
<Button onClick={copyToClipboard}>
|
|
80
|
+
{get(i18n, 'finUi.errorBoundary.copyToClipboard', 'Copy to clipboard')}
|
|
81
|
+
</Button>
|
|
82
|
+
</Container>
|
|
83
|
+
</>)}
|
|
84
|
+
</div>);
|
|
85
|
+
};
|
|
86
|
+
/**
|
|
87
|
+
* The inner error boundary component. This is required so
|
|
88
|
+
* we can use hooks that can't be used in a normal class component.
|
|
89
|
+
*/
|
|
90
|
+
const ErrorBoundaryInner = ({ error, mode, appId, showReportDialog, }) => {
|
|
91
|
+
const i18n = usei18n();
|
|
92
|
+
const [showDetails, setShowDetails] = useState(true);
|
|
93
|
+
const classes = boundryStyles();
|
|
94
|
+
const title = `finUi.errorBoundary.${mode}.title`;
|
|
95
|
+
const appName = `${appId}.name`;
|
|
96
|
+
const header = get(i18n, title, mode === 'global' ? 'Error' : 'Application error') +
|
|
97
|
+
(appId ? `: ${get(i18n, appName, appName)}` : '');
|
|
98
|
+
const continueMsg = get(i18n, `finUi.errorBoundary.${mode}.continue`, mode === 'global'
|
|
99
|
+
? 'To continue, please reload or navigate to the home page.'
|
|
100
|
+
: 'To continue, please reload, navigate to the home page or another application.');
|
|
101
|
+
return (<Container vertical top center className={classes.errorBoundry}>
|
|
102
|
+
<div className={classes.boundryContainer} style={{ gap: `1rem` }}>
|
|
103
|
+
<h1>{header}</h1>
|
|
104
|
+
|
|
105
|
+
<h3>
|
|
106
|
+
{get(i18n, 'finUi.errorBoundary.description', 'The application has encountered an error when trying to display some content.')}
|
|
107
|
+
</h3>
|
|
108
|
+
|
|
109
|
+
<p>{continueMsg}</p>
|
|
110
|
+
|
|
111
|
+
<div>
|
|
112
|
+
<ErrorDetails showDetails={showDetails} setShowDetails={setShowDetails} error={error} appId={appId}/>
|
|
113
|
+
</div>
|
|
114
|
+
|
|
115
|
+
<Divider />
|
|
116
|
+
|
|
117
|
+
<Container horizontal middle left style={{ gap: `1rem` }}>
|
|
118
|
+
<Button onClick={() => window.location.reload()} type='primary'>
|
|
119
|
+
{get(i18n, 'finUi.common.reload', 'Reload')}
|
|
120
|
+
</Button>
|
|
121
|
+
<Button onClick={() => window.location.assign('/')}>
|
|
122
|
+
{get(i18n, 'finUi.common.home', 'Home')}
|
|
123
|
+
</Button>
|
|
124
|
+
</Container>
|
|
125
|
+
|
|
126
|
+
{showReportDialog && (<div style={{ marginTop: `0.5rem` }}>
|
|
127
|
+
<small onClick={showReportDialog}>
|
|
128
|
+
{get(i18n, 'finUi.errorBoundary.additionalDetails', 'If you’d like, click here to include an additional error report to our team. Any details you provide will be helpful.')}
|
|
129
|
+
</small>
|
|
130
|
+
</div>)}
|
|
131
|
+
</div>
|
|
132
|
+
</Container>);
|
|
133
|
+
};
|
|
134
|
+
/**
|
|
135
|
+
* A common error boundary used to capture errors.
|
|
136
|
+
*/
|
|
137
|
+
export class ErrorBoundary extends React.Component {
|
|
138
|
+
state = {};
|
|
139
|
+
componentDidCatch(error, info) {
|
|
140
|
+
this.props.onError?.(error);
|
|
141
|
+
console.error(error, info);
|
|
142
|
+
}
|
|
143
|
+
static getDerivedStateFromError(error) {
|
|
144
|
+
return { error };
|
|
145
|
+
}
|
|
146
|
+
render() {
|
|
147
|
+
return this.state.error ? (<ErrorBoundaryInner error={this.state.error} mode={this.props.mode} appId={this.props.appId} showReportDialog={this.props.showReportDialog}/>) : (this.props.children);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
//# sourceMappingURL=ErrorBoundary.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorBoundary.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
import React, { ErrorInfo, ReactNode } from 'react';
|
|
2
|
-
interface ErrorBoundaryState {
|
|
3
|
-
error?: Error;
|
|
4
|
-
}
|
|
5
|
-
interface ErrorBoundaryProps {
|
|
6
|
-
children: ReactNode;
|
|
7
|
-
}
|
|
8
|
-
export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
|
|
9
|
-
state: ErrorBoundaryState;
|
|
10
|
-
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
11
|
-
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
12
|
-
render(): ReactNode;
|
|
13
|
-
}
|
|
14
|
-
export interface ErrorDisplayerProps {
|
|
15
|
-
error: Error;
|
|
16
|
-
extra: React.ReactNode;
|
|
17
|
-
}
|
|
18
|
-
export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
|
|
19
|
-
export {};
|
|
1
|
+
import React, { ErrorInfo, ReactNode } from 'react';
|
|
2
|
+
interface ErrorBoundaryState {
|
|
3
|
+
error?: Error;
|
|
4
|
+
}
|
|
5
|
+
interface ErrorBoundaryProps {
|
|
6
|
+
children: ReactNode;
|
|
7
|
+
}
|
|
8
|
+
export declare class DefaultErrorBoundary extends React.Component<ErrorBoundaryProps> {
|
|
9
|
+
state: ErrorBoundaryState;
|
|
10
|
+
static getDerivedStateFromError(error: Error): ErrorBoundaryState;
|
|
11
|
+
componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
|
|
12
|
+
render(): ReactNode;
|
|
13
|
+
}
|
|
14
|
+
export interface ErrorDisplayerProps {
|
|
15
|
+
error: Error;
|
|
16
|
+
extra: React.ReactNode;
|
|
17
|
+
}
|
|
18
|
+
export declare const ErrorDisplayer: React.FC<ErrorDisplayerProps>;
|
|
19
|
+
export {};
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
|
|
2
|
-
import React from 'react';
|
|
3
|
-
export class DefaultErrorBoundary extends React.Component {
|
|
4
|
-
state = {};
|
|
5
|
-
static getDerivedStateFromError(error) {
|
|
6
|
-
// Update state so the next render will show the fallback UI.
|
|
7
|
-
return { error: error };
|
|
8
|
-
}
|
|
9
|
-
componentDidCatch(error, errorInfo) {
|
|
10
|
-
// You can also log the error to an error reporting service
|
|
11
|
-
console.error(error, errorInfo);
|
|
12
|
-
}
|
|
13
|
-
render() {
|
|
14
|
-
if (this.state.error) {
|
|
15
|
-
// You can render any custom fallback UI
|
|
16
|
-
return (React.createElement(ErrorDisplayer, { error: this.state.error, extra: [
|
|
17
|
-
React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
|
|
18
|
-
] }));
|
|
19
|
-
}
|
|
20
|
-
return this.props.children;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
export const ErrorDisplayer = ({ error, extra, }) => {
|
|
24
|
-
return (React.createElement(Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: React.createElement(Container, { center: true },
|
|
25
|
-
React.createElement(Collapse, { style: { width: 600, textAlign: 'left' } },
|
|
26
|
-
React.createElement(Collapse.Panel, { header: `${error.toString()}`, key: '1' },
|
|
27
|
-
React.createElement(Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
|
|
28
|
-
};
|
|
1
|
+
import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export class DefaultErrorBoundary extends React.Component {
|
|
4
|
+
state = {};
|
|
5
|
+
static getDerivedStateFromError(error) {
|
|
6
|
+
// Update state so the next render will show the fallback UI.
|
|
7
|
+
return { error: error };
|
|
8
|
+
}
|
|
9
|
+
componentDidCatch(error, errorInfo) {
|
|
10
|
+
// You can also log the error to an error reporting service
|
|
11
|
+
console.error(error, errorInfo);
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
if (this.state.error) {
|
|
15
|
+
// You can render any custom fallback UI
|
|
16
|
+
return (React.createElement(ErrorDisplayer, { error: this.state.error, extra: [
|
|
17
|
+
React.createElement(Button, { type: 'primary', key: 'refresh', onClick: () => window.location.reload() }, "Refresh The Page"),
|
|
18
|
+
] }));
|
|
19
|
+
}
|
|
20
|
+
return this.props.children;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
export const ErrorDisplayer = ({ error, extra, }) => {
|
|
24
|
+
return (React.createElement(Result, { status: 'error', title: 'Ouch... Something Went Wrong', subTitle: React.createElement(Container, { center: true },
|
|
25
|
+
React.createElement(Collapse, { style: { width: 600, textAlign: 'left' } },
|
|
26
|
+
React.createElement(Collapse.Panel, { header: `${error.toString()}`, key: '1' },
|
|
27
|
+
React.createElement(Typography.Text, { style: { width: 400 } }, error.stack)))), extra: extra }));
|
|
28
|
+
};
|
|
29
29
|
//# sourceMappingURL=ErrorDisplayer.js.map
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { Button, Collapse, Container, Result, Typography } from '@j2inn/ui';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
export class DefaultErrorBoundary extends React.Component {
|
|
4
|
+
state = {};
|
|
5
|
+
static getDerivedStateFromError(error) {
|
|
6
|
+
// Update state so the next render will show the fallback UI.
|
|
7
|
+
return { error: error };
|
|
8
|
+
}
|
|
9
|
+
componentDidCatch(error, errorInfo) {
|
|
10
|
+
// You can also log the error to an error reporting service
|
|
11
|
+
console.error(error, errorInfo);
|
|
12
|
+
}
|
|
13
|
+
render() {
|
|
14
|
+
if (this.state.error) {
|
|
15
|
+
// You can render any custom fallback UI
|
|
16
|
+
return (<ErrorDisplayer error={this.state.error} extra={[
|
|
17
|
+
<Button type='primary' key='refresh' onClick={() => window.location.reload()}>
|
|
18
|
+
Refresh The Page
|
|
19
|
+
</Button>,
|
|
20
|
+
]}/>);
|
|
21
|
+
}
|
|
22
|
+
return this.props.children;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
export const ErrorDisplayer = ({ error, extra, }) => {
|
|
26
|
+
return (<Result status='error' title='Ouch... Something Went Wrong' subTitle={<Container center>
|
|
27
|
+
<Collapse style={{ width: 600, textAlign: 'left' }}>
|
|
28
|
+
<Collapse.Panel header={`${error.toString()}`} key='1'>
|
|
29
|
+
<Typography.Text style={{ width: 400 }}>
|
|
30
|
+
{error.stack}
|
|
31
|
+
</Typography.Text>
|
|
32
|
+
</Collapse.Panel>
|
|
33
|
+
</Collapse>
|
|
34
|
+
</Container>} extra={extra}/>);
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=ErrorDisplayer.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ErrorDisplayer.jsx","sourceRoot":"","sources":["../../../src/react/components/ErrorDisplayer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAA;AAC3E,OAAO,KAA+B,MAAM,OAAO,CAAA;AAUnD,MAAM,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAA6B;IACnE,KAAK,GAAuB,EAAE,CAAA;IAEvC,MAAM,CAAC,wBAAwB,CAAC,KAAY;QAC3C,6DAA6D;QAC7D,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;IACxB,CAAC;IAEQ,iBAAiB,CAAC,KAAY,EAAE,SAAoB;QAC5D,2DAA2D;QAC3D,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,SAAS,CAAC,CAAA;IAChC,CAAC;IAEQ,MAAM;QACd,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;YACrB,wCAAwC;YACxC,OAAO,CACN,CAAC,cAAc,CACd,KAAK,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CACxB,KAAK,CAAC,CAAC;oBACN,CAAC,MAAM,CACN,IAAI,CAAC,SAAS,CACd,GAAG,CAAC,SAAS,CACb,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC,CACxC;;MACD,EAAE,MAAM,CAAC;iBACT,CAAC,EACD,CACF,CAAA;SACD;QACD,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAA;IAC3B,CAAC;CACD;AAOD,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC7D,KAAK,EACL,KAAK,GACL,EAAE,EAAE;IACJ,OAAO,CACN,CAAC,MAAM,CACN,MAAM,CAAC,OAAO,CACd,KAAK,CAAC,8BAA8B,CACpC,QAAQ,CAAC,CACR,CAAC,SAAS,CAAC,MAAM,CAChB;KAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAClD;MAAA,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,CACrD;OAAA,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CACtC;QAAA,CAAC,KAAK,CAAC,KAAK,CACb;OAAA,EAAE,UAAU,CAAC,IAAI,CAClB;MAAA,EAAE,QAAQ,CAAC,KAAK,CACjB;KAAA,EAAE,QAAQ,CACX;IAAA,EAAE,SAAS,CAAC,CACZ,CACD,KAAK,CAAC,CAAC,KAAK,CAAC,EACZ,CACF,CAAA;AACF,CAAC,CAAA"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* A simple UI loader.
|
|
4
|
-
*/
|
|
5
|
-
declare const Loader: ({ loading, children, }: {
|
|
6
|
-
loading: boolean;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
}) => JSX.Element;
|
|
9
|
-
export default Loader;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A simple UI loader.
|
|
4
|
+
*/
|
|
5
|
+
declare const Loader: ({ loading, children, }: {
|
|
6
|
+
loading: boolean;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
}) => JSX.Element;
|
|
9
|
+
export default Loader;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
-
*/
|
|
4
|
-
import React from 'react';
|
|
5
|
-
import { LoadingSpinner } from './LoadingSpinner';
|
|
6
|
-
/**
|
|
7
|
-
* A simple UI loader.
|
|
8
|
-
*/
|
|
9
|
-
const Loader = ({ loading, children, }) => {
|
|
10
|
-
return loading ? React.createElement(LoadingSpinner, null) : React.createElement(React.Fragment, null, children);
|
|
11
|
-
};
|
|
12
|
-
export default Loader;
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { LoadingSpinner } from './LoadingSpinner';
|
|
6
|
+
/**
|
|
7
|
+
* A simple UI loader.
|
|
8
|
+
*/
|
|
9
|
+
const Loader = ({ loading, children, }) => {
|
|
10
|
+
return loading ? React.createElement(LoadingSpinner, null) : React.createElement(React.Fragment, null, children);
|
|
11
|
+
};
|
|
12
|
+
export default Loader;
|
|
13
13
|
//# sourceMappingURL=Loader.js.map
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2022, J2 Innovations. All Rights Reserved
|
|
3
|
+
*/
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import { LoadingSpinner } from './LoadingSpinner';
|
|
6
|
+
/**
|
|
7
|
+
* A simple UI loader.
|
|
8
|
+
*/
|
|
9
|
+
const Loader = ({ loading, children, }) => {
|
|
10
|
+
return loading ? <LoadingSpinner /> : <>{children}</>;
|
|
11
|
+
};
|
|
12
|
+
export default Loader;
|
|
13
|
+
//# sourceMappingURL=Loader.jsx.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Loader.jsx","sourceRoot":"","sources":["../../../src/react/components/Loader.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD;;GAEG;AACH,MAAM,MAAM,GAAG,CAAC,EACf,OAAO,EACP,QAAQ,GAIR,EAAe,EAAE;IACjB,OAAO,OAAO,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,AAAD,EAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,CAAA;AACtD,CAAC,CAAA;AAED,eAAe,MAAM,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
export declare const LoadingSpinner: React.FC;
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const LoadingSpinner: React.FC;
|