react-time-picker - npm Package Compare versions

Comparing version 3.6.0 to 3.6.1

dist/TimeInput.js

@@ -103,3 +103,4 @@ "use strict";
 
-var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions) {
+var _renderCustomInputs = function renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances) {
+  var usedFunctions = [];
   var pattern = new RegExp(Object.keys(elementFunctions).map(function (el) {
@@ -122,3 +123,9 @@ return "".concat(el, "+");
       })];
-      res.push(renderFunction(currentMatch));
+
+      if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+        res.push(currentMatch);
+      } else {
+        res.push(renderFunction(currentMatch));
+        usedFunctions.push(renderFunction);
+      }
     }
@@ -287,9 +294,14 @@
       })) {
-        var hour = "0".concat(values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm)).slice(-2);
-        var minute = "0".concat(values.minute || 0).slice(-2);
-        var second = "0".concat(values.second || 0).slice(-2);
-        var timeString = "".concat(hour, ":").concat(minute, ":").concat(second);
+        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);
 
-        var processedValue = _this.getProcessedValue(timeString);
+        var padStart = function padStart(num) {
+          return "0".concat(num).slice(-2);
+        };
 
+        var proposedValue = "".concat(padStart(hour), ":").concat(padStart(minute), ":").concat(padStart(second));
+
+        var processedValue = _this.getProcessedValue(proposedValue);
+
         onChange(processedValue, false);
@@ -299,2 +311,10 @@ }
 
+    _defineProperty(_assertThisInitialized(_this), "renderHour", function (currentMatch) {
+      if (/h/.test(currentMatch)) {
+        return _this.renderHour12(currentMatch);
+      }
+
+      return _this.renderHour24(currentMatch);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "renderHour12", function (currentMatch) {
@@ -419,5 +439,6 @@ var hourAriaLabel = _this.props.hourAriaLabel;
       var placeholder = this.placeholder;
+      var format = this.props.format;
       var elementFunctions = {
-        h: this.renderHour12,
-        H: this.renderHour24,
+        h: this.renderHour,
+        H: this.renderHour,
         m: this.renderMinute,
@@ -427,3 +448,4 @@ s: this.renderSecond,
       };
-      return _renderCustomInputs(placeholder, elementFunctions);
+      var allowMultipleInstances = typeof format !== 'undefined';
+      return _renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
     }
@@ -430,0 +452,0 @@ }, {

dist/TimePicker.js

@@ -30,10 +30,6 @@ "use strict";
 
-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 _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 _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { if (i % 2) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } else { Object.defineProperties(target, Object.getOwnPropertyDescriptors(arguments[i])); } } return target; }
-
 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -43,2 +39,12 @@
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -219,10 +225,20 @@
           value = _this$props3.value;
+
+      var _concat = [].concat(value),
+          _concat2 = _slicedToArray(_concat, 1),
+          valueFrom = _concat2[0];
+
+      var ariaLabelProps = {
+        amPmAriaLabel: amPmAriaLabel,
+        hourAriaLabel: hourAriaLabel,
+        minuteAriaLabel: minuteAriaLabel,
+        nativeInputAriaLabel: nativeInputAriaLabel,
+        secondAriaLabel: secondAriaLabel
+      };
       return _react["default"].createElement("div", {
         className: "".concat(baseClassName, "__wrapper")
-      }, _react["default"].createElement(_TimeInput["default"], {
-        amPmAriaLabel: amPmAriaLabel,
+      }, _react["default"].createElement(_TimeInput["default"], _extends({}, ariaLabelProps, {
         className: "".concat(baseClassName, "__inputGroup"),
         disabled: disabled,
         format: format,
-        hourAriaLabel: hourAriaLabel,
         isClockOpen: isOpen,
@@ -233,11 +249,8 @@ locale: locale,
         minTime: minTime,
-        minuteAriaLabel: minuteAriaLabel,
         name: name,
-        nativeInputAriaLabel: nativeInputAriaLabel,
         onChange: this.onChange,
         placeholder: this.placeholder,
         required: required,
-        secondAriaLabel: secondAriaLabel,
-        value: value
-      }), clearIcon !== null && _react["default"].createElement("button", {
+        value: valueFrom
+      })), clearIcon !== null && _react["default"].createElement("button", {
         "aria-label": clearAriaLabel,
@@ -274,5 +287,11 @@ className: "".concat(baseClassName, "__clear-button ").concat(baseClassName, "__button"),
           onChange = _this$props4.onChange,
-          clockProps = _objectWithoutProperties(_this$props4, ["clockClassName", "className", "maxDetail", "onChange"]);
+          value = _this$props4.value,
+          clockProps = _objectWithoutProperties(_this$props4, ["clockClassName", "className", "maxDetail", "onChange", "value"]);
 
       var className = "".concat(baseClassName, "__clock");
+
+      var _concat3 = [].concat(value),
+          _concat4 = _slicedToArray(_concat3, 1),
+          valueFrom = _concat4[0];
+
       var maxDetailIndex = allViews.indexOf(maxDetail);
@@ -284,3 +303,4 @@ return _react["default"].createElement(_reactFit["default"], null, _react["default"].createElement("div", {
         renderMinuteHand: maxDetailIndex > 0,
-        renderSecondHand: maxDetailIndex > 1
+        renderSecondHand: maxDetailIndex > 1,
+        value: valueFrom
       }, clockProps))));
@@ -373,3 +393,6 @@ }
 };
