@roqueform/react/lib/FieldRenderer.js

Hooks and components to integrate Roqueform with React.

'use strict';

var react = require('react');
var roqueform = require('roqueform');

/**
 * The component that subscribes to the field instance and re-renders its children when an event is dispatched onto the
 * field.
 *
 * @template Field The rendered field.
 */
function FieldRenderer(props) {
    var field = props.field, eagerlyUpdated = props.eagerlyUpdated;
    var _a = react.useReducer(reduceCount, 0), rerender = _a[1];
    var handleChangeRef = react.useRef();
    handleChangeRef.current = props.onChange;
    if (typeof window !== 'undefined') {
        react.useLayoutEffect(function () {
            return field.on('*', function (event) {
                if (eagerlyUpdated || event.originField === field) {
                    rerender();
                }
                if (field.isTransient || event.type !== 'change:value' || event.targetField !== field) {
                    // The non-transient value of this field didn't change
                    return;
                }
                var handleChange = handleChangeRef.current;
                if (typeof handleChange === 'function') {
                    handleChange(field.value);
                }
            });
        }, [field, eagerlyUpdated]);
    }
    var children = roqueform.callOrGet(props.children, field);
    return react.isValidElement(children) ? children : react.createElement(react.Fragment, null, children);
}
function reduceCount(count) {
    return count + 1;
}

exports.FieldRenderer = FieldRenderer;