@steroidsjs/core 3.0.81 → 3.0.83

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