@steroidsjs/core 3.0.81 → 3.0.83

package/ui/form/DateTimeField/DateTimeField.js

@@ -15,8 +15,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 exports.__esModule = true;
 var react_1 = require("react");
-var kit_1 = require("@maskito/kit");
 var react_2 = require("@maskito/react");
+var utils_1 = require("./utils");
 var useDateTime_1 = __importDefault(require("../DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
 var fieldWrapper_1 = __importDefault(require("../../form/Field/fieldWrapper"));
@@ -28,10 +28,18 @@ var DATE_TIME_SEPARATOR = ', ';
  * Поля ввода с выпадающими списками для выбора даты и времени
  */
 function DateTimeField(props) {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     var components = (0, hooks_1.useComponents)();
-    var maskInputRef = (0, react_2.useMaskito)({ options: props.maskOptions });
-    var _b = (0, useDateInputState_1["default"])({
+    var maskInputRef = (0, react_2.useMaskito)({
+        options: (0, utils_1.createDateTimeMask)({
+            from: (_a = props.availableTime) === null || _a === void 0 ? void 0 : _a.from,
+            to: (_b = props.availableTime) === null || _b === void 0 ? void 0 : _b.to,
+            minuteStep: props.minuteStep,
+            min: (_d = (_c = props.disabledDays) === null || _c === void 0 ? void 0 : _c.before) !== null && _d !== void 0 ? _d : null,
+            dateTimeSeparator: (_e = props.dateTimeSeparator) !== null && _e !== void 0 ? _e : DATE_TIME_SEPARATOR
+        })
+    });
+    var _g = (0, useDateInputState_1["default"])({
         input: props.input,
         disabled: props.disabled,
         onChange: props.onChange,
@@ -42,25 +50,31 @@ function DateTimeField(props) {
         displayFormat: props.displayFormat,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC
-    }), onClear = _b.onClear, onClose = _b.onClose, isOpened = _b.isOpened, inputProps = _b.inputProps;
-    var _c = (0, useDateTime_1["default"])({
+    }), onClear = _g.onClear, onClose = _g.onClose, isOpened = _g.isOpened, inputProps = _g.inputProps;
+    var _h = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
-        dateTimeSeparator: (_a = props.dateTimeSeparator) !== null && _a !== void 0 ? _a : DATE_TIME_SEPARATOR,
+        dateTimeSeparator: (_f = props.dateTimeSeparator) !== null && _f !== void 0 ? _f : DATE_TIME_SEPARATOR,
         input: props.input,
         valueFormat: props.valueFormat,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC
-    }), dateValueFormat = _c.dateValueFormat, dateValue = _c.dateValue, timeValue = _c.timeValue, onDateSelect = _c.onDateSelect, onTimeSelect = _c.onTimeSelect;
+    }), dateValueFormat = _h.dateValueFormat, dateValue = _h.dateValue, timeValue = _h.timeValue, onDateSelect = _h.onDateSelect, onTimeSelect = _h.onTimeSelect;
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: dateValue, onChange: onDateSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValue, dateValueFormat, onDateSelect, props.calendarProps]);
+    var calendarProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ value: dateValue, onChange: onDateSelect, valueFormat: dateValueFormat }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
+            ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
+    }, [dateValue, dateValueFormat, onDateSelect, props.calendarProps, props.disabledDays]);
     // TimePanel props
     var timePanelViewProps = (0, react_1.useMemo)(function () { return ({
         onClose: onClose,
         showHeader: true,
         showNow: false,
         value: timeValue,
-        onSelect: onTimeSelect
-    }); }, [onClose, onTimeSelect, timeValue]);
+        onSelect: onTimeSelect,
+        availableTime: props.availableTime,
+        minuteStep: props.minuteStep
+    }); }, [onClose, onTimeSelect, props.availableTime, props.minuteStep, timeValue]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         isOpened: isOpened,
         onClear: onClear,
