react-time-picker - npm Package Compare versions

Comparing version 4.1.2 to 4.2.0-beta

dist/TimeInput.js

@@ -95,4 +95,4 @@ "use strict";
 
-function isValidInput(element) {
-  return element.tagName === 'INPUT' && element.type === 'number';
+function isInternalInput(element) {
+  return element.tagName === 'INPUT' && element.getAttribute('data-input') === 'true';
 }
@@ -105,3 +105,3 @@
     nextElement = nextElement[property];
-  } while (nextElement && !isValidInput(nextElement));
+  } while (nextElement && !isInternalInput(nextElement));
 
@@ -111,2 +111,24 @@ return nextElement;
 
+function isInputValid(input) {
+  if (!input.validity.valid) {
+    return false;
+  }
+
+  var value = input.value;
+
+  if (!value) {
+    return false;
+  }
+
+  var rawValue = Number(value);
+  var min = Number(input.getAttribute('min'));
+  var max = Number(input.getAttribute('max'));
+
+  if (rawValue < min || rawValue > max) {
+    return false;
+  }
+
+  return true;
+}
+
 function focus(element) {
@@ -210,3 +232,4 @@ if (element) {
 
-      var value = input.value;
+      var maxLength = input.maxLength,
+          value = input.value;
       var max = input.getAttribute('max');
@@ -220,3 +243,3 @@ /**
 
-      if (value * 10 > max || value.length >= max.length) {
+      if (value * 10 > max || value.length >= maxLength) {
         var property = 'nextElementSibling';
@@ -238,3 +261,3 @@ var nextInput = findInput(input, property);
               return {
-                hour: value ? (0, _dates.convert12to24)(parseInt(value, 10), prevState.amPm) : null
+                hour: value ? (0, _dates.convert12to24)(Number(value), prevState.amPm).toString() : null
               };
@@ -246,14 +269,5 @@ }, _this.onChangeExternal);
 
-        case 'hour24':
-          {
-            _this.setState({
-              hour: value ? parseInt(value, 10) : null
-            }, _this.onChangeExternal);
-
-            break;
-          }
-
         default:
           {
-            _this.setState(_defineProperty({}, name, value ? parseInt(value, 10) : null), _this.onChangeExternal);
+            _this.setState(_defineProperty({}, name, value), _this.onChangeExternal);
           }
@@ -308,8 +322,6 @@ }
         onChange(null, false);
-      } else if (formElements.every(function (formElement) {
-        return formElement.value && formElement.validity.valid;
-      })) {
-        var hour = parseInt(values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm) || 0, 10);
-        var minute = parseInt(values.minute || 0, 10);
-        var second = parseInt(values.second || 0, 10);
+      } else if (formElements.every(isInputValid)) {
+        var hour = Number(values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm) || 0);
+        var minute = Number(values.minute || 0);
+        var second = Number(values.second || 0);
 
@@ -657,5 +669,5 @@ var padStart = function padStart(num) {
           nextState.amPm = _convert24to2[1];
-          nextState.hour = (0, _dateUtils.getHours)(nextValue);
-          nextState.minute = (0, _dateUtils.getMinutes)(nextValue);
-          nextState.second = (0, _dateUtils.getSeconds)(nextValue);
+          nextState.hour = (0, _dateUtils.getHours)(nextValue).toString();
+          nextState.minute = (0, _dateUtils.getMinutes)(nextValue).toString();
+          nextState.second = (0, _dateUtils.getSeconds)(nextValue).toString();
         } else {
@@ -662,0 +674,0 @@ nextState.amPm = null;

dist/TimeInput/Hour12Input.js

@@ -77,3 +77,3 @@ "use strict";
   }());
-  var value12 = value !== null ? (0, _dates.convert24to12)(value)[0] : null;
+  var value12 = value !== null ? (0, _dates.convert24to12)(value)[0].toString() : null;
   return /*#__PURE__*/_react["default"].createElement(_Input["default"], _extends({
@@ -88,2 +88,4 @@ max: maxHour,
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 Hour12Input.propTypes = {
@@ -94,3 +96,3 @@ amPm: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  hour: _propTypes["default"].number,
+  hour: isValue,
   itemRef: _propTypes["default"].func,
@@ -105,3 +107,3 @@ maxTime: _propTypes2.isTime,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number
+  value: isValue
 };

dist/TimeInput/Hour24Input.js

@@ -44,2 +44,4 @@ "use strict";
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 Hour24Input.propTypes = {
@@ -49,3 +51,3 @@ ariaLabel: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  hour: _propTypes["default"].number,
+  hour: _propTypes["default"].string,
   itemRef: _propTypes["default"].func,
@@ -60,3 +62,3 @@ maxTime: _propTypes2.isTime,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number
+  value: isValue
 };

dist/TimeInput/Input.js

@@ -18,2 +18,4 @@ "use strict";
 
+var _predictInputValue = _interopRequireDefault(require("@wojtekmaj/predict-input-value"));
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
@@ -64,19 +66,41 @@
 
-function getSelectionString() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
+function addLeadingZero(value, max) {
+  return "0".concat(value).slice(-"".concat(max).length);
+}
 
-  return window.getSelection().toString();
+function makeOnKeyDown(_ref) {
+  var max = _ref.max,
+      min = _ref.min,
+      onChange = _ref.onChange,
+      showLeadingZeros = _ref.showLeadingZeros;
+  return function onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          var input = event.target;
+          var value = input.value;
+          var numericValue = Number(value);
+          var rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
+          var limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
+          var hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
+          var nextValue = hasLeadingZero ? addLeadingZero(limitedRawNextValue, max) : limitedRawNextValue;
+          input.value = nextValue;
+          onChange(event);
+          break;
+        }
+
+      default:
+    }
+  };
 }
 
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress(max) {
   return function onKeyPress(event) {
-    var key = event.key,
-        input = event.target;
-    var value = input.value;
+    var key = event.key;
     var isNumberKey = !isNaN(parseInt(key, 10));
-    var selection = getSelectionString();
+    var nextValue = (0, _predictInputValue["default"])(event);
 
-    if (isNumberKey && (selection || value.length < maxLength)) {
+    if (isNumberKey && nextValue <= max) {
       return;
@@ -89,23 +113,31 @@ }
 
-function Input(_ref) {
-  var ariaLabel = _ref.ariaLabel,
-      autoFocus = _ref.autoFocus,
-      className = _ref.className,
-      disabled = _ref.disabled,
-      itemRef = _ref.itemRef,
-      max = _ref.max,
-      min = _ref.min,
-      name = _ref.name,
-      nameForClass = _ref.nameForClass,
-      onChange = _ref.onChange,
-      onKeyDown = _ref.onKeyDown,
-      _onKeyUp = _ref.onKeyUp,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? '--' : _ref$placeholder,
-      required = _ref.required,
-      showLeadingZeros = _ref.showLeadingZeros,
-      step = _ref.step,
-      value = _ref.value;
-  var hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-  var maxLength = max.toString().length;
+function Input(_ref2) {
+  var ariaLabel = _ref2.ariaLabel,
+      autoFocus = _ref2.autoFocus,
+      className = _ref2.className,
+      disabled = _ref2.disabled,
+      itemRef = _ref2.itemRef,
+      max = _ref2.max,
+      min = _ref2.min,
+      name = _ref2.name,
+      nameForClass = _ref2.nameForClass,
+      onChange = _ref2.onChange,
+      _onKeyDown = _ref2.onKeyDown,
+      _onKeyUp = _ref2.onKeyUp,
+      _ref2$placeholder = _ref2.placeholder,
+      placeholder = _ref2$placeholder === void 0 ? '--' : _ref2$placeholder,
+      required = _ref2.required,
+      showLeadingZeros = _ref2.showLeadingZeros,
+      step = _ref2.step,
+      value = _ref2.value;
+  var hasLeadingZero = showLeadingZeros && value !== null && value !== undefined && value.toString().length < 2;
+  var onKeyDownInternal = makeOnKeyDown({
+    max: max,
+    min: min,
+    onChange: onChange,
+    showLeadingZeros: showLeadingZeros
+  });
+  var onKeyPressInternal = makeOnKeyPress({
+    max: max
+  });
   return [hasLeadingZero && /*#__PURE__*/_react["default"].createElement("span", {
@@ -124,2 +156,3 @@ key: "leadingZero",
     max: max,
+    maxLength: "".concat(max).length,
     min: min,
@@ -129,4 +162,10 @@ name: name,
     onFocus: onFocus,
-    onKeyDown: onKeyDown,
-    onKeyPress: makeOnKeyPress(maxLength),
+    onKeyDown: function onKeyDown(event) {
+      onKeyDownInternal(event);
+
+      if (_onKeyDown) {
+        _onKeyDown(event);
+      }
+    },
+    onKeyPress: onKeyPressInternal,
     onKeyUp: function onKeyUp(event) {
@@ -140,10 +179,10 @@ (0, _updateInputWidth["default"])(event.target);
     placeholder: placeholder,
-    ref: function ref(_ref2) {
-      if (_ref2) {
-        (0, _updateInputWidth["default"])(_ref2);
-        updateInputWidthOnFontLoad(_ref2);
+    ref: function ref(_ref3) {
+      if (_ref3) {
+        (0, _updateInputWidth["default"])(_ref3);
+        updateInputWidthOnFontLoad(_ref3);
       }
 
       if (itemRef) {
-        itemRef(_ref2, name);
+        itemRef(_ref3, name);
       }
@@ -153,3 +192,3 @@ },
     step: step,
-    type: "number",
+    type: "text",
     value: value !== null ? value : ''
@@ -159,2 +198,4 @@ })];
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 Input.propTypes = {
@@ -177,3 +218,3 @@ ariaLabel: _propTypes["default"].string,
   step: _propTypes["default"].number,
-  value: _propTypes["default"].number
+  value: isValue
 };

dist/TimeInput/MinuteInput.js

@@ -37,3 +37,3 @@ "use strict";
   function isSameHour(date) {
-    return date && hour === (0, _dateUtils.getHours)(date);
+    return date && Number(hour) === (0, _dateUtils.getHours)(date);
   }
@@ -51,2 +51,4 @@
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 MinuteInput.propTypes = {
@@ -56,3 +58,3 @@ ariaLabel: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  hour: _propTypes["default"].number,
+  hour: isValue,
   itemRef: _propTypes["default"].func,
@@ -67,3 +69,3 @@ maxTime: _propTypes2.isTime,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number
+  value: isValue
 };

dist/TimeInput/SecondInput.js

@@ -38,3 +38,3 @@ "use strict";
   function isSameMinute(date) {
-    return date && hour === (0, _dateUtils.getHours)(date) && minute === (0, _dateUtils.getMinutes)(date);
+    return date && Number(hour) === (0, _dateUtils.getHours)(date) && Number(minute) === (0, _dateUtils.getMinutes)(date);
   }
@@ -52,2 +52,4 @@
 
+var isValue = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]);
+
 SecondInput.propTypes = {
@@ -57,7 +59,7 @@ ariaLabel: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
-  hour: _propTypes["default"].number,
+  hour: isValue,
   itemRef: _propTypes["default"].func,
   maxTime: _propTypes2.isTime,
   minTime: _propTypes2.isTime,
-  minute: _propTypes["default"].number,
+  minute: isValue,
   onChange: _propTypes["default"].func,
@@ -69,3 +71,3 @@ onKeyDown: _propTypes["default"].func,
   showLeadingZeros: _propTypes["default"].bool,
-  value: _propTypes["default"].number
+  value: isValue
 };

package.json

 {
   "name": "react-time-picker",
-  "version": "4.1.2",
+  "version": "4.2.0-beta",
   "description": "A time picker for your React app.",
@@ -44,2 +44,3 @@ "main": "dist/entry.js",
     "@wojtekmaj/date-utils": "^1.0.0",
+    "@wojtekmaj/predict-input-value": "^1.0.0",
     "get-user-locale": "^1.2.0",
@@ -46,0 +47,0 @@ "make-event-props": "^1.1.0",

src/TimeInput.jsx

@@ -34,4 +34,4 @@ import React, { PureComponent } from 'react';
 
-function isValidInput(element) {
-  return element.tagName === 'INPUT' && element.type === 'number';
+function isInternalInput(element) {
+  return element.tagName === 'INPUT' && element.getAttribute('data-input') === 'true';
 }
@@ -43,6 +43,28 @@
     nextElement = nextElement[property];
-  } while (nextElement && !isValidInput(nextElement));
+  } while (nextElement && !isInternalInput(nextElement));
   return nextElement;
 }
 
+function isInputValid(input) {
+  if (!input.validity.valid) {
+    return false;
+  }
+
+  const { value } = input;
+
+  if (!value) {
+    return false;
+  }
+
+  const rawValue = Number(value);
+  const min = Number(input.getAttribute('min'));
+  const max = Number(input.getAttribute('max'));
+
+  if (rawValue < min || rawValue > max) {
+    return false;
+  }
+
+  return true;
+}
+
 function focus(element) {
@@ -117,5 +139,5 @@ if (element) {
         [, nextState.amPm] = convert24to12(getHours(nextValue));
-        nextState.hour = getHours(nextValue);
-        nextState.minute = getMinutes(nextValue);
-        nextState.second = getSeconds(nextValue);
+        nextState.hour = getHours(nextValue).toString();
+        nextState.minute = getMinutes(nextValue).toString();
+        nextState.second = getSeconds(nextValue).toString();
       } else {
@@ -277,3 +299,3 @@ nextState.amPm = null;
 
-    const { value } = input;
+    const { maxLength, value } = input;
     const max = input.getAttribute('max');
@@ -287,3 +309,3 @@
      */
-    if ((value * 10 > max) || (value.length >= max.length)) {
+    if ((value * 10 > max) || (value.length >= maxLength)) {
       const property = 'nextElementSibling';
@@ -305,3 +327,3 @@ const nextInput = findInput(input, property);
           (prevState) => ({
-            hour: value ? convert12to24(parseInt(value, 10), prevState.amPm) : null,
+            hour: value ? convert12to24(Number(value), prevState.amPm).toString() : null,
           }),
@@ -312,12 +334,5 @@ this.onChangeExternal,
       }
-      case 'hour24': {
-        this.setState(
-          { hour: value ? parseInt(value, 10) : null },
-          this.onChangeExternal,
-        );
-        break;
-      }
       default: {
         this.setState(
-          { [name]: value ? parseInt(value, 10) : null },
+          { [name]: value },
           this.onChangeExternal,
@@ -388,8 +403,6 @@ );
       onChange(null, false);
-    } else if (
-      formElements.every((formElement) => formElement.value && formElement.validity.valid)
-    ) {
-      const hour = parseInt(values.hour24 || convert12to24(values.hour12, values.amPm) || 0, 10);
-      const minute = parseInt(values.minute || 0, 10);
-      const second = parseInt(values.second || 0, 10);
+    } else if (formElements.every(isInputValid)) {
+      const hour = Number(values.hour24 || convert12to24(values.hour12, values.amPm) || 0);
+      const minute = Number(values.minute || 0);
+      const second = Number(values.second || 0);
 
@@ -396,0 +409,0 @@ const padStart = (num) => `0${num}`.slice(-2);

src/TimeInput.spec.jsx

@@ -119,5 +119,5 @@ import React from 'react';
     expect(nativeInput.prop('value')).toBe(date);
-    expect(customInputs.at(0).prop('value')).toBe(10);
-    expect(customInputs.at(1).prop('value')).toBe(17);
-    expect(customInputs.at(2).prop('value')).toBe(0);
+    expect(customInputs.at(0).prop('value')).toBe('10');
+    expect(customInputs.at(1).prop('value')).toBe('17');
+    expect(customInputs.at(2).prop('value')).toBe('0');
   });
@@ -141,5 +141,5 @@
     expect(nativeInput.prop('value')).toBe(date);
-    expect(customInputs.at(0).prop('value')).toBe(22);
-    expect(customInputs.at(1).prop('value')).toBe(17);
-    expect(customInputs.at(2).prop('value')).toBe(0);
+    expect(customInputs.at(0).prop('value')).toBe('22');
+    expect(customInputs.at(1).prop('value')).toBe('17');
+    expect(customInputs.at(2).prop('value')).toBe('0');
   });
@@ -146,0 +146,0 @@

src/TimeInput/Hour12Input.jsx

@@ -47,3 +47,3 @@ import React from 'react';
 
-  const value12 = value !== null ? convert24to12(value)[0] : null;
+  const value12 = value !== null ? convert24to12(value)[0].toString() : null;
 
@@ -62,2 +62,4 @@ return (
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 Hour12Input.propTypes = {
@@ -68,3 +70,3 @@ amPm: PropTypes.string,
   disabled: PropTypes.bool,
-  hour: PropTypes.number,
+  hour: isValue,
   itemRef: PropTypes.func,
@@ -79,3 +81,3 @@ maxTime: isTime,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
+  value: isValue,
 };

src/TimeInput/Hour12Input.spec.jsx

@@ -80,3 +80,3 @@ import React from 'react';
   it('displays given value properly (am)', () => {
-    const value = 11;
+    const value = '11';
 
@@ -96,3 +96,3 @@ const component = mount(
   it('displays given value properly (pm)', () => {
-    const value = 22;
+    const value = '22';
 
@@ -108,3 +108,3 @@ const component = mount(
 
-    expect(input.prop('value')).toBe(value - 12);
+    expect(input.prop('value')).toBe(`${value - 12}`);
   });
@@ -111,0 +111,0 @@

src/TimeInput/Hour24Input.jsx

@@ -30,2 +30,4 @@ import React from 'react';
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 Hour24Input.propTypes = {
@@ -35,3 +37,3 @@ ariaLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  hour: PropTypes.number,
+  hour: PropTypes.string,
   itemRef: PropTypes.func,
@@ -46,3 +48,3 @@ maxTime: isTime,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
+  value: isValue,
 };

src/TimeInput/Hour24Input.spec.jsx

@@ -79,3 +79,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -82,0 +82,0 @@ const component = mount(

src/TimeInput/Input.jsx

@@ -5,2 +5,3 @@ import React from 'react';
 import updateInputWidth, { getFontShorthand } from 'update-input-width';
+import predictInputValue from '@wojtekmaj/predict-input-value';
 
@@ -49,19 +50,47 @@ /* eslint-disable jsx-a11y/no-autofocus */
 
-function getSelectionString() {
-  if (typeof window === 'undefined') {
-    return null;
-  }
+function addLeadingZero(value, max) {
+  return `0${value}`.slice(-(`${max}`.length));
+}
 
-  return window.getSelection().toString();
+function makeOnKeyDown({
+  max, min, onChange, showLeadingZeros,
+}) {
+  return function onKeyDown(event) {
+    switch (event.key) {
+      case 'ArrowUp':
+      case 'ArrowDown': {
+        event.preventDefault();
+
+        const { target: input } = event;
+        const { value } = input;
+
+        const numericValue = Number(value);
+        const rawNextValue = numericValue + (event.key === 'ArrowUp' ? 1 : -1);
+
+        const limitedRawNextValue = Math.min(max, Math.max(min, rawNextValue));
+
+        const hasLeadingZero = showLeadingZeros && limitedRawNextValue < 10;
+        const nextValue = (hasLeadingZero
+          ? addLeadingZero(limitedRawNextValue, max)
+          : limitedRawNextValue
+        );
+
+        input.value = nextValue;
+        onChange(event);
+
+        break;
+      }
+      default:
+    }
+  };
 }
 
-function makeOnKeyPress(maxLength) {
+function makeOnKeyPress(max) {
   return function onKeyPress(event) {
-    const { key, target: input } = event;
-    const { value } = input;
+    const { key } = event;
 
     const isNumberKey = !isNaN(parseInt(key, 10));
-    const selection = getSelectionString();
+    const nextValue = predictInputValue(event);
 
-    if (isNumberKey && (selection || value.length < maxLength)) {
+    if (isNumberKey && (nextValue <= max)) {
       return;
@@ -93,5 +122,13 @@ }
 }) {
-  const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
-  const maxLength = max.toString().length;
+  const hasLeadingZero = (
+    showLeadingZeros
+    && (value !== null && value !== undefined)
+    && value.toString().length < 2
+  );
 
+  const onKeyDownInternal = makeOnKeyDown({
+    max, min, onChange, showLeadingZeros,
+  });
+  const onKeyPressInternal = makeOnKeyPress({ max });
+
   return [
@@ -113,2 +150,3 @@ (hasLeadingZero && <span key="leadingZero" className={`${className}__leadingZero`}>0</span>),
       max={max}
+      maxLength={`${max}`.length}
       min={min}
@@ -118,4 +156,10 @@ name={name}
       onFocus={onFocus}
-      onKeyDown={onKeyDown}
-      onKeyPress={makeOnKeyPress(maxLength)}
+      onKeyDown={(event) => {
+        onKeyDownInternal(event);
+
+        if (onKeyDown) {
+          onKeyDown(event);
+        }
+      }}
+      onKeyPress={onKeyPressInternal}
       onKeyUp={(event) => {
@@ -141,3 +185,3 @@ updateInputWidth(event.target);
       step={step}
-      type="number"
+      type="text"
       value={value !== null ? value : ''}
@@ -148,2 +192,4 @@ />,
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 Input.propTypes = {
@@ -166,3 +212,3 @@ ariaLabel: PropTypes.string,
   step: PropTypes.number,
-  value: PropTypes.number,
+  value: isValue,
 };

src/TimeInput/MinuteInput.jsx

@@ -18,3 +18,3 @@ import React from 'react';
   function isSameHour(date) {
-    return date && hour === getHours(date);
+    return date && Number(hour) === getHours(date);
   }
@@ -36,2 +36,4 @@
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 MinuteInput.propTypes = {
@@ -41,3 +43,3 @@ ariaLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  hour: PropTypes.number,
+  hour: isValue,
   itemRef: PropTypes.func,
@@ -52,3 +54,3 @@ maxTime: isTime,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
+  value: isValue,
 };

src/TimeInput/MinuteInput.spec.jsx

@@ -107,3 +107,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -110,0 +110,0 @@ const component = mount(

src/TimeInput/SecondInput.jsx

@@ -19,3 +19,3 @@ import React from 'react';
   function isSameMinute(date) {
-    return date && hour === getHours(date) && minute === getMinutes(date);
+    return date && Number(hour) === getHours(date) && Number(minute) === getMinutes(date);
   }
@@ -37,2 +37,4 @@
 
+const isValue = PropTypes.oneOfType([PropTypes.string, PropTypes.number]);
+
 SecondInput.propTypes = {
@@ -42,7 +44,7 @@ ariaLabel: PropTypes.string,
   disabled: PropTypes.bool,
-  hour: PropTypes.number,
+  hour: isValue,
   itemRef: PropTypes.func,
   maxTime: isTime,
   minTime: isTime,
-  minute: PropTypes.number,
+  minute: isValue,
   onChange: PropTypes.func,
@@ -54,3 +56,3 @@ onKeyDown: PropTypes.func,
   showLeadingZeros: PropTypes.bool,
-  value: PropTypes.number,
+  value: isValue,
 };

src/TimeInput/SecondInput.spec.jsx

@@ -107,3 +107,3 @@ import React from 'react';
   it('displays given value properly', () => {
-    const value = 11;
+    const value = '11';
 
@@ -110,0 +110,0 @@ const component = mount(

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

206690

increased by1.68%

Lines of code

5321

increased by1.86%

Worsened metrics

Dependency count

11

increased by10%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@wojtekmaj/predict-input-value@^1.0.0

• + Added@wojtekmaj/predict-input-value@1.3.2(transitive)