@steroidsjs/core 3.0.82 → 3.0.84

package/ui/form/TimeField/TimeField.js

@@ -15,13 +15,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var hooks_1 = require("../../../hooks");
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var enums_1 = require("../../../enums");
+var utils_1 = require("./utils");
 function TimeField(props) {
+    var _a, _b, _c;
     var components = (0, hooks_1.useComponents)();
-    var _a = (0, useDateInputState_1["default"])({
+    var maskRef = (0, react_2.useMaskito)({
+        options: (_a = props.maskOptions) !== null && _a !== void 0 ? _a : (0, utils_1.createTimeMask)({
+            from: (_b = props.availableTime) === null || _b === void 0 ? void 0 : _b.from,
+            to: (_c = props.availableTime) === null || _c === void 0 ? void 0 : _c.to,
+            minuteStep: props.minuteStep
+        })
+    });
+    var _d = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
         onChange: props.onChange,
@@ -32,10 +42,9 @@ function TimeField(props) {
         displayFormat: props.displayFormat,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC
-    }), onNow = _a.onNow, onClear = _a.onClear, onClose = _a.onClose, isOpened = _a.isOpened, inputProps = _a.inputProps;
-    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNow, onClose: onClose, value: inputProps.value, onSelect: inputProps.onChange }, props.timePanelViewProps)); }, [inputProps.onChange, inputProps.value, onClose, onNow, props.timePanelViewProps]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onNow: onNow, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, errors: props.errors, noBorder: props.noBorder, disabled: props.disabled, className: props.className, style: props.style, showRemove: props.showRemove, id: props.id })); }, [inputProps, isOpened, onClear, onClose, onNow, props.className, props.disabled, props.errors, props.icon, props.id, props.noBorder,
-        props.showRemove, props.size, props.style, props.viewProps, timePanelViewProps]);
+    }), onNow = _d.onNow, onClear = _d.onClear, onClose = _d.onClose, isOpened = _d.isOpened, inputProps = _d.inputProps;
+    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNow, onClose: onClose, value: inputProps.value, onSelect: inputProps.onChange, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [inputProps.onChange, inputProps.value, onClose, onNow, props.availableTime, props.minuteStep, props.timePanelViewProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onNow: onNow, onClear: onClear, onClose: onClose, isOpened: isOpened, inputProps: inputProps, timePanelViewProps: timePanelViewProps, size: props.size, icon: props.icon, errors: props.errors, noBorder: props.noBorder, disabled: props.disabled, className: props.className, style: props.style, showRemove: props.showRemove, id: props.id, maskRef: maskRef })); }, [inputProps, isOpened, maskRef, onClear, onClose, onNow, props.className, props.disabled, props.errors, props.icon, props.id, props.noBorder, props.showRemove, props.size, props.style, props.viewProps, timePanelViewProps]);
     return components.ui.renderView(props.view || 'form.TimeFieldView', viewProps);
 }
 TimeField.defaultProps = {
@@ -48,6 +57,7 @@ TimeField.defaultProps = {
     valueFormat: 'HH:mm',
     useUTC: false,
     dateInUTC: false,
-    icon: true
+    icon: true,
+    minuteStep: 1
 };
 exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.TIME_FIELD, TimeField);

package/ui/form/TimeField/utils.d.ts

@@ -0,0 +1,9 @@
+import { MaskitoOptions, MaskitoPlugin } from '@maskito/core';
+export declare const timeToMinutes: (value: string) => number;
+export declare const minutesToTime: (minutes: number) => string;
+export declare const createTimeRangePlugin: (from?: string, to?: string) => MaskitoPlugin;
+export declare const createTimeMask: (options?: {
+    from?: string;
+    to?: string;
+    minuteStep?: number;
+}) => MaskitoOptions;

package/ui/form/TimeField/utils.js

