Grabbed dndbeyond's source code
``` ~/go/bin/sourcemapper -output ddb -jsurl https://media.dndbeyond.com/character-app/static/js/main.90aa78c5.js ```
This commit is contained in:
+978
@@ -0,0 +1,978 @@
|
||||
var __defProp = Object.defineProperty;
|
||||
var __defProps = Object.defineProperties;
|
||||
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
||||
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
||||
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
||||
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
||||
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
||||
var __spreadValues = (a, b) => {
|
||||
for (var prop in b || (b = {}))
|
||||
if (__hasOwnProp.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
if (__getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(b)) {
|
||||
if (__propIsEnum.call(b, prop))
|
||||
__defNormalProp(a, prop, b[prop]);
|
||||
}
|
||||
return a;
|
||||
};
|
||||
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
||||
var __objRest = (source, exclude) => {
|
||||
var target = {};
|
||||
for (var prop in source)
|
||||
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
||||
target[prop] = source[prop];
|
||||
if (source != null && __getOwnPropSymbols)
|
||||
for (var prop of __getOwnPropSymbols(source)) {
|
||||
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
||||
target[prop] = source[prop];
|
||||
}
|
||||
return target;
|
||||
};
|
||||
|
||||
// Tour.tsx
|
||||
import React6, { useEffect as useEffect3 } from "react";
|
||||
import { Observables } from "@reactour/utils";
|
||||
import { Mask } from "@reactour/mask";
|
||||
import { Popover } from "@reactour/popover";
|
||||
|
||||
// hooks.tsx
|
||||
import { useEffect, useCallback, useState } from "react";
|
||||
import { inView, smoothScroll, getWindow, getRect } from "@reactour/utils";
|
||||
var initialState = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
windowWidth: 0,
|
||||
windowHeight: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
function useSizes(step, scrollOptions = {
|
||||
block: "center",
|
||||
behavior: "smooth",
|
||||
inViewThreshold: 0
|
||||
}) {
|
||||
const [transition, setTransition] = useState(false);
|
||||
const [observing, setObserving] = useState(false);
|
||||
const [isHighlightingObserved, setIsHighlightingObserved] = useState(false);
|
||||
const [refresher, setRefresher] = useState(null);
|
||||
const [dimensions, setDimensions] = useState(initialState);
|
||||
const target = (step == null ? void 0 : step.selector) instanceof Element ? step == null ? void 0 : step.selector : document.querySelector(step == null ? void 0 : step.selector);
|
||||
const handleResize = useCallback(() => {
|
||||
const _a = getHighlightedRect(
|
||||
target,
|
||||
step == null ? void 0 : step.highlightedSelectors,
|
||||
step == null ? void 0 : step.bypassElem
|
||||
), { hasHighligtedElems } = _a, newDimensions = __objRest(_a, ["hasHighligtedElems"]);
|
||||
if (Object.entries(dimensions).some(
|
||||
([key, value]) => newDimensions[key] !== value
|
||||
)) {
|
||||
setDimensions(newDimensions);
|
||||
}
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, dimensions]);
|
||||
useEffect(() => {
|
||||
handleResize();
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, refresher]);
|
||||
useEffect(() => {
|
||||
const isInView = inView(__spreadProps(__spreadValues({}, dimensions), {
|
||||
threshold: scrollOptions.inViewThreshold
|
||||
}));
|
||||
if (!isInView && target) {
|
||||
setTransition(true);
|
||||
smoothScroll(target, scrollOptions).then(() => {
|
||||
if (!observing)
|
||||
setRefresher(Date.now());
|
||||
}).finally(() => {
|
||||
setTransition(false);
|
||||
});
|
||||
}
|
||||
}, [dimensions]);
|
||||
const observableRefresher = useCallback(() => {
|
||||
setObserving(true);
|
||||
const _a = getHighlightedRect(
|
||||
target,
|
||||
step == null ? void 0 : step.highlightedSelectors,
|
||||
step == null ? void 0 : step.bypassElem
|
||||
), { hasHighligtedElems } = _a, dimesions = __objRest(_a, ["hasHighligtedElems"]);
|
||||
setIsHighlightingObserved(hasHighligtedElems);
|
||||
setDimensions(dimesions);
|
||||
setObserving(false);
|
||||
}, [target, step == null ? void 0 : step.highlightedSelectors, dimensions]);
|
||||
return {
|
||||
sizes: dimensions,
|
||||
transition,
|
||||
target,
|
||||
observableRefresher,
|
||||
isHighlightingObserved
|
||||
};
|
||||
}
|
||||
function getHighlightedRect(node, highlightedSelectors = [], bypassElem = true) {
|
||||
let hasHighligtedElems = false;
|
||||
const { w: windowWidth, h: windowHeight } = getWindow();
|
||||
if (!highlightedSelectors) {
|
||||
return __spreadProps(__spreadValues({}, getRect(node)), {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
hasHighligtedElems: false
|
||||
});
|
||||
}
|
||||
let attrs = getRect(node);
|
||||
let altAttrs = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: windowWidth,
|
||||
right: 0,
|
||||
top: windowHeight,
|
||||
width: 0
|
||||
};
|
||||
for (const selector of highlightedSelectors) {
|
||||
const element = document.querySelector(selector);
|
||||
if (!element || element.style.display === "none" || element.style.visibility === "hidden") {
|
||||
continue;
|
||||
}
|
||||
const rect = getRect(element);
|
||||
hasHighligtedElems = true;
|
||||
if (bypassElem || !node) {
|
||||
if (rect.top < altAttrs.top) {
|
||||
altAttrs.top = rect.top;
|
||||
}
|
||||
if (rect.right > altAttrs.right) {
|
||||
altAttrs.right = rect.right;
|
||||
}
|
||||
if (rect.bottom > altAttrs.bottom) {
|
||||
altAttrs.bottom = rect.bottom;
|
||||
}
|
||||
if (rect.left < altAttrs.left) {
|
||||
altAttrs.left = rect.left;
|
||||
}
|
||||
altAttrs.width = altAttrs.right - altAttrs.left;
|
||||
altAttrs.height = altAttrs.bottom - altAttrs.top;
|
||||
} else {
|
||||
if (rect.top < attrs.top) {
|
||||
attrs.top = rect.top;
|
||||
}
|
||||
if (rect.right > attrs.right) {
|
||||
attrs.right = rect.right;
|
||||
}
|
||||
if (rect.bottom > attrs.bottom) {
|
||||
attrs.bottom = rect.bottom;
|
||||
}
|
||||
if (rect.left < attrs.left) {
|
||||
attrs.left = rect.left;
|
||||
}
|
||||
attrs.width = attrs.right - attrs.left;
|
||||
attrs.height = attrs.bottom - attrs.top;
|
||||
}
|
||||
}
|
||||
const bypassable = bypassElem || !node ? altAttrs.width > 0 && altAttrs.height > 0 : false;
|
||||
return {
|
||||
left: (bypassable ? altAttrs : attrs).left,
|
||||
top: (bypassable ? altAttrs : attrs).top,
|
||||
right: (bypassable ? altAttrs : attrs).right,
|
||||
bottom: (bypassable ? altAttrs : attrs).bottom,
|
||||
width: (bypassable ? altAttrs : attrs).width,
|
||||
height: (bypassable ? altAttrs : attrs).height,
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
hasHighligtedElems,
|
||||
x: attrs.x,
|
||||
y: attrs.y
|
||||
};
|
||||
}
|
||||
|
||||
// Keyboard.tsx
|
||||
import { useEffect as useEffect2 } from "react";
|
||||
var Keyboard = ({
|
||||
disableKeyboardNavigation,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
stepsLength,
|
||||
disable,
|
||||
rtl,
|
||||
clickProps,
|
||||
keyboardHandler
|
||||
}) => {
|
||||
function keyDownHandler(e) {
|
||||
e.stopPropagation();
|
||||
if (disableKeyboardNavigation === true || disable) {
|
||||
return;
|
||||
}
|
||||
let isEscDisabled, isRightDisabled, isLeftDisabled;
|
||||
if (disableKeyboardNavigation) {
|
||||
isEscDisabled = disableKeyboardNavigation.includes("esc");
|
||||
isRightDisabled = disableKeyboardNavigation.includes("right");
|
||||
isLeftDisabled = disableKeyboardNavigation.includes("left");
|
||||
}
|
||||
function next() {
|
||||
setCurrentStep(Math.min(currentStep + 1, stepsLength - 1));
|
||||
}
|
||||
function prev() {
|
||||
setCurrentStep(Math.max(currentStep - 1, 0));
|
||||
}
|
||||
if (keyboardHandler && typeof keyboardHandler === "function") {
|
||||
keyboardHandler(e, clickProps, {
|
||||
isEscDisabled,
|
||||
isRightDisabled,
|
||||
isLeftDisabled
|
||||
});
|
||||
} else {
|
||||
if (e.keyCode === 27 && !isEscDisabled) {
|
||||
e.preventDefault();
|
||||
setIsOpen(false);
|
||||
}
|
||||
if (e.keyCode === 39 && !isRightDisabled) {
|
||||
e.preventDefault();
|
||||
if (rtl) {
|
||||
prev();
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
}
|
||||
if (e.keyCode === 37 && !isLeftDisabled) {
|
||||
e.preventDefault();
|
||||
if (rtl) {
|
||||
next();
|
||||
} else {
|
||||
prev();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
useEffect2(() => {
|
||||
window.addEventListener("keydown", keyDownHandler, false);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", keyDownHandler);
|
||||
};
|
||||
}, [disable, setCurrentStep, currentStep]);
|
||||
return null;
|
||||
};
|
||||
var Keyboard_default = Keyboard;
|
||||
|
||||
// components/PopoverContent.tsx
|
||||
import React5 from "react";
|
||||
|
||||
// components/Badge.tsx
|
||||
import React2 from "react";
|
||||
|
||||
// styles.tsx
|
||||
var defaultStyles = {
|
||||
badge: () => ({
|
||||
position: "absolute",
|
||||
fontFamily: "monospace",
|
||||
background: "var(--reactour-accent,#007aff)",
|
||||
height: "1.875em",
|
||||
lineHeight: 2,
|
||||
paddingLeft: "0.8125em",
|
||||
paddingRight: "0.8125em",
|
||||
fontSize: "1em",
|
||||
borderRadius: "1.625em",
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
boxShadow: "0 0.25em 0.5em rgba(0, 0, 0, 0.3)",
|
||||
top: "-0.8125em",
|
||||
left: "-0.8125em"
|
||||
}),
|
||||
controls: () => ({
|
||||
display: "flex",
|
||||
marginTop: 24,
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}),
|
||||
navigation: () => ({
|
||||
counterReset: "dot",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
flexWrap: "wrap"
|
||||
}),
|
||||
button: ({ disabled }) => ({
|
||||
display: "block",
|
||||
padding: 0,
|
||||
border: 0,
|
||||
background: "none",
|
||||
cursor: disabled ? "not-allowed" : "pointer"
|
||||
}),
|
||||
arrow: ({ disabled }) => ({
|
||||
color: disabled ? "#caccce" : "#646464",
|
||||
width: 16,
|
||||
height: 12,
|
||||
flex: "0 0 16px"
|
||||
// '&:hover': {
|
||||
// color: disabled ? '#caccce' : '#000',
|
||||
// },
|
||||
}),
|
||||
dot: ({ current, disabled, showNumber }) => ({
|
||||
counterIncrement: "dot",
|
||||
width: 8,
|
||||
height: 8,
|
||||
border: current ? "0" : "1px solid #caccce",
|
||||
borderRadius: "100%",
|
||||
padding: 0,
|
||||
display: "block",
|
||||
margin: 4,
|
||||
transition: "opacity 0.3s, transform 0.3s",
|
||||
cursor: disabled ? "not-allowed" : "pointer",
|
||||
transform: `scale(${current ? 1.25 : 1})`,
|
||||
color: current ? "var(--reactour-accent, #007aff)" : "#caccce",
|
||||
background: current ? "var(--reactour-accent, #007aff)" : "none"
|
||||
// '&:before': {
|
||||
// content: 'counter(dot)',
|
||||
// position: 'absolute',
|
||||
// bottom: 'calc(100% + 0.25em)',
|
||||
// left: '50%',
|
||||
// opacity: 0,
|
||||
// transform: 'translate(-50%, 1em)',
|
||||
// transition: '0.3s',
|
||||
// display: showNumber ? 'block' : 'none',
|
||||
// },
|
||||
// '&:hover': {
|
||||
// backgroundColor: 'currentColor',
|
||||
// '&:before': {
|
||||
// opacity: 0.5,
|
||||
// transform: 'translate(-50%, -2px)',
|
||||
// },
|
||||
// },
|
||||
}),
|
||||
close: ({ disabled }) => ({
|
||||
position: "absolute",
|
||||
top: 22,
|
||||
right: 22,
|
||||
width: 9,
|
||||
height: 9,
|
||||
"--rt-close-btn": disabled ? "#caccce" : "#5e5e5e",
|
||||
"--rt-close-btn-disabled": disabled ? "#caccce" : "#000"
|
||||
}),
|
||||
svg: () => ({
|
||||
display: "block"
|
||||
})
|
||||
};
|
||||
function stylesMatcher(styles) {
|
||||
return (key, state) => {
|
||||
const base = defaultStyles[key](state);
|
||||
const custom = styles[key];
|
||||
return custom ? custom(base, state) : base;
|
||||
};
|
||||
}
|
||||
|
||||
// components/Badge.tsx
|
||||
var Badge = ({
|
||||
styles = {},
|
||||
children
|
||||
}) => {
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React2.createElement("span", { style: getStyles("badge", {}) }, children);
|
||||
};
|
||||
var Badge_default = Badge;
|
||||
|
||||
// components/Close.tsx
|
||||
import React3 from "react";
|
||||
var Close = (_a) => {
|
||||
var _b = _a, {
|
||||
styles = {},
|
||||
onClick,
|
||||
disabled
|
||||
} = _b, props = __objRest(_b, [
|
||||
"styles",
|
||||
"onClick",
|
||||
"disabled"
|
||||
]);
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React3.createElement(
|
||||
"button",
|
||||
__spreadValues({
|
||||
className: "reactour__close-button",
|
||||
style: __spreadValues(__spreadValues({}, getStyles("button", {})), getStyles("close", { disabled })),
|
||||
onClick
|
||||
}, props),
|
||||
/* @__PURE__ */ React3.createElement(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 9.1 9.1",
|
||||
"aria-hidden": true,
|
||||
role: "presentation",
|
||||
style: __spreadValues({}, getStyles("svg", {}))
|
||||
},
|
||||
/* @__PURE__ */ React3.createElement(
|
||||
"path",
|
||||
{
|
||||
fill: "currentColor",
|
||||
d: "M5.9 4.5l2.8-2.8c.4-.4.4-1 0-1.4-.4-.4-1-.4-1.4 0L4.5 3.1 1.7.3C1.3-.1.7-.1.3.3c-.4.4-.4 1 0 1.4l2.8 2.8L.3 7.4c-.4.4-.4 1 0 1.4.2.2.4.3.7.3s.5-.1.7-.3L4.5 6l2.8 2.8c.3.2.5.3.8.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L5.9 4.5z"
|
||||
}
|
||||
)
|
||||
)
|
||||
);
|
||||
};
|
||||
var Close_default = Close;
|
||||
|
||||
// components/Content.tsx
|
||||
var Content = ({
|
||||
content,
|
||||
setCurrentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
currentStep,
|
||||
setIsOpen
|
||||
}) => {
|
||||
return typeof content === "function" ? content({
|
||||
setCurrentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
currentStep,
|
||||
setIsOpen
|
||||
}) : content;
|
||||
};
|
||||
var Content_default = Content;
|
||||
|
||||
// components/Navigation.tsx
|
||||
import React4 from "react";
|
||||
var Navigation = ({
|
||||
styles = {},
|
||||
steps,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDots,
|
||||
hideDots,
|
||||
hideButtons,
|
||||
disableAll,
|
||||
rtl,
|
||||
Arrow = DefaultArrow
|
||||
}) => {
|
||||
const stepsLength = steps.length;
|
||||
const getStyles = stylesMatcher(styles);
|
||||
const Button = ({
|
||||
onClick,
|
||||
kind = "next",
|
||||
children,
|
||||
hideArrow
|
||||
}) => {
|
||||
function clickHandler() {
|
||||
if (!disableAll) {
|
||||
if (onClick && typeof onClick === "function") {
|
||||
onClick();
|
||||
} else {
|
||||
if (kind === "next") {
|
||||
setCurrentStep(Math.min(currentStep + 1, stepsLength - 1));
|
||||
} else {
|
||||
setCurrentStep(Math.max(currentStep - 1, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"button",
|
||||
{
|
||||
style: getStyles("button", {
|
||||
kind,
|
||||
disabled: disableAll ? disableAll : kind === "next" ? stepsLength - 1 === currentStep : currentStep === 0
|
||||
}),
|
||||
onClick: clickHandler,
|
||||
"aria-label": `Go to ${kind} step`
|
||||
},
|
||||
!hideArrow ? /* @__PURE__ */ React4.createElement(
|
||||
Arrow,
|
||||
{
|
||||
styles,
|
||||
inverted: rtl ? kind === "prev" : kind === "next",
|
||||
disabled: disableAll ? disableAll : kind === "next" ? stepsLength - 1 === currentStep : currentStep === 0
|
||||
}
|
||||
) : null,
|
||||
children
|
||||
);
|
||||
};
|
||||
return /* @__PURE__ */ React4.createElement("div", { style: getStyles("controls", {}), dir: rtl ? "rtl" : "ltr" }, !hideButtons ? prevButton && typeof prevButton === "function" ? prevButton({
|
||||
Button,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
stepsLength,
|
||||
setIsOpen,
|
||||
steps
|
||||
}) : /* @__PURE__ */ React4.createElement(Button, { kind: "prev" }) : null, !hideDots ? /* @__PURE__ */ React4.createElement("div", { style: getStyles("navigation", {}) }, Array.from({ length: stepsLength }, (_, i) => i).map((index) => {
|
||||
var _a;
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"button",
|
||||
{
|
||||
style: getStyles("dot", {
|
||||
current: index === currentStep,
|
||||
disabled: disableDots || disableAll
|
||||
}),
|
||||
onClick: () => {
|
||||
if (!disableDots && !disableAll)
|
||||
setCurrentStep(index);
|
||||
},
|
||||
key: `navigation_dot_${index}`,
|
||||
"aria-label": ((_a = steps[index]) == null ? void 0 : _a.navDotAriaLabel) || `Go to step ${index + 1}`
|
||||
}
|
||||
);
|
||||
})) : null, !hideButtons ? nextButton && typeof nextButton === "function" ? nextButton({
|
||||
Button,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
stepsLength,
|
||||
setIsOpen,
|
||||
steps
|
||||
}) : /* @__PURE__ */ React4.createElement(Button, null) : null);
|
||||
};
|
||||
var Navigation_default = Navigation;
|
||||
var DefaultArrow = ({
|
||||
styles = {},
|
||||
inverted = false,
|
||||
disabled
|
||||
}) => {
|
||||
const getStyles = stylesMatcher(styles);
|
||||
return /* @__PURE__ */ React4.createElement(
|
||||
"svg",
|
||||
{
|
||||
viewBox: "0 0 18.4 14.4",
|
||||
style: getStyles("arrow", { inverted, disabled })
|
||||
},
|
||||
/* @__PURE__ */ React4.createElement(
|
||||
"path",
|
||||
{
|
||||
d: inverted ? "M17 7.2H1M10.8 1L17 7.2l-6.2 6.2" : "M1.4 7.2h16M7.6 1L1.4 7.2l6.2 6.2",
|
||||
fill: "none",
|
||||
stroke: "currentColor",
|
||||
strokeWidth: "2",
|
||||
strokeLinecap: "round",
|
||||
strokeMiterlimit: "10"
|
||||
}
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
// components/index.tsx
|
||||
var components = {
|
||||
Badge: Badge_default,
|
||||
Close: Close_default,
|
||||
Content: Content_default,
|
||||
Navigation: Navigation_default,
|
||||
Arrow: DefaultArrow
|
||||
};
|
||||
var defaultComponents = (comps) => __spreadValues(__spreadValues({}, components), comps);
|
||||
|
||||
// components/PopoverContent.tsx
|
||||
var PopoverContent = ({
|
||||
styles,
|
||||
components: components2 = {},
|
||||
badgeContent,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
onClickClose,
|
||||
steps,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
setIsOpen,
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDotsNavigation,
|
||||
rtl,
|
||||
showPrevNextButtons = true,
|
||||
showCloseButton = true,
|
||||
showNavigation = true,
|
||||
showBadge = true,
|
||||
showDots = true,
|
||||
meta,
|
||||
setMeta,
|
||||
setSteps
|
||||
}) => {
|
||||
const step = steps[currentStep];
|
||||
const { Badge: Badge2, Close: Close2, Content: Content2, Navigation: Navigation2, Arrow } = defaultComponents(components2);
|
||||
const badge = badgeContent && typeof badgeContent === "function" ? badgeContent({
|
||||
currentStep,
|
||||
totalSteps: steps.length,
|
||||
transition
|
||||
}) : currentStep + 1;
|
||||
function closeClickHandler() {
|
||||
if (!disabledActions) {
|
||||
if (onClickClose && typeof onClickClose === "function") {
|
||||
onClickClose({
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
currentStep,
|
||||
steps,
|
||||
meta,
|
||||
setMeta,
|
||||
setSteps
|
||||
});
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
return /* @__PURE__ */ React5.createElement(React5.Fragment, null, showBadge ? /* @__PURE__ */ React5.createElement(Badge2, { styles }, badge) : null, showCloseButton ? /* @__PURE__ */ React5.createElement(
|
||||
Close2,
|
||||
{
|
||||
styles,
|
||||
"aria-label": accessibilityOptions == null ? void 0 : accessibilityOptions.closeButtonAriaLabel,
|
||||
disabled: disabledActions,
|
||||
onClick: closeClickHandler
|
||||
}
|
||||
) : null, /* @__PURE__ */ React5.createElement(
|
||||
Content2,
|
||||
{
|
||||
content: step == null ? void 0 : step.content,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
setIsOpen
|
||||
}
|
||||
), showNavigation ? /* @__PURE__ */ React5.createElement(
|
||||
Navigation2,
|
||||
{
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
styles,
|
||||
"aria-hidden": !(accessibilityOptions == null ? void 0 : accessibilityOptions.showNavigationScreenReaders),
|
||||
nextButton,
|
||||
prevButton,
|
||||
disableDots: disableDotsNavigation,
|
||||
hideButtons: !showPrevNextButtons,
|
||||
hideDots: !showDots,
|
||||
disableAll: disabledActions,
|
||||
rtl,
|
||||
Arrow
|
||||
}
|
||||
) : null);
|
||||
};
|
||||
var PopoverContent_default = PopoverContent;
|
||||
|
||||
// Tour.tsx
|
||||
var Tour = (_a) => {
|
||||
var _b = _a, {
|
||||
currentStep,
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
steps = [],
|
||||
setSteps,
|
||||
styles: globalStyles = {},
|
||||
scrollSmooth,
|
||||
afterOpen,
|
||||
beforeClose,
|
||||
padding = 10,
|
||||
position,
|
||||
onClickMask,
|
||||
onClickHighlighted,
|
||||
keyboardHandler,
|
||||
className = "reactour__popover",
|
||||
maskClassName = "reactour__mask",
|
||||
highlightedMaskClassName,
|
||||
clipId,
|
||||
maskId,
|
||||
disableInteraction,
|
||||
disableKeyboardNavigation: disableKeyboardNavigation,
|
||||
inViewThreshold,
|
||||
disabledActions,
|
||||
setDisabledActions,
|
||||
disableWhenSelectorFalsy,
|
||||
rtl,
|
||||
accessibilityOptions = {
|
||||
closeButtonAriaLabel: "Close Tour",
|
||||
showNavigationScreenReaders: true
|
||||
},
|
||||
ContentComponent,
|
||||
Wrapper,
|
||||
meta,
|
||||
setMeta,
|
||||
onTransition = () => {
|
||||
return "center";
|
||||
}
|
||||
} = _b, popoverProps = __objRest(_b, [
|
||||
"currentStep",
|
||||
"setCurrentStep",
|
||||
"setIsOpen",
|
||||
"steps",
|
||||
"setSteps",
|
||||
"styles",
|
||||
"scrollSmooth",
|
||||
"afterOpen",
|
||||
"beforeClose",
|
||||
"padding",
|
||||
"position",
|
||||
"onClickMask",
|
||||
"onClickHighlighted",
|
||||
"keyboardHandler",
|
||||
"className",
|
||||
"maskClassName",
|
||||
"highlightedMaskClassName",
|
||||
"clipId",
|
||||
"maskId",
|
||||
"disableInteraction",
|
||||
// disableFocusLock,
|
||||
"disableKeyboardNavigation",
|
||||
"inViewThreshold",
|
||||
"disabledActions",
|
||||
"setDisabledActions",
|
||||
"disableWhenSelectorFalsy",
|
||||
"rtl",
|
||||
"accessibilityOptions",
|
||||
"ContentComponent",
|
||||
"Wrapper",
|
||||
"meta",
|
||||
"setMeta",
|
||||
"onTransition"
|
||||
]);
|
||||
var _a2;
|
||||
const step = steps[currentStep];
|
||||
const styles = __spreadValues(__spreadValues({}, globalStyles), step == null ? void 0 : step.styles);
|
||||
const {
|
||||
sizes,
|
||||
transition,
|
||||
observableRefresher,
|
||||
isHighlightingObserved,
|
||||
target
|
||||
} = useSizes(step, {
|
||||
block: "center",
|
||||
behavior: scrollSmooth ? "smooth" : "auto",
|
||||
inViewThreshold
|
||||
});
|
||||
useEffect3(() => {
|
||||
if (afterOpen && typeof afterOpen === "function") {
|
||||
afterOpen(target);
|
||||
}
|
||||
return () => {
|
||||
if (beforeClose && typeof beforeClose === "function") {
|
||||
beforeClose(target);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
const { maskPadding, popoverPadding, wrapperPadding } = getPadding(
|
||||
(_a2 = step == null ? void 0 : step.padding) != null ? _a2 : padding
|
||||
);
|
||||
const clickProps = {
|
||||
setCurrentStep,
|
||||
setIsOpen,
|
||||
currentStep,
|
||||
setSteps,
|
||||
steps,
|
||||
setMeta,
|
||||
meta
|
||||
};
|
||||
function maskClickHandler() {
|
||||
if (!disabledActions) {
|
||||
if (onClickMask && typeof onClickMask === "function") {
|
||||
onClickMask(clickProps);
|
||||
} else {
|
||||
setIsOpen(false);
|
||||
}
|
||||
}
|
||||
}
|
||||
const doDisableInteraction = typeof (step == null ? void 0 : step.stepInteraction) === "boolean" ? !(step == null ? void 0 : step.stepInteraction) : disableInteraction ? typeof disableInteraction === "boolean" ? disableInteraction : disableInteraction(clickProps) : false;
|
||||
useEffect3(() => {
|
||||
if ((step == null ? void 0 : step.action) && typeof (step == null ? void 0 : step.action) === "function") {
|
||||
step == null ? void 0 : step.action(target);
|
||||
}
|
||||
if ((step == null ? void 0 : step.disableActions) !== void 0) {
|
||||
setDisabledActions(step == null ? void 0 : step.disableActions);
|
||||
}
|
||||
return () => {
|
||||
if ((step == null ? void 0 : step.actionAfter) && typeof (step == null ? void 0 : step.actionAfter) === "function") {
|
||||
step == null ? void 0 : step.actionAfter(target);
|
||||
}
|
||||
};
|
||||
}, [step]);
|
||||
const popoverPosition = transition ? onTransition : (step == null ? void 0 : step.position) ? step == null ? void 0 : step.position : position;
|
||||
const TourWrapper = Wrapper ? Wrapper : React6.Fragment;
|
||||
return step ? /* @__PURE__ */ React6.createElement(TourWrapper, null, /* @__PURE__ */ React6.createElement(
|
||||
Observables,
|
||||
{
|
||||
mutationObservables: step == null ? void 0 : step.mutationObservables,
|
||||
resizeObservables: step == null ? void 0 : step.resizeObservables,
|
||||
refresh: observableRefresher
|
||||
}
|
||||
), /* @__PURE__ */ React6.createElement(
|
||||
Keyboard_default,
|
||||
{
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
stepsLength: steps.length,
|
||||
disableKeyboardNavigation,
|
||||
disable: disabledActions,
|
||||
rtl,
|
||||
clickProps,
|
||||
keyboardHandler
|
||||
}
|
||||
), (!disableWhenSelectorFalsy || target) && /* @__PURE__ */ React6.createElement(
|
||||
Mask,
|
||||
{
|
||||
sizes: transition ? initialState2 : sizes,
|
||||
onClick: maskClickHandler,
|
||||
styles: __spreadValues({
|
||||
highlightedArea: (base) => __spreadProps(__spreadValues({}, base), {
|
||||
display: doDisableInteraction ? "block" : "none"
|
||||
})
|
||||
}, styles),
|
||||
padding: transition ? 0 : maskPadding,
|
||||
highlightedAreaClassName: highlightedMaskClassName,
|
||||
className: maskClassName,
|
||||
onClickHighlighted: (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (onClickHighlighted)
|
||||
onClickHighlighted(e, clickProps);
|
||||
},
|
||||
wrapperPadding,
|
||||
clipId,
|
||||
maskId
|
||||
}
|
||||
), (!disableWhenSelectorFalsy || target) && /* @__PURE__ */ React6.createElement(
|
||||
Popover,
|
||||
{
|
||||
sizes,
|
||||
styles,
|
||||
position: popoverPosition,
|
||||
padding: popoverPadding,
|
||||
"aria-labelledby": accessibilityOptions == null ? void 0 : accessibilityOptions.ariaLabelledBy,
|
||||
className,
|
||||
refresher: currentStep
|
||||
},
|
||||
ContentComponent ? /* @__PURE__ */ React6.createElement(
|
||||
ContentComponent,
|
||||
__spreadValues({
|
||||
styles,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
rtl
|
||||
}, popoverProps)
|
||||
) : /* @__PURE__ */ React6.createElement(
|
||||
PopoverContent_default,
|
||||
__spreadValues({
|
||||
styles,
|
||||
setCurrentStep,
|
||||
currentStep,
|
||||
setIsOpen,
|
||||
steps,
|
||||
setSteps,
|
||||
accessibilityOptions,
|
||||
disabledActions,
|
||||
transition,
|
||||
isHighlightingObserved,
|
||||
rtl,
|
||||
meta,
|
||||
setMeta
|
||||
}, popoverProps)
|
||||
)
|
||||
)) : null;
|
||||
};
|
||||
var Tour_default = Tour;
|
||||
function getPadding(padding) {
|
||||
if (typeof padding === "object" && padding !== null) {
|
||||
return {
|
||||
maskPadding: padding.mask,
|
||||
popoverPadding: padding.popover,
|
||||
wrapperPadding: padding.wrapper
|
||||
};
|
||||
}
|
||||
return {
|
||||
maskPadding: padding,
|
||||
popoverPadding: padding,
|
||||
wrapperPadding: 0
|
||||
};
|
||||
}
|
||||
var initialState2 = {
|
||||
bottom: 0,
|
||||
height: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
width: 0,
|
||||
x: 0,
|
||||
y: 0
|
||||
};
|
||||
|
||||
// Context.tsx
|
||||
import React7, { useState as useState2, useContext } from "react";
|
||||
var defaultState = {
|
||||
isOpen: false,
|
||||
setIsOpen: () => false,
|
||||
currentStep: 0,
|
||||
setCurrentStep: () => 0,
|
||||
steps: [],
|
||||
setSteps: () => [],
|
||||
setMeta: () => "",
|
||||
disabledActions: false,
|
||||
setDisabledActions: () => false,
|
||||
components: {}
|
||||
};
|
||||
var TourContext = React7.createContext(defaultState);
|
||||
var TourProvider = (_a) => {
|
||||
var _b = _a, {
|
||||
children,
|
||||
defaultOpen = false,
|
||||
startAt = 0,
|
||||
steps: defaultSteps,
|
||||
setCurrentStep: customSetCurrentStep,
|
||||
currentStep: customCurrentStep
|
||||
} = _b, props = __objRest(_b, [
|
||||
"children",
|
||||
"defaultOpen",
|
||||
"startAt",
|
||||
"steps",
|
||||
"setCurrentStep",
|
||||
"currentStep"
|
||||
]);
|
||||
const [isOpen, setIsOpen] = useState2(defaultOpen);
|
||||
const [currentStep, setCurrentStep] = useState2(startAt);
|
||||
const [steps, setSteps] = useState2(defaultSteps);
|
||||
const [meta, setMeta] = useState2("");
|
||||
const [disabledActions, setDisabledActions] = useState2(false);
|
||||
const value = __spreadValues({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
currentStep: customCurrentStep || currentStep,
|
||||
setCurrentStep: customSetCurrentStep && typeof customSetCurrentStep === "function" ? customSetCurrentStep : setCurrentStep,
|
||||
steps,
|
||||
setSteps,
|
||||
disabledActions,
|
||||
setDisabledActions,
|
||||
meta,
|
||||
setMeta
|
||||
}, props);
|
||||
return /* @__PURE__ */ React7.createElement(TourContext.Provider, { value }, children, isOpen ? /* @__PURE__ */ React7.createElement(Tour_default, __spreadValues({}, value)) : null);
|
||||
};
|
||||
var Context_default = TourContext;
|
||||
function useTour() {
|
||||
return useContext(TourContext);
|
||||
}
|
||||
|
||||
// withTour.tsx
|
||||
import React8 from "react";
|
||||
function withTour(WrappedComponent) {
|
||||
const ComponentWithTour = (props) => {
|
||||
const tourProps = useTour();
|
||||
return /* @__PURE__ */ React8.createElement(WrappedComponent, __spreadValues(__spreadValues({}, props), tourProps));
|
||||
};
|
||||
return ComponentWithTour;
|
||||
}
|
||||
|
||||
// index.tsx
|
||||
var tour_default = Tour_default;
|
||||
export {
|
||||
Tour_default as Tour,
|
||||
Context_default as TourContext,
|
||||
TourProvider,
|
||||
components,
|
||||
tour_default as default,
|
||||
useTour,
|
||||
withTour
|
||||
};
|
||||
Reference in New Issue
Block a user