informed/dist/esm/hooks/useMultistepStep.js

A lightweight framework and utility for building powerful forms in React applications

import React, { useRef, useEffect } from 'react';
import { useMultistepState } from './useMultistepState.js';
import { useMultistepApi } from './useMultistepApi.js';
import { MultistepStepContext } from '../Context.js';
import { useRelevance } from './useRelevance.js';
import { Debug } from '../debug.js';
import { useFormController } from './useFormController.js';
import { Scope } from '../components/Scope.js';

var logger = Debug('informed:useMultistepStep' + '\t');
var useMultistepStep = function useMultistepStep(_ref) {
  var step = _ref.step,
    relevant = _ref.relevant,
    keepState = _ref.keepState,
    _ref$relevanceWhen = _ref.relevanceWhen,
    relevanceWhen = _ref$relevanceWhen === void 0 ? [] : _ref$relevanceWhen,
    _ref$relevanceDeps = _ref.relevanceDeps,
    relevanceDeps = _ref$relevanceDeps === void 0 ? [] : _ref$relevanceDeps;
  var formController = useFormController();
  var _useMultistepState = useMultistepState(),
    current = _useMultistepState.current,
    goal = _useMultistepState.goal;
  var _useMultistepApi = useMultistepApi(),
    register = _useMultistepApi.register,
    deregister = _useMultistepApi.deregister,
    next = _useMultistepApi.next,
    metGoal = _useMultistepApi.metGoal;
  var active = step === current;
  var relDepsRef = useRef();
  relDepsRef.current = relevanceDeps;
  useEffect(function () {
    register(step, {
      name: step,
      relevant: relevant,
      relDepsRef: relDepsRef
    });
  }, []);
  var isRelevant = useRelevance({
    name: step,
    relevant: relevant,
    relevanceWhen: relevanceWhen,
    relevanceDeps: relevanceDeps
  });

  // Cleanup on irrelivant
  useEffect(function () {
    if (!isRelevant && !keepState) {
      logger('MULTISTEP RELEVNAT REMOVING', step);
      formController.remove(step);
    }
    // We also need all steps to re evaluate if they have next and prev
    formController.emitter.emit('multistep-relevance');
  }, [isRelevant]);
  useEffect(function () {
    // if we are NOT at the goal go to the next step
    if (goal && active && goal !== step) {
      logger('GOAL', goal, 'STEP', step);
      logger('GOING TO NEXT STEP');
      next();
    }
    // If we have met our goal clear it
    if (goal && active && goal === step) {
      metGoal();
    }
  }, [goal, active]);
  useEffect(function () {
    return function () {
      logger('MULTISTEP REMOVING', step);
      formController.remove(step);
      deregister(step);
    };
  }, []);
  var render = function render(children) {
    return /*#__PURE__*/React.createElement(MultistepStepContext.Provider, {
      value: active
    }, /*#__PURE__*/React.createElement(Scope, {
      scope: step
    }, active ? children : null));
  };
  return {
    active: active,
    step: step,
    render: render,
    relevant: isRelevant
  };
};

export { useMultistepStep };