@steroidsjs/core 3.0.0-beta.47 → 3.0.0-beta.49

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@steroidsjs/core",
- "version": "3.0.0-beta.47",
+ "version": "3.0.0-beta.49",
  "description": "",
  "author": "Vladimir Kozhin <hello@kozhindev.com>",
  "repository": {
@@ -25,6 +25,9 @@
   "watch": "tsc -p tsconfig-debug.json"
  },
  "dependencies": {
+  "@maskito/core": "^0.12.1",
+  "@maskito/kit": "^0.12.1",
+  "@maskito/react": "^0.12.1",
   "axios": "^0.21.1",
   "connected-react-router": "^6.9.3",
   "domready": "^1.0.8",
@@ -47,7 +50,6 @@
   "react-grid-gallery": "^0.4.8",
   "react-helmet": "^6.1.0",
   "react-image-crop": "^9.0.2",
-  "react-input-mask": "^3.0.0-alpha.2",
   "react-redux": "^8.0.5",
   "react-router": "^5.2.0",
   "react-router-dom": "^5.2.0",

package/ui/form/DateField/DateField.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { MaskitoOptions } from '@maskito/core';
 import { ICalendarProps } from '../../content/Calendar/Calendar';
 import { IDateInputStateInput, IDateInputStateOutput } from './useDateInputState';
 export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
@@ -9,9 +11,17 @@ export interface IDateFieldProps extends IDateInputStateInput, IUiComponent {
      * Свойства для компонента Calendar
      */
     calendarProps?: ICalendarProps;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
     [key: string]: any;
 }
 export interface IDateFieldViewProps extends IDateInputStateOutput, Pick<IDateFieldProps, 'size' | 'icon' | 'errors' | 'showRemove' | 'className' | 'calendarProps'> {
+    /**
+     * Ref для input элемента, который накладывает маску
+     */
+    maskInputRef?: React.RefCallback<HTMLElement>;
     [key: string]: any;
 }
 declare const _default: import("../../form/Field/fieldWrapper").FieldWrapperComponent<IDateFieldProps>;

package/ui/form/DateField/DateField.js

@@ -15,6 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
+var kit_1 = require("@maskito/kit");
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("./useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
@@ -24,6 +26,7 @@ var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
  */
 function DateField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskInputRef = (0, react_2.useMaskito)({ options: props.maskOptions });
     var _a = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
@@ -36,7 +39,7 @@ function DateField(props) {
     }), onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
     // Calendar props
     var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: props.input.value, onChange: props.input.onChange, valueFormat: props.valueFormat }, props.calendarProps)); }, [props.calendarProps, props.input.onChange, props.input.value, props.valueFormat]);
