@tent-official/react-walkthrough 1.4.2 → 1.5.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 +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +48 -54
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +48 -54
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -965,43 +965,6 @@ var WalkthroughOverlay = ({
|
|
|
965
965
|
setPopoverPos(null);
|
|
966
966
|
const nextValidStep = validSteps[currentValidPos + 1];
|
|
967
967
|
const nextOrigIdx = hasTrigger && !nextValidStep ? currentOrigIdx + 1 : (_a2 = nextValidStep == null ? void 0 : nextValidStep._originalIdx) != null ? _a2 : currentOrigIdx + 1;
|
|
968
|
-
const shouldForceRecompute = !!step.forceRecompute;
|
|
969
|
-
if (shouldForceRecompute) {
|
|
970
|
-
const nextStepDef = activeTour.steps[nextOrigIdx];
|
|
971
|
-
if (nextStepDef) {
|
|
972
|
-
const nextElId = resolveElId(nextStepDef.el);
|
|
973
|
-
const SETTLE_DELAY = 150;
|
|
974
|
-
const doAdvance = () => {
|
|
975
|
-
setGlobalState((s) => ({
|
|
976
|
-
...s,
|
|
977
|
-
activeTour: { ...s.activeTour, currentStep: nextOrigIdx }
|
|
978
|
-
}));
|
|
979
|
-
};
|
|
980
|
-
const alreadyExists = document.getElementById(nextElId);
|
|
981
|
-
if (alreadyExists) {
|
|
982
|
-
setTimeout(() => doAdvance(), SETTLE_DELAY);
|
|
983
|
-
} else {
|
|
984
|
-
waitingForElsRef.current = true;
|
|
985
|
-
const observer = new MutationObserver(() => {
|
|
986
|
-
const found = document.getElementById(nextElId);
|
|
987
|
-
if (found) {
|
|
988
|
-
observer.disconnect();
|
|
989
|
-
waitingForElsRef.current = false;
|
|
990
|
-
setTimeout(() => doAdvance(), SETTLE_DELAY);
|
|
991
|
-
}
|
|
992
|
-
});
|
|
993
|
-
observer.observe(document.body, { childList: true, subtree: true });
|
|
994
|
-
setTimeout(() => {
|
|
995
|
-
observer.disconnect();
|
|
996
|
-
if (waitingForElsRef.current) {
|
|
997
|
-
waitingForElsRef.current = false;
|
|
998
|
-
doAdvance();
|
|
999
|
-
}
|
|
1000
|
-
}, 3e3);
|
|
1001
|
-
}
|
|
1002
|
-
return;
|
|
1003
|
-
}
|
|
1004
|
-
}
|
|
1005
968
|
setGlobalState((s) => ({
|
|
1006
969
|
...s,
|
|
1007
970
|
activeTour: { ...s.activeTour, currentStep: nextOrigIdx }
|
|
@@ -1017,6 +980,7 @@ var WalkthroughOverlay = ({
|
|
|
1017
980
|
}
|
|
1018
981
|
const hasTrigger = !!step.triggerElOnNext;
|
|
1019
982
|
const afterNextDelay = (_b2 = step.delayAfterNext) != null ? _b2 : 0;
|
|
983
|
+
const nextElId = step.nextEl ? resolveElId(step.nextEl) : null;
|
|
1020
984
|
const withDelay = (fn) => {
|
|
1021
985
|
if (afterNextDelay > 0) {
|
|
1022
986
|
setTimeout(fn, afterNextDelay);
|
|
@@ -1024,6 +988,39 @@ var WalkthroughOverlay = ({
|
|
|
1024
988
|
fn();
|
|
1025
989
|
}
|
|
1026
990
|
};
|
|
991
|
+
const advanceWithNextEl = () => {
|
|
992
|
+
const SETTLE_DELAY = 150;
|
|
993
|
+
const targetEl = document.getElementById(nextElId);
|
|
994
|
+
if (targetEl) {
|
|
995
|
+
const targetStepIdx = activeTour.steps.findIndex(
|
|
996
|
+
(s) => resolveElId(s.el) === nextElId
|
|
997
|
+
);
|
|
998
|
+
if (targetStepIdx !== -1) {
|
|
999
|
+
const targetStepDef = activeTour.steps[targetStepIdx];
|
|
1000
|
+
const targetStepWithIdx = { ...targetStepDef, _originalIdx: targetStepIdx };
|
|
1001
|
+
const alreadyInValid = validSteps.some((s) => s._originalIdx === targetStepIdx);
|
|
1002
|
+
const newValidSteps = alreadyInValid ? validSteps : [...validSteps, targetStepWithIdx].sort((a, b) => a._originalIdx - b._originalIdx);
|
|
1003
|
+
setValidSteps(newValidSteps);
|
|
1004
|
+
skipNextRecomputeRef.current = true;
|
|
1005
|
+
setTimeout(() => {
|
|
1006
|
+
setGlobalState((s) => ({
|
|
1007
|
+
...s,
|
|
1008
|
+
activeTour: { ...s.activeTour, currentStep: targetStepIdx }
|
|
1009
|
+
}));
|
|
1010
|
+
}, SETTLE_DELAY);
|
|
1011
|
+
return;
|
|
1012
|
+
}
|
|
1013
|
+
}
|
|
1014
|
+
const nextValid = validSteps.find((s) => s._originalIdx > currentOrigIdx);
|
|
1015
|
+
if (nextValid) {
|
|
1016
|
+
setGlobalState((s) => ({
|
|
1017
|
+
...s,
|
|
1018
|
+
activeTour: { ...s.activeTour, currentStep: nextValid._originalIdx }
|
|
1019
|
+
}));
|
|
1020
|
+
} else {
|
|
1021
|
+
completeTour();
|
|
1022
|
+
}
|
|
1023
|
+
};
|
|
1027
1024
|
if (hasTrigger) {
|
|
1028
1025
|
setPopoverHidden(true);
|
|
1029
1026
|
setPopoverPos(null);
|
|
@@ -1035,11 +1032,14 @@ var WalkthroughOverlay = ({
|
|
|
1035
1032
|
triggerTarget.dispatchEvent(new MouseEvent("mouseup", { bubbles: true, cancelable: true, button: 0 }));
|
|
1036
1033
|
triggerTarget.click();
|
|
1037
1034
|
}
|
|
1038
|
-
|
|
1039
|
-
|
|
1035
|
+
if (nextElId) {
|
|
1036
|
+
withDelay(() => advanceWithNextEl());
|
|
1037
|
+
return;
|
|
1038
|
+
}
|
|
1039
|
+
const nextOrigIdx = currentOrigIdx + 1;
|
|
1040
1040
|
const nextStepDef = activeTour.steps[nextOrigIdx];
|
|
1041
1041
|
if (nextStepDef) {
|
|
1042
|
-
const
|
|
1042
|
+
const nextStepElId = resolveElId(nextStepDef.el);
|
|
1043
1043
|
const injectAndAdvance = () => {
|
|
1044
1044
|
const nextStepWithIdx = { ...nextStepDef, _originalIdx: nextOrigIdx };
|
|
1045
1045
|
const alreadyInValid = validSteps.some((s) => s._originalIdx === nextOrigIdx);
|
|
@@ -1050,27 +1050,15 @@ var WalkthroughOverlay = ({
|
|
|
1050
1050
|
...s,
|
|
1051
1051
|
activeTour: { ...s.activeTour, currentStep: nextOrigIdx }
|
|
1052
1052
|
}));
|
|
1053
|
-
if (step.forceRecompute) {
|
|
1054
|
-
setTimeout(() => {
|
|
1055
|
-
skipNextRecomputeRef.current = false;
|
|
1056
|
-
setGlobalState((s) => {
|
|
1057
|
-
if (!s.activeTour) return s;
|
|
1058
|
-
return {
|
|
1059
|
-
...s,
|
|
1060
|
-
activeTour: { ...s.activeTour, _recompute: Date.now() }
|
|
1061
|
-
};
|
|
1062
|
-
});
|
|
1063
|
-
}, 500);
|
|
1064
|
-
}
|
|
1065
1053
|
};
|
|
1066
1054
|
const SETTLE_DELAY = 150;
|
|
1067
|
-
const alreadyExists = document.getElementById(
|
|
1055
|
+
const alreadyExists = document.getElementById(nextStepElId);
|
|
1068
1056
|
if (alreadyExists) {
|
|
1069
1057
|
withDelay(() => setTimeout(() => injectAndAdvance(), SETTLE_DELAY));
|
|
1070
1058
|
} else {
|
|
1071
1059
|
waitingForElsRef.current = true;
|
|
1072
1060
|
const observer = new MutationObserver(() => {
|
|
1073
|
-
const found = document.getElementById(
|
|
1061
|
+
const found = document.getElementById(nextStepElId);
|
|
1074
1062
|
if (found) {
|
|
1075
1063
|
observer.disconnect();
|
|
1076
1064
|
waitingForElsRef.current = false;
|
|
@@ -1093,6 +1081,12 @@ var WalkthroughOverlay = ({
|
|
|
1093
1081
|
setTimeout(() => completeTour(), 300);
|
|
1094
1082
|
return;
|
|
1095
1083
|
}
|
|
1084
|
+
if (nextElId) {
|
|
1085
|
+
setPopoverHidden(true);
|
|
1086
|
+
setPopoverPos(null);
|
|
1087
|
+
withDelay(() => advanceWithNextEl());
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1096
1090
|
if (afterNextDelay > 0) {
|
|
1097
1091
|
setPopoverHidden(true);
|
|
1098
1092
|
setPopoverPos(null);
|