@@ -0,0 +1,100 @@
+"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);
+};
+exports.__esModule = true;
+exports.createTimeMask = exports.createTimeRangePlugin = exports.minutesToTime = exports.timeToMinutes = void 0;
+var timeToMinutes = function (value) {
+    var _a = value.split(':').map(Number), h = _a[0], m = _a[1];
+    return h * 60 + m;
+};
+exports.timeToMinutes = timeToMinutes;
+var isCompleteTime = function (value) { return /^\d{2}:\d{2}$/.test(value); };
+var minutesToTime = function (minutes) {
+    var h = Math.floor(minutes / 60);
+    var m = minutes % 60;
+    return "".concat(String(h).padStart(2, '0'), ":").concat(String(m).padStart(2, '0'));
+};
+exports.minutesToTime = minutesToTime;
+var createTimeRangePlugin = function (from, to) {
+    var fromMin = from ? (0, exports.timeToMinutes)(/^\d:\d{2}$/.test(from) ? "0".concat(from) : from) : 0;
+    var toMin = to ? (0, exports.timeToMinutes)(/^\d:\d{2}$/.test(to) ? "0".concat(to) : to) : 24 * 60 - 1;
+    return function (element) {
+        element.addEventListener('input', function () {
+            var value = element.value;
+            if (!isCompleteTime(value)) {
+                return;
+            }
+            var minutes = (0, exports.timeToMinutes)(value);
+            if (minutes < fromMin) {
+                minutes = fromMin;
+            }
+            if (minutes > toMin) {
+                minutes = toMin;
+            }
+            var normalized = (0, exports.minutesToTime)(minutes);
+            if (normalized !== value) {
+                element.value = normalized;
+            }
+        });
+    };
+};
+exports.createTimeRangePlugin = createTimeRangePlugin;
+var createTimeMask = function (options) { return ({
+    mask: [/\d/, /\d/, ':', /\d/, /\d/],
+    preprocessors: [
+        function (_a) {
+            var elementState = _a.elementState;
+            var value = elementState.value;
+            // авто-добавление ведущего нуля
+            if (/^\d:\d\d$/.test(value)) {
+                value = "0".concat(value);
+            }
+            return {
+                elementState: __assign(__assign({}, elementState), { value: value })
+            };
+        },
+    ],
+    postprocessors: [
+        function (_a) {
+            var value = _a.value, selection = _a.selection;
+            if (!/^\d{2}:\d{2}$/.test(value)) {
+                return { value: value, selection: selection };
+            }
+            var _b = value.split(':').map(Number), h = _b[0], m = _b[1];
+            if (Number.isNaN(h) || Number.isNaN(m)) {
+                return { value: value, selection: selection };
+            }
+            // Ограничение часов
+            if (h > 23) {
+                h = 23;
+            }
+            // Ограничение минут
+            if (m > 59) {
+                m = 59;
+            }
+            // Шаг минут
+            if ((options === null || options === void 0 ? void 0 : options.minuteStep) && options.minuteStep > 1) {
+                m = Math.floor(m / options.minuteStep)
+                    * options.minuteStep;
+            }
+            var nextValue = "".concat(String(h).padStart(2, '0'), ":").concat(String(m).padStart(2, '0'));
+            return {
+                value: nextValue,
+                selection: selection
+            };
+        },
+    ],
+    plugins: [
+        (0, exports.createTimeRangePlugin)(options === null || options === void 0 ? void 0 : options.from, options === null || options === void 0 ? void 0 : options.to),
+    ]
+}); };
+exports.createTimeMask = createTimeMask;

package/ui/form/TimeRangeField/TimeRangeField.d.ts

@@ -1,3 +1,4 @@
+import { MaskitoOptions } from '@maskito/core';
 import { IDateInputStateInput, IDateInputStateOutput } from '../DateField/useDateInputState';
 import { IFieldWrapperInputProps, IFieldWrapperOutputProps } from '../Field/fieldWrapper';
 import { ITimePanelViewProps } from '../TimeField/TimeField';
