@altiore/form - npm Package Compare versions

Comparing version 0.3.6 to 0.3.7

dist/@common/types.d.ts

@@ -14,2 +14,3 @@ /// <reference types="react" />
 export declare type RegisterField = (fieldName: string, isArray?: boolean, prevList?: any) => void;
+export declare type SetErrors = (name: string, errors: string[] | undefined) => void;
 export interface FormContextState {
@@ -23,2 +24,3 @@ defaultValues: Record<string, any>;
     registerField: RegisterField;
+    setErrors: SetErrors;
 }
@@ -25,0 +27,0 @@ export interface ArrayFieldState {

dist/create-field/create-field.d.ts

@@ -11,3 +11,14 @@ import React from 'react';
 };
+/**
+ * Компонент принимает пользовательский компонент и возвращает {name, validators, ...props}
+ *
+ * @component
+ *
+ * @typedef CreateField
+ * @prop {React.ReactNode} [component] Пользовательский компонент
+ *
+ * @example
+ * return (any)
+ */
 export declare const createField: <T extends FieldProps>(component: React.FC<T & InternalFieldProps>) => (props: T) => JSX.Element;
 export {};

dist/create-field/create-field.js

@@ -23,6 +23,6 @@ var __assign = (this && this.__assign) || function () {
 };
-import React, { useCallback, useEffect, useRef } from 'react';
-import _debounce from 'lodash/debounce';
-import { ArrayFieldContext } from '../@common/array-field-context';
+import React from 'react';
 import { FormContext } from '../@common/form-context';
+import FieldComponentInsideForm from './field-component-inside-form';
+import FieldComponentOutsideForm from './field-component-outside-form';
 /**
@@ -39,70 +39,12 @@ * Компонент принимает пользовательский компонент и возвращает {name, validators, ...props}
  */
-var FieldComponent = function (_a) {
-    var name = _a.name, component = _a.component, registerField = _a.registerField, props = __rest(_a, ["name", "component", "registerField"]);
-    useEffect(function () {
-        if (registerField) {
-            registerField(name);
-        }
-        else {
-            console.warn('Вы используете createField вне формы. Оберните ваш инпут в компонент' +
-                ' `import {Form} from "@altiore/form";`');
-        }
-    }, [name, registerField]);
-    return (React.createElement(ArrayFieldContext.Consumer, null, function (value) {
-        return React.createElement(component, __assign(__assign({}, props), { name: (value === null || value === void 0 ? void 0 : value.name) && !name.match(new RegExp('^' + String(value === null || value === void 0 ? void 0 : value.name)))
-                ? (value === null || value === void 0 ? void 0 : value.name) + "." + name
-                : name }));
-    }));
-};
 export var createField = function (component) {
     return function (_a) {
-        var name = _a.name, validators = _a.validators, props = __rest(_a, ["name", "validators"]);
-        var element = useRef(null);
-        var handleDebounceFn = useCallback(function (e) {
-            e.preventDefault();
-            var hasValidation = Boolean((validators === null || validators === void 0 ? void 0 : validators.length) && e.target);
-            if (hasValidation) {
-                var value_1 = e.target.value;
-                var errors_1 = [];
-                validators.forEach(function (validate) {
-                    var error = validate(value_1);
-                    if (error) {
-                        errors_1.push(error);
-                    }
-                });
-            }
-        }, [validators]);
-        var debounceHandle = useCallback(_debounce(handleDebounceFn, 200), []);
-        var handleBlur = useCallback(function (e) {
-            debounceHandle(e);
-        }, [debounceHandle]);
-        useEffect(function () {
-            var input = element.current;
-            if (!input) {
-                console.warn('Похоже, вы забыли добавить использование inputRef внутри createField' +
-                    ' декоратора');
-                // eslint-disable-next-line @typescript-eslint/no-empty-function
-                return function () { };
-            }
-            var hasEventHandler = Boolean((validators === null || validators === void 0 ? void 0 : validators.length) && input);
-            if (hasEventHandler) {
-                input.addEventListener('blur', handleBlur);
-            }
-            return function () {
-                if (hasEventHandler) {
-                    input.removeEventListener('blur', handleBlur);
-                }
-            };
-        }, [element, name, validators]);
+        var name = _a.name, props = __rest(_a, ["name"]);
         return (React.createElement(FormContext.Consumer, null, function (value) {
-            var _a;
             if (!value) {
-                return (React.createElement(FieldComponent, __assign({}, __assign({ component: component, 
-                    // TODO: ошибки должны попадать в инпут даже вне контекста???
-                    errors: [], inputRef: element, name: name }, props))));
+                return (React.createElement(FieldComponentOutsideForm, __assign({}, __assign({ component: component, name: name }, props))));
             }
-            var defaultValues = value.defaultValues, errors = value.errors, registerField = value.registerField;
-            return (React.createElement(FieldComponent, __assign({}, __assign({ component: component, defaultValue: defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues[name], errors: (_a = errors === null || errors === void 0 ? void 0 : errors[name]) !== null && _a !== void 0 ? _a : [], inputRef: element, name: name, registerField: registerField }, props))));
+            return (React.createElement(FieldComponentInsideForm, __assign({}, __assign({ component: component, form: value, name: name }, props))));
         }));
     };
 };

dist/form/form.js

@@ -41,2 +41,8 @@ var __assign = (this && this.__assign) || function () {
     }), formState = _b[0], setFormState = _b[1];
+    var setErrors = useCallback(function (fieldName, errors) {
+        setFormState(function (s) {
+            var _a;
+            return (__assign(__assign({}, s), { errors: __assign(__assign({}, s.errors), (_a = {}, _a[fieldName] = errors, _a)) }));
+        });
+    }, [setFormState]);
     var registerField = useCallback(function (fieldName, isArray, prevList) {
@@ -66,3 +72,3 @@ setFormState(function (s) {
     return (React.createElement("form", { onSubmit: handleSubmit, ref: formRef },
-        React.createElement(FormContext.Provider, { value: __assign(__assign({}, formState), { registerField: registerField }) }, children)));
+        React.createElement(FormContext.Provider, { value: __assign(__assign({}, formState), { registerField: registerField, setErrors: setErrors }) }, children)));
 };

package.json

 {
 	"name": "@altiore/form",
-	"version": "0.3.6",
+	"version": "0.3.7",
 	"description": "Form helper for building powerful forms",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

30307

increased by26.14%

Number of package files

56

increased by16.67%

Lines of code

618

increased by31.21%

No dependency changes