react-time-picker - npm Package Compare versions

Comparing version 3.8.0 to 3.9.0

dist/TimeInput.js

@@ -200,3 +200,3 @@ "use strict";
       var value = input.value;
-      var max = parseInt(input.getAttribute('max'), 10);
+      var max = input.getAttribute('max');
       /**
@@ -209,3 +209,3 @@ * Given 1, the smallest possible number the user could type by adding another digit is 10.
 
-      if (value * 10 > max) {
+      if (value * 10 > max || value.length >= max.length) {
         var property = 'nextElementSibling';
@@ -212,0 +212,0 @@ var nextInput = findInput(input, property);

dist/TimeInput/Hour12Input.js

@@ -46,7 +46,3 @@ "use strict";
 
-  var maxHour = function () {
-    if (!maxTime) {
-      return 12;
-    }
-
+  var maxHour = (0, _utils.min)(12, maxTime && function () {
     var _convert24to = (0, _dates.convert24to12)((0, _dateUtils.getHours)(maxTime)),
@@ -59,13 +55,8 @@ _convert24to2 = _slicedToArray(_convert24to, 2),
       // pm is always after am, so we should ignore validation
-      return 12;
+      return null;
     }
 
-    return (0, _utils.min)(12, maxHourResult);
-  }();
-
-  var minHour = function () {
-    if (!minTime) {
-      return 1;
-    }
-
+    return maxHourResult;
+  }());
+  var minHour = (0, _utils.max)(1, minTime && function () {
     var _convert24to3 = (0, _dates.convert24to12)((0, _dateUtils.getHours)(minTime)),
@@ -76,15 +67,10 @@ _convert24to4 = _slicedToArray(_convert24to3, 2),
 
-    if (minAmPm !== amPm) {
-      // pm is always after am, so we should ignore validation
-      return 1;
+    if ( // pm is always after am, so we should ignore validation
+    minAmPm !== amPm // If minHour is 12 am/pm, user should be able to enter 12, 1, ..., 11.
+    || minHourResult === 12) {
+      return null;
     }
 
-    if (minHourResult === 12) {
-      // If minHour is 12 am/pm, user should be able to enter 12, 1, ..., 11.
-      return 1;
-    }
-
-    return (0, _utils.max)(1, minHourResult);
-  }();
-
+    return minHourResult;
+  }());
   var value12 = value !== null ? (0, _dates.convert24to12)(value)[0] : null;
@@ -91,0 +77,0 @@ return _react["default"].createElement(_Input["default"], _extends({

dist/TimeInput/Input.js

@@ -21,9 +21,6 @@ "use strict";
 /* eslint-disable jsx-a11y/no-autofocus */
