@schematic-forms/react/lib/index.js

react adapter for schematic forms

'use strict';

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

var React = require('react');
var core = require('@schematic-forms/core');

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

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

var FormContext = React.createContext({
    controller: new core.FormController({
        fields: {},
        submit: function () {
            console.error("MISS CONTEXT ERROR");
        }
    })
});

var FormProvider = function (props) {
    var value = React.useMemo(function () { return ({
        controller: props.controller
    }); }, [props.controller]);
    return (React__default['default'].createElement(FormContext.Provider, { value: value }, props.children));
};
var FormProvider$1 = React.memo(FormProvider);

var ErrorConsumer = function (props) {
    var context = React.useContext(FormContext);
    var _a = React.useState(null), error = _a[0], setError = _a[1];
    var hasError = React.useMemo(function () {
        return !!error;
    }, [error]);
    React.useEffect(function () {
        if (!(context === null || context === void 0 ? void 0 : context.controller))
            return;
        var sub = context.controller.subscribe("errors", function (errors) {
            if (!props.field) {
                setError(Object.keys(errors).length > 0 ? "ERRORS" : null);
            }
            else {
                if (props.field in errors) {
                    if (props.error) {
                        if (errors[props.field] === props.error) {
                            setError(props.error);
                        }
                        else {
                            setError(null);
                        }
                    }
                    else {
                        setError(errors[props.field] || null);
                    }
                }
                else {
                    setError(null);
                }
            }
        });
        return function () {
            sub.unsubscribe();
        };
    }, [context, props.error, props.field]);
    if (props.children instanceof Function) {
        return (React__default['default'].createElement(React__default['default'].Fragment, null, props.children({ hasError: hasError, errorCode: error })));
    }
    return (React__default['default'].createElement(React__default['default'].Fragment, null, hasError ? props.children : null));
};
var ErrorConsumer$1 = React.memo(ErrorConsumer);

var ValueConsumer = function (props) {
    var ctx = React.useContext(FormContext);
    var _a = React.useState((ctx === null || ctx === void 0 ? void 0 : ctx.controller.get(props.field)) || props.initialValue || undefined), value = _a[0], setValue = _a[1];
    React.useEffect(function () {
        if (!ctx)
            return;
        var sub = ctx.controller.subscribe("values", function (values) {
            setValue(values[props.field]);
        });
        return function () {
            sub.unsubscribe();
        };
    }, [ctx]);
    if (!ctx)
        return null;
    if (props.children instanceof Function) {
        return props.children({ value: value });
    }
    else {
        if (value)
            return props.children;
        else
            return null;
    }
};
var ValueConsumer$1 = React.memo(ValueConsumer);

var useController = function (config) {
    var controller = React.useState(new core.FormController(config))[0];
    var submit = React.useCallback(function () {
        var arg = [];
        for (var _i = 0; _i < arguments.length; _i++) {
            arg[_i] = arguments[_i];
        }
        return controller.submit.apply(controller, arg);
    }, [controller]);
    var clear = React.useCallback(function () { return controller.clear(); }, [controller]);
    return { controller: controller, submit: submit, clear: clear };
};

function useForm(name, nullValue) {
    var context = React.useContext(FormContext);
    var _a = React.useState((context === null || context === void 0 ? void 0 : context.controller.getValues()[name]) || nullValue), state = _a[0], setState = _a[1];
    var _b = React.useState((context === null || context === void 0 ? void 0 : context.controller.errors.getState()[name]) || null), error = _b[0], setErrors = _b[1];
    React.useEffect(function () {
        if (!context)
            return;
        var sub1 = context.controller.subscribe("values", function (values) {
            var _a;
            setState((_a = values[name]) !== null && _a !== void 0 ? _a : nullValue);
        });
        var sub2 = context.controller.subscribe("errors", function (errors) {
            setErrors(errors[name] || null);
        });
        return function () {
            sub1.unsubscribe();
            sub2.unsubscribe();
        };
    }, [context, name]);
    var change = React.useCallback(function (nextVal) {
        if (nextVal instanceof Function) {
            context === null || context === void 0 ? void 0 : context.controller.change(name, nextVal(context === null || context === void 0 ? void 0 : context.controller.get(name)));
        }
        else {
            context === null || context === void 0 ? void 0 : context.controller.change(name, nextVal);
        }
    }, [name, context]);
    return [state, change, error];
}

var useHasError = function (controller) {
    var _a = React.useState(false), hasErrors = _a[0], setHasErrors = _a[1];
    React.useEffect(function () {
        if (!controller)
            return;
        var sub = controller.subscribe("errors", function (errors) {
            setHasErrors(Object.keys(errors).length > 0);
        });
        return function () {
            sub.unsubscribe();
        };
    }, [controller]);
    return hasErrors;
};

var useChange = function (controller, name) {
    var change = React.useCallback(function (next) {
        controller.set(name, next);
    }, [controller, name]);
    return change;
};

var useValue = function (controller, name) {
    var _a = React.useState(controller.getValues()[name]), state = _a[0], setState = _a[1];
    React.useEffect(function () {
        var sub = controller.subscribe("values", function (values) {
            setState(values[name]);
        });
        return function () {
            sub.unsubscribe();
        };
    }, [controller, name]);
    return state;
};

var usePending = function (controller) {
    var _a = React.useState(controller.isPending()), isPending = _a[0], setIsPending = _a[1];
    React.useEffect(function () {
        var sub = controller.subscribe("pending", function (_a) {
            var pending = _a.pending;
            setIsPending(pending);
        });
        return function () { return sub.unsubscribe(); };
    }, [controller]);
    return { isPending: isPending };
};

var FieldConsumer = function (props) {
    var _a = useForm(props.field, props.initialValue), value = _a[0], setValue = _a[1], error = _a[2];
    return props.children({ value: value, setValue: setValue, error: error });
};
var FieldConsumer$1 = React.memo(FieldConsumer);

var PendingConsumer = function (_a) {
    var children = _a.children;
    var controller = React.useContext(FormContext).controller;
    var isPending = usePending(controller).isPending;
    if (children instanceof Function) {
        return children({ isPending: isPending });
    }
    if (isPending)
        return children;
    return null;
};

exports.ErrorConsumer = ErrorConsumer$1;
exports.FieldConsumer = FieldConsumer$1;
exports.FormProvider = FormProvider$1;
exports.PendingConsumer = PendingConsumer;
exports.ValueConsumer = ValueConsumer$1;
exports.useChange = useChange;
exports.useController = useController;
exports.useForm = useForm;
exports.useHasError = useHasError;
exports.usePending = usePending;
exports.useValue = useValue;
//# sourceMappingURL=index.js.map