react-time-picker - npm Package Compare versions

Comparing version 3.7.0 to 3.7.1

dist/shared/dateFormatter.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.getFormatter = void 0;
+exports.getFormatter = getFormatter;
 
@@ -14,8 +14,6 @@ var _getUserLocale = _interopRequireDefault(require("get-user-locale"));
 /* eslint-disable import/prefer-default-export */
-var getFormatter = function getFormatter(options) {
+function getFormatter(options) {
   return function (locale, date) {
     return date.toLocaleString(locale || (0, _getUserLocale["default"])(), options);
   };
-};
-
-exports.getFormatter = getFormatter;
+}

dist/shared/dates.js

@@ -6,2 +6,6 @@ "use strict";
 });
+exports.getHoursMinutes = getHoursMinutes;
+exports.getHoursMinutesSeconds = getHoursMinutesSeconds;
+exports.convert12to24 = convert12to24;
+exports.convert24to12 = convert24to12;
 Object.defineProperty(exports, "getHours", {
@@ -25,7 +29,6 @@ enumerable: true,
 });
-exports.convert24to12 = exports.convert12to24 = exports.getHoursMinutesSeconds = exports.getHoursMinutes = void 0;
 
 var _dates = require("react-clock/dist/shared/dates");
 
-var getHoursMinutes = function getHoursMinutes(date) {
+function getHoursMinutes(date) {
   if (!date) {
@@ -38,7 +41,5 @@ return date;
   return "".concat(hours, ":").concat(minutes);
-};
+}
 
-exports.getHoursMinutes = getHoursMinutes;
-
-var getHoursMinutesSeconds = function getHoursMinutesSeconds(date) {
+function getHoursMinutesSeconds(date) {
   if (!date) {
@@ -52,7 +53,5 @@ return date;
   return "".concat(hours, ":").concat(minutes, ":").concat(seconds);
-};
+}
 
-exports.getHoursMinutesSeconds = getHoursMinutesSeconds;
-
-var convert12to24 = function convert12to24(hour12, amPm) {
+function convert12to24(hour12, amPm) {
   var hour24 = parseInt(hour12, 10);
@@ -67,11 +66,7 @@
   return hour24;
-};
+}
 
-exports.convert12to24 = convert12to24;
-
-var convert24to12 = function convert24to12(hour24) {
+function convert24to12(hour24) {
   var hour12 = hour24 % 12 || 12;
   return [hour12, hour24 < 12 ? 'am' : 'pm'];
-};
-
-exports.convert24to12 = convert24to12;
+}

dist/TimeInput.js

@@ -377,4 +377,4 @@ "use strict";
       }, _this.commonInputProps, {
+        ariaLabel: minuteAriaLabel,
         hour: hour,
-        ariaLabel: minuteAriaLabel,
         placeholder: minutePlaceholder,
@@ -403,6 +403,6 @@ showLeadingZeros: showLeadingZeros,
       }, _this.commonInputProps, {
+        ariaLabel: secondAriaLabel,
         hour: hour,
         minute: minute,
         placeholder: secondPlaceholder,
-        ariaLabel: secondAriaLabel,
         showLeadingZeros: showLeadingZeros,
@@ -409,0 +409,0 @@ value: second

dist/TimeInput/Hour12Input.js

@@ -87,6 +87,6 @@ "use strict";
   return _react["default"].createElement(_Input["default"], _extends({
+    max: maxHour,
+    min: minHour,
     name: "hour12",
     nameForClass: "hour",
-    max: maxHour,
-    min: minHour,
     value: value12
@@ -93,0 +93,0 @@ }, otherProps));

dist/TimeInput/Hour24Input.js

@@ -37,6 +37,6 @@ "use strict";
   return _react["default"].createElement(_Input["default"], _extends({
+    max: maxHour,
+    min: minHour,
     name: "hour24",
-    nameForClass: "hour",
-    max: maxHour,
-    min: minHour
+    nameForClass: "hour"
   }, otherProps));
@@ -43,0 +43,0 @@ }

dist/TimeInput/Input.js

@@ -14,4 +14,6 @@ "use strict";
 
-var _updateInputWidth = _interopRequireDefault(require("update-input-width"));
+var _updateInputWidth = _interopRequireWildcard(require("update-input-width"));
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,2 +31,21 @@
 
+function updateInputWidthOnFontLoad(element) {
+  if (!document.fonts) {
+    return;
+  }
+
+  var font = (0, _updateInputWidth.getFontShorthand)(element);
+  var isFontLoaded = document.fonts.check(font);
+
+  if (isFontLoaded) {
+    return;
+  }
+
+  function onLoadingDone() {
+    (0, _updateInputWidth["default"])(element);
+  }
+
+  document.fonts.addEventListener('loadingdone', onLoadingDone);
+}
+
 function Input(_ref) {
@@ -57,5 +78,5 @@ var ariaLabel = _ref.ariaLabel,
     disabled: disabled,
-    name: name,
     max: max,
     min: min,
+    name: name,
     onChange: onChange,
@@ -77,2 +98,3 @@ onFocus: function onFocus(event) {
         (0, _updateInputWidth["default"])(_ref2);
+        updateInputWidthOnFontLoad(_ref2);
       }
@@ -79,0 +101,0 @@

dist/TimeInput/MinuteInput.js

@@ -37,5 +37,5 @@ "use strict";
   return _react["default"].createElement(_Input["default"], _extends({
-    name: "minute",
     max: maxMinute,
-    min: minMinute
+    min: minMinute,
+    name: "minute"
   }, otherProps));
@@ -42,0 +42,0 @@ }

dist/TimeInput/NativeInput.js

@@ -68,3 +68,2 @@ "use strict";
   return _react["default"].createElement("input", {
-    type: "time",
     "aria-label": ariaLabel,
@@ -85,2 +84,3 @@ disabled: disabled,
     },
+    type: "time",
     value: value ? nativeValueParser(value) : ''
@@ -87,0 +87,0 @@ });

