apollo-form/hooks/useField.js

Form state manager

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const useFormCtx_1 = __importDefault(require("./useFormCtx"));
function useField(props) {
    const apolloForm = useFormCtx_1.default();
    const name = props.name;
    const value = apolloForm.useValue(name);
    const error = apolloForm.useError(name);
    const touched = apolloForm.useTouched(name);
    const focused = apolloForm.useState(s => s.focused === name, [name]);
    const setFieldValue = react_1.default.useCallback((v) => {
        apolloForm.setFieldValue(name, v);
    }, [apolloForm, name]);
    const setFieldError = react_1.default.useCallback((v) => {
        apolloForm.setFieldError(name, v);
    }, [apolloForm, name]);
    const setFieldTouched = react_1.default.useCallback((v) => {
        apolloForm.setFieldTouched(name, v);
    }, [apolloForm, name]);
    const setFieldFocused = react_1.default.useCallback(() => {
        apolloForm.setFieldFocused(name);
    }, [apolloForm, name]);
    // @ts-ignore
    react_1.default.useEffect(() => {
        if (props.validate) {
            apolloForm.addFieldValidator(name, props.validate);
            return () => apolloForm.removeFieldValidator(name);
        }
    }, [apolloForm, name, props.validate]);
    return {
        name,
        value,
        error,
        touched,
        focused,
        setFieldValue,
        setFieldError,
        setFieldTouched,
        setFieldFocused,
    };
}
exports.default = useField;