elbe-ui 2.0.9 → 2.0.11
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.
|
@@ -18,7 +18,7 @@ export type ElbeDialogProps = {
|
|
|
18
18
|
* - `kind` (ColorSelection.KindsAlert | undefined): An optional kind to display an alert icon next to the title.
|
|
19
19
|
* - `dismissible` ("none" | "button" | "barrier" | undefined): Controls how the dialog can be dismissed.
|
|
20
20
|
* - "none": The dialog cannot be dismissed by user actions.
|
|
21
|
-
* - "button": A close button is provided in the title bar.
|
|
21
|
+
* - "button": A close button is provided in the title bar. (**DEFAULT**)
|
|
22
22
|
* - "barrier": Clicking outside the dialog will close it.
|
|
23
23
|
* Default is "button".
|
|
24
24
|
* - `maxWidth` (number | undefined): The maximum width of the dialog in rem units. Defaults to 90vw if not provided.
|
|
@@ -34,7 +34,7 @@ export function elevatedBackdropStyle(open, theme, openMergeStyle) {
|
|
|
34
34
|
* - `kind` (ColorSelection.KindsAlert | undefined): An optional kind to display an alert icon next to the title.
|
|
35
35
|
* - `dismissible` ("none" | "button" | "barrier" | undefined): Controls how the dialog can be dismissed.
|
|
36
36
|
* - "none": The dialog cannot be dismissed by user actions.
|
|
37
|
-
* - "button": A close button is provided in the title bar.
|
|
37
|
+
* - "button": A close button is provided in the title bar. (**DEFAULT**)
|
|
38
38
|
* - "barrier": Clicking outside the dialog will close it.
|
|
39
39
|
* Default is "button".
|
|
40
40
|
* - `maxWidth` (number | undefined): The maximum width of the dialog in rem units. Defaults to 90vw if not provided.
|
|
@@ -73,24 +73,24 @@ export function Dialog(_a) {
|
|
|
73
73
|
}, [p.open]);
|
|
74
74
|
if (!p.open)
|
|
75
75
|
return null;
|
|
76
|
-
return ReactDOM.createPortal(_jsx(ToolbarContext.Provider, { value: null, children: _jsx(_appThemeContext.WithTheme, { theme: theme, children:
|
|
76
|
+
return ReactDOM.createPortal(_jsx(ToolbarContext.Provider, { value: null, children: _jsx(_appThemeContext.WithTheme, { theme: theme, children: _jsx("div", { style: Object.assign({ position: "fixed", left: 0, top: 0, width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, elevatedBackdropStyle(p.open, theme.theme)), className: "elbe_dialog-base", onClick: (e) => {
|
|
77
77
|
e.stopPropagation();
|
|
78
78
|
e.preventDefault();
|
|
79
79
|
if (dismissible === "barrier")
|
|
80
80
|
p.onClose();
|
|
81
|
-
}, children:
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
81
|
+
}, children: _jsx("dialog", { open: p.open, style: {
|
|
82
|
+
position: "static",
|
|
83
|
+
display: "flex",
|
|
84
|
+
border: "none",
|
|
85
|
+
background: "transparent",
|
|
86
|
+
margin: 0,
|
|
87
|
+
padding: 0,
|
|
88
|
+
}, children: _jsxs(Card, { padding: 0.25, bordered: true, elevated: true, kind: p.kind, style: {
|
|
89
|
+
maxWidth: p.maxWidth ? `min(${p.maxWidth}rem, 90vw)` : "90vw",
|
|
90
|
+
minWidth: "min(17rem, 90vw)",
|
|
91
|
+
}, children: [_jsxs(Row, { cross: "center", gap: 1, style: { marginLeft: "1rem" }, children: [p.kind && _jsx(KindAlertIcon, { kind: p.kind }), _jsx(Text.h4, { v: p.title, flex: true, style: { marginRight: "1rem" } }), ["button", "barrier"].includes(dismissible) && (_jsx(IconButton.plain, { ariaLabel: "Close", icon: X, onTap: (e) => {
|
|
92
|
+
e.stopPropagation();
|
|
93
|
+
e.preventDefault();
|
|
94
|
+
p.onClose();
|
|
95
|
+
} }))] }), _jsx(Column, { style: { padding: "1rem" }, children: p.children })] }) }) }) }) }), rootDOM);
|
|
96
96
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { icons } from "lucide-react";
|
|
3
3
|
import { useState } from "react";
|
|
4
|
-
import { Card, Column, Dialog, Icon, Icons,
|
|
4
|
+
import { Button, Card, Column, Dialog, Icon, Icons, Text, toElbeError, } from "../..";
|
|
5
5
|
import { _maybeL10n } from "../util/l10n/_l10n_util";
|
|
6
6
|
/** * A component to display error messages in a user-friendly manner.
|
|
7
7
|
*
|
|
@@ -45,9 +45,8 @@ export function PrettyErrorView({ error, retry, labels = {
|
|
|
45
45
|
pt: "detalhes do erro",
|
|
46
46
|
},
|
|
47
47
|
}, }) {
|
|
48
|
-
var _a, _b, _c, _d, _e, _f;
|
|
48
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
49
49
|
const l10n = _maybeL10n();
|
|
50
50
|
const [open, setOpen] = useState(false);
|
|
51
|
-
|
|
52
|
-
return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx("h4", { style: { margin: 0 }, children: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx("span", { className: "pointer", onClick: () => setOpen(true), children: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "" }), retry && (_jsxs("button", { className: "action", onClick: () => retry(), children: [_jsx(Icons.RotateCcw, {}), " ", (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry"] })), error.code === 404 && (_jsxs("button", { className: "action", onClick: () => navigate("/", { replace: true }), children: [_jsx(Icons.House, {}), (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _e !== void 0 ? _e : "go home"] })), _jsx(Dialog, { title: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _f !== void 0 ? _f : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { className: "card inverse", children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
|
|
51
|
+
return (_jsxs(Column, { cross: "center", style: { margin: "1rem 0", padding: "1rem" }, children: [_jsx(Icon, { icon: (_a = error.icon) !== null && _a !== void 0 ? _a : icons.OctagonAlert }), _jsx(Text.h4, { v: (_b = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.message)) !== null && _b !== void 0 ? _b : "error" }), _jsx(Text, { align: "center", v: (_c = l10n === null || l10n === void 0 ? void 0 : l10n.inline(error.description)) !== null && _c !== void 0 ? _c : "", style: { cursor: "pointer" }, native: { onClick: () => setOpen(true) } }), retry && (_jsx(Button.flat, { ariaLabel: (_d = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _d !== void 0 ? _d : "retry", label: (_e = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.retry)) !== null && _e !== void 0 ? _e : "retry", icon: Icons.RotateCcw, onTap: () => retry() })), error.code === 404 && (_jsx(Button.flat, { ariaLabel: (_f = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _f !== void 0 ? _f : "go home", label: (_g = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.home)) !== null && _g !== void 0 ? _g : "go home", icon: Icons.House, onTap: () => (window.location.href = "/") })), _jsx(Dialog, { title: (_h = l10n === null || l10n === void 0 ? void 0 : l10n.inline(labels.details)) !== null && _h !== void 0 ? _h : "error details", open: open, onClose: () => setOpen(false), children: _jsx("pre", { children: `code: ${error.code}\n\n` + JSON.stringify(error.details, null, 2) }) })] }));
|
|
53
52
|
}
|