typescript-overlay-essentials 2.0.5 → 2.1.1

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.
Files changed (3) hide show
  1. package/README.md +24 -22
  2. package/dist/TutorialOverlay.js +9 -13
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -28,30 +28,32 @@ Eine kleine Ansammlung an praktischen Tools, die out of the Box genutzt werden k
28
28
  - [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.
29
29
 
30
30
  ## Examples:
31
- import { useState } from "react";
32
- import { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from 'typescript-overlay-essentials';
31
+ {
32
+ import { useState } from "react";
33
+ import { ConfirmationBox, ConfirmationBoxState, defaultConfirmationState } from 'typescript-overlay-essentials';
33
34
 
34
35
 
35
- function App() {
36
-
37
- const [stateConfirmationBox, setStateConfirmationBox] = useState<ConfirmationBoxState>(defaultConfirmationState);
38
-
39
- function handleLicenseAgreement() {
36
+ function App() {
37
+
38
+ const [stateConfirmationBox, setStateConfirmationBox] = useState<ConfirmationBoxState>(defaultConfirmationState);
39
+
40
+ function handleLicenseAgreement() {
40
41
 
42
+ }
43
+
44
+ return <div id="root">
45
+ <ConfirmationBox state={stateConfirmationBox} setState={setStateConfirmationBox} />
46
+ <button onClick={() => {
47
+ setStateConfirmationBox({
48
+ headline: "Are you sure?",
49
+ message: "Do you want to accept the License agreement?",
50
+ proceedButtonText: "Agree",
51
+ cancelButtonText: "Decline",
52
+ handlerOk: handleLicenseAgreement
53
+ })
54
+ }}>
55
+ Confirm License
56
+ </button>
57
+ </div>;
41
58
  }
42
-
43
- return <div id="root">
44
- <ConfirmationBox state={stateConfirmationBox} setState={setStateConfirmationBox} />
45
- <button onClick={() => {
46
- setStateConfirmationBox({
47
- headline: "Are you sure?",
48
- message: "Do you want to accept the License agreement?",
49
- proceedButtonText: "Agree",
50
- cancelButtonText: "Decline",
51
- handlerOk: handleLicenseAgreement
52
- })
53
- }}>
54
- Confirm License
55
- </button>
56
- </div>;
57
59
  }
package/dist/TutorialOverlay.js CHANGED
@@ -103,15 +103,17 @@ export function TutorialOverlay({ state, setState }) {
103
103
  // 25 rem
104
104
  const _1rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
105
105
  const tooltipWidth = 32 * _1rem;
106
+ const tooltipHeight = tooltipWidth;
106
107
  const position = rect.right + tooltipWidth <= window.innerWidth ? Positions.RIGHT
107
108
  : (rect.left - tooltipWidth >= 0 ? Positions.LEFT
108
- : Positions.BOTTOM);
109
+ : (rect.top - tooltipHeight >= 0 ? Positions.TOP
110
+ : Positions.BOTTOM));
109
111
  setTutorialPos({
110
112
  position,
111
113
  px_left: position === Positions.LEFT ? rect.left - tooltipWidth
112
114
  : (position === Positions.RIGHT ? rect.right + _1rem
113
115
  : null),
114
- px_top: position !== Positions.BOTTOM ? rect.top : (rect.bottom + _1rem)
116
+ px_top: position === Positions.TOP ? (rect.top - tooltipHeight) : (position !== Positions.BOTTOM ? rect.top : (rect.bottom + _1rem))
115
117
  });
116
118
  if (!dontHighlightElement) {
117
119
  setHighlightElementRect({
@@ -139,7 +141,7 @@ export function TutorialOverlay({ state, setState }) {
139
141
  ...(tutorialPos
140
142
  ? {
141
143
  position: "fixed",
142
- left: (_e = tutorialPos.px_left) !== null && _e !== void 0 ? _e : ';',
144
+ left: (_e = tutorialPos.px_left) !== null && _e !== void 0 ? _e : '',
143
145
  top: tutorialPos.px_top,
144
146
  transform: 'none'
145
147
  }
@@ -157,7 +159,7 @@ export function TutorialOverlay({ state, setState }) {
157
159
  const nextCommand = (_b = (_a = state.steps[tutorialStep]) === null || _a === void 0 ? void 0 : _a.backCommand) !== null && _b !== void 0 ? _b : null;
158
160
  setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
159
161
  setTimeout(() => {
160
- var _a, _b, _c;
162
+ var _a, _b, _c, _d;
161
163
  const attachTo = (_a = state === null || state === void 0 ? void 0 : state.steps[tutorialStep - 1]) === null || _a === void 0 ? void 0 : _a.attachToObject;
162
164
  const attachElement = typeof attachTo === "string"
163
165
  ? document.getElementById(attachTo)
@@ -170,10 +172,7 @@ export function TutorialOverlay({ state, setState }) {
170
172
  setHighlightElementRect(null);
171
173
  }
172
174
  setTutorialStep(prev => prev - 1);
173
- setTimeout(() => {
174
- var _a;
175
- (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
176
- }, 10);
175
+ (_d = document.getElementById("overlay-essentials-tutorial-box")) === null || _d === void 0 ? void 0 : _d.scrollIntoView();
177
176
  }, nextCommand != null ? ((_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep - 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS) : 0);
178
177
  }
179
178
  else {
@@ -186,7 +185,7 @@ export function TutorialOverlay({ state, setState }) {
186
185
  const nextCommand = (_b = (_a = state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.command) !== null && _b !== void 0 ? _b : null;
187
186
  setState((prev) => ({ ...prev, currentCommand: nextCommand !== null && nextCommand !== void 0 ? nextCommand : undefined }));
188
187
  setTimeout(() => {
189
- var _a, _b, _c;
188
+ var _a, _b, _c, _d;
190
189
  const attachTo = (_a = state === null || state === void 0 ? void 0 : state.steps[tutorialStep + 1]) === null || _a === void 0 ? void 0 : _a.attachToObject;
191
190
  const attachElement = typeof attachTo === "string"
192
191
  ? document.getElementById(attachTo)
@@ -199,10 +198,7 @@ export function TutorialOverlay({ state, setState }) {
199
198
  setHighlightElementRect(null);
200
199
  }
201
200
  setTutorialStep(prev => prev + 1);
202
- setTimeout(() => {
203
- var _a;
204
- (_a = document.getElementById("overlay-essentials-tutorial-box")) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
205
- }, 10);
201
+ (_d = document.getElementById("overlay-essentials-tutorial-box")) === null || _d === void 0 ? void 0 : _d.scrollIntoView();
206
202
  }, nextCommand != null ? (_c = state === null || state === void 0 ? void 0 : state.steps[tutorialStep + 1].waitFor) !== null && _c !== void 0 ? _c : TIMEOUT_OVERLAY_WAIT_FOR_COMMAND_EXECUTION_MS : 0);
207
203
  }
208
204
  else {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "typescript-overlay-essentials",
3
- "version": "2.0.5",
3
+ "version": "2.1.1",
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",