@steroidsjs/core 3.0.0-beta.92 → 3.0.0-beta.93

package/hooks/useSaveCursorPosition.js

@@ -3,6 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unneeded-ternary */
+/* eslint-disable consistent-return */
 /* eslint-disable no-return-assign */
 /* eslint-disable no-unused-expressions */
 var react_1 = __importDefault(require("react"));

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.92",
+ "version": "3.0.0-beta.93",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -25,8 +25,8 @@
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
-  "@maskito/core": "^0.12.1",
-  "@maskito/kit": "^0.12.1",
+  "@maskito/core": "1.7.0",
+  "@maskito/kit": "1.7.0",
   "@maskito/react": "^0.12.1",
   "@splidejs/react-splide": "^0.7.12",
   "axios": "^0.21.1",

package/ui/form/EmailField/EmailField.d.ts

@@ -0,0 +1,6 @@
+import { IBaseFieldProps } from '../InputField/InputField';
+import { IFieldWrapperInputProps } from '../Field/fieldWrapper';
+export interface IEmailFieldProps extends IBaseFieldProps, IFieldWrapperInputProps {
+}
+declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IEmailFieldProps>;
+export default _default;

package/ui/form/EmailField/EmailField.js

@@ -0,0 +1,44 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+var react_1 = __importDefault(require("react"));
+var hooks_1 = require("../../../hooks");
+var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
+var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
+/**
+ * EmailField
+ * Поле для ввода почты
+ */
+function EmailField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var onInputChange = (0, useInputTypeEmail_1["default"])(currentInputRef, onChange, props.input.value).onInputChange;
+    var onClear = react_1["default"].useCallback(function () { return props.input.onChange(''); }, [props.input]);
+    var inputProps = react_1["default"].useMemo(function () {
+        var _a;
+        return (__assign({ name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', placeholder: props.placeholder, disabled: props.disabled, required: props.required }, props.inputProps));
+    }, [onInputChange, props.disabled, props.input.name, props.input.value, props.inputProps, props.placeholder, props.required]);
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign({}, props), { inputProps: inputProps, inputRef: currentInputRef, onClear: onClear }));
+}
+EmailField.defaultProps = {
+    size: 'md',
+    disabled: false,
+    required: false,
+    showClear: false,
+    maskOptions: null
+};
+exports["default"] = (0, fieldWrapper_1["default"])('EmailField', EmailField);

package/ui/form/EmailField/hooks/useInputTypeEmail.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const useInputTypeEmail: (currentInputRef: React.MutableRefObject<HTMLInputElement>, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void, currentValue: string | null | undefined) => {
+    onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+};
+export default useInputTypeEmail;