-    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style }));
+    return components.ui.renderView(props.view || 'form.DateFieldView', __assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, calendarProps: calendarProps, size: props.size, icon: props.icon, errors: props.errors, label: props.label, disabled: props.disabled, className: props.className, showRemove: props.showRemove, style: props.style, maskInputRef: maskInputRef }));
 }
 DateField.defaultProps = {
     disabled: false,
@@ -45,6 +48,7 @@ DateField.defaultProps = {
     required: false,
     showRemove: true,
     valueFormat: 'YYYY-MM-DD',
+    maskOptions: (0, kit_1.maskitoDateOptionsGenerator)({ mode: 'dd/mm/yyyy', separator: '.' }),
     size: 'md'
 };
 exports["default"] = (0, fieldWrapper_1["default"])('DateField', DateField);

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

@@ -1,6 +1,16 @@
 import * as React from 'react';
-import { ChangeEventHandler, ReactNode } from 'react';
+import { ReactNode } from 'react';
+import { MaskitoOptions } from '@maskito/core';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+export declare const MASK_PRESETS: {
+    date: MaskitoOptions;
+    phone: {
+        mask: (string | RegExp)[];
+    };
+    card: {
+        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 interface IBaseFieldProps extends IFieldWrapperInputProps, IUiComponent {
     /**
@@ -53,13 +63,19 @@ export interface IInputFieldProps extends IBaseFieldProps {
     addonAfter?: ReactNode | string;
     /**
      * Конфигурация маски
-     * @example { mask: '+7 (999) 999-99-99' }
+     * @example: {
+         mask: [
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+             '-',
+             ...Array(4).fill(/\d/),
+         ],
+        }
      */
-    maskProps?: {
-        mask?: string;
-        maskPlaceholder?: string;
-        alwaysShowMask?: boolean;
-    };
+    maskOptions?: MaskitoOptions;
     /**
      * Пользовательская иконка svg или название иконки
      */
@@ -69,7 +85,7 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     inputProps: {
         type: string;
         name: string;
-        onChange: ChangeEventHandler<Element>;
+        onChange: (value: any) => void;
         value: string | number;
         placeholder: string;
         disabled: string;
@@ -78,6 +94,8 @@ export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOut
     onFocus?: (e: Event | React.FocusEvent) => void;
     onBlur?: (e: Event | React.FocusEvent) => void;
     onMouseDown?: (e: Event | React.MouseEvent) => void;
+    maskedInputRef?: React.RefCallback<HTMLElement>;
+    defaultValue?: string;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<IInputFieldProps>;
 export default _default;

package/ui/form/InputField/InputField.js

@@ -33,17 +33,48 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
+exports.MASK_PRESETS = void 0;
 var React = __importStar(require("react"));
-var react_input_mask_1 = __importDefault(require("react-input-mask"));
 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");
+exports.MASK_PRESETS = {
+    date: (0, kit_1.maskitoDateOptionsGenerator)({
+        mode: 'dd/mm/yyyy'
+    }),
+    phone: {
+        mask: ['+', '7', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
+    },
+    card: {
+        mask: __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true), [
+            '-'
+        ], false), Array(4).fill(/\d/), true)
+    }
+};
 function InputField(props) {
     var components = (0, hooks_1.useComponents)();
+    var maskedInputRef = (0, react_2.useMaskito)({
+        options: props.maskOptions
+    });
     var onClear = React.useCallback(function () { return props.input.onChange(''); }, [props.input]);
     props.onClear = onClear;
     var inputProps = (0, react_1.useMemo)(function () {
@@ -54,12 +85,7 @@ function InputField(props) {
     if (props.type === 'hidden') {
         return null;
     }
-    // react-input-mask HOC for mask
-    if (props.maskProps) {
-        var maskOnChange = function (e) { return props.input.onChange(e.target.value); };
-        return (React.createElement(react_input_mask_1["default"], __assign({}, inputProps, props.maskProps, { onChange: maskOnChange }), components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, onChange: maskOnChange }))));
-    }
-    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps }));
+    return components.ui.renderView(props.view || 'form.InputFieldView', __assign(__assign(__assign({}, props), props.viewProps), { inputProps: inputProps, maskedInputRef: maskedInputRef }));
 }
 InputField.defaultProps = {
     type: 'text',

package/ui/form/MaskField/MaskField.d.ts

@@ -1,7 +1,5 @@
 /// <reference types="react" />
 import { IInputFieldProps } from '../InputField/InputField';
-export interface IMaskFieldProps extends IInputFieldProps {
-    mask?: string;
-}
+export type IMaskFieldProps = IInputFieldProps;
 declare function MaskField(props: IMaskFieldProps): JSX.Element;
 export default MaskField;

package/ui/form/MaskField/MaskField.js

@@ -29,6 +29,6 @@ var react_1 = __importDefault(require("react"));
 var InputField_1 = __importDefault(require("../InputField/InputField"));
 function MaskField(props) {
     var mask = props.mask, maskProps = props.maskProps, inputProps = __rest(props, ["mask", "maskProps"]);
-    return (react_1["default"].createElement(InputField_1["default"], __assign({}, inputProps, { maskProps: __assign({ mask: mask }, maskProps) })));
+    return (react_1["default"].createElement(InputField_1["default"], __assign({}, inputProps, { maskOptions: props.maskOptions })));
 }
 exports["default"] = MaskField;