@@ -52,6 +53,31 @@ export interface ITimeRangeFieldProps extends IDateInputStateInput, Omit<IFieldW
      * @example true
      */
     hasInitialFocus?: boolean;
+    /**
+     * Опции маски для полей
+     */
+    maskOptions?: {
+        /**
+         * Опции маски для поля from
+         */
+        from: MaskitoOptions;
+        /**
+         * Опции маски для поля to
+         */
+        to: MaskitoOptions;
+    };
+    /**
+     *  Ограничение доступного времени.
+     */
+    availableTime?: {
+        from: string;
+        to: string;
+    };
+    /**
+     * Шаг минут
+     * @example 15
+     */
+    minuteStep?: number;
     [key: string]: any;
 }
 export interface ITimeRangeFieldViewProps extends IDateInputStateOutput, Pick<ITimeRangeFieldProps, 'size' | 'errors' | 'showRemove' | 'className' | 'timePanelViewProps' | 'disabled' | 'style' | 'icon'>, Omit<IFieldWrapperOutputProps, 'input'> {

package/ui/form/TimeRangeField/TimeRangeField.js

@@ -15,13 +15,30 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
+var react_2 = require("@maskito/react");
+var utils_1 = require("../TimeField/utils");
 var hooks_1 = require("../../../hooks");
 var useDateInputState_1 = __importDefault(require("../DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../Field/fieldWrapper"));
 var useDateRange_1 = __importDefault(require("../DateField/useDateRange"));
 var enums_1 = require("../../../enums");
 function TimeRangeField(props) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     var components = (0, hooks_1.useComponents)();
+    var maskFromRef = (0, react_2.useMaskito)({
+        options: (_b = (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from) !== null && _b !== void 0 ? _b : (0, utils_1.createTimeMask)({
+            from: (_c = props.availableTime) === null || _c === void 0 ? void 0 : _c.from,
+            to: (_d = props.availableTime) === null || _d === void 0 ? void 0 : _d.to,
+            minuteStep: props.minuteStep
+        })
+    });
+    var maskToRef = (0, react_2.useMaskito)({
+        options: (_f = (_e = props.maskOptions) === null || _e === void 0 ? void 0 : _e.to) !== null && _f !== void 0 ? _f : (0, utils_1.createTimeMask)({
+            from: (_g = props.availableTime) === null || _g === void 0 ? void 0 : _g.from,
+            to: (_h = props.availableTime) === null || _h === void 0 ? void 0 : _h.to,
+            minuteStep: props.minuteStep
+        })
+    });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -33,7 +50,7 @@ function TimeRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _a = (0, useDateInputState_1["default"])({
+    var _j = (0, useDateInputState_1["default"])({
         input: props.inputFrom,
         disabled: props.disabled,
         onChange: onChange,
@@ -44,9 +61,9 @@ function TimeRangeField(props) {
         displayFormat: props.displayFormat,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC
-    }), onNowFrom = _a.onNow, onCloseFrom = _a.onClose, inputPropsFrom = _a.inputProps, onClearFrom = _a.onClear, isOpenedFrom = _a.isOpened;
+    }), onNowFrom = _j.onNow, onCloseFrom = _j.onClose, inputPropsFrom = _j.inputProps, onClearFrom = _j.onClear, isOpenedFrom = _j.isOpened;
     // Input 'to'
-    var _b = (0, useDateInputState_1["default"])({
+    var _k = (0, useDateInputState_1["default"])({
         input: props.inputTo,
         disabled: props.disabled,
         onChange: onChange,
@@ -57,8 +74,8 @@ function TimeRangeField(props) {
         displayFormat: props.displayFormat,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC
-    }), onNowTo = _b.onNow, onCloseTo = _b.onClose, inputPropsTo = _b.inputProps, onClearTo = _b.onClear, isOpenedTo = _b.isOpened;
-    var _c = (0, useDateRange_1["default"])({
+    }), onNowTo = _k.onNow, onCloseTo = _k.onClose, inputPropsTo = _k.inputProps, onClearTo = _k.onClear, isOpenedTo = _k.isOpened;
+    var _l = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -69,12 +86,10 @@ function TimeRangeField(props) {
         inputTo: props.inputTo,
         useSmartFocus: false,
         hasInitialFocus: props.hasInitialFocus
-    }), focus = _c.focus, onClose = _c.onClose, onClear = _c.onClear, extendedInputPropsFrom = _c.extendedInputPropsFrom, extendedInputPropsTo = _c.extendedInputPropsTo;
-    var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.timePanelViewProps]);
-    var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.timePanelViewProps]);
-    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, inputPropsFrom: extendedInputPropsFrom, inputPropsTo: extendedInputPropsTo, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, errors: props.errors, timePanelFromViewProps: timePanelFromViewProps, timePanelToViewProps: timePanelToViewProps, size: props.size, icon: props.icon, disabled: props.disabled, showRemove: props.showRemove, className: props.className, id: props.id })); }, [extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, onClear, onClose, props.className,
-        props.disabled, props.errors, props.errorsFrom, props.errorsTo, props.icon, props.id, props.showRemove, props.size,
-        props.style, props.viewProps, timePanelFromViewProps, timePanelToViewProps]);
+    }), focus = _l.focus, onClose = _l.onClose, onClear = _l.onClear, extendedInputPropsFrom = _l.extendedInputPropsFrom, extendedInputPropsTo = _l.extendedInputPropsTo;
+    var timePanelFromViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowFrom, onClose: onCloseFrom, value: inputPropsFrom.value, onSelect: inputPropsFrom.onChange, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [inputPropsFrom.onChange, inputPropsFrom.value, onCloseFrom, onNowFrom, props.availableTime, props.minuteStep, props.timePanelViewProps]);
+    var timePanelToViewProps = (0, react_1.useMemo)(function () { return (__assign({ onNow: onNowTo, onClose: onCloseTo, value: inputPropsTo.value, onSelect: inputPropsTo.onChange, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [inputPropsTo.onChange, inputPropsTo.value, onCloseTo, onNowTo, props.availableTime, props.minuteStep, props.timePanelViewProps]);
+    var viewProps = (0, react_1.useMemo)(function () { return (__assign(__assign({}, props.viewProps), { onClear: onClear, onClose: onClose, inputPropsFrom: extendedInputPropsFrom, inputPropsTo: extendedInputPropsTo, isOpened: focus === 'from' ? isOpenedFrom : isOpenedTo, style: props.style, errorsFrom: props.errorsFrom, errorsTo: props.errorsTo, errors: props.errors, timePanelFromViewProps: timePanelFromViewProps, timePanelToViewProps: timePanelToViewProps, size: props.size, icon: props.icon, disabled: props.disabled, showRemove: props.showRemove, className: props.className, id: props.id, maskFromRef: maskFromRef, maskToRef: maskToRef })); }, [extendedInputPropsFrom, extendedInputPropsTo, focus, isOpenedFrom, isOpenedTo, maskFromRef, maskToRef, onClear, onClose, props.className, props.disabled, props.errors, props.errorsFrom, props.errorsTo, props.icon, props.id, props.showRemove, props.size, props.style, props.viewProps, timePanelFromViewProps, timePanelToViewProps]);
     return components.ui.renderView(props.view || 'form.TimeRangeFieldView', viewProps);
 }
 TimeRangeField.defaultProps = {
@@ -87,7 +102,8 @@ TimeRangeField.defaultProps = {
     valueFormat: 'HH:mm',
     useUTC: false,
     dateInUTC: false,
-    icon: true
+    icon: true,
+    minuteStep: 1
 };
 exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.TIME_RANGE_FIELD, TimeRangeField, {
     attributeSuffixes: ['from', 'to']