@steroidsjs/core 3.0.89 → 3.0.90

package/docs-autogen-result.json

@@ -4365,6 +4365,81 @@
             ],
             "methods": []
         },
+        "ISaveCursorPositionConfig": {
+            "name": "ISaveCursorPositionConfig",
+            "moduleName": "hooks/useSaveCursorPosition",
+            "title": "",
+            "description": "",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "ISaveCursorPositionDebounceConfig",
+                    "example": null
+                },
+                {
+                    "name": "inputParams",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "IInputParams",
+                    "example": null
+                }
+            ],
+            "methods": [
+                {
+                    "name": "onChangeCallback",
+                    "decorators": [],
+                    "description": "",
+                    "required": false,
+                    "type": "void",
+                    "example": null,
+                    "parameters": [
+                        {
+                            "name": "value",
+                            "decorators": [],
+                            "description": "",
+                            "required": true,
+                            "type": "any",
+                            "example": null
+                        }
+                    ]
+                }
+            ]
+        },
+        "ISaveCursorPositionDebounceConfig": {
+            "name": "ISaveCursorPositionDebounceConfig",
+            "moduleName": "hooks/useSaveCursorPosition",
+            "title": "",
+            "description": "",
+            "tags": {},
+            "defaultProps": null,
+            "extends": [],
+            "properties": [
+                {
+                    "name": "delayMs",
+                    "decorators": [],
+                    "description": "Задержка в мс",
+                    "required": false,
+                    "type": "number",
+                    "example": null
+                },
+                {
+                    "name": "enabled",
+                    "decorators": [],
+                    "description": "",
+                    "required": true,
+                    "type": "boolean",
+                    "example": null
+                }
+            ],
+            "methods": []
+        },
         "IPreparedTreeItem": {
             "name": "IPreparedTreeItem",
             "moduleName": "hooks/useTree",
@@ -7496,6 +7571,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -7709,6 +7792,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -11243,6 +11334,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -11743,6 +11842,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -24544,6 +24651,14 @@
                     "required": false,
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView"
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null
                 }
             ],
             "methods": [
@@ -25512,6 +25627,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "Задержка применения введённого значения",
+                    "required": false,
+                    "type": "boolean | ISaveCursorPositionDebounceConfig",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "disabled",
                     "decorators": [],
@@ -25819,6 +25943,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "Задержка применения введённого значения",
+                    "required": false,
+                    "type": "boolean | ISaveCursorPositionDebounceConfig",
+                    "example": null
+                },
                 {
                     "name": "defaultValue",
                     "decorators": [],
@@ -26168,6 +26300,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "Задержка применения введённого значения",
+                    "required": false,
+                    "type": "boolean | ISaveCursorPositionDebounceConfig",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "disabled",
                     "decorators": [],
@@ -26751,6 +26892,15 @@
                     "example": null,
                     "defaultValue": null
                 },
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "Задержка применения введённого значения",
+                    "required": false,
+                    "type": "boolean | ISaveCursorPositionDebounceConfig",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "decimal",
                     "decorators": [],
@@ -27042,6 +27192,14 @@
                     "type": "any",
                     "example": null
                 },
+                {
+                    "name": "debounce",
+                    "decorators": [],
+                    "description": "Задержка применения введённого значения",
+                    "required": false,
+                    "type": "boolean | ISaveCursorPositionDebounceConfig",
+                    "example": null
+                },
                 {
                     "name": "decimal",
                     "decorators": [],
@@ -37957,6 +38115,15 @@
                     "type": "React.ReactNode | {}",
                     "example": "MyCustomView",
                     "defaultValue": null
+                },
+                {
+                    "name": "viewProps",
+                    "decorators": [],
+                    "description": "Свойства для view компонента",
+                    "required": false,
+                    "type": "any",
+                    "example": null,
+                    "defaultValue": null
                 }
             ],
             "methods": [

package/en.json

@@ -1047,5 +1047,7 @@
     "Логическое значение, указывающее, есть ли еще элементы в списке с бесконечным скроллом": "",
     "Кастомный домен для куки": "",
     " Автоматически устанавливает куку для всех поддоменов текущего домена,\n но только если параметр domain не указан явно": "",
+    "Задержка в мс": "",
+    "Задержка применения введённого значения": "",
     "Флаг, который указывает, что высота поля должна быть равна высоте контента": ""
 }

package/hooks/useSaveCursorPosition.d.ts

@@ -1,6 +1,19 @@
-import React, { ChangeEvent } from 'react';
+import { ChangeEvent } from 'react';
 import { IInputParams } from '../ui/form/Field/fieldWrapper';
-export default function useSaveCursorPosition(inputParams: IInputParams, onChangeCallback?: (value: any) => void): {
-    inputRef: React.MutableRefObject<any>;
+export interface ISaveCursorPositionDebounceConfig {
+    /**
+     * Задержка в мс
+     */
+    delayMs?: number;
+    enabled: boolean;
+}
+export interface ISaveCursorPositionConfig {
+    inputParams: IInputParams;
+    onChangeCallback?: (value: any) => void;
+    debounce?: ISaveCursorPositionDebounceConfig;
+}
+export default function useSaveCursorPosition(config: ISaveCursorPositionConfig): {
+    inputRef: import("react").MutableRefObject<any>;
     onChange: (event: ChangeEvent<HTMLInputElement>, value?: any) => void;
+    value: any;
 };

package/hooks/useSaveCursorPosition.js

@@ -3,17 +3,19 @@ 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"));
+var react_1 = require("react");
+var debounce_1 = __importDefault(require("lodash-es/debounce"));
 var isNull_1 = __importDefault(require("lodash-es/isNull"));
-function useSaveCursorPosition(inputParams, onChangeCallback) {
-    var _a = react_1["default"].useState(null), cursor = _a[0], setCursor = _a[1];
-    var inputRef = react_1["default"].useRef(null);
-    react_1["default"].useEffect(function () {
+var DEFAULT_DEBOUNCE_DELAY_MS = 300;
+function useSaveCursorPosition(config) {
+    var _a, _b, _c;
+    var _d = (0, react_1.useState)(null), cursor = _d[0], setCursor = _d[1];
+    var inputRef = (0, react_1.useRef)(null);
+    var _e = (0, react_1.useState)((_a = config.inputParams.value) !== null && _a !== void 0 ? _a : ''), localValue = _e[0], setLocalValue = _e[1];
+    (0, react_1.useEffect)(function () {
         var el = inputRef.current;
         if (!el || (0, isNull_1["default"])(cursor)) {
             return;
@@ -25,19 +27,52 @@ function useSaveCursorPosition(inputParams, onChangeCallback) {
         catch (e) {
             console.error(e);
         }
-    }, [cursor, inputParams.value]);
-    var onChange = react_1["default"].useCallback(function (event, value) {
+    }, [cursor, localValue]);
+    /**
+     * Синхронизация ТОЛЬКО при внешнем reset (например, очистка формы)
+     */
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (config.inputParams.value !== localValue) {
+            setLocalValue((_a = config.inputParams.value) !== null && _a !== void 0 ? _a : '');
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [config.inputParams.value]);
+    /**
+     * Создаём debounce только при смене delay или enabled.
+     * onChange и onChangeCallback не добавляем в зависимости,
+     * чтобы debounce не пересоздавался каждый рендер.
+     */
+    var debouncedCommit = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if (!((_a = config.debounce) === null || _a === void 0 ? void 0 : _a.enabled)) {
+            return null;
+        }
+        return (0, debounce_1["default"])(function (value) {
+            var _a;
+            config.inputParams.onChange(value);
+            (_a = config.onChangeCallback) === null || _a === void 0 ? void 0 : _a.call(config, value);
+        }, (_b = config.debounce.delayMs) !== null && _b !== void 0 ? _b : DEFAULT_DEBOUNCE_DELAY_MS);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [(_b = config.debounce) === null || _b === void 0 ? void 0 : _b.enabled, (_c = config.debounce) === null || _c === void 0 ? void 0 : _c.delayMs]);
+    var onChange = (0, react_1.useCallback)(function (event, value) {
         var _a, _b, _c;
         if (value === void 0) { value = null; }
-        if (onChangeCallback) {
-            onChangeCallback(value || ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
+        var val = value !== null && value !== void 0 ? value : event.target.value;
+        setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
+        setLocalValue(val);
+        if ((_b = config.debounce) === null || _b === void 0 ? void 0 : _b.enabled) {
+            debouncedCommit(val);
+        }
+        else {
+            config.inputParams.onChange(val);
+            (_c = config.onChangeCallback) === null || _c === void 0 ? void 0 : _c.call(config, val);
         }
-        setCursor((_b = event === null || event === void 0 ? void 0 : event.target) === null || _b === void 0 ? void 0 : _b.selectionStart);
-        inputParams.onChange(value || ((_c = event.target) === null || _c === void 0 ? void 0 : _c.value));
-    }, [inputParams, onChangeCallback]);
+    }, [config, debouncedCommit]);
     return {
         inputRef: inputRef,
-        onChange: onChange
+        onChange: onChange,
+        value: localValue
     };
 }
 exports["default"] = useSaveCursorPosition;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/core",
-    "version": "3.0.89",
+    "version": "3.0.90",
     "description": "",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
     "repository": {

package/ui/form/EmailField/EmailField.js

@@ -44,7 +44,9 @@ var useInputTypeEmail_1 = __importDefault(require("./hooks/useInputTypeEmail"));
 var enums_1 = require("../../../enums");
 function EmailField(props) {
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var _a = (0, hooks_1.useSaveCursorPosition)({
+        inputParams: props.input
+    }), currentInputRef = _a.inputRef, onChange = _a.onChange;
     var onInputChange = (0, useInputTypeEmail_1["default"])(currentInputRef, onChange, props.input.value, props.required).onInputChange;
     var onClear = react_1["default"].useCallback(function () { return props.input.onChange(''); }, [props.input]);
     var inputProps = react_1["default"].useMemo(function () {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { InputHTMLAttributes, ReactNode } from 'react';
 import { MaskitoOptions } from '@maskito/core';
+import { ISaveCursorPositionDebounceConfig } from '@steroidsjs/core/hooks/useSaveCursorPosition';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 export declare const MASK_PRESETS: {
     date: Required<MaskitoOptions>;
@@ -87,6 +88,10 @@ export interface IInputFieldProps extends IBaseFieldProps {
      * Пользовательская иконка svg или название иконки
      */
     leadIcon?: React.ReactElement | string;
+    /**
+     * Задержка применения введённого значения
+     */
+    debounce?: boolean | ISaveCursorPositionDebounceConfig;
 }
 export interface IInputFieldViewProps extends IInputFieldProps, IFieldWrapperOutputProps {
     inputProps: {

package/ui/form/InputField/InputField.js

@@ -87,11 +87,16 @@ exports.MASK_PRESETS = {
     }
 };
 function InputField(props) {
+    var _a;
     var components = (0, hooks_1.useComponents)();
     var maskedInputRef = (0, react_2.useMaskito)({
         options: props.maskOptions
     });
-    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
+    var _b = (0, hooks_1.useSaveCursorPosition)({
+        inputParams: props.input,
+        onChangeCallback: props.onChange,
+        debounce: __assign({ enabled: !!props.debounce }, (typeof props.debounce === 'boolean' ? { enabled: props.debounce } : ((_a = props.debounce) !== null && _a !== void 0 ? _a : {})))
+    }), inputRef = _b.inputRef, onChange = _b.onChange, value = _b.value;
     React.useEffect(function () {
         if (inputRef.current) {
             maskedInputRef(inputRef.current);
@@ -103,11 +108,8 @@ function InputField(props) {
             props.onClear('');
         }
         props.input.onChange('');
-    }, [props.input, props.onClear]);
-    var inputProps = (0, react_1.useMemo)(function () {
-        var _a;
-        return (__assign({ type: props.type, name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onInput: onChange, placeholder: props.placeholder }, props.inputProps));
-    }, [onChange, props.input.name, props.input.value, props.inputProps, props.placeholder, props.type]);
+    }, [props]);
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign({ type: props.type, name: props.input.name, value: value, onInput: onChange, placeholder: props.placeholder }, props.inputProps)); }, [value, onChange, props.input.name, props.inputProps, props.placeholder, props.type]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         inputRef: useInputFieldWarningByType_1.INPUT_TYPES_SUPPORTED_SELECTION.includes(props.type) ? inputRef : null,
         onClear: onClear,

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

@@ -1,4 +1,5 @@
 import React, { ChangeEvent } from 'react';
+import { ISaveCursorPositionDebounceConfig } from '@steroidsjs/core/hooks/useSaveCursorPosition';
 import { IBaseFieldProps } from '../InputField/InputField';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
@@ -30,6 +31,10 @@ export interface INumberFieldProps extends IFieldWrapperInputProps, IBaseFieldPr
      * Может ли число быть отрицательным
      */
     isCanBeNegative?: boolean;
+    /**
+     * Задержка применения введённого значения
+     */
+    debounce?: boolean | ISaveCursorPositionDebounceConfig;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {

package/ui/form/NumberField/NumberField.js

@@ -45,8 +45,13 @@ var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber")
 var enums_1 = require("../../../enums");
 var DEFAULT_STEP = 1;
 function NumberField(props) {
+    var _a;
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), currentInputRef = _a.inputRef, onChange = _a.onChange;
+    var _b = (0, hooks_1.useSaveCursorPosition)({
+        inputParams: props.input,
+        onChangeCallback: props.onChange,
+        debounce: __assign({ enabled: !!props.debounce }, (typeof props.debounce === 'boolean' ? { enabled: props.debounce } : ((_a = props.debounce) !== null && _a !== void 0 ? _a : {})))
+    }), currentInputRef = _b.inputRef, onChange = _b.onChange, value = _b.value;
     var step = react_1["default"].useMemo(function () { var _a; return (_a = props.step) !== null && _a !== void 0 ? _a : DEFAULT_STEP; }, [props.step]);
     var onInputChange = (0, useInputTypeNumber_1["default"])(currentInputRef, {
         max: props.max,
@@ -58,7 +63,7 @@ function NumberField(props) {
         var _a;
         var currentValue = Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value);
         var newValue;
-        var fixToDecimal = function (value) { return props.decimal ? value.toFixed(props.decimal) : value; };
+        var fixToDecimal = function (rawValue) { return props.decimal ? rawValue.toFixed(props.decimal) : rawValue; };
         if (isIncrement) {
             newValue = fixToDecimal(currentValue + step);
         }
@@ -75,10 +80,7 @@ function NumberField(props) {
             onStep(false);
         }
     }, [onStep]);
-    var inputProps = (0, react_1.useMemo)(function () {
-        var _a;
-        return (__assign(__assign({}, props.inputProps), { name: props.input.name, value: (_a = props.input.value) !== null && _a !== void 0 ? _a : '', onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, required: props.required, autoComplete: 'off', onKeyDown: onKeyDown }));
-    }, [props.inputProps, props.input.name, props.input.value, props.min, props.max, props.step, props.placeholder, props.disabled, props.required, onInputChange, onKeyDown]);
+    var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { name: props.input.name, value: value, onChange: onInputChange, type: 'text', min: props.min, max: props.max, step: props.step, placeholder: props.placeholder, disabled: props.disabled, required: props.required, autoComplete: 'off', onKeyDown: onKeyDown })); }, [props.inputProps, props.input.name, props.min, props.max, props.step, props.placeholder, props.disabled, props.required, value, onInputChange, onKeyDown]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         viewProps: props.viewProps,
         inputProps: inputProps,

package/ui/form/PasswordField/PasswordField.js

@@ -56,7 +56,7 @@ exports.checkPassword = checkPassword;
 function PasswordField(props) {
     var _a = (0, react_1.useState)(InputType.PASSWORD), type = _a[0], setType = _a[1];
     var components = (0, hooks_1.useComponents)();
-    var _b = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _b.inputRef, onChange = _b.onChange;
+    var _b = (0, hooks_1.useSaveCursorPosition)({ inputParams: props.input }), inputRef = _b.inputRef, onChange = _b.onChange;
     var onClear = (0, react_1.useCallback)(function () { return props.input.onChange(''); }, [props.input]);
     var onShowButtonClick = (0, react_1.useCallback)(function () {
         type === InputType.PASSWORD ? setType(InputType.TEXT) : setType(InputType.PASSWORD);

package/ui/form/TextField/TextField.js

@@ -21,7 +21,9 @@ var enums_1 = require("../../../enums");
 function TextField(props) {
     // const dispatch = useDispatch();
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, hooks_1.useSaveCursorPosition)(props.input), inputRef = _a.inputRef, onChange = _a.onChange;
+    var _a = (0, hooks_1.useSaveCursorPosition)({
+        inputParams: props.input
+    }), inputRef = _a.inputRef, onChange = _a.onChange;
     var onKeyUp = (0, react_1.useCallback)(function (e) {
         if (props.submitOnEnter
             && props.formId

package/ui/modal/Modal/Modal.d.ts

@@ -90,6 +90,10 @@ export interface IModalProps {
      * @example MyCustomView
      */
     view?: CustomView;
+    /**
+     * Свойства для view компонента
+     */
+    viewProps?: CustomViewProps;
     /**
      * Вложенные элементы
      */

package/ui/modal/Modal/Modal.js

@@ -56,9 +56,9 @@ function Modal(props) {
         shouldCloseOnOverlayClick: props.shouldCloseOnOverlayClick,
         title: props.title,
         children: props.children,
-        buttons: props.buttons
-    }); }, [props.buttons, props.children, props.className, props.closeTimeoutMs, props.isClosing, props.onClose, props.shouldCloseOnEsc,
-        props.shouldCloseOnOverlayClick, props.size, props.title]);
+        buttons: props.buttons,
+        viewProps: props.viewProps
+    }); }, [props.buttons, props.children, props.className, props.closeTimeoutMs, props.isClosing, props.onClose, props.shouldCloseOnEsc, props.shouldCloseOnOverlayClick, props.size, props.title, props.viewProps]);
     return (react_1["default"].createElement(ModalView, __assign({}, viewProps), (ContentComponent && (react_1["default"].createElement(ContentComponent, __assign({}, props, props.componentProps)))) || (props.children)));
 }
 Modal.defaultProps = {