informed/dist/cjs/hooks/useMultistepStep.js

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

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var useMultistepState = require('./useMultistepState.js');
var useMultistepApi = require('./useMultistepApi.js');
var Context = require('../Context.js');
var useRelevance = require('./useRelevance.js');
var debug = require('../debug.js');
var useFormController = require('./useFormController.js');
var Scope = require('../components/Scope.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var logger = debug.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.useFormController();
  var _useMultistepState = useMultistepState.useMultistepState(),
    current = _useMultistepState.current,
    goal = _useMultistepState.goal;
  var _useMultistepApi = useMultistepApi.useMultistepApi(),
    register = _useMultistepApi.register,
    deregister = _useMultistepApi.deregister,
    next = _useMultistepApi.next,
    metGoal = _useMultistepApi.metGoal;
  var active = step === current;
  var relDepsRef = React.useRef();
  relDepsRef.current = relevanceDeps;
  React.useEffect(function () {
    register(step, {
      name: step,
      relevant: relevant,
      relDepsRef: relDepsRef
    });
  }, []);
  var isRelevant = useRelevance.useRelevance({
    name: step,
    relevant: relevant,
    relevanceWhen: relevanceWhen,
    relevanceDeps: relevanceDeps
  });

  // Cleanup on irrelivant
  React.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]);
  React.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]);
  React.useEffect(function () {
    return function () {
      logger('MULTISTEP REMOVING', step);
      formController.remove(step);
      deregister(step);
    };
  }, []);
  var render = function render(children) {
    return /*#__PURE__*/React__default["default"].createElement(Context.MultistepStepContext.Provider, {
      value: active
    }, /*#__PURE__*/React__default["default"].createElement(Scope.Scope, {
      scope: step
    }, active ? children : null));
  };
  return {
    active: active,
    step: step,
    render: render,
    relevant: isRelevant
  };
};

exports.useMultistepStep = useMultistepStep;