vdr-react-form-manager/lib/hook/useFormManager.js

Form manager

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const form_reducer_1 = require("../reducer/form.reducer");
const FormActionType_enum_1 = require("../enum/FormActionType.enum");
const form_utils_1 = require("../utils/form.utils");
exports.useFormManager = (formInitialStateValues) => {
    const init = react_1.useCallback((formInitalState) => {
        return form_utils_1.resetState(formInitalState);
    }, []);
    const formInitalValues = react_1.useRef(formInitialStateValues);
    const emitLastFieldUpdatedStatus = react_1.useRef(true);
    const [state, dispatch] = react_1.useReducer(form_reducer_1.FormReducer, formInitialStateValues, init);
    function getInputProps(inputName) {
        /* send a copy to prevent to change input properties  */
        return Object.assign({}, state.formInputs[inputName]);
    }
    const handleFormChange = react_1.useCallback((e) => {
        const { name, value, type, tagName, checked } = e.target; // <-- moved outside asynchronous context
        dispatch({
            type: FormActionType_enum_1.EFormActionType.INPUT_CHANGE,
            payload: { name, value, type, tagName, checked, emitLastFieldUpdatedStatus: emitLastFieldUpdatedStatus.current },
        });
    }, []);
    function getFormValues() {
        const { formInputs } = state;
        return Object.keys(formInputs).reduce((object, inputKey) => (Object.assign(Object.assign({}, object), { [inputKey]: formInputs[inputKey].value })), {});
    }
    const resetForm = react_1.useCallback(() => {
        emitLastFieldUpdatedStatus.current = true;
        dispatch({
            type: FormActionType_enum_1.EFormActionType.RESET,
            payload: formInitalValues.current,
        });
    }, []);
    const addInputs = react_1.useCallback((formInputs) => {
        if (!formInputs || !Object.keys(formInputs).length) {
            return;
        }
        dispatch({ type: FormActionType_enum_1.EFormActionType.ADD_INPUTS, payload: formInputs });
    }, []);
    const updateInputs = react_1.useCallback((formInputMutation) => {
        if (!formInputMutation || !Object.keys(formInputMutation).length) {
            return;
        }
        dispatch({ type: FormActionType_enum_1.EFormActionType.UPDATE_INPUTS, payload: formInputMutation });
    }, []);
    const removeInputs = react_1.useCallback((inputNameList) => {
        if (!inputNameList || !inputNameList.length) {
            return;
        }
        dispatch({ type: FormActionType_enum_1.EFormActionType.REMOVE_INPUTS, payload: inputNameList });
    }, []);
    // inputNameList: null -> validate all inputs
    const validateInputs = react_1.useCallback((inputNameList) => {
        dispatch({ type: FormActionType_enum_1.EFormActionType.VALIDATE_INPUTS, payload: inputNameList });
    }, []);
    const hasInput = (inputName) => !!state.formInputs[inputName];
    const emitLastFieldUpdated = react_1.useCallback((isEmissionEnabled) => {
        emitLastFieldUpdatedStatus.current = isEmissionEnabled;
    }, []);
    const setFormProps = react_1.useCallback((formProperties) => {
        dispatch({ type: FormActionType_enum_1.EFormActionType.SET_FORM_PROPS, payload: formProperties });
    }, []);
    return {
        handleFormChange,
        getFormValues,
        getInputProps,
        addInputs,
        updateInputs,
        removeInputs,
        validateInputs,
        hasInput,
        resetForm,
        setFormProps,
        emitLastFieldUpdated,
        formProperties: Object.assign({}, state.formProperties),
        lastFieldUpdated: state.lastFieldUpdated,
    };
};