@steroidsjs/bootstrap 3.0.41 → 3.0.42

package/form/TimeField/TimeFieldView.js

@@ -54,7 +54,7 @@ function TimeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             React.createElement("div", { className: bem.element('body') },
-                React.createElement("input", __assign({}, props.inputProps, { id: props.id, className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
+                React.createElement("input", __assign({}, props.inputProps, { id: props.id, ref: props.maskRef, className: bem(bem.element('input'), props.inputProps.className), onChange: function (e) { return props.inputProps.onChange(e.target.value); } })),
                 React.createElement("div", { className: bem.element('icon-container') },
                     !props.inputProps.value && props.icon && (React.createElement(Icon_1["default"], { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && props.inputProps.value && props.icon !== false && (React.createElement(Icon_1["default"], { className: bem.element('close-icon'), onClick: function (e) {

package/form/TimeField/TimePanelView.js

@@ -28,39 +28,40 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 exports.__esModule = true;
 var React = __importStar(require("react"));
 var hooks_1 = require("@steroidsjs/core/hooks");
-var padStart_1 = __importDefault(require("lodash-es/padStart"));
 var TimePanelColumn_1 = __importDefault(require("./views/TimePanelColumn"));
-var getHours = function () {
-    var result = [];
-    for (var i = 0; i < 24; i += 1) {
-        var hour = (0, padStart_1["default"])(i, 2, '0');
-        result.push(hour);
-    }
-    return result;
-};
-var getMinutes = function () {
-    var result = [];
-    for (var i = 0; i < 60; i += 1) {
-        var minute = (0, padStart_1["default"])(i, 2, '0');
-        result.push(minute);
-    }
-    return result;
-};
+var utils_1 = require("./utils");
 function TimePanelView(props) {
+    var _a;
     var bem = (0, hooks_1.useBem)('TimePanelView');
-    var _a = props.value ? props.value.split(':') : ['00', '00'], hours = _a[0], minutes = _a[1];
+    var _b = props.value ? props.value.split(':') : ['00', '00'], hours = _b[0], minutes = _b[1];
+    var _c = props.availableTime || {}, from = _c.from, to = _c.to;
+    var minuteStep = (_a = props.minuteStep) !== null && _a !== void 0 ? _a : 1;
     var currentValues = {
         hours: hours,
         minutes: minutes
     };
+    var availableHours = (0, utils_1.getAvailableHours)(from, to);
+    // если текущий час невалиден — берём первый доступный
+    var minutesHour = (0, utils_1.isHourAvailable)(hours, from, to)
+        ? hours
+        : availableHours[0];
     var COLUMNS = [{
-            values: getHours(),
+            values: (0, utils_1.getAvailableHours)(from, to),
             currentValueKey: 'hours',
             onUpdate: function (value) {
-                props.onSelect(value + ':' + minutes);
+                var nextMinutes = (0, utils_1.normalizeMinutesForHour)(value, minutes, {
+                    from: from,
+                    to: to,
+                    step: minuteStep
+                });
+                props.onSelect(value + ':' + nextMinutes);
             }
         }, {
-            values: getMinutes(),
+            values: (0, utils_1.getAvailableMinutes)(minutesHour, {
+                from: from,
+                to: to,
+                step: minuteStep
+            }),
             currentValueKey: 'minutes',
             onUpdate: function (value) {
                 props.onSelect(hours + ':' + value);

package/form/TimeField/utils.d.ts

@@ -0,0 +1,15 @@
+/** 'HH:mm' -> minutes from start of day */
+export declare const timeToMinutes: (time: string) => number;
+export declare const isHourAvailable: (hour: string, from?: string, to?: string) => boolean;
+export declare const getMinuteRange: (fromMin: number, toMin: number, step?: number) => number[];
+export declare const getAvailableHours: (from?: string, to?: string) => string[];
+export declare const getAvailableMinutes: (hour: string, options?: {
+    from?: string;
+    to?: string;
+    step?: number;
+}) => string[];
+export declare const normalizeMinutesForHour: (hour: string, minute: string, options?: {
+    from?: string;
+    to?: string;
+    step?: number;
+}) => string;

package/form/TimeField/utils.js

@@ -0,0 +1,72 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+exports.normalizeMinutesForHour = exports.getAvailableMinutes = exports.getAvailableHours = exports.getMinuteRange = exports.isHourAvailable = exports.timeToMinutes = void 0;
+var padStart_1 = __importDefault(require("lodash-es/padStart"));
+/** 'HH:mm' -> minutes from start of day */
+var timeToMinutes = function (time) {
+    var _a = time.split(':').map(Number), h = _a[0], m = _a[1];
+    return h * 60 + m;
+};
+exports.timeToMinutes = timeToMinutes;
+var isHourAvailable = function (hour, from, to) {
+    var h = Number(hour);
+    var fromMin = from ? (0, exports.timeToMinutes)(from) : 0;
+    var toMin = to ? (0, exports.timeToMinutes)(to) : 24 * 60 - 1;
+    var hourStart = h * 60;
+    var hourEnd = h * 60 + 59;
+    return !(hourEnd < fromMin || hourStart > toMin);
+};
+exports.isHourAvailable = isHourAvailable;
+/** clamp value into range */
+var clamp = function (value, min, max) { return Math.min(Math.max(value, min), max); };
+var getMinuteRange = function (fromMin, toMin, step) {
+    if (step === void 0) { step = 1; }
+    var result = [];
+    for (var m = fromMin; m <= toMin; m += step) {
+        result.push(m);
+    }
+    return result;
+};
+exports.getMinuteRange = getMinuteRange;
+var getAvailableHours = function (from, to) {
+    var result = [];
+    var fromMin = from ? (0, exports.timeToMinutes)(from) : 0;
+    var toMin = to ? (0, exports.timeToMinutes)(to) : 24 * 60 - 1;
+    var startHour = Math.floor(fromMin / 60);
+    var endHour = Math.floor(toMin / 60);
+    for (var h = startHour; h <= endHour; h += 1) {
+        result.push((0, padStart_1["default"])(h, 2, '0'));
+    }
+    return result;
+};
+exports.getAvailableHours = getAvailableHours;
+var getAvailableMinutes = function (hour, options) {
+    var _a;
+    var h = Number(hour);
+    var step = (_a = options === null || options === void 0 ? void 0 : options.step) !== null && _a !== void 0 ? _a : 1;
+    var fromMin = (options === null || options === void 0 ? void 0 : options.from) ? (0, exports.timeToMinutes)(options.from) : 0;
+    var toMin = (options === null || options === void 0 ? void 0 : options.to) ? (0, exports.timeToMinutes)(options.to) : 24 * 60 - 1;
+    var hourStart = h * 60;
+    var startMinute = clamp(fromMin - hourStart, 0, 59);
+    var endMinute = clamp(toMin - hourStart, 0, 59);
+    return (0, exports.getMinuteRange)(startMinute, endMinute, step)
+        .map(function (m) { return (0, padStart_1["default"])(m, 2, '0'); });
+};
+exports.getAvailableMinutes = getAvailableMinutes;
+var normalizeMinutesForHour = function (hour, minute, options) {
+    var available = (0, exports.getAvailableMinutes)(hour, options);
+    // если минут вообще нет (на всякий случай)
+    if (!available.length) {
+        return minute;
+    }
+    // если текущая минута валидна — оставляем
+    if (available.includes(minute)) {
+        return minute;
+    }
+    // иначе берём ближайшую допустимую (обычно первую)
+    return available[0];
+};
+exports.normalizeMinutesForHour = normalizeMinutesForHour;

package/form/TimeRangeField/TimeRangeFieldView.js

@@ -54,8 +54,8 @@ function TimeRangeFieldView(props) {
                 'is-invalid': !!props.errors
             }), props.className), style: props.style },
             react_1["default"].createElement("div", { className: bem.element('body') },
-                react_1["default"].createElement("input", __assign({}, props.inputPropsFrom, { id: props.id, className: bem(bem.element('input')), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
-                react_1["default"].createElement("input", __assign({}, props.inputPropsTo, { className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
+                react_1["default"].createElement("input", __assign({}, props.inputPropsFrom, { ref: props.maskToRef, id: props.id, className: bem(bem.element('input')), onChange: function (e) { return props.inputPropsFrom.onChange(e.target.value); } })),
+                react_1["default"].createElement("input", __assign({}, props.inputPropsTo, { ref: props.maskFromRef, className: bem.element('input'), onChange: function (e) { return props.inputPropsTo.onChange(e.target.value); } })),
                 react_1["default"].createElement("div", { className: bem.element('icon-container') },
                     props.icon && !hasValue && (react_1["default"].createElement(content_1.Icon, { className: bem.element('date-icon'), name: typeof props.icon === 'string' ? props.icon : 'calendar_range', tabIndex: -1 })),
                     props.showRemove && hasValue && (react_1["default"].createElement(content_1.Icon, { className: bem.element('close-icon'), onClick: function (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@steroidsjs/bootstrap",
-    "version": "3.0.41",
+    "version": "3.0.42",
     "description": "",
     "main": "index.js",
     "author": "Vladimir Kozhin <hello@kozhindev.com>",
@@ -35,7 +35,7 @@
         "react-use": "^17.4.0"
     },
     "devDependencies": {
-        "@steroidsjs/core": "^3.0.80",
+        "@steroidsjs/core": "3.0.83",
         "@steroidsjs/eslint-config": "^2.1.6",
         "@types/enzyme": "^3.10.8",
         "@types/googlemaps": "^3.43.3",