dist/TimeInput/SecondInput.js

@@ -38,5 +38,5 @@ "use strict";
   return _react["default"].createElement(_Input["default"], _extends({
-    name: "second",
     max: maxSecond,
-    min: minSecond
+    min: minSecond,
+    name: "second"
   }, otherProps));
@@ -43,0 +43,0 @@ }

dist/TimePicker.js

@@ -270,5 +270,5 @@ "use strict";
         disabled: disabled,
+        onBlur: this.resetValue,
         onClick: this.toggleClock,
         onFocus: this.stopPropagation,
-        onBlur: this.resetValue,
         type: "button"
@@ -380,9 +380,9 @@ }, clockIcon));
   x1: "4",
+  x2: "15",
   y1: "4",
-  x2: "15",
   y2: "15"
 }), _react["default"].createElement("line", {
   x1: "15",
+  x2: "4",
   y1: "4",
-  x2: "4",
   y2: "15"
@@ -389,0 +389,0 @@ }));

package.json

 {
   "name": "react-time-picker",
-  "version": "3.7.0",
+  "version": "3.7.1",
   "description": "A time picker for your React app.",
@@ -9,3 +9,3 @@ "main": "dist/entry.js",
     "build": "yarn build-js && yarn copy-styles && yarn build-styles",
-    "build-js": "babel src -d dist --ignore **/__tests__",
+    "build-js": "babel src -d dist --ignore **/__tests__,**/**/__tests__",
     "build-styles": "lessc ./dist/TimePicker.less ./dist/TimePicker.css",
@@ -51,3 +51,3 @@ "clean": "rimraf dist",
     "react-lifecycles-compat": "^3.0.4",
-    "update-input-width": "^1.0.1"
+    "update-input-width": "^1.1.0"
   },
