informed/dist/cjs/hooks/useFormStateSelector.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 useFormController = require('./useFormController.js');
var proxy = require('../proxy.js');
var useForceUpdate = require('./useForceUpdate.js');
var structuredClone = require('../structuredClone.js');

function useFormStateSelector(selector) {
  var formController = useFormController.useFormController();
  var affected = new WeakMap();
  var proxyCache = React.useMemo(function () {
    return new WeakMap();
  }, []);
  var prevState = React.useRef(structuredClone.structuredClone(formController.state));
  var lastAffected = React.useRef(affected);
  var forceUpdate = useForceUpdate.useForceUpdate();
  var selectorStateRef = React.useRef(selector(proxy.createDeepProxy(prevState.current, affected, proxyCache)));
  var selectorRef = React.useRef();
  selectorRef.current = selector;
  lastAffected.current = affected;
  React.useEffect(function () {
    var callback = function callback() {
      if (proxy.isDeepChanged(prevState.current, formController.state, lastAffected.current)) {
        prevState.current = structuredClone.structuredClone(formController.state);
        selectorStateRef.current = selectorRef.current(proxy.createDeepProxy(prevState.current, affected, proxyCache));
        forceUpdate();
      }
    };
    formController.on('field', callback);
    return function () {
      formController.removeListener('field', callback);
    };
  }, []);
  return selectorStateRef.current;
}

exports.useFormStateSelector = useFormStateSelector;