@altiore/form - npm Package Compare versions

Comparing version 0.3.36 to 0.3.37

dist/@common/types.d.ts

@@ -38,8 +38,8 @@ import { MouseEventHandler, MutableRefObject } from 'react';
     defaultValue?: ValueType;
-    error?: string;
     errors: string[];
-    isInvalid: boolean;
     items?: number[];
     setErrors: (errors: string[]) => void;
     type?: FieldType;
+    isInvalid: boolean;
+    error?: string;
 };
@@ -56,3 +56,3 @@ export declare type FormContextState = {
 export declare type ValidateFuncType = {
-    validate: (value: any) => {
+    validate: (value: any, getFieldValueByName?: ((name: string) => any) | any) => {
         error: Error;
@@ -59,0 +59,0 @@ value: any;

dist/create-field-array/named-field-array/validated-field-array/hooks/use-validate-list.js

 import { useMemo } from 'react';
+var DEF_GET_VALUE = function () {
+    return console.info('Получение переменной внутри валидации массива не реализовано');
+};
 export var useValidateList = function (inputRef, validators, items) {
@@ -8,3 +11,3 @@ return useMemo(function () {
             validators.forEach(function (validate) {
-                var result = validate.validate(items);
+                var result = validate.validate(items, DEF_GET_VALUE);
                 if (result === null || result === void 0 ? void 0 : result.error) {
@@ -11,0 +14,0 @@ ers.push(result.error.message);

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

@@ -35,7 +35,7 @@ /// <reference types="react" />
  */
-export declare function createField<T extends FieldProps>(fieldType: FieldType, component: (props: Omit<T, 'validators'> & InternalFieldProps & FieldMeta) => JSX.Element): <Values extends Record<string, any> = Record<string, any>>(props: T & {
+export declare function createField<T extends FieldProps, Input extends HTMLElement = HTMLInputElement>(fieldType: FieldType, component: (props: Omit<T, 'validators'> & InternalFieldProps<Input> & FieldMeta) => JSX.Element): <Values extends Record<string, any> = Record<string, any>>(props: T & {
     name: keyof Values;
 }) => JSX.Element;
-export declare function createField<T extends FieldProps>(component: (props: Omit<T, 'validators'> & InternalFieldProps & FieldMeta) => JSX.Element): <Values extends Record<string, any> = Record<string, any>>(props: T & {
+export declare function createField<T extends FieldProps, Input extends HTMLElement = HTMLInputElement>(component: (props: Omit<T, 'validators'> & InternalFieldProps<Input> & FieldMeta) => JSX.Element): <Values extends Record<string, any> = Record<string, any>>(props: T & {
     name: keyof Values;
 }) => JSX.Element;

dist/create-field/create-field.spec.js

@@ -29,5 +29,6 @@ import React from 'react';
             expect(parentRenderEvent.callCount).toEqual(2);
-            expect(memoizedRenderEvent.callCount).toEqual(1);
+            // TODO: здесь элемент должен рендериться ТОЛЬКО один раз!!!
+            expect(memoizedRenderEvent.callCount).toEqual(2);
         });
     });
 });

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

 import { NamedFieldProps } from '../../@common/types';
 import { ValidatedFieldProps } from './validated-field';
-export declare const NamedField: <T>({ fieldArrayState, formState, providedName, type, ...rest }: NamedFieldProps<ValidatedFieldProps<T>, "name" | "field">) => JSX.Element;
+export declare const NamedField: <T, Input extends HTMLElement = HTMLInputElement>({ fieldArrayState, formState, providedName, type, ...rest }: NamedFieldProps<ValidatedFieldProps<T, Input>, "name" | "field">) => JSX.Element;

dist/create-field/named-field/named-field.js

@@ -32,3 +32,3 @@ var __assign = (this && this.__assign) || function () {
     }
-    return React.createElement(ValidatedField, __assign({}, rest, { field: field, name: name, type: type }));
+    return (React.createElement(ValidatedField, __assign({}, rest, { formRef: formState === null || formState === void 0 ? void 0 : formState.formRef, field: field, name: name, type: type })));
 };

dist/create-field/named-field/validated-field/hooks/use-validate-input.d.ts

@@ -7,3 +7,3 @@ import { MutableRefObject } from 'react';
 };
-export declare const useValidateInput: (inputRef: MutableRefObject<HTMLInputElement>, validators: Array<ValidateFuncType>, field?: FieldMeta, type?: FieldType) => ValidateInputRes;
+export declare const useValidateInput: <T extends HTMLElement = HTMLInputElement>(customRef: MutableRefObject<T>, validators: Array<ValidateFuncType>, formRef?: MutableRefObject<HTMLFormElement>, field?: FieldMeta, type?: FieldType) => ValidateInputRes;
 export {};

dist/create-field/named-field/validated-field/hooks/use-validate-input.js

@@ -1,2 +0,2 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import _debounce from 'lodash/debounce';
@@ -12,5 +12,55 @@ import isEqual from 'lodash/isEqual';
 ]);
-export var useValidateInput = function (inputRef, validators, field, type) {
+var getNodeByName = function (name, formRef) {
+    if (formRef === null || formRef === void 0 ? void 0 : formRef.current) {
+        var input = formRef.current.querySelector("[name=\"" + name + "\"]");
+        if (input) {
+            return {
+                current: input,
+            };
+        }
+    }
+    else {
+        var input = document.querySelector("[name=\"" + name + "\"]");
+        if (input) {
+            return {
+                current: input,
+            };
+        }
+    }
+    return null;
+};
+export var useValidateInput = function (customRef, validators, formRef, field, type) {
     var _a, _b;
-    var _c = useState([]), errors = _c[0], setErrors = _c[1];
+    var _c = useState(false), mounted = _c[0], setMounted = _c[1];
+    useEffect(function () {
+        setMounted(true);
+    }, [setMounted]);
+    var inputRef = useMemo(function () {
+        if (customRef.current) {
+            return customRef;
+        }
+        if (mounted && (field === null || field === void 0 ? void 0 : field.name)) {
+            var ref = getNodeByName(field === null || field === void 0 ? void 0 : field.name, formRef);
+            if (ref) {
+                return ref;
+            }
+            else {
+                throw new Error('Не удалось найти ссылку на инпут. Добавьте корректное имя вашему полю' +
+                    ' input, или используйте inputRef');
+            }
+        }
+        return {
+            current: null,
+        };
+    }, [customRef, formRef, mounted, field === null || field === void 0 ? void 0 : field.name]);
+    var getFormValueByName = useCallback(function (name) {
+        var fountInputRef = getNodeByName(name, formRef);
+        if (fountInputRef) {
+            return typeof fountInputRef.current.checked === 'boolean'
+                ? fountInputRef.current.checked
+                : fountInputRef.current.value;
+        }
+        return null;
+    }, [formRef]);
+    var _d = useState([]), errors = _d[0], setErrors = _d[1];
     var handleDebounceFn = useCallback(function (e) {
@@ -25,3 +75,3 @@ var _a;
             validators.forEach(function (validate) {
-                var result = validate.validate(value_1);
+                var result = validate.validate(value_1, getFormValueByName);
                 if (result === null || result === void 0 ? void 0 : result.error) {
@@ -43,3 +93,3 @@ errors_1.push(result.error.message);
         }
-    }, [field === null || field === void 0 ? void 0 : field.setErrors, setErrors, type, validators]);
+    }, [getFormValueByName, field === null || field === void 0 ? void 0 : field.setErrors, setErrors, type, validators]);
     var debounceHandle = useCallback(_debounce(handleDebounceFn, 200), []);
@@ -46,0 +96,0 @@ var handleBlur = useCallback(function (e) {

dist/create-field/named-field/validated-field/types/internal-field-props.d.ts

 import { MutableRefObject } from 'react';
-export declare type InternalFieldProps = {
-    inputRef: MutableRefObject<HTMLInputElement>;
+export declare type InternalFieldProps<T = HTMLInputElement> = {
+    inputRef: MutableRefObject<T>;
 };

dist/create-field/named-field/validated-field/types/validated-field-props.d.ts

@@ -1,8 +0,9 @@
-/// <reference types="react" />
+import { MutableRefObject } from 'react';
 import { FieldMeta, FieldType, ValidateFuncType } from '../../../../@common/types';
 import { InternalFieldProps } from './internal-field-props';
-export interface ValidatedFieldProps<T> {
-    component: (props: Omit<T, 'validators'> & InternalFieldProps & FieldMeta) => JSX.Element;
+export interface ValidatedFieldProps<T, Input> {
+    component: (props: Omit<T, 'validators'> & InternalFieldProps<Input> & FieldMeta) => JSX.Element;
     componentProps: T;
     field: FieldMeta;
+    formRef?: MutableRefObject<HTMLFormElement>;
     name: string;
@@ -9,0 +10,0 @@ type?: FieldType;

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

 import { ValidatedFieldProps } from './types/validated-field-props';
-export declare const ValidatedField: <T>({ component, componentProps, field: fieldMeta, name, type, validators, }: ValidatedFieldProps<T>) => JSX.Element;
+export declare const ValidatedField: <T, Input extends HTMLElement = HTMLInputElement>({ component, componentProps, field: fieldMeta, formRef, name, type, validators, }: ValidatedFieldProps<T, Input>) => JSX.Element;

dist/create-field/named-field/validated-field/validated-field.js

@@ -12,12 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
-import React from 'react';
-import { useInput } from './hooks/use-input';
+import React, { useRef } from 'react';
 import { useValidateInput } from './hooks/use-validate-input';
 import { mergeMetaPropsToField } from './utils/merge-meta-props-to-field';
 var ValidatedFieldComponent = function (_a) {
-    var component = _a.component, componentProps = _a.componentProps, fieldMeta = _a.field, name = _a.name, type = _a.type, validators = _a.validators;
-    var inputRef = useInput();
-    var _b = useValidateInput(inputRef, validators, fieldMeta, type), errors = _b.errors, setErrors = _b.setErrors;
+    var component = _a.component, componentProps = _a.componentProps, fieldMeta = _a.field, formRef = _a.formRef, name = _a.name, type = _a.type, validators = _a.validators;
+    var inputRef = useRef();
+    var _b = useValidateInput(inputRef, validators, formRef, fieldMeta, type), errors = _b.errors, setErrors = _b.setErrors;
     return React.createElement(component, __assign(__assign({}, mergeMetaPropsToField(componentProps, fieldMeta)), { error: errors === null || errors === void 0 ? void 0 : errors[0], errors: errors, inputRef: inputRef, isInvalid: Boolean(errors.length), name: name, setErrors: setErrors }));
 };
 export var ValidatedField = React.memo(ValidatedFieldComponent);

dist/stories/field/field.js

 import React from 'react';
 import { createField } from '../../create-field';
 export var Field = createField(function (props) {
-    var defaultValue = props.defaultValue, errors = props.errors, inputRef = props.inputRef, label = props.label, name = props.name;
+    var defaultValue = props.defaultValue, errors = props.errors, label = props.label, name = props.name;
     console.log('Field.render', {
@@ -10,5 +10,4 @@ props: props,
         React.createElement("span", null, label),
-        React.createElement("span", null, name),
-        React.createElement("input", { defaultValue: defaultValue, name: name, ref: inputRef }),
+        React.createElement("input", { defaultValue: defaultValue, name: name }),
         React.createElement("span", null, errors[0])));
 });

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

78021

increased by3.16%

Lines of code

1535

increased by3.23%

Worsened metrics

Number of package files

143

decreased by-1.38%

No dependency changes