@steroidsjs/core 3.1.5 → 3.1.7

package/en.json

@@ -1063,5 +1063,7 @@
     "Название цвета для Badge": "Color name for Badge",
     "Название цвета для Button": "Color name for Button",
     "Название цвета для Text, Title": "Color name for Text, Title",
-    "Промежуточное состояние чекбокса — часть дочерних элементов выбрана": ""
+    "Промежуточное состояние чекбокса — часть дочерних элементов выбрана": "Indeterminate checkbox state — some child items are selected",
+    "Выбранная страна по умолчанию": "Country selected by default",
+    "Список доступных масок для телефонных номеров разных стран.\nКаждая маска определяет формат отображения номера.": "List of available masks for phone numbers from different countries.\nEach mask defines the number display format."
 }

package/enums/FieldEnum.d.ts

@@ -22,6 +22,7 @@ export default class FieldEnum extends Enum {
     static readonly NAV_FIELD = "NavField";
     static readonly NUMBER_FIELD = "NumberField";
     static readonly PASSWORD_FIELD = "PasswordField";
+    static readonly PHONE_FIELD = "PhoneField";
     static readonly RADIO_FIELD = "RadioField";
     static readonly RADIO_LIST_FIELD = "RadioListField";
     static readonly RATE_FIELD = "RateField";
@@ -54,6 +55,7 @@ export default class FieldEnum extends Enum {
         NavField: string;
         NumberField: string;
         PasswordField: string;
+        PhoneField: string;
         RadioField: string;
         RadioListField: string;
         RateField: string;

package/enums/FieldEnum.js

@@ -49,6 +49,7 @@ var FieldEnum = /** @class */ (function (_super) {
             _a[FieldEnum.NAV_FIELD] = 'NavField',
             _a[FieldEnum.NUMBER_FIELD] = 'NumberField',
             _a[FieldEnum.PASSWORD_FIELD] = 'PasswordField',
+            _a[FieldEnum.PHONE_FIELD] = 'PhoneField',
             _a[FieldEnum.RADIO_FIELD] = 'RadioField',
             _a[FieldEnum.RADIO_LIST_FIELD] = 'RadioListField',
             _a[FieldEnum.RATE_FIELD] = 'RateField',
@@ -82,6 +83,7 @@ var FieldEnum = /** @class */ (function (_super) {
     FieldEnum.NAV_FIELD = 'NavField';
     FieldEnum.NUMBER_FIELD = 'NumberField';
     FieldEnum.PASSWORD_FIELD = 'PasswordField';
+    FieldEnum.PHONE_FIELD = 'PhoneField';
     FieldEnum.RADIO_FIELD = 'RadioField';
     FieldEnum.RADIO_LIST_FIELD = 'RadioListField';
     FieldEnum.RATE_FIELD = 'RateField';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.1.5",
+    "version": "3.1.7",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {
@@ -10,7 +10,7 @@
     "main": "dist/index.ts",
     "types": "dist/index.d.ts",
     "exports": {
-        "./": "./dist"
+        "./*": "./*"
     },
     "license": "MIT",
     "homepage": "https://github.com/steroids/react",

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

@@ -27,6 +27,14 @@ export interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
      * Callback-функция, которая вызывается при очистке input
      */
     onClear?: (value: string) => void;
+    /**
+     * Callback-функция, которая вызывается при фокусировке input
+     */
+    onFocus?: (e: Event | FocusEvent) => void;
+    /**
+     * Callback-функция, которая вызывается при потере фокуса input
+     */
+    onBlur?: (e: Event | FocusEvent) => void;
     /**
      * Свойства для компонента отображения
      * @example

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

@@ -1,5 +1,5 @@
 import { ISaveCursorPositionDebounceConfig } from '@steroidsjs/core/hooks/useSaveCursorPosition';
-import { ChangeEvent, MutableRefObject } from 'react';
+import { ChangeEvent, MutableRefObject, FocusEvent } from 'react';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { IBaseFieldProps } from '../InputField/InputField';
 /**
@@ -42,6 +42,14 @@ export interface INumberFieldProps extends IFieldWrapperInputProps, IBaseFieldPr
      * @example ','
      */
     thousandSeparator?: string;
+    /**
+     * Callback-функция, которая вызывается при фокусировке input
+    */
+    onFocus?: (e: Event | FocusEvent) => void;
+    /**
+     * Callback-функция, которая вызывается при потере фокуса input
+    */
+    onBlur?: (e: Event | FocusEvent) => void;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {

package/ui/form/PhoneField/PhoneField.d.ts

@@ -0,0 +1,40 @@
+import { IDropDownFieldItem } from '@steroidsjs/core/ui/form/DropDownField/DropDownField';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '@steroidsjs/core/ui/form/Field/fieldWrapper';
+import { IBaseFieldProps, IInputFieldProps } from '@steroidsjs/core/ui/form/InputField/InputField';
+export interface ICountryPhoneMask extends IDropDownFieldItem {
+    phoneCode: string;
+    phoneMask?: (string | RegExp)[];
+}
+/**
+ * PhoneField
+ *
+ * Компонент для ввода и форматирования телефонных номеров с поддержкой масок стран.
+ * Автоматически форматирует введенный номер в соответствии с выбранной маской.
+ *
+ */
+interface IPhoneFieldProps extends IFieldWrapperInputProps, IFieldWrapperOutputProps, IBaseFieldProps {
+    /**
+     * Список доступных масок для телефонных номеров разных стран.
+     * Каждая маска определяет формат отображения номера.
+     */
+    phoneMasks: ICountryPhoneMask[];
+    /**
+     * Выбранная страна по умолчанию
+     */
+    initialCountryCode: string;
+}
+export interface IPhoneFieldDropdownProps {
+    onOpen: () => void;
+    onClose: () => void;
+    isOpened: boolean;
+    items: any[];
+    onItemSelect: (id: any) => void;
+    selectedIds: any[];
+    selectedItems: any[];
+    primaryKey: string;
+}
+export interface IPhoneFieldViewProps extends IPhoneFieldProps, IFieldWrapperOutputProps {
+    dropDownProps: IPhoneFieldDropdownProps;
+}
+declare const _default: import("@steroidsjs/core/ui/form/Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;
+export default _default;

package/ui/form/PhoneField/PhoneField.js

@@ -0,0 +1,120 @@
+"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;
+var react_1 = require("@maskito/react");
+var hooks_1 = require("@steroidsjs/core/hooks");
+var fieldWrapper_1 = __importDefault(require("@steroidsjs/core/ui/form/Field/fieldWrapper"));
+var react_2 = require("react");
+function PhoneField(props) {
+    var components = (0, hooks_1.useComponents)();
+    var _a = (0, react_2.useState)(props.initialCountryCode.toUpperCase()), selectedCountryCode = _a[0], setSelectedCountryCode = _a[1];
+    // Data provider
+    var _b = (0, hooks_1.useDataProvider)({
+        items: props.phoneMasks,
+        initialSelectedIds: []
+    }), items = _b.items, sourceItems = _b.sourceItems;
+    // Data select
+    var _c = (0, hooks_1.useDataSelect)({
+        items: items,
+        sourceItems: sourceItems,
+        inputValue: props.input.value,
+        selectedIds: [selectedCountryCode]
+    }), isOpened = _c.isOpened, setIsOpened = _c.setIsOpened, setIsFocused = _c.setIsFocused, setHoveredId = _c.setHoveredId, selectedIds = _c.selectedIds, setSelectedIds = _c.setSelectedIds, selectedItems = _c.selectedItems;
+    var phoneMask = (0, react_2.useMemo)(function () {
+        var _a;
+        return (_a = ((items !== null && items !== void 0 ? items : [])).find(function (countryPhoneMask) { var _a; return countryPhoneMask.id === ((_a = selectedIds[0]) !== null && _a !== void 0 ? _a : props.defaultCountryCode); })) === null || _a === void 0 ? void 0 : _a.phoneMask;
+    }, [items, selectedIds, props.defaultCountryCode]);
+    var maskedInputRef = (0, react_1.useMaskito)({
+        options: {
+            mask: phoneMask
+        }
+    });
+    var _d = (0, hooks_1.useSaveCursorPosition)({
+        inputParams: props.input
+    }), inputRef = _d.inputRef, onChange = _d.onChange, value = _d.value;
+    (0, react_2.useEffect)(function () {
+        if (inputRef.current) {
+            maskedInputRef(inputRef.current);
+        }
+    }, [inputRef, maskedInputRef]);
+    var onOpen = (0, react_2.useCallback)(function () {
+        setIsFocused(true);
+        setIsOpened(true);
+        setHoveredId(null);
+    }, [setHoveredId, setIsFocused, setIsOpened]);
+    var onItemSelect = (0, react_2.useCallback)(function (id) {
+        // If country changed
+        if (selectedCountryCode !== id) {
+            setSelectedIds(id);
+            onChange(null, '');
+            setSelectedCountryCode(id);
+        }
+        setIsOpened(false);
+    }, [setSelectedIds, setIsOpened, onChange, selectedCountryCode]);
+    var onClose = (0, react_2.useCallback)(function () {
+        setIsFocused(false);
+        setIsOpened(false);
+    }, [setIsFocused, setIsOpened]);
+    var onClear = (0, react_2.useCallback)(function () {
+        if (props.onClear) {
+            props.onClear('');
+        }
+        props.input.onChange('');
+    }, [props]);
+    var inputProps = (0, react_2.useMemo)(function () { return (__assign({ name: props.input.name, onInput: onChange, value: value, placeholder: props.placeholder, disabled: props.disabled, type: 'tel' }, props.inputProps)); }, [props.disabled, props.input, props.inputProps, props.placeholder, onChange, value]);
+    var viewProps = (0, react_2.useMemo)(function () { return ({
+        inputRef: inputRef,
+        inputProps: inputProps,
+        size: props.size,
+        errors: props.errors,
+        leadIcon: props.leadIcon,
+        showClear: props.showClear,
+        onClear: onClear,
+        input: props.input,
+        className: props.className,
+        style: props.style,
+        onMouseDown: props.onMouseDown,
+        placeholder: props.placeholder,
+        required: props.required,
+        id: props.id,
+        viewProps: props.viewProps,
+        disabled: props.disabled,
+        dropDownProps: {
+            onOpen: onOpen,
+            onClose: onClose,
+            isOpened: isOpened,
+            items: items,
+            onItemSelect: onItemSelect,
+            selectedIds: selectedIds,
+            selectedItems: selectedItems,
+            primaryKey: 'id'
+        }
+    }); }, [inputProps, inputRef, isOpened, items, onClose,
+        onClear, onItemSelect, onOpen, props.className,
+        props.disabled, props.errors, props.id, props.input, props.leadIcon,
+        props.onMouseDown, props.placeholder, props.required, props.showClear,
+        props.size, props.style, props.viewProps, selectedIds, selectedItems]);
+    // No render for hidden input
+    if (props.type === 'hidden') {
+        return null;
+    }
+    return components.ui.renderView(props.view || 'form.PhoneFieldView', viewProps);
+}
+PhoneField.defaultProps = {
+    disabled: false,
+    required: false
+};
+exports["default"] = (0, fieldWrapper_1["default"])('PhoneField', PhoneField);

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

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

package/ui/form/PhoneField/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 PhoneField_1 = __importDefault(require("./PhoneField"));
+exports["default"] = PhoneField_1["default"];

package/ui/form/index.d.ts

@@ -24,6 +24,7 @@ import MaskField from './MaskField';
 import NavField from './NavField';
 import NumberField from './NumberField';
 import PasswordField from './PasswordField';
+import PhoneField from './PhoneField';
 import RadioField from './RadioField';
 import RadioListField from './RadioListField';
 import RateField from './RateField';
@@ -35,7 +36,7 @@ import TextField from './TextField';
 import TimeField from './TimeField';
 import TimeRangeField from './TimeRangeField';
 import WizardForm from './WizardForm';
-export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, ImageField, InputField, NavField, NumberField, PasswordField, RadioField, RadioListField, ReCaptchaField, SliderField, TextField, TimeField, RateField, MaskField, EmailField, TimeRangeField, WizardForm, SwitcherField, SwitcherListField, };
+export { AutoCompleteField, BlankField, Button, CheckboxField, CheckboxListField, CheckboxTreeField, DateField, DateRangeField, DateTimeField, DateTimeRangeField, DropDownField, Field, FieldLayout, FieldList, FieldSet, FileField, Form, HtmlField, ImageField, InputField, NavField, NumberField, PasswordField, PhoneField, RadioField, RadioListField, ReCaptchaField, SliderField, TextField, TimeField, RateField, MaskField, EmailField, TimeRangeField, WizardForm, SwitcherField, SwitcherListField, };
 declare const _default: {
     AutoCompleteField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./AutoCompleteField/AutoCompleteField").IAutoCompleteFieldProps>;
     BlankField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./BlankField/BlankField").IBlankFieldProps>;
@@ -60,6 +61,7 @@ declare const _default: {
     NavField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NavField/NavField").INavFieldProps>;
     NumberField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./NumberField/NumberField").INumberFieldProps>;
     PasswordField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./PasswordField/PasswordField").IPasswordFieldProps>;
+    PhoneField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./InputField/InputField").IInputFieldProps>;
     RadioField: typeof RadioField;
     RadioListField: typeof RadioListField;
     ReCaptchaField: import("./Field/fieldWrapper").FieldWrapperComponent<import("./ReCaptchaField/ReCaptchaField").IReCaptchaFieldProps>;

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.SwitcherListField = exports.SwitcherField = exports.WizardForm = exports.TimeRangeField = exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.ImageField = 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.CheckboxTreeField = exports.CheckboxListField = exports.CheckboxField = exports.Button = exports.BlankField = exports.AutoCompleteField = void 0;
+exports.SwitcherListField = exports.SwitcherField = exports.WizardForm = exports.TimeRangeField = exports.EmailField = exports.MaskField = exports.RateField = exports.TimeField = exports.TextField = exports.SliderField = exports.ReCaptchaField = exports.RadioListField = exports.RadioField = exports.PhoneField = exports.PasswordField = exports.NumberField = exports.NavField = exports.InputField = exports.ImageField = 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.CheckboxTreeField = 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"));
@@ -54,6 +54,8 @@ var NumberField_1 = __importDefault(require("./NumberField"));
 exports.NumberField = NumberField_1["default"];
 var PasswordField_1 = __importDefault(require("./PasswordField"));
 exports.PasswordField = PasswordField_1["default"];
+var PhoneField_1 = __importDefault(require("./PhoneField"));
+exports.PhoneField = PhoneField_1["default"];
 var RadioField_1 = __importDefault(require("./RadioField"));
 exports.RadioField = RadioField_1["default"];
 var RadioListField_1 = __importDefault(require("./RadioListField"));
@@ -100,6 +102,7 @@ exports["default"] = {
     NavField: NavField_1["default"],
     NumberField: NumberField_1["default"],
     PasswordField: PasswordField_1["default"],
+    PhoneField: PhoneField_1["default"],
     RadioField: RadioField_1["default"],
     RadioListField: RadioListField_1["default"],
     ReCaptchaField: ReCaptchaField_1["default"],