@altiore/form - npm Package Compare versions

Comparing version 4.0.2 to 4.1.1

dist/@common/types.d.ts

@@ -12,2 +12,3 @@ import { ButtonHTMLAttributes, MouseEventHandler, MutableRefObject } from 'react';
     FLOAT = "float",
+    PHONE = "phone",
     PASSWORD = "password",
@@ -14,0 +15,0 @@ TEXT = "text",

dist/@common/types.js

@@ -12,2 +12,3 @@ /**
     FieldType["FLOAT"] = "float";
+    FieldType["PHONE"] = "phone";
     FieldType["PASSWORD"] = "password";
@@ -14,0 +15,0 @@ FieldType["TEXT"] = "text";

dist/@common/utils.d.ts

@@ -9,1 +9,3 @@ import { MutableRefObject } from 'react';
 export declare const getInputTypeByFieldType: (fieldType: FieldType) => InputType;
+export declare const formatPhone: (phoneNumberString: string) => string | null;
+export declare const formatValueByType: Map<FieldType, (phoneNumberString: string) => string | null>;

dist/@common/utils.js

@@ -63,2 +63,5 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 var parseDefault = function (value) { return (value === '' ? null : value); };
+var parsePhone = function (value) {
+    return typeof value === 'string' ? value.replace(/[()\s\-]/gi, '') : value;
+};
 var toArray = function (value) {
@@ -79,2 +82,3 @@ if (typeof value === 'string') {
     [FieldType.SELECT_MULTIPLE, toArray],
+    [FieldType.PHONE, parsePhone],
 ]);
@@ -90,2 +94,3 @@ export var inputTypeByType = new Map([
     [FieldType.FLOAT, 'number'],
+    [FieldType.PHONE, 'tel'],
 ]);
@@ -97,1 +102,43 @@ export var getInputTypeByFieldType = function (fieldType) {
 };
+var digitStrArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
+export var formatPhone = function formatPhoneNumber(phoneNumberString) {
+    var match = phoneNumberString.match(/^(\+?7\s?)?(\s?\(?\d{3}\)?\s?|\s?\(?\d{2}|\s?\(?\d|\s?\(?)?(\d{3}|\d{2}|\d)?(\s?-?\s?\d{2}|\s?-?\s?\d|\s?-?\s?)?(\s?-?\s?\d{2}|\s?-?\s?\d|\s?-?\s?)?$/);
+    if (match) {
+        var res = '';
+        if (match[1]) {
+            res += match[1][0] === '+' ? match[1] : "+" + match[1];
+        }
+        else if (phoneNumberString.length) {
+            res = '+7 ' + res;
+        }
+        if (match[2]) {
+            res = res.replace(/\s$/gi, '') + ' (' + match[2].replace(/^[\s(]/gi, '');
+        }
+        if (match[3]) {
+            res = res.replace(/\)?\s?$/gi, '') + ') ' + match[3];
+        }
+        if (match[4]) {
+            res =
+                res.replace(/\s?-?\s?$/gi, '') +
+                    (digitStrArr.includes(match[4][0])
+                        ? ' - ' + match[4]
+                        : digitStrArr.includes(match[4][1]) ||
+                            digitStrArr.includes(match[4][2])
+                            ? match[4].replace(/^\s?-?\s?/gi, ' - ')
+                            : match[4]);
+        }
+        if (match[5]) {
+            res =
+                res.replace(/\s?-?\s?$/gi, '') +
+                    (digitStrArr.includes(match[5][0])
+                        ? ' - ' + match[5]
+                        : digitStrArr.includes(match[5][1]) ||
+                            digitStrArr.includes(match[5][2])
+                            ? match[5].replace(/^\s?-?\s?/gi, ' - ')
+                            : match[5]);
+        }
+        return res;
+    }
+    return null;
+};
+export var formatValueByType = new Map([[FieldType.PHONE, formatPhone]]);

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

@@ -6,3 +6,3 @@ import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FieldType } from '../../../../@common/types';
-import { getNodeByName, getValueByNodeName, getValueByTypeAndTarget, } from '../../../../@common/utils';
+import { formatValueByType, getNodeByName, getValueByNodeName, getValueByTypeAndTarget, } from '../../../../@common/utils';
 var DEF_ERRORS = [];
@@ -98,3 +98,19 @@ export var useValidateInput = function (customRef, validators, formRef, field, fieldType, nameFromProp) {
     }, [handleSetErrors]);
+    var formatValue = useCallback(function (evt) {
+        console.log('formatValue', {
+            val: evt.target.value,
+        });
+        var formatter = formatValueByType.get(fieldType);
+        evt.target.value = formatter(evt.target.value);
+    }, [fieldType]);
     useEffect(function () {
+        if (formatValueByType.has(fieldType)) {
+            var input = inputRef.current;
+            var hasEventHandler = Boolean(input);
+            if (hasEventHandler) {
+                input.addEventListener('keyup', formatValue);
+            }
+        }
+    }, [inputRef, fieldType]);
+    useEffect(function () {
         var _a;
@@ -101,0 +117,0 @@ var input = inputRef.current;

dist/validators/index.d.ts

@@ -5,4 +5,5 @@ export * from './max-length';
 export * from './is-email';
+export * from './is-phone';
 export * from './is-required';
 export * from './is-true';
 export * from './regexp';

dist/validators/index.js

@@ -5,4 +5,5 @@ export * from './max-length';
 export * from './is-email';
+export * from './is-phone';
 export * from './is-required';
 export * from './is-true';
 export * from './regexp';

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

109255

increased by3.64%

Number of package files

117

increased by3.54%

Lines of code

1757

increased by5.27%

No dependency changes