-function select(element) {
-  if (!element) {
-    return;
-  }
-
+function onFocus(event) {
+  var target = event.target;
   requestAnimationFrame(function () {
-    return element.select();
+    return target.select();
   });
@@ -56,2 +53,23 @@ }
 
+function getSelectionString() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  return window.getSelection().toString();
+}
+
+function makeOnKeyPress(maxLength) {
+  return function onKeyPress(event) {
+    var value = event.target.value;
+    var selection = getSelectionString();
+
+    if (selection || value.length < maxLength) {
+      return;
+    }
+
+    event.preventDefault();
+  };
+}
+
 function Input(_ref) {
@@ -77,2 +95,3 @@ var ariaLabel = _ref.ariaLabel,
   var hasLeadingZero = showLeadingZeros && value !== null && value < 10;
+  var maxLength = max.toString().length;
   return [hasLeadingZero && _react["default"].createElement("span", {
@@ -92,6 +111,5 @@ key: "leadingZero",
     onChange: onChange,
-    onFocus: function onFocus(event) {
-      return select(event.target);
-    },
+    onFocus: onFocus,
     onKeyDown: onKeyDown,
+    onKeyPress: makeOnKeyPress(maxLength),
     onKeyUp: function onKeyUp(event) {
@@ -98,0 +116,0 @@ (0, _updateInputWidth["default"])(event.target);

dist/TimeInput/MinuteInput.js

@@ -36,4 +36,8 @@ "use strict";
 
-  var maxMinute = (0, _utils.min)(59, maxTime && hour === (0, _dateUtils.getHours)(maxTime) && (0, _dateUtils.getMinutes)(maxTime));
-  var minMinute = (0, _utils.max)(0, minTime && hour === (0, _dateUtils.getHours)(minTime) && (0, _dateUtils.getMinutes)(minTime));
+  function isSameHour(date) {
+    return date && hour === (0, _dateUtils.getHours)(date);
+  }
+
+  var maxMinute = (0, _utils.min)(59, isSameHour(maxTime) && (0, _dateUtils.getMinutes)(maxTime));
+  var minMinute = (0, _utils.max)(0, isSameHour(minTime) && (0, _dateUtils.getMinutes)(minTime));
   return _react["default"].createElement(_Input["default"], _extends({
@@ -40,0 +44,0 @@ max: maxMinute,

dist/TimeInput/SecondInput.js

@@ -37,4 +37,8 @@ "use strict";
 
-  var maxSecond = (0, _utils.min)(59, maxTime && hour === (0, _dateUtils.getHours)(maxTime) && minute === (0, _dateUtils.getMinutes)(maxTime) && (0, _dateUtils.getSeconds)(maxTime));
-  var minSecond = (0, _utils.max)(0, minTime && hour === (0, _dateUtils.getHours)(minTime) && minute === (0, _dateUtils.getMinutes)(minTime) && (0, _dateUtils.getSeconds)(minTime));
+  function isSameMinute(date) {
+    return date && hour === (0, _dateUtils.getHours)(date) && minute === (0, _dateUtils.getMinutes)(date);
+  }
+
+  var maxSecond = (0, _utils.min)(59, isSameMinute(maxTime) && (0, _dateUtils.getSeconds)(maxTime));
+  var minSecond = (0, _utils.max)(0, isSameMinute(minTime) && (0, _dateUtils.getSeconds)(minTime));
   return _react["default"].createElement(_Input["default"], _extends({
@@ -41,0 +45,0 @@ max: maxSecond,

package.json

 {
   "name": "react-time-picker",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "A time picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

src/TimeInput.jsx

@@ -280,3 +280,3 @@ import React, { PureComponent } from 'react';
     const { value } = input;
-    const max = parseInt(input.getAttribute('max'), 10);
+    const max = input.getAttribute('max');
 
@@ -289,3 +289,3 @@ /**
      */
-    if (value * 10 > max) {
+    if ((value * 10 > max) || (value.length >= max.length)) {
       const property = 'nextElementSibling';
@@ -292,0 +292,0 @@ const nextInput = findInput(input, property);

src/TimeInput.spec.jsx

@@ -577,3 +577,3 @@ import React from 'react';
 
-  it('jumps to the next field when a value which can\'t be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value which can\'t be extended to another valid value is entered', () => {
     const component = mount(
@@ -595,3 +595,3 @@ <TimeInput {...defaultProps} />
 
-  it('does not jump the next field when a value which can be extended to another valid value is entered ', () => {
+  it('jumps to the next field when a value as long as the length of maximum value is entered', () => {
     const component = mount(
@@ -603,4 +603,21 @@ <TimeInput {...defaultProps} />
     const hourInput = customInputs.at(0);
+    const minuteInput = customInputs.at(1);
 
     hourInput.getDOMNode().focus();
+    hourInput.getDOMNode().value = '02';
+
+    hourInput.simulate('keyup', { target: hourInput.getDOMNode(), key: '2' });
+
+    expect(document.activeElement).toBe(minuteInput.getDOMNode());
+  });
+
+  it('does not jump the next field when a value which can be extended to another valid value is entered', () => {
+    const component = mount(
+      <TimeInput {...defaultProps} />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+    const hourInput = customInputs.at(0);
+
+    hourInput.getDOMNode().focus();
     hourInput.getDOMNode().value = '1';
@@ -607,0 +624,0 @@

src/TimeInput/Hour12Input.jsx

@@ -21,7 +21,3 @@ import React from 'react';
 }) {
-  const maxHour = (() => {
-    if (!maxTime) {
-      return 12;
-    }
-
+  const maxHour = min(12, maxTime && (() => {
     const [maxHourResult, maxAmPm] = convert24to12(getHours(maxTime));
@@ -31,27 +27,22 @@
       // pm is always after am, so we should ignore validation
-      return 12;
+      return null;
     }
 
-    return min(12, maxHourResult);
-  })();
+    return maxHourResult;
+  })());
 
-  const minHour = (() => {
-    if (!minTime) {
-      return 1;
-    }
-
+  const minHour = max(1, minTime && (() => {
     const [minHourResult, minAmPm] = convert24to12(getHours(minTime));
 
-    if (minAmPm !== amPm) {
+    if (
       // pm is always after am, so we should ignore validation
-      return 1;
-    }
-
-    if (minHourResult === 12) {
+      minAmPm !== amPm
       // If minHour is 12 am/pm, user should be able to enter 12, 1, ..., 11.
-      return 1;
+      || minHourResult === 12
+    ) {
+      return null;
     }
 
-    return max(1, minHourResult);
-  })();
+    return minHourResult;
+  })());
 
@@ -58,0 +49,0 @@ const value12 = value !== null ? convert24to12(value)[0] : null;

src/TimeInput/Hour24Input.jsx

@@ -16,12 +16,5 @@ import React from 'react';
 }) {
-  const maxHour = min(
-    23,
-    maxTime && getHours(maxTime),
-  );
+  const maxHour = min(23, maxTime && getHours(maxTime));
+  const minHour = max(0, minTime && getHours(minTime));
 
-  const minHour = max(
-    0,
-    minTime && getHours(minTime),
-  );
-
   return (
@@ -28,0 +21,0 @@ <Input

src/TimeInput/Input.jsx

@@ -8,8 +8,6 @@ import React from 'react';
 
-function select(element) {
-  if (!element) {
-    return;
-  }
+function onFocus(event) {
+  const { target } = event;
 
-  requestAnimationFrame(() => element.select());
+  requestAnimationFrame(() => target.select());
 }
@@ -41,2 +39,23 @@
 
+function getSelectionString() {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  return window.getSelection().toString();
+}
+
+function makeOnKeyPress(maxLength) {
+  return function onKeyPress(event) {
+    const { value } = event.target;
+    const selection = getSelectionString();
+
+    if (selection || value.length < maxLength) {
+      return;
+    }
+
+    event.preventDefault();
+  };
+}
+
 export default function Input({
@@ -62,2 +81,3 @@ ariaLabel,
   const hasLeadingZero = showLeadingZeros && value !== null && value < 10;
+  const maxLength = max.toString().length;
 
@@ -81,4 +101,5 @@ return [
       onChange={onChange}
-      onFocus={event => select(event.target)}
+      onFocus={onFocus}
       onKeyDown={onKeyDown}
+      onKeyPress={makeOnKeyPress(maxLength)}
       onKeyUp={(event) => {
@@ -85,0 +106,0 @@ updateInputWidth(event.target);

src/TimeInput/MinuteInput.jsx

@@ -17,15 +17,8 @@ import React from 'react';
 }) {
-  const maxMinute = min(
-    59,
-    maxTime
-    && hour === getHours(maxTime)
-    && getMinutes(maxTime),
-  );
+  function isSameHour(date) {
+    return date && hour === getHours(date);
+  }
 
-  const minMinute = max(
-    0,
-    minTime
-    && hour === getHours(minTime)
-    && getMinutes(minTime),
-  );
+  const maxMinute = min(59, isSameHour(maxTime) && getMinutes(maxTime));
+  const minMinute = max(0, isSameHour(minTime) && getMinutes(minTime));
 
@@ -32,0 +25,0 @@ return (

src/TimeInput/SecondInput.jsx

@@ -18,17 +18,8 @@ import React from 'react';
 }) {
-  const maxSecond = min(
-    59,
-    maxTime
-    && hour === getHours(maxTime)
-    && minute === getMinutes(maxTime)
-    && getSeconds(maxTime),
-  );
+  function isSameMinute(date) {
+    return date && hour === getHours(date) && minute === getMinutes(date);
+  }
 
-  const minSecond = max(
-    0,
-    minTime
-    && hour === getHours(minTime)
-    && minute === getMinutes(minTime)
-    && getSeconds(minTime),
-  );
+  const maxSecond = min(59, isSameMinute(maxTime) && getSeconds(maxTime));
+  const minSecond = max(0, isSameMinute(minTime) && getSeconds(minTime));
 
@@ -35,0 +26,0 @@ return (

src/TimePicker.spec.jsx

@@ -31,2 +31,12 @@ import React from 'react';
 
+  it('passes autoFocus flag to TimeInput', () => {
+    const component = mount(
+      <TimePicker autoFocus />
+    );
+
+    const timeInput = component.find('TimeInput');
+
+    expect(timeInput.prop('autoFocus')).toBeTruthy();
+  });
+
   it('passes disabled flag to TimeInput', () => {
@@ -33,0 +43,0 @@ const component = mount(

No alert changes

Improved metrics

Total package byte prevSize

192743

0.76%

Lines of code

5100

0.35%

No dependency changes