typescript-overlay-essentials 2.0.1 → 2.0.3
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/dist/TutorialOverlay.css
CHANGED
package/dist/TutorialOverlay.js
CHANGED
|
@@ -40,7 +40,7 @@ const TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS = 100;
|
|
|
40
40
|
// - cancelButtonText: ist der Text der auf dem Abbrechen Button stehen soll (ohne Angabe wird "Überspringen" verwendet)
|
|
41
41
|
// - style: ist der Style des Tutorial-Overlays (Standardmäßig unverändert)
|
|
42
42
|
export function TutorialOverlay({ state, setState }) {
|
|
43
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
43
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
|
|
44
44
|
// Wird verwendet um das Tutorial-Overlay ein- und auszublenden
|
|
45
45
|
const [showTutorial, setShowTutorial] = useState(false);
|
|
46
46
|
// Wird verwendet um die Position des Textes zu bestimmen
|
|
@@ -117,7 +117,7 @@ export function TutorialOverlay({ state, setState }) {
|
|
|
117
117
|
setShowTutorial(true);
|
|
118
118
|
};
|
|
119
119
|
return showTutorial ?
|
|
120
|
-
_jsxs("div", { className: "overlay-essentials-tutorial-overlay" + (highlightElementRect === null ? " overlay-essentials-darken" : ""), children: [_jsx("div", { className: "overlay-essentials-
|
|
120
|
+
_jsxs("div", { className: "overlay-essentials-tutorial-overlay" + (highlightElementRect === null ? " overlay-essentials-darken" : ""), children: [_jsx("div", { className: "overlay-essentials-tutorial-highlight-hole", style: highlightElementRect === null
|
|
121
121
|
? {
|
|
122
122
|
display: "none"
|
|
123
123
|
} : {
|
|
@@ -125,7 +125,7 @@ export function TutorialOverlay({ state, setState }) {
|
|
|
125
125
|
top: `${(_b = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.top) !== null && _b !== void 0 ? _b : 0}px`,
|
|
126
126
|
width: `${(_c = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.width) !== null && _c !== void 0 ? _c : 0}px`,
|
|
127
127
|
height: `${(_d = highlightElementRect === null || highlightElementRect === void 0 ? void 0 : highlightElementRect.height) !== null && _d !== void 0 ? _d : 0}px`,
|
|
128
|
-
} }), _jsxs("div", { className: "overlay-essentials-
|
|
128
|
+
} }), _jsxs("div", { className: "overlay-essentials-tutorial-box", style: {
|
|
129
129
|
...(tutorialPos
|
|
130
130
|
? {
|
|
131
131
|
position: "fixed",
|
|
@@ -135,13 +135,13 @@ export function TutorialOverlay({ state, setState }) {
|
|
|
135
135
|
}
|
|
136
136
|
: {}),
|
|
137
137
|
...((state === null || state === void 0 ? void 0 : state.style) != null ? state.style : {})
|
|
138
|
-
}, role: "dialog", "aria-modal": "true", "aria-labelledby": (state === null || state === void 0 ? void 0 : state.steps[tutorialStep].headline) != null ? "tutorial-headline" : undefined, "aria-label": ((
|
|
138
|
+
}, role: "dialog", "aria-modal": "true", "aria-labelledby": ((_e = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _e === void 0 ? void 0 : _e.headline) != null ? "tutorial-headline" : undefined, "aria-label": ((_f = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _f === void 0 ? void 0 : _f.headline) != null ? undefined : "Tutorial", "aria-describedby": "tutorial-message", onKeyDown: (event) => {
|
|
139
139
|
var _a;
|
|
140
140
|
if (event.key === "Escape") {
|
|
141
141
|
const nextCommand = (_a = state.cancelCommand) !== null && _a !== void 0 ? _a : null;
|
|
142
142
|
setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
|
|
143
143
|
}
|
|
144
|
-
}, children: [_jsx("div", { id: "overlay-essentials-
|
|
144
|
+
}, children: [_jsx("div", { id: "overlay-essentials-tutorial-headline", className: "overlay-essentials-tutorial-headline", children: _jsxs("strong", { children: [(_h = (_g = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _g === void 0 ? void 0 : _g.headline) !== null && _h !== void 0 ? _h : "", " ", tutorialStep + 1, "/", state.steps.length] }) }), _jsx("div", { id: "overlay-essentials-tutorial-message", className: "overlay-essentials-tutorial-message", children: (_k = (_j = state === null || state === void 0 ? void 0 : state.steps[tutorialStep]) === null || _j === void 0 ? void 0 : _j.message) !== null && _k !== void 0 ? _k : "" }), _jsxs("div", { className: "overlay-essentials-tutorial-buttons", children: [_jsx("button", { onClick: () => {
|
|
145
145
|
var _a, _b, _c, _d;
|
|
146
146
|
if (tutorialStep > 0) {
|
|
147
147
|
const nextCommand = (_b = (_a = state.steps[tutorialStep]) === null || _a === void 0 ? void 0 : _a.backCommand) !== null && _b !== void 0 ? _b : null;
|
|
@@ -166,7 +166,7 @@ export function TutorialOverlay({ state, setState }) {
|
|
|
166
166
|
const nextCommand = (_d = state.cancelCommand) !== null && _d !== void 0 ? _d : null;
|
|
167
167
|
setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined, steps: [] }));
|
|
168
168
|
}
|
|
169
|
-
}, type: "button", className: "px-4 py-2 bg-gray-300 rounded " + (tutorialStep > 0 ? "overlay-essentials-back-button" : "overlay-essentials-cancel-button"), children: tutorialStep > 0 ? ((
|
|
169
|
+
}, type: "button", className: "px-4 py-2 bg-gray-300 rounded " + (tutorialStep > 0 ? "overlay-essentials-back-button" : "overlay-essentials-cancel-button"), children: tutorialStep > 0 ? ((_l = state === null || state === void 0 ? void 0 : state.backButtonText) !== null && _l !== void 0 ? _l : "Zurück") : ((_m = state === null || state === void 0 ? void 0 : state.cancelButtonText) !== null && _m !== void 0 ? _m : "Überspringen") }), _jsx("button", { onClick: () => {
|
|
170
170
|
var _a, _b, _c, _d;
|
|
171
171
|
if (tutorialStep + 1 < state.steps.length) {
|
|
172
172
|
const nextCommand = (_b = (_a = state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.command) !== null && _b !== void 0 ? _b : null;
|
|
@@ -191,5 +191,5 @@ export function TutorialOverlay({ state, setState }) {
|
|
|
191
191
|
const nextCommand = (_d = state.completeCommand) !== null && _d !== void 0 ? _d : null;
|
|
192
192
|
setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined, steps: [] }));
|
|
193
193
|
}
|
|
194
|
-
}, ref: proceedButtonRef, type: "button", className: "px-4 py-2 bg-blue-600 text-white rounded " + (tutorialStep > 0 ? "overlay-essentials-proceed-button" : "overlay-essentials-complete-button"), children: tutorialStep < state.steps.length - 1 ? ((
|
|
194
|
+
}, ref: proceedButtonRef, type: "button", className: "px-4 py-2 bg-blue-600 text-white rounded " + (tutorialStep > 0 ? "overlay-essentials-proceed-button" : "overlay-essentials-complete-button"), children: tutorialStep < state.steps.length - 1 ? ((_o = state === null || state === void 0 ? void 0 : state.proceedButtonText) !== null && _o !== void 0 ? _o : "Weiter") : ((_p = state === null || state === void 0 ? void 0 : state.completeButtonText) !== null && _p !== void 0 ? _p : "Abschließen") })] })] })] }) : _jsx(_Fragment, {});
|
|
195
195
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typescript-overlay-essentials",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
4
4
|
"description": "Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden können. Alle enthaltenen Overlays können als Reaktion auf etwas geöffnet werden und schließen sich danach automatisch. Es beinhaltet: \\n - [ConfirmationBox]: Ein Overlay mit einer ConfirmationBox (Fortfahren / Abbrechen), \\n - [InfoOverlay]: ein simples Overlay mit einer Informationsbox die man bestätigen kann, \\n - [InfoOverlayWithInput]: Ein Overlay bei dem ein User zusätzlich ein Freitext-Feld zur Eingabe hat, \\n - [LoadingOverlay]: Ein simples Overlay mit einer Lade-animation und optionalem Ladetext, \\n - [MultipleChoiceOverlay]: Ein simples Overlay bei dem ein Nutzer aus mehreren gegebenen Aktionen auswählen kann, \\n - [MultipleRadioOverlay]: Ein simples Overlay bei dem ein Nutzer genau eine aus mehreren gegebenen Aktionen auswählen kann, \\n - [Toast]: Ein simpler Toast der für kurze Zeit grün hinterlegt in der oberen rechten Ecke des Bildschirms angezeigt wird, \\n - [ToggleSwitch]: Eine Auswahl aus zwei Optionen aus denen ein Nutzer wählen kann in der Darstellung (Option 1 | Option 2), \\n - [Dropdown]: Ein simples Dropdown-Menü (auf Basis von react-select), welches einfacherer zu Konfigurieren ist und einige default-Einstellungen hat, \\n - [InputFilter]: Ein Tool was genutzt werden kann um auf einem Inputfeld einen Regex-Filter anzuwenden und dem User so nur Eingaben erlaubt die dem Filter entsprechen.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"typescript",
|