@@ -54,0 +54,0 @@ "devDependencies": {

src/shared/dateFormatter.js

@@ -5,4 +5,4 @@ import getUserLocale from 'get-user-locale';
 
-export const getFormatter = options => (locale, date) => (
-  date.toLocaleString(locale || getUserLocale(), options)
-);
+export function getFormatter(options) {
+  return (locale, date) => date.toLocaleString(locale || getUserLocale(), options);
+}

src/shared/dates.js

@@ -13,3 +13,3 @@ import {
 
-export const getHoursMinutes = (date) => {
+export function getHoursMinutes(date) {
   if (!date) {
@@ -23,5 +23,5 @@ return date;
   return `${hours}:${minutes}`;
-};
+}
 
-export const getHoursMinutesSeconds = (date) => {
+export function getHoursMinutesSeconds(date) {
   if (!date) {
@@ -36,5 +36,5 @@ return date;
   return `${hours}:${minutes}:${seconds}`;
-};
+}
 
-export const convert12to24 = (hour12, amPm) => {
+export function convert12to24(hour12, amPm) {
   let hour24 = parseInt(hour12, 10);
@@ -49,8 +49,8 @@
   return hour24;
-};
+}
 
-export const convert24to12 = (hour24) => {
+export function convert24to12(hour24) {
   const hour12 = hour24 % 12 || 12;
 
   return [hour12, hour24 < 12 ? 'am' : 'pm'];
-};
+}

src/TimeInput.jsx

@@ -460,4 +460,4 @@ import React, { PureComponent } from 'react';
         {...this.commonInputProps}
+        ariaLabel={minuteAriaLabel}
         hour={hour}
-        ariaLabel={minuteAriaLabel}
         placeholder={minutePlaceholder}
@@ -484,6 +484,6 @@ showLeadingZeros={showLeadingZeros}
         {...this.commonInputProps}
+        ariaLabel={secondAriaLabel}
         hour={hour}
         minute={minute}
         placeholder={secondPlaceholder}
-        ariaLabel={secondAriaLabel}
         showLeadingZeros={showLeadingZeros}
@@ -490,0 +490,0 @@ value={second}

src/TimeInput/__tests__/Hour12Input.jsx

@@ -185,4 +185,4 @@ import React from 'react';
         {...defaultProps}
+        amPm="am"
         minTime="5:35"
-        amPm="am"
       />
@@ -200,4 +200,4 @@ );
         {...defaultProps}
+        amPm="pm"
         minTime="17:35"
-        amPm="pm"
       />
@@ -215,4 +215,4 @@ );
         {...defaultProps}
+        amPm="pm"
         minTime="5:35"
-        amPm="pm"
       />
@@ -230,4 +230,4 @@ );
         {...defaultProps}
+        amPm="am"
         minTime="17:35"
-        amPm="am"
       />
@@ -245,4 +245,4 @@ );
         {...defaultProps}
+        amPm="am"
         minTime="00:35"
-        amPm="am"
       />
@@ -260,4 +260,4 @@ );
         {...defaultProps}
+        amPm="pm"
         minTime="12:35"
-        amPm="pm"
       />
@@ -285,4 +285,4 @@ );
         {...defaultProps}
+        amPm="am"
         maxTime="5:35"
-        amPm="am"
       />
@@ -300,4 +300,4 @@ );
         {...defaultProps}
+        amPm="pm"
         maxTime="17:35"
-        amPm="pm"
       />
@@ -315,4 +315,4 @@ );
         {...defaultProps}
+        amPm="pm"
         maxTime="5:35"
-        amPm="pm"
       />
@@ -330,4 +330,4 @@ );
         {...defaultProps}
+        amPm="am"
         maxTime="17:35"
-        amPm="am"
       />
@@ -345,4 +345,4 @@ );
         {...defaultProps}
+        amPm="pm"
         maxTime="12:35"
-        amPm="pm"
       />
@@ -349,0 +349,0 @@ );

src/TimeInput/__tests__/NativeInput.jsx

@@ -67,4 +67,4 @@ import React from 'react';
         {...defaultProps}
+        value={value}
         valueType={valueType}
-        value={value}
       />
@@ -71,0 +71,0 @@ );

src/TimeInput/__tests__/SecondInput.jsx

@@ -198,4 +198,4 @@ import React from 'react';
         hour={22}
+        minTime="21:40:15"
         minute={40}
-        minTime="21:40:15"
       />
@@ -214,4 +214,4 @@ );
         hour={22}