@@ -78,10 +92,7 @@ function DateTimeField(props) {
         disabled: props.disabled,
         style: props.style,
         id: props.id
-    }); }, [
-        calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors,
-        props.icon, props.id, props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps,
-    ]);
+    }); }, [calendarProps, inputProps, isOpened, maskInputRef, onClear, onClose, props.className, props.disabled, props.errors, props.icon, props.id, props.placeholder, props.showRemove, props.size, props.style, timePanelViewProps]);
     return components.ui.renderView(props.view || 'form.DateTimeFieldView', viewProps);
 }
 DateTimeField.defaultProps = {
@@ -93,11 +104,6 @@ DateTimeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     icon: true,
-    maskOptions: (0, kit_1.maskitoDateTimeOptionsGenerator)({
-        dateMode: 'dd/mm/yyyy',
-        timeMode: 'HH:MM',
-        dateSeparator: '.',
-        dateTimeSeparator: DATE_TIME_SEPARATOR
-    })
+    minuteStep: 1
 };
 exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_FIELD, DateTimeField);

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

@@ -0,0 +1,8 @@
+import { MaskitoOptions } from '@maskito/core';
+export declare const createDateTimeMask: (options?: {
+    from?: string;
+    to?: string;
+    minuteStep?: number;
+    min?: Date;
+    dateTimeSeparator?: string;
+}) => MaskitoOptions;

package/ui/form/DateTimeField/utils.js

@@ -0,0 +1,81 @@
+"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 __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));
+};
+exports.__esModule = true;
+exports.createDateTimeMask = void 0;
+var kit_1 = require("@maskito/kit");
+var utils_1 = require("@steroidsjs/core/ui/form/TimeField/utils");
+var TIME_REGEXP = /(\d{2}:\d{2})$/;
+var clampTime = function (minutes, fromMin, toMin, step) {
+    // Жёсткие границы
+    if (minutes <= fromMin) {
+        return fromMin;
+    }
+    if (minutes >= toMin) {
+        return toMin;
+    }
+    if (!step || step <= 1) {
+        return minutes;
+    }
+    // Округление относительно from
+    var diff = minutes - fromMin;
+    return fromMin + Math.floor(diff / step) * step;
+};
+var createDateTimeMask = function (options) {
+    var _a;
+    var baseMask = (0, kit_1.maskitoDateTimeOptionsGenerator)({
+        dateMode: 'dd/mm/yyyy',
+        timeMode: 'HH:MM',
+        dateSeparator: '.',
+        min: options.min,
+        dateTimeSeparator: options.dateTimeSeparator
+    });
+    return __assign(__assign({}, baseMask), { postprocessors: __spreadArray(__spreadArray([], ((_a = baseMask.postprocessors) !== null && _a !== void 0 ? _a : []), true), [
+            function (_a) {
+                var value = _a.value, selection = _a.selection;
+                if (!value) {
+                    return { value: value, selection: selection };
+                }
+                var match = value.match(TIME_REGEXP);
+                if (!match) {
+                    return { value: value, selection: selection };
+                }
+                var time = match[1];
+                var minutes = (0, utils_1.timeToMinutes)(time);
+                var fromMin = (options === null || options === void 0 ? void 0 : options.from)
+                    ? (0, utils_1.timeToMinutes)(options.from.padStart(5, '0'))
+                    : 0;
+                var toMin = (options === null || options === void 0 ? void 0 : options.to)
+                    ? (0, utils_1.timeToMinutes)(options.to.padStart(5, '0'))
+                    : 24 * 60 - 1;
+                var clamped = clampTime(minutes, fromMin, toMin, options === null || options === void 0 ? void 0 : options.minuteStep);
+                var normalizedTime = (0, utils_1.minutesToTime)(clamped);
+                if (normalizedTime === time) {
+                    return { value: value, selection: selection };
+                }
+                return {
+                    value: value.replace(TIME_REGEXP, normalizedTime),
+                    selection: selection
+                };
+            },
+        ], false) });
+};
+exports.createDateTimeMask = createDateTimeMask;

package/ui/form/DateTimeRangeField/DateTimeRangeField.d.ts

@@ -57,6 +57,29 @@ export interface IDateTimeRangeFieldProps extends Omit<IDateInputStateInput, 'in
         */
         to: MaskitoOptions;
     };
