@tent-official/react-walkthrough 1.4.1 → 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 +49 -45
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +49 -45
- 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,32 +1032,33 @@ 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);
|
|
1046
1046
|
const newValidSteps = alreadyInValid ? validSteps : [...validSteps, nextStepWithIdx].sort((a, b) => a._originalIdx - b._originalIdx);
|
|
1047
1047
|
setValidSteps(newValidSteps);
|
|
1048
|
-
|
|
1049
|
-
skipNextRecomputeRef.current = true;
|
|
1050
|
-
}
|
|
1048
|
+
skipNextRecomputeRef.current = true;
|
|
1051
1049
|
setGlobalState((s) => ({
|
|
1052
1050
|
...s,
|
|
1053
1051
|
activeTour: { ...s.activeTour, currentStep: nextOrigIdx }
|
|
1054
1052
|
}));
|
|
1055
1053
|
};
|
|
1056
1054
|
const SETTLE_DELAY = 150;
|
|
1057
|
-
const alreadyExists = document.getElementById(
|
|
1055
|
+
const alreadyExists = document.getElementById(nextStepElId);
|
|
1058
1056
|
if (alreadyExists) {
|
|
1059
1057
|
withDelay(() => setTimeout(() => injectAndAdvance(), SETTLE_DELAY));
|
|
1060
1058
|
} else {
|
|
1061
1059
|
waitingForElsRef.current = true;
|
|
1062
1060
|
const observer = new MutationObserver(() => {
|
|
1063
|
-
const found = document.getElementById(
|
|
1061
|
+
const found = document.getElementById(nextStepElId);
|
|
1064
1062
|
if (found) {
|
|
1065
1063
|
observer.disconnect();
|
|
1066
1064
|
waitingForElsRef.current = false;
|
|
@@ -1083,6 +1081,12 @@ var WalkthroughOverlay = ({
|
|
|
1083
1081
|
setTimeout(() => completeTour(), 300);
|
|
1084
1082
|
return;
|
|
1085
1083
|
}
|
|
1084
|
+
if (nextElId) {
|
|
1085
|
+
setPopoverHidden(true);
|
|
1086
|
+
setPopoverPos(null);
|
|
1087
|
+
withDelay(() => advanceWithNextEl());
|
|
1088
|
+
return;
|
|
1089
|
+
}
|
|
1086
1090
|
if (afterNextDelay > 0) {
|
|
1087
1091
|
setPopoverHidden(true);
|
|
1088
1092
|
setPopoverPos(null);
|