+        minTime="22:40:15"
         minute={40}
-        minTime="22:40:15"
       />
@@ -240,4 +240,4 @@ );
         hour={22}
+        maxTime="23:40:15"
         minute={40}
-        maxTime="23:40:15"
       />
@@ -256,4 +256,4 @@ );
         hour={22}
+        maxTime="22:40:15"
         minute={40}
-        maxTime="22:40:15"
       />
@@ -260,0 +260,0 @@ );

src/TimeInput/Hour12Input.jsx

@@ -60,6 +60,6 @@ import React from 'react';
     <Input
+      max={maxHour}
+      min={minHour}
       name="hour12"
       nameForClass="hour"
-      max={maxHour}
-      min={minHour}
       value={value12}
@@ -66,0 +66,0 @@ {...otherProps}

src/TimeInput/Hour24Input.jsx

@@ -28,6 +28,6 @@ import React from 'react';
     <Input
+      max={maxHour}
+      min={minHour}
       name="hour24"
       nameForClass="hour"
-      max={maxHour}
-      min={minHour}
       {...otherProps}
@@ -34,0 +34,0 @@ />

src/TimeInput/Input.jsx

 import React from 'react';
 import PropTypes from 'prop-types';
 import mergeClassNames from 'merge-class-names';
-import updateInputWidth from 'update-input-width';
+import updateInputWidth, { getFontShorthand } from 'update-input-width';
 
@@ -14,2 +14,21 @@ function select(element) {
 
+function updateInputWidthOnFontLoad(element) {
+  if (!document.fonts) {
+    return;
+  }
+
+  const font = getFontShorthand(element);
+  const isFontLoaded = document.fonts.check(font);
+
+  if (isFontLoaded) {
+    return;
+  }
+
+  function onLoadingDone() {
+    updateInputWidth(element);
+  }
+
+  document.fonts.addEventListener('loadingdone', onLoadingDone);
+}
+
 export default function Input({
@@ -47,5 +66,5 @@ ariaLabel,
       disabled={disabled}
-      name={name}
       max={max}
       min={min}
+      name={name}
       onChange={onChange}
@@ -65,2 +84,3 @@ onFocus={event => select(event.target)}
           updateInputWidth(ref);
+          updateInputWidthOnFontLoad(ref);
         }
@@ -67,0 +87,0 @@

src/TimeInput/MinuteInput.jsx

@@ -32,5 +32,5 @@ import React from 'react';
     <Input
-      name="minute"
       max={maxMinute}
       min={minMinute}
+      name="minute"
       {...otherProps}
@@ -37,0 +37,0 @@ />

src/TimeInput/NativeInput.jsx

@@ -54,3 +54,2 @@ import React from 'react';
     <input
-      type="time"
       aria-label={ariaLabel}
@@ -71,2 +70,3 @@ disabled={disabled}
       }}
+      type="time"
       value={value ? nativeValueParser(value) : ''}
@@ -73,0 +73,0 @@ />

src/TimeInput/SecondInput.jsx

@@ -39,5 +39,5 @@ import React from 'react';
     <Input
-      name="second"
       max={maxSecond}
       min={minSecond}
+      name="second"
       {...otherProps}
@@ -44,0 +44,0 @@ />

src/TimePicker.jsx

@@ -196,5 +196,5 @@ import React, { PureComponent } from 'react';
             disabled={disabled}
+            onBlur={this.resetValue}
             onClick={this.toggleClock}
             onFocus={this.stopPropagation}
-            onBlur={this.resetValue}
             type="button"
@@ -300,4 +300,4 @@ >
   >
-    <line x1="4" y1="4" x2="15" y2="15" />
-    <line x1="15" y1="4" x2="4" y2="15" />
+    <line x1="4" x2="15" y1="4" y2="15" />
+    <line x1="15" x2="4" y1="4" y2="15" />
   </svg>
@@ -304,0 +304,0 @@ );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

192372

decreased by-18.65%

Number of package files

48

decreased by-12.73%

Lines of code

5146

decreased by-15.03%

Dependency changes

• Updatedupdate-input-width@^1.1.0