package/ui/form/EmailField/hooks/useInputTypeEmail.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_1 = __importDefault(require("react"));
+var DEFAULT_VALIDITY = __('Неправильный формат адреса электронной почты.');
+var useInputTypeEmail = function (currentInputRef, onChange, currentValue) {
+    var isValueEmail = function (value) {
+        //In that case it's testing if value is empty string or not defined
+        if (!value) {
+            return false;
+        }
+        var emailRegexp = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+        return emailRegexp.test(value.toLowerCase());
+    };
+    var errorMessage = isValueEmail(currentValue) ? '' : DEFAULT_VALIDITY;
+    react_1["default"].useEffect(function () {
+        var _a;
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [currentInputRef, currentValue, errorMessage]);
+    var onInputChange = function (event) {
+        onChange(event);
+    };
+    return {
+        onInputChange: onInputChange
+    };
+};
+exports["default"] = useInputTypeEmail;

package/ui/form/EmailField/index.d.ts

@@ -0,0 +1,2 @@
+import EmailField from './EmailField';
+export default EmailField;

package/ui/form/EmailField/index.js

@@ -0,0 +1,7 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var EmailField_1 = __importDefault(require("./EmailField"));
+exports["default"] = EmailField_1["default"];

package/ui/form/InputField/InputField.d.ts

@@ -3,7 +3,7 @@ import { InputHTMLAttributes, ReactNode } from 'react';
 import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 export declare const MASK_PRESETS: {
-    date: MaskitoOptions;
+    date: Required<MaskitoOptions>;
     phone: {
         mask: any[];
     };
@@ -11,7 +11,7 @@ export declare const MASK_PRESETS: {
         mask: any[];
     };
 };
-type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
+export type IElementInputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week' | string;
 export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
      * Свойства для элемента input

package/ui/form/InputField/InputField.js

@@ -47,12 +47,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 exports.MASK_PRESETS = void 0;
+/* eslint-disable no-unused-expressions */
+/* eslint-disable max-len */
 var React = __importStar(require("react"));
 var react_1 = require("react");
 var react_2 = require("@maskito/react");
 var kit_1 = require("@maskito/kit");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var hooks_1 = require("../../../hooks");
+var useInputFieldWarningByType_1 = require("./hooks/useInputFieldWarningByType");
 exports.MASK_PRESETS = {
     date: (0, kit_1.maskitoDateOptionsGenerator)({
         mode: 'dd/mm/yyyy'
@@ -93,6 +96,7 @@ function InputField(props) {
             maskedInputRef(inputRef.current);
         }
     }, [inputRef, maskedInputRef]);
+    (0, useInputFieldWarningByType_1.useInputFieldWarningByType)(props.type);
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = (0, react_1.useMemo)(function () {
         var _a;
@@ -102,7 +106,9 @@ function InputField(props) {
     if (props.type === 'hidden') {
         return null;
     }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, inputRef: inputRef, onClear: onClear }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, 
+        // If type was recognized as unsupported in InputField, then we do not pass ref.
+        inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null, onClear: onClear }));
 }
 InputField.defaultProps = {
     type: 'text',

package/ui/form/InputField/hooks/useInputFieldWarningByType.d.ts

@@ -0,0 +1,3 @@
+import { IElementInputType } from '../InputField';
+export declare const INPUT_TYPES_SUPPORTED_SELECTION: string[];
+export declare const useInputFieldWarningByType: (type: IElementInputType) => void;

package/ui/form/InputField/hooks/useInputFieldWarningByType.js

@@ -0,0 +1,35 @@
+"use strict";
+exports.__esModule = true;
+exports.useInputFieldWarningByType = exports.INPUT_TYPES_SUPPORTED_SELECTION = void 0;
+/* eslint-disable max-len */
+/* eslint-disable no-unused-expressions */
+var react_use_1 = require("react-use");
+exports.INPUT_TYPES_SUPPORTED_SELECTION = ['text', 'search', 'tel', 'url', 'password'];
+var INPUT_TYPES_REPLACEMENT_HASH = {
+    email: 'EmailField',
+    date: 'DateField',
+    month: 'DateField',
+    week: 'CalendarSystem',
+    time: 'DateTimeField',
+    'datetime-local': 'DateField',
+    number: 'NumberField',
+    range: 'SliderField',
+    checkbox: 'CheckboxField',
+    radio: 'RadioField',
+    button: 'Button',
+    file: 'FileField',
+    submit: 'Button',
+    image: 'Button',
+    reset: 'Button'
+};
+var useInputFieldWarningByType = function (type) {
+    (0, react_use_1.useMount)(function () {
+        if (!exports.INPUT_TYPES_SUPPORTED_SELECTION.includes(type)) {
+            var recommendedUiComponent = "<".concat(INPUT_TYPES_REPLACEMENT_HASH[type], " />");
+            INPUT_TYPES_REPLACEMENT_HASH[type]
+                ? console.warn("<InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method. Try to use ").concat(recommendedUiComponent, " instead."))
+                : console.warn("< InputField /> with \"".concat(type, "\" type does not support setSelectionRange() method.Try to use native <input /> tag."));
+        }
+    });
+};
+exports.useInputFieldWarningByType = useInputFieldWarningByType;