-TimePicker.propTypes = _objectSpread({}, _entry["default"].propTypes, {
+
+var isValue = _propTypes["default"].oneOfType([_propTypes2.isTime, _propTypes["default"].instanceOf(Date)]);
+
+TimePicker.propTypes = {
   amPmAriaLabel: _propTypes["default"].string,
@@ -397,6 +420,7 @@ className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
   onClockOpen: _propTypes["default"].func,
+  onFocus: _propTypes["default"].func,
   required: _propTypes["default"].bool,
   secondAriaLabel: _propTypes["default"].string,
-  value: _propTypes["default"].oneOfType([_propTypes2.isTime, _propTypes["default"].instanceOf(Date)])
-});
+  value: _propTypes["default"].oneOfType([isValue, _propTypes["default"].arrayOf(isValue)])
+};
 (0, _reactLifecyclesCompat.polyfill)(TimePicker);

package.json

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

README.md

@@ -1,2 +0,2 @@
-![downloads](https://img.shields.io/npm/dt/react-time-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-time-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-time-picker.svg
+[![npm](https://img.shields.io/npm/v/react-time-picker.svg)](https://www.npmjs.com/package/react-time-picker) ![downloads](https://img.shields.io/npm/dt/react-time-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-time-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-time-picker.svg
 ) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-time-picker.svg
@@ -96,3 +96,3 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |disabled|Whether the time picker should be disabled.|`false`|`true`|
-|disableClock|Whether the clock should be disabled.|`false`|`true`|
+|disableClock|When set to `true`, will remove the clock and the button toggling its visibility.|`false`|`true`|
 |format|Input format based on [Unicode Technical Standard #35](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table). Supported values are: `H`, `HH`, `h`, `hh`, `m`, `mm`, `s`, `ss`, `a`.|n/a|`"h:m:s a"`|
@@ -99,0 +99,0 @@ |hourAriaLabel|`aria-label` for the hour input.|n/a|`"Hour"`|

src/__tests__/TimePicker.jsx

@@ -31,3 +31,3 @@ import React from 'react';
 
-  it('passes format to DateInput', () => {
+  it('passes format to TimeInput', () => {
     const format = 'H:mm:ss';
@@ -39,8 +39,8 @@
 
-    const dateInput = component.find('TimeInput');
+    const timeInput = component.find('TimeInput');
 
-    expect(dateInput.prop('format')).toBe(format);
+    expect(timeInput.prop('format')).toBe(format);
   });
 
-  it('passes aria-label props to DateInput', () => {
+  it('passes aria-label props to TimeInput', () => {
     const ariaLabelProps = {
@@ -52,3 +52,4 @@ amPmAriaLabel: 'Select AM/PM',
       minuteAriaLabel: 'Minute',
-      secondAriaLabel: 'Second'
+      nativeInputAriaLabel: 'Time',
+      secondAriaLabel: 'Second',
     };
@@ -69,5 +70,33 @@
     expect(timeInput.prop('minuteAriaLabel')).toBe(ariaLabelProps.minuteAriaLabel);
+    expect(timeInput.prop('nativeInputAriaLabel')).toBe(ariaLabelProps.nativeInputAriaLabel);
     expect(timeInput.prop('secondAriaLabel')).toBe(ariaLabelProps.secondAriaLabel);
   });
 
+  describe('passes value to TimeInput', () => {
+    it('passes single value to TimeInput', () => {
+      const value = new Date(2019, 0, 1);
+
+      const component = mount(
+        <TimePicker value={value} />
+      );
+
+      const timeInput = component.find('TimeInput');
+
+      expect(timeInput.prop('value')).toBe(value);
+    });
+
+    it('passes the first item of an array of values to TimeInput', () => {
+      const value1 = new Date(2019, 0, 1);
+      const value2 = new Date(2019, 6, 1);
+
+      const component = mount(
+        <TimePicker value={[value1, value2]} />
+      );
+
+      const timeInput = component.find('TimeInput');
+
+      expect(timeInput.prop('value')).toBe(value1);
+    });
+  });
+
   it('applies className to its wrapper when given a string', () => {
@@ -74,0 +103,0 @@ const className = 'testClassName';

src/TimeInput.jsx

@@ -46,3 +46,4 @@ import React, { PureComponent } from 'react';
 
-const renderCustomInputs = (placeholder, elementFunctions) => {
+const renderCustomInputs = (placeholder, elementFunctions, allowMultipleInstances) => {
+  const usedFunctions = [];
   const pattern = new RegExp(
@@ -63,2 +64,3 @@ Object.keys(elementFunctions).map(el => `${el}+`).join('|'), 'g',
       const currentMatch = matches && matches[index];
+
       if (currentMatch) {
@@ -72,3 +74,9 @@ const renderFunction = (
         );
-        res.push(renderFunction(currentMatch));
+
+        if (!allowMultipleInstances && usedFunctions.includes(renderFunction)) {
+          res.push(currentMatch);
+        } else {
+          res.push(renderFunction(currentMatch));
+          usedFunctions.push(renderFunction);
+        }
       }
@@ -377,7 +385,9 @@ return res;
     ) {
-      const hour = `0${values.hour24 || convert12to24(values.hour12, values.amPm)}`.slice(-2);
-      const minute = `0${values.minute || 0}`.slice(-2);
-      const second = `0${values.second || 0}`.slice(-2);
-      const timeString = `${hour}:${minute}:${second}`;
-      const processedValue = this.getProcessedValue(timeString);
+      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);
+
+      const padStart = num => `0${num}`.slice(-2);
+      const proposedValue = `${padStart(hour)}:${padStart(minute)}:${padStart(second)}`;
+      const processedValue = this.getProcessedValue(proposedValue);
       onChange(processedValue, false);
@@ -387,2 +397,10 @@ }
 
+  renderHour = (currentMatch) => {
+    if (/h/.test(currentMatch)) {
+      return this.renderHour12(currentMatch);
+    }
+
+    return this.renderHour24(currentMatch);
+  };
+
   renderHour12 = (currentMatch) => {
@@ -494,5 +512,7 @@ const { hourAriaLabel } = this.props;
     const { placeholder } = this;
+    const { format } = this.props;
+
     const elementFunctions = {
-      h: this.renderHour12,
-      H: this.renderHour24,
+      h: this.renderHour,
+      H: this.renderHour,
       m: this.renderMinute,
@@ -503,3 +523,4 @@ s: this.renderSecond,
 
-    return renderCustomInputs(placeholder, elementFunctions);
+    const allowMultipleInstances = typeof format !== 'undefined';
+    return renderCustomInputs(placeholder, elementFunctions, allowMultipleInstances);
   }
@@ -506,0 +527,0 @@

src/TimePicker.jsx

@@ -141,10 +141,19 @@ import React, { PureComponent } from 'react';
 
+    const [valueFrom] = [].concat(value);
+
+    const ariaLabelProps = {
+      amPmAriaLabel,
+      hourAriaLabel,
+      minuteAriaLabel,
+      nativeInputAriaLabel,
+      secondAriaLabel,
+    };
+
     return (
       <div className={`${baseClassName}__wrapper`}>
         <TimeInput
-          amPmAriaLabel={amPmAriaLabel}
+          {...ariaLabelProps}
           className={`${baseClassName}__inputGroup`}
           disabled={disabled}
           format={format}
-          hourAriaLabel={hourAriaLabel}
           isClockOpen={isOpen}
@@ -155,10 +164,7 @@ locale={locale}
           minTime={minTime}
-          minuteAriaLabel={minuteAriaLabel}
           name={name}
-          nativeInputAriaLabel={nativeInputAriaLabel}
           onChange={this.onChange}
           placeholder={this.placeholder}
           required={required}
-          secondAriaLabel={secondAriaLabel}
-          value={value}
+          value={valueFrom}
         />
@@ -207,2 +213,3 @@ {clearIcon !== null && (
       onChange,
+      value,
       ...clockProps
@@ -212,2 +219,3 @@ } = this.props;
     const className = `${baseClassName}__clock`;
+    const [valueFrom] = [].concat(value);
 
@@ -223,2 +231,3 @@ const maxDetailIndex = allViews.indexOf(maxDetail);
             renderSecondHand={maxDetailIndex > 1}
+            value={valueFrom}
             {...clockProps}
@@ -297,4 +306,8 @@ />
 
+const isValue = PropTypes.oneOfType([
+  isTime,
+  PropTypes.instanceOf(Date),
+]);
+
 TimePicker.propTypes = {
-  ...Clock.propTypes,
   amPmAriaLabel: PropTypes.string,
@@ -328,7 +341,8 @@ className: PropTypes.oneOfType([
   onClockOpen: PropTypes.func,
+  onFocus: PropTypes.func,
   required: PropTypes.bool,
   secondAriaLabel: PropTypes.string,
   value: PropTypes.oneOfType([
-    isTime,
-    PropTypes.instanceOf(Date),
+    isValue,
+    PropTypes.arrayOf(isValue),
   ]),
@@ -335,0 +349,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

Improved metrics

Total package byte prevSize

231568

increased by1.37%

Lines of code

5932

increased by1.33%

No dependency changes