@steroidsjs/core 3.0.20 → 3.0.22

package/docs-autogen-result.json

@@ -25291,6 +25291,7 @@
             "tags": {},
             "defaultProps": null,
             "extends": [
+                "IFieldWrapperInputProps",
                 "IBaseFieldProps"
             ],
             "properties": [
@@ -25384,6 +25385,15 @@
                     "example": "{ onKeyDown: ... }",
                     "defaultValue": null
                 },
+                {
+                    "name": "isCanBeNegative",
+                    "decorators": [],
+                    "description": "Может ли число быть отрицательным",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null,
+                    "defaultValue": null
+                },
                 {
                     "name": "isRenderWithoutFieldLayout",
                     "decorators": [],
@@ -25665,6 +25675,14 @@
                     "type": "MutableRefObject",
                     "example": null
                 },
+                {
+                    "name": "isCanBeNegative",
+                    "decorators": [],
+                    "description": "Может ли число быть отрицательным",
+                    "required": false,
+                    "type": "boolean",
+                    "example": null
+                },
                 {
                     "name": "isRenderWithoutFieldLayout",
                     "decorators": [],

package/en.json

@@ -1003,6 +1003,7 @@
     "Конструктор редактора 'ckeditor5-react' из библиотеки @steroidsjs/ckeditor5/packages/ckeditor5-build-classic\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Компонент редактора 'ckeditor5-react' из библиотеки @ckeditor\nПримечание: для использования встроенного отображения 'HtmlField', данный компонент должен быть передан": "",
     "Допустимое количество символов после разделителя": "",
+    "Может ли число быть отрицательным": "",
     "CSS-класс для элемента навигации.": "",
     "Тип данных для параметров маршрута.": "",
     "Обертка над Redux Store со встроенными middleware (thunk, multi, promise..) и react-router.": ""

package/hooks/useSaveCursorPosition.d.ts

@@ -1,6 +1,6 @@
 import React, { ChangeEvent } from 'react';
 import { IInputParams } from '../ui/form/Field/fieldWrapper';
-export default function useSaveCursorPosition(inputParams: IInputParams): {
+export default function useSaveCursorPosition(inputParams: IInputParams, onChangeCallback?: (value: any) => void): {
     inputRef: React.MutableRefObject<any>;
     onChange: (event: ChangeEvent<HTMLInputElement>, value?: any) => void;
 };

package/hooks/useSaveCursorPosition.js

@@ -9,7 +9,7 @@ exports.__esModule = true;
 /* eslint-disable no-return-assign */
 /* eslint-disable no-unused-expressions */
 var react_1 = __importDefault(require("react"));
-function useSaveCursorPosition(inputParams) {
+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 () {
@@ -19,11 +19,14 @@ function useSaveCursorPosition(inputParams) {
         }
     }, [cursor, inputParams.value]);
     var onChange = react_1["default"].useCallback(function (event, value) {
-        var _a, _b;
+        var _a, _b, _c;
         if (value === void 0) { value = null; }
-        setCursor((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.selectionStart);
-        inputParams.onChange(value || ((_b = event.target) === null || _b === void 0 ? void 0 : _b.value));
-    }, [inputParams]);
+        if (onChangeCallback) {
+            onChangeCallback(value || ((_a = event.target) === null || _a === void 0 ? void 0 : _a.value));
+        }
+        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]);
     return {
         inputRef: inputRef,
         onChange: onChange

package/package.json

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

package/ui/form/CheckboxListField/CheckboxListField.d.ts

@@ -58,7 +58,6 @@ export interface ICheckboxListFieldProps extends IFieldWrapperInputProps, Omit<I
     viewProps?: {
         [key: string]: any;
     };
-    [key: string]: any;
 }
 export interface ICheckboxListFieldViewProps extends IFieldWrapperOutputProps, IUiComponent {
     inputProps: {

package/ui/form/CheckboxListField/CheckboxListField.js

@@ -39,6 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = __importStar(require("react"));
 var react_use_1 = require("react-use");
+var isEqual_1 = __importDefault(require("lodash-es/isEqual"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../../../ui/form/Field/fieldWrapper"));
 function CheckboxListField(props) {
@@ -53,6 +54,7 @@ function CheckboxListField(props) {
         selectedIds: inputSelectedIds,
         multiple: props.multiple,
         primaryKey: props.primaryKey,
+        selectFirst: props.selectFirst,
         items: items,
         inputValue: props.input.value
     }), selectedIds = _a.selectedIds, setSelectedIds = _a.setSelectedIds;
@@ -61,12 +63,16 @@ function CheckboxListField(props) {
     }, [setSelectedIds]);
     var inputProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.inputProps), { type: 'checkbox', name: props.input.name, disabled: props.disabled })); }, [props.disabled, props.input, props.inputProps]);
     // Sync with form