package/ui/form/NumberField/hooks/useInputTypeNumber.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 interface IInputTypeNumberProps {
     max: any;
     min: any;
-    value: any;
+    value: string | undefined | null;
 }
 declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void) => {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

package/ui/form/NumberField/hooks/useInputTypeNumber.js

@@ -5,22 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
 var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange) {
-    var setValidity = react_1["default"].useCallback(function (message) {
-        var _a;
-        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(message);
-    }, [currentInputRef]);
-    var checkIsValueFalsy = function (value) { return value === '' || value === null || value === undefined; };
     react_1["default"].useEffect(function () {
-        var defaultValidity = 'The number is not included in the range';
-        // eslint-disable-next-line no-unused-expressions
-        inputTypeNumberProps.value > inputTypeNumberProps.max
+        var _a;
+        var defaultValidity = 'The number is not valid.';
+        var errorMessage = inputTypeNumberProps.value > inputTypeNumberProps.max
             || inputTypeNumberProps.value < inputTypeNumberProps.min
-            || checkIsValueFalsy(inputTypeNumberProps.value)
-            ? setValidity(__(defaultValidity) + " ".concat(inputTypeNumberProps.min, " \u2014 ").concat(inputTypeNumberProps.max))
-            : setValidity('');
-    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min, setValidity]);
+            || !inputTypeNumberProps.value
+            ? __(defaultValidity)
+            : '';
+        (_a = currentInputRef.current) === null || _a === void 0 ? void 0 : _a.setCustomValidity(errorMessage);
+    }, [currentInputRef, inputTypeNumberProps.value, inputTypeNumberProps.max, inputTypeNumberProps.min]);
     var isValueNumeric = function (value) {
-        if (checkIsValueFalsy(value)) {
+        if (!value) {
             return true;
         }
         /**

package/ui/form/index.d.ts

@@ -29,7 +29,8 @@ import TextField from './TextField';
 import TimeField from './TimeField';
 import RateField from './RateField';
 import MaskField from './MaskField';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, };
+import EmailField from './EmailField';
+export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, SwitcherField, TextField, TimeField, RateField, MaskField, EmailField, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
@@ -61,5 +62,6 @@ declare const _default: {
     TimeField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./TimeField/TimeField").ITimeFieldProps>;
     RateField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./RateField/RateField").IRateFieldProps>;
     MaskField: typeof MaskField;
+    EmailField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./EmailField/EmailField").IEmailFieldProps>;
 };
 export default _default;

package/ui/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
+exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SwitcherField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.HtmlField = exports.Form = exports.FileField = exports.FieldSet = exports.FieldList = exports.FieldLayout = exports.Field = exports.DropDownField = exports.DateTimeRangeField = exports.DateTimeField = exports.DateRangeField = exports.DateField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
 var AutoCompleteField_1 = __importDefault(require("./AutoCompleteField"));
 exports.AutoCompleteField = AutoCompleteField_1["default"];
 var BlankField_1 = __importDefault(require("./BlankField"));
@@ -64,6 +64,8 @@ var RateField_1 = __importDefault(require("./RateField"));
 exports.RateField = RateField_1["default"];
 var MaskField_1 = __importDefault(require("./MaskField"));
 exports.MaskField = MaskField_1["default"];
+var EmailField_1 = __importDefault(require("./EmailField"));
+exports.EmailField = EmailField_1["default"];
 exports["default"] = {
     AutoCompleteField: AutoCompleteField_1["default"],
     BlankField: BlankField_1["default"],
@@ -94,5 +96,6 @@ exports["default"] = {
     TextField: TextField_1["default"],
     TimeField: TimeField_1["default"],
     RateField: RateField_1["default"],
-    MaskField: MaskField_1["default"]
+    MaskField: MaskField_1["default"],
+    EmailField: EmailField_1["default"]
 };