react-promenade/dist/index.mjs

React components for crafting multi-step user flows

var __async = (__this, __arguments, generator) => {
  return new Promise((resolve, reject) => {
    var fulfilled = (value) => {
      try {
        step(generator.next(value));
      } catch (e) {
        reject(e);
      }
    };
    var rejected = (value) => {
      try {
        step(generator.throw(value));
      } catch (e) {
        reject(e);
      }
    };
    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
    step((generator = generator.apply(__this, __arguments)).next());
  });
};

// src/PromenadeProvider.tsx
import React, {
  useCallback,
  useState
} from "react";

// src/PromenadeContext.ts
import { createContext } from "react";
var PromenadeContext = createContext(
  void 0
);

// src/PromenadeProvider.tsx
var PromenadeProvider = ({
  children,
  stepCount,
  isNextDisabled = () => false,
  isBackDisabled = () => false,
  isNextLoading = () => false,
  isBackLoading = () => false,
  onBack,
  onNext
}) => {
  const [index, setIndex] = useState(0);
  const goForward = useCallback(() => __async(void 0, null, function* () {
    if (isNextDisabled(index)) return;
    try {
      yield onNext == null ? void 0 : onNext(index);
      if (index < stepCount - 1) {
        setIndex(index + 1);
      }
    } catch (error) {
      console.error(error);
    }
  }), [isNextDisabled, index, stepCount, onNext]);
  const goBack = useCallback(() => __async(void 0, null, function* () {
    if (isBackDisabled(index)) return;
    try {
      yield onBack == null ? void 0 : onBack(index);
      if (index > 0) {
        setIndex(index - 1);
      }
    } catch (error) {
      console.error(error);
    }
  }), [isBackDisabled, index, stepCount, onBack]);
  const cancelFlow = useCallback(() => {
    setIndex(0);
  }, []);
  return /* @__PURE__ */ React.createElement(
    PromenadeContext.Provider,
    {
      value: {
        index,
        stepCount,
        isNextDisabled: isNextDisabled(index),
        isBackDisabled: isBackDisabled(index),
        isNextLoading: isNextLoading(index),
        isBackLoading: isBackLoading(index),
        goForward,
        goBack,
        cancelFlow
      }
    },
    children
  );
};

// src/PromenadeStep.tsx
import React2 from "react";

// src/usePromenade.ts
import { useContext } from "react";
var usePromenade = () => {
  const context = useContext(PromenadeContext);
  if (!context) {
    throw new Error("usePromenade must be used within a PromenadeProvider");
  }
  return context;
};

// src/PromenadeStep.tsx
var PromenadeStep = ({ index, children }) => {
  const { index: currentIndex } = usePromenade();
  if (index !== currentIndex) return null;
  return /* @__PURE__ */ React2.createElement("div", null, children);
};
export {
  PromenadeProvider,
  PromenadeStep,
  usePromenade
};