@roqueform/react/lib/FieldRenderer.mjs

Hooks and components to integrate Roqueform with React.

import { useReducer, useRef, useLayoutEffect, isValidElement, createElement, Fragment } from 'react';
import { callOrGet } from '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 = useReducer(reduceCount, 0), rerender = _a[1];
    var handleChangeRef = useRef();
    handleChangeRef.current = props.onChange;
    if (typeof window !== 'undefined') {
        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 = callOrGet(props.children, field);
    return isValidElement(children) ? children : createElement(Fragment, null, children);
}
function reduceCount(count) {
    return count + 1;
}

export { FieldRenderer };