+    /**
+     *  Ограничение доступных дат.
+     */
+    disabledDays?: {
+        after?: Date;
+        before?: Date;
+    };
+    /**
+     * Разделитель для даты и времени, не влияет на отображение
+     */
+    dateTimeSeparator?: string;
+    /**
+     * Ограничение доступного времени.
+     */
+    availableTime?: {
+        from: string;
+        to: string;
+    };
+    /**
+     * Шаг минут
+     * @example 15
+     */
+    minuteStep?: number;
     /**
      * Добавляет дополнительные кнопки к календарю
      * true - будут отображены кнопки по-умолчанию

package/ui/form/DateTimeRangeField/DateTimeRangeField.js

@@ -10,36 +10,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-var react_1 = __importStar(require("react"));
-var kit_1 = require("@maskito/kit");
+var react_1 = require("react");
 var react_2 = require("@maskito/react");
+var utils_1 = require("@steroidsjs/core/ui/form/DateTimeField/utils");
 var useDateRange_1 = __importDefault(require("../../form/DateField/useDateRange"));
 var useDateTime_1 = __importDefault(require("../../form/DateField/useDateTime"));
 var useDateInputState_1 = __importDefault(require("../../form/DateField/useDateInputState"));
@@ -48,10 +25,26 @@ var hooks_1 = require("../../../hooks");
 var enums_1 = require("../../../enums");
 var DATE_TIME_SEPARATOR = ', ';
 function DateTimeRangeField(props) {
-    var _a, _b;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     var components = (0, hooks_1.useComponents)();
-    var maskInputFromRef = (0, react_2.useMaskito)({ options: (_a = props.maskOptions) === null || _a === void 0 ? void 0 : _a.from });
-    var maskInputToRef = (0, react_2.useMaskito)({ options: (_b = props.maskOptions) === null || _b === void 0 ? void 0 : _b.to });
+    var maskInputFromRef = (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.createDateTimeMask)({
+            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,
+            min: (_f = (_e = props.disabledDays) === null || _e === void 0 ? void 0 : _e.before) !== null && _f !== void 0 ? _f : null,
+            dateTimeSeparator: (_g = props.dateTimeSeparator) !== null && _g !== void 0 ? _g : DATE_TIME_SEPARATOR
+        })
+    });
+    var maskInputToRef = (0, react_2.useMaskito)({
+        options: (_j = (_h = props.maskOptions) === null || _h === void 0 ? void 0 : _h.to) !== null && _j !== void 0 ? _j : (0, utils_1.createDateTimeMask)({
+            from: (_k = props.availableTime) === null || _k === void 0 ? void 0 : _k.from,
+            to: (_l = props.availableTime) === null || _l === void 0 ? void 0 : _l.to,
+            minuteStep: props.minuteStep,
+            min: (_o = (_m = props.disabledDays) === null || _m === void 0 ? void 0 : _m.before) !== null && _o !== void 0 ? _o : null,
+            dateTimeSeparator: (_p = props.dateTimeSeparator) !== null && _p !== void 0 ? _p : DATE_TIME_SEPARATOR
+        })
+    });
     // Global onChange (from props)
     var onChange = (0, react_1.useCallback)(function () {
         var _a;
@@ -63,7 +56,7 @@ function DateTimeRangeField(props) {
         }
     }, [props.attributeFrom, props.attributeTo, props.inputFrom.value, props.inputTo.value, props.onChange]);
     // Input 'from'
-    var _c = (0, useDateInputState_1["default"])({
+    var _q = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputFrom,
@@ -74,9 +67,9 @@ function DateTimeRangeField(props) {
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         onChange: onChange
-    }), isOpenedFrom = _c.isOpened, onCloseFrom = _c.onClose, inputPropsFrom = _c.inputProps, onClearFrom = _c.onClear, onNow = _c.onNow;
+    }), isOpenedFrom = _q.isOpened, onCloseFrom = _q.onClose, inputPropsFrom = _q.inputProps, onClearFrom = _q.onClear, onNow = _q.onNow;
     // Input 'to'
-    var _d = (0, useDateInputState_1["default"])({
+    var _r = (0, useDateInputState_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         input: props.inputTo,
@@ -87,24 +80,24 @@ function DateTimeRangeField(props) {
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         onChange: onChange
-    }), isOpenedTo = _d.isOpened, onCloseTo = _d.onClose, inputPropsTo = _d.inputProps, onClearTo = _d.onClear;
-    var _e = (0, useDateTime_1["default"])({
+    }), isOpenedTo = _r.isOpened, onCloseTo = _r.onClose, inputPropsTo = _r.inputProps, onClearTo = _r.onClear;
+    var _s = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         input: props.inputFrom
-    }), dateValueFormat = _e.dateValueFormat, dateValueFrom = _e.dateValue, timeValueFrom = _e.timeValue, onDateFromSelect = _e.onDateSelect, onTimeFromSelect = _e.onTimeSelect;
-    var _f = (0, useDateTime_1["default"])({
+    }), dateValueFormat = _s.dateValueFormat, dateValueFrom = _s.dateValue, timeValueFrom = _s.timeValue, onDateFromSelect = _s.onDateSelect, onTimeFromSelect = _s.onTimeSelect;
+    var _t = (0, useDateTime_1["default"])({
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat,
         dateTimeSeparator: DATE_TIME_SEPARATOR,
         useUTC: props.useUTC,
         dateInUTC: props.dateInUTC,
         input: props.inputTo
-    }), dateValueTo = _f.dateValue, timeValueTo = _f.timeValue, onDateToSelect = _f.onDateSelect, onTimeToSelect = _f.onTimeSelect;
-    var _g = (0, useDateRange_1["default"])({
+    }), dateValueTo = _t.dateValue, timeValueTo = _t.timeValue, onDateToSelect = _t.onDateSelect, onTimeToSelect = _t.onTimeSelect;
+    var _u = (0, useDateRange_1["default"])({
         onClearFrom: onClearFrom,
         onCloseTo: onCloseTo,
         onCloseFrom: onCloseFrom,
@@ -117,8 +110,8 @@ function DateTimeRangeField(props) {
         hasInitialFocus: props.hasInitialFocus,
         displayFormat: props.displayFormat,
         valueFormat: props.valueFormat
-    }), focus = _g.focus, onClose = _g.onClose, onClear = _g.onClear, extendedInputPropsFrom = _g.extendedInputPropsFrom, extendedInputPropsTo = _g.extendedInputPropsTo;
-    react_1["default"].useEffect(function () {
+    }), focus = _u.focus, onClose = _u.onClose, onClear = _u.onClear, extendedInputPropsFrom = _u.extendedInputPropsFrom, extendedInputPropsTo = _u.extendedInputPropsTo;
+    (0, react_1.useEffect)(function () {
         if (extendedInputPropsFrom.ref && extendedInputPropsTo.ref) {
             maskInputFromRef(extendedInputPropsFrom.ref.current);
             maskInputToRef(extendedInputPropsTo.ref.current);
@@ -130,18 +123,13 @@ function DateTimeRangeField(props) {
         maskInputToRef,
     ]);
     // Calendar props
-    var calendarProps = (0, react_1.useMemo)(function () { return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, props.calendarProps)); }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps]);
+    var calendarProps = (0, react_1.useMemo)(function () {
+        var _a;
+        return (__assign({ value: [dateValueFrom, dateValueTo], onChange: focus === 'from' ? onDateFromSelect : onDateToSelect, valueFormat: dateValueFormat }, ((props === null || props === void 0 ? void 0 : props.disabledDays)
+            ? __assign(__assign({}, props.calendarProps), { pickerProps: __assign(__assign({}, (_a = props.calendarProps) === null || _a === void 0 ? void 0 : _a.pickerProps), { disabledDays: props.disabledDays }) }) : props.calendarProps)));
+    }, [dateValueFormat, dateValueFrom, dateValueTo, focus, onDateFromSelect, onDateToSelect, props.calendarProps, props.disabledDays]);
     // TimePanel props
-    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow, onClose: onClose, showNow: false, showHeader: true }, props.timePanelViewProps)); }, [
-        focus,
-        onClose,
-        onNow,
-        onTimeFromSelect,
-        onTimeToSelect,
-        props.timePanelViewProps,
-        timeValueFrom,
-        timeValueTo,
-    ]);
+    var timePanelViewProps = (0, react_1.useMemo)(function () { return (__assign({ value: focus === 'from' ? timeValueFrom : timeValueTo, onSelect: focus === 'from' ? onTimeFromSelect : onTimeToSelect, onNow: onNow, onClose: onClose, showNow: false, showHeader: true, availableTime: props.availableTime, minuteStep: props.minuteStep }, props.timePanelViewProps)); }, [focus, onClose, onNow, onTimeFromSelect, onTimeToSelect, props.availableTime, props.minuteStep, props.timePanelViewProps, timeValueFrom, timeValueTo]);
     var viewProps = (0, react_1.useMemo)(function () { return ({
         onClear: onClear,
         onClose: onClose,
@@ -178,18 +166,7 @@ DateTimeRangeField.defaultProps = {
     useUTC: false,
     dateInUTC: false,
     icon: true,
-    maskOptions: {
-        from: (0, kit_1.maskitoDateTimeOptionsGenerator)({
-            dateMode: 'dd/mm/yyyy',
-            timeMode: 'HH:MM',
-            dateSeparator: '.'
-        }),
-        to: (0, kit_1.maskitoDateTimeOptionsGenerator)({
-            dateMode: 'dd/mm/yyyy',
-            timeMode: 'HH:MM',
-            dateSeparator: '.'
-        })
-    },
-    rangeButtonsPosition: 'left-bottom'
+    rangeButtonsPosition: 'left-bottom',
+    minuteStep: 1
 };
 exports["default"] = (0, fieldWrapper_1["default"])(enums_1.FieldEnum.DATE_TIME_RANGE_FIELD, DateTimeRangeField, { attributeSuffixes: ['from', 'to'] });

package/ui/form/TextField/TextField.d.ts

@@ -20,6 +20,7 @@ export interface ITextFieldViewProps extends ITextFieldProps, IFieldWrapperOutpu
         value: string | number;
         placeholder: string;
         disabled: boolean;
+        required: boolean;
     };
     onClear: VoidFunction;
 }

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

@@ -1,5 +1,6 @@
+import { MaskitoOptions } from '@maskito/core';
 import { IDateInputStateInput, IDateInputStateOutput } from '../../form/DateField/useDateInputState';
-export interface ITimePanelViewProps extends Pick<ITimeFieldViewProps, 'value' | 'onClose' | 'onNow' | 'onSelect' | 'className'> {
+export interface ITimePanelViewProps extends Pick<ITimeFieldViewProps, 'value' | 'onClose' | 'onNow' | 'onSelect' | 'className' | 'availableTime' | 'minuteStep'> {
     showHeader?: boolean;
     showNow?: boolean;
 }
@@ -21,9 +22,25 @@ export interface ITimeFieldProps extends IDateInputStateInput, IUiComponent {
      * Свойства для компонента панели времени
      */
     timePanelViewProps?: any;
+    /**
+     * Опции маски для поля ввода
+     */
+    maskOptions?: MaskitoOptions;
+    /**
+     *  Ограничение доступного времени.
+     */
+    availableTime?: {
+        from: string;
+        to: string;
+    };
+    /**
+     * Шаг минут
+     * @example 15
+     */
+    minuteStep?: number;
     [key: string]: any;
 }
-export interface ITimeFieldViewProps extends IDateInputStateOutput, Pick<ITimeFieldProps, 'size' | 'errors' | 'showRemove' | 'noBorder' | 'className' | 'timePanelViewProps' | 'style'> {
+export interface ITimeFieldViewProps extends IDateInputStateOutput, Pick<ITimeFieldProps, 'size' | 'errors' | 'showRemove' | 'noBorder' | 'className' | 'timePanelViewProps' | 'style' | 'availableTime' | 'minuteStep'> {
     [key: string]: any;
 }
 declare const _default: import("../Field/fieldWrapper").FieldWrapperComponent<ITimeFieldProps>;

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'> {