@taicode/common-web 1.1.8 → 1.1.10
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.
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { SystemErrorType, UserErrorType } from '@taicode/common-base';
|
|
3
|
+
import 'react-toastify/dist/ReactToastify.css';
|
|
4
|
+
interface ToastCatcherProps {
|
|
5
|
+
defaultMessage?: string;
|
|
6
|
+
children: React.ReactNode;
|
|
7
|
+
messages: Partial<Record<UserErrorType | SystemErrorType, string>>;
|
|
8
|
+
}
|
|
9
|
+
/** 自动捕获和处理异步错误，无法识别的错误会保持原样 */
|
|
10
|
+
export declare function Toaster(props: ToastCatcherProps): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
export {};
|
|
12
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../source/toaster/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAA;AAE7D,OAAO,EAA0B,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAE7F,OAAO,uCAAuC,CAAA;AAE9C,UAAU,iBAAiB;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,EAAE,OAAO,CAAC,MAAM,CAAC,aAAa,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;CACnE;AAED,+BAA+B;AAC/B,wBAAgB,OAAO,CAAC,KAAK,EAAE,iBAAiB,2CA2F/C"}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useCallback, useEffect, useRef } from 'react';
|
|
3
|
+
import { ToastContainer, toast as baseToast } from 'react-toastify';
|
|
4
|
+
import { SystemError, UserError } from '@taicode/common-base';
|
|
5
|
+
import 'react-toastify/dist/ReactToastify.css';
|
|
6
|
+
/** 自动捕获和处理异步错误，无法识别的错误会保持原样 */
|
|
7
|
+
export function Toaster(props) {
|
|
8
|
+
const addEventListened = useRef(false);
|
|
9
|
+
const { messages = {}, defaultMessage } = props;
|
|
10
|
+
const sendError = useCallback((error) => {
|
|
11
|
+
baseToast.error(_jsx(Toast, { type: 'error', error: error }), {
|
|
12
|
+
className: 'p-0 w-[400px] border-0',
|
|
13
|
+
closeButton: false,
|
|
14
|
+
});
|
|
15
|
+
}, []);
|
|
16
|
+
const sendSuccess = useCallback((error) => {
|
|
17
|
+
baseToast.error(_jsx(Toast, { type: 'error', error: error }), {
|
|
18
|
+
className: 'p-0 w-[400px] border-0',
|
|
19
|
+
closeButton: false,
|
|
20
|
+
});
|
|
21
|
+
}, []);
|
|
22
|
+
useEffect(() => {
|
|
23
|
+
if (addEventListened.current)
|
|
24
|
+
return;
|
|
25
|
+
const errorHandler = (event) => {
|
|
26
|
+
const errorObject = event.error;
|
|
27
|
+
if (SystemError.is(errorObject) || UserError.is(errorObject)) {
|
|
28
|
+
event.preventDefault();
|
|
29
|
+
event.stopPropagation();
|
|
30
|
+
sendError(errorObject.type);
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
const unhandledRejectionHandler = (event) => {
|
|
34
|
+
const errorObject = event.reason;
|
|
35
|
+
if (SystemError.is(errorObject) || UserError.is(errorObject)) {
|
|
36
|
+
event.preventDefault();
|
|
37
|
+
event.stopPropagation();
|
|
38
|
+
sendError(errorObject.type);
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
window.addEventListener('error', errorHandler, true);
|
|
42
|
+
window.addEventListener('unhandledrejection', unhandledRejectionHandler, true);
|
|
43
|
+
addEventListened.current = true;
|
|
44
|
+
return () => {
|
|
45
|
+
window.removeEventListener('error', errorHandler, true);
|
|
46
|
+
window.removeEventListener('unhandledrejection', unhandledRejectionHandler, true);
|
|
47
|
+
addEventListened.current = false;
|
|
48
|
+
};
|
|
49
|
+
}, []);
|
|
50
|
+
return (_jsxs(_Fragment, { children: [props.children, _jsx(ToastContainer, { newestOnTop: true, hideProgressBar: true, closeButton: false, position: "top-center" })] }));
|
|
51
|
+
function ErrorIcon() {
|
|
52
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6 text-red-500", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));
|
|
53
|
+
}
|
|
54
|
+
function SuccessIcon() {
|
|
55
|
+
return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: "currentColor", className: "size-6 text-green-500", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }));
|
|
56
|
+
}
|
|
57
|
+
function Toast(props) {
|
|
58
|
+
const { type, error } = props;
|
|
59
|
+
return (_jsxs("div", { className: "flex items-center w-full p-4 space-x-4 rtl:space-x-reverse text-gray-500 bg-white divide-x rtl:divide-x-reverse divide-gray-200 rounded-lg shadow dark:text-gray-400 dark:divide-gray-700 dark:bg-gray-800", role: "alert", children: [props.type === 'error' && (_jsx(ErrorIcon, {})), props.type === 'success' && (_jsx(SuccessIcon, {})), _jsx("div", { className: "ps-4 text-sm font-normal", children: messages[error] || defaultMessage })] }));
|
|
60
|
+
}
|
|
61
|
+
}
|