+    var prevSelectedIds = (0, react_use_1.usePrevious)(selectedIds);
     (0, react_1.useEffect)(function () {
-        props.input.onChange.call(null, selectedIds);
-        if (props.onChange) {
-            props.onChange(selectedIds);
+        if (!(0, isEqual_1["default"])(prevSelectedIds || [], selectedIds)) {
+            props.input.onChange.call(null, selectedIds);
+            if (props.onChange) {
+                props.onChange.call(null, selectedIds);
+            }
         }
-    }, [props, props.input.onChange, selectedIds]);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.input.onChange, selectedIds]);
     var onReset = (0, react_1.useCallback)(function () {
         setSelectedIds([]);
     }, [setSelectedIds]);

package/ui/form/FileField/FileField.js

@@ -71,7 +71,10 @@ function FileFieldComponent(props) {
         }
     }, [files, props]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
+        input: props.input,
         buttonView: props.buttonView,
+        multiple: props.multiple,
+        imagesOnly: props.imagesOnly,
         buttonProps: __assign({ label: props.filesLayout === FilesLayout.wall
                 ? __('Upload')
                 : __('Click to Upload'), size: props.size, disabled: props.disabled, onClick: onBrowse }, props.buttonProps),
@@ -122,8 +125,7 @@ function FileFieldComponent(props) {
             }
             return item;
         })
-    }); }, [FileFieldItemView, files, onBrowse, onRemove, props.buttonProps, props.buttonView, props.className, props.disabled,
-        props.filesLayout, props.imagesOnly, props.imagesProcessor, props.itemProps, props.showRemove, props.size]);
+    }); }, [FileFieldItemView, files, onBrowse, onRemove, props.buttonProps, props.buttonView, props.className, props.disabled, props.filesLayout, props.imagesOnly, props.imagesProcessor, props.input, props.itemProps, props.showRemove, props.size]);
     return (react_1["default"].createElement(FileFieldView, __assign({}, viewProps)));
 }
 function FileField(props) {

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

@@ -1,12 +1,12 @@
 import React, { ChangeEvent } from 'react';
 import { IBaseFieldProps } from '../InputField/InputField';
-import { IFieldWrapperOutputProps } from '../Field/fieldWrapper';
+import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 /**
  * NumberField
  *
  * Числовое поле ввода. Этот компонент представляет собой поле ввода для числовых значений.
  **/
-export interface INumberFieldProps extends IBaseFieldProps {
+export interface INumberFieldProps extends IFieldWrapperInputProps, IBaseFieldProps {
     /**
      * Минимальное значение
      * @example 1
@@ -26,6 +26,10 @@ export interface INumberFieldProps extends IBaseFieldProps {
     * Допустимое количество символов после разделителя
     */
     decimal?: number;
+    /**
+     * Может ли число быть отрицательным
+     */
+    isCanBeNegative?: boolean;
 }
 export interface INumberFieldViewProps extends INumberFieldProps, IFieldWrapperOutputProps {
     inputProps: {

package/ui/form/NumberField/NumberField.js

@@ -45,14 +45,14 @@ var useInputTypeNumber_1 = __importDefault(require("./hooks/useInputTypeNumber")
 var DEFAULT_STEP = 1;
 function NumberField(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)(props.input, props.onChange), currentInputRef = _a.inputRef, onChange = _a.onChange;
     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,
         min: props.min,
         value: props.input.value,
         required: props.required
-    }, onChange, props.decimal).onInputChange;
+    }, onChange, props.decimal, props.isCanBeNegative).onInputChange;
     var onStep = (0, react_1.useCallback)(function (isIncrement) {
         var _a;
         var currentValue = Number((_a = currentInputRef === null || currentInputRef === void 0 ? void 0 : currentInputRef.current) === null || _a === void 0 ? void 0 : _a.value);
@@ -105,6 +105,7 @@ function NumberField(props) {
 }
 NumberField.defaultProps = {
     disabled: false,
-    required: false
+    required: false,
+    isCanBeNegative: true
 };
 exports["default"] = (0, fieldWrapper_1["default"])('NumberField', NumberField);

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

@@ -5,7 +5,7 @@ interface IInputTypeNumberProps {
     value: string | undefined | null;
     required?: boolean;
 }
-declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void, decimal: number) => {
+declare const useInputTypeNumber: (currentInputRef: React.MutableRefObject<HTMLInputElement>, inputTypeNumberProps: IInputTypeNumberProps, onChange: (event: React.ChangeEvent<HTMLInputElement>, value?: any) => void, decimal: number, isCanBeNegative?: boolean) => {
     onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 };
 export default useInputTypeNumber;

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

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = __importDefault(require("react"));
-var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange, decimal) {
+var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChange, decimal, isCanBeNegative) {
     react_1["default"].useEffect(function () {
         var _a;
         var defaultValidity = __('The number is not valid.');
@@ -20,18 +20,30 @@ var useInputTypeNumber = function (currentInputRef, inputTypeNumberProps, onChan
         if (!value) {
             return true;
         }
-        /**
-        * Подходят как отрицательные так и положительные числа с плавающей точкой
-        * @example -1.0
-        * @example 1.1
-        */
-        var numericFloatRegExp = new RegExp("^-?\\d*\\.?\\d{0,".concat(decimal, "}$"));
-        /**
-        * Подходят как отрицательные так и положительные целые числа
-        * @example 1
-        * @example -2
-        */
-        var numericRegExp = new RegExp('^-?\\d*$');
+        var numericFloatRegExp = isCanBeNegative
+            /**
+             * Подходят отрицательные и положительные числа с плавающей точкой
+             * @example -1.0
+             * @example 1.1
+             */
+            ? new RegExp("^-?\\d*\\.?\\d{0,".concat(decimal, "}$"))
+            /**
+             * Подходят положительные числа с плавающей точкой
+             * @example 1.1
+             */
+            : new RegExp("^\\d*\\.?\\d{0,".concat(decimal, "}$"));
+        var numericRegExp = isCanBeNegative
+            /**
+             * Подходят отрицательные и положительные целые числа
+             * @example 1
+             * @example -2
+             */
+            ? new RegExp('^-?\\d*$')
+            /**
+             * Подходят положительные целые числа
+             * @example 1
+             */
+            : new RegExp('^\\d+$');
         return decimal ? numericFloatRegExp.test(value) : numericRegExp.test(value);
     };
     var onInputChange = function (event) {

package/ui/form/SliderField/SliderField.js

@@ -16,6 +16,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var react_1 = require("react");
 var toInteger_1 = __importDefault(require("lodash-es/toInteger"));
+var head_1 = __importDefault(require("lodash-es/head"));
+var last_1 = __importDefault(require("lodash-es/last"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var normalizeValue = function (value) { return (0, toInteger_1["default"])(String(value).replace(/[0-9]g/, '')) || 0; };
@@ -28,7 +30,12 @@ function SliderField(props) {
         props.input.onChange(value);
     }, [props]);
     var onAfterChange = (0, react_1.useCallback)(function (value) {
-        var normalizedValue = normalizeValue(value);
+        var normalizedValue = props.isRange
+            ? [
+                normalizeValue((0, head_1["default"])(value)),
+                normalizeValue((0, last_1["default"])(value)),
+            ]
+            : normalizeValue(value);
         if (props.onAfterChange) {
             props.onAfterChange(normalizedValue);
         }