@altiore/form
Version:
Form helper for building powerful forms
51 lines (50 loc) • 4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useRegisterField = void 0;
var react_1 = require("react");
var types_1 = require("../types");
var useRegisterField = function (fieldArrayState, formState, providedName, validate, fieldType, isArray, defaultValue) {
// TODO: Мы делаем валидаторы нереагирующими на изменение валидаторов, т.к.:
// 1. неясно как сохранить массив валидаторов так, чтоб он не изменялся при перерендере родителя
// 2. неясно, что делать, если массив валидаторов все-таки изменится
var validators = (0, react_1.useMemo)(function () { return (typeof validate === 'function' ? [validate] : validate); }, []);
// Имя поля ввода, которое будет использоваться под капотом, чтоб создать правильную иерархию
// свойств
var fieldName = (0, react_1.useMemo)(function () {
return (fieldArrayState === null || fieldArrayState === void 0 ? void 0 : fieldArrayState.name) &&
!providedName.match(new RegExp('^' + String(fieldArrayState.name)))
? fieldArrayState.name + "." + providedName
: providedName;
}, [fieldArrayState === null || fieldArrayState === void 0 ? void 0 : fieldArrayState.name, providedName]);
var registerField = (0, react_1.useMemo)(function () { return formState === null || formState === void 0 ? void 0 : formState.registerField; }, [formState === null || formState === void 0 ? void 0 : formState.registerField]);
var isInsideForm = (0, react_1.useMemo)(function () { return Boolean(registerField); }, [registerField]);
var _a = (0, react_1.useState)(false), isRegistered = _a[0], setIsRegistered = _a[1];
(0, react_1.useEffect)(function () {
if (isInsideForm) {
var unmountFunc = registerField(fieldName, fieldType !== null && fieldType !== void 0 ? fieldType : (isArray ? types_1.FieldType.ARRAY : types_1.FieldType.TEXT), defaultValue, validators);
setIsRegistered(true);
// Возвращаемое значение здесь удаляет поле из памяти FormContextState['fields']
return unmountFunc;
}
else {
if (fieldType) {
console.warn("\u0423\u043A\u0430\u0437\u0430\u043D\u043D\u044B\u0439 fieldType=" + fieldType + " \u0431\u0443\u0434\u0435\u0442 \u043F\u0440\u043E\u0438\u0433\u043D\u043E\u0440\u0438\u0440\u043E\u0432\u0430\u043D \u0432\u043D\u0435 \u043A\u043E\u043D\u0442\u0435\u043A\u0441\u0442\u0430 \u0444\u043E\u0440\u043C\u044B. \u0420\u0430\u0437\u043C\u0435\u0441\u0442\u0438\u0442\u0435" +
(" \u0432\u0430\u0448\u0435 \u043F\u043E\u043B\u0435 \u0432\u0432\u043E\u0434\u0430 " + fieldName + " \u0432\u043D\u0443\u0442\u0440\u0438 \u043A\u043E\u043C\u043F\u043E\u043D\u0435\u043D\u0442\u0430 \u0444\u043E\u0440\u043C\u044B, \u0447\u0442\u043E\u0431 \u044D\u0442\u043E \u0437\u0430\u0440\u0430\u0431\u043E\u0442\u0430\u043B\u043E"));
}
setIsRegistered(true);
}
}, [
defaultValue,
fieldName,
fieldType,
isArray,
isInsideForm,
registerField,
setIsRegistered,
validators,
]);
var fields = (0, react_1.useMemo)(function () { return formState === null || formState === void 0 ? void 0 : formState.fields; }, [formState === null || formState === void 0 ? void 0 : formState.fields]);
var field = (0, react_1.useMemo)(function () { return fields === null || fields === void 0 ? void 0 : fields[fieldName]; }, [fields, fieldName]);
return { field: field, isInsideForm: isInsideForm, isRegistered: isRegistered, name: fieldName, validators: validators };
};
exports.useRegisterField = useRegisterField;