Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
// - XState (all XState exports)

const setDistance = () => {};

const pullToRefreshMachine = Machine(
  {
    id: "pullToRefresh",
    initial: "dirty",
    context: {
      distance: 0,
      scrollTop: null,
      threshold: 150
    },
    states: {
      dirty: {
        on: {
          "": [
            { cond: "isScrolledToTop", target: "idle" },
            { cond: "hasScrolledDown", target: "disabled" }
          ],
          SCROLL: {
            target: "dirty",
            actions: ["storeScrollTop"]
          }
        }
      },
      idle: {
        on: {
          PULL_MOVE: {
            target: "pulling",
            actions: ["storeDistance", "setDistance"]
          }
        }
      },
      pulling: {
        on: {
          PULL_MOVE: {
            target: "pulling",
            actions: ["storeDistance", "setDistance"]
          },
          PULL_END: [
            { cond: "yPosIsAboveThreshold", target: "loading" },
            { target: "idle" }
          ]
        }
      },
      loading: {
        initial: "unresolved",
        states: {
          unresolved: {
            on: { RESOLVE: "resolved", REJECT: "rejected" }
          },
          resolved: {
            on: { "": "#pullToRefresh.dirty" }
          },
          rejected: {
            on: { "": "#pullToRefresh.dirty" }
          }
        }
      },
      disabled: {
        on: {
          SCROLL: {
            target: "dirty",
            actions: ["storeScrollTop"]
          }
        }
      }
    }
  },
  {
    actions: {
      setDistance,
      storeDistance: assign({
        distance: (context, event) =>
          Math.min(context.threshold, Math.max(0, event.distance))
      }),
      storeScrollTop: assign({
        scrollTop: (context, event) => event.scrollTop
      })
    },
    guards: {
      isScrolledToTop({ scrollTop }) {
        return scrollTop === 0;
      },
      hasScrolledDown({ scrollTop }) {
        return scrollTop !== null && scrollTop > 0;
      },
      yPosIsAboveThreshold({ distance, threshold }) {
        return distance >= threshold;
      }
    }
  }
);