react-datetime-picker - npm Package Compare versions

Comparing version 1.4.1 to 1.4.2

dist/DateTimeInput.js

@@ -7,6 +7,6 @@ 'use strict';
 
+var _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; };
+
 var _slicedToArray = function () { function sliceIterator(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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-var _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; };
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -203,5 +203,40 @@
 
-      if (onChange) {
-        onChange(value);
+      if (!onChange) {
+        return;
       }
+
+      var processedValue = function () {
+        if (!value) {
+          return null;
+        }
+
+        var _value$split = value.split('T'),
+            _value$split2 = _slicedToArray(_value$split, 2),
+            valueDate = _value$split2[0],
+            valueTime = _value$split2[1];
+
+        var _valueDate$split = valueDate.split('-'),
+            _valueDate$split2 = _slicedToArray(_valueDate$split, 3),
+            yearString = _valueDate$split2[0],
+            monthString = _valueDate$split2[1],
+            dayString = _valueDate$split2[2];
+
+        var year = parseInt(yearString, 10);
+        var monthIndex = parseInt(monthString, 10) - 1 || 0;
+        var date = parseInt(dayString, 10) || 1;
+
+        var _valueTime$split = valueTime.split(':'),
+            _valueTime$split2 = _slicedToArray(_valueTime$split, 3),
+            hourString = _valueTime$split2[0],
+            minuteString = _valueTime$split2[1],
+            secondString = _valueTime$split2[2];
+
+        var hour = parseInt(hourString, 10) || 0;
+        var minute = parseInt(minuteString, 10) || 0;
+        var second = parseInt(secondString, 10) || 0;
+
+        return new Date(year, monthIndex, date, hour, minute, second);
+      }();
+
+      onChange(processedValue);
     }, _this.onChangeAmPm = function (event) {
@@ -216,18 +251,26 @@ var value = event.target.value;
 
-      if (onChange) {
-        var formElements = [_this.dayInput, _this.monthInput, _this.yearInput, _this.hour12Input, _this.hour24Input, _this.minuteInput, _this.secondInput, _this.amPmInput].filter(Boolean);
+      if (!onChange) {
+        return;
+      }
 
-        var values = {};
-        formElements.forEach(function (formElement) {
-          values[formElement.name] = formElement.value;
-        });
+      var formElements = [_this.dayInput, _this.monthInput, _this.yearInput, _this.hour12Input, _this.hour24Input, _this.minuteInput, _this.secondInput, _this.amPmInput].filter(Boolean);
 
-        if (formElements.every(function (formElement) {
-          return formElement.value && formElement.checkValidity();
-        })) {
-          var hour = values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm);
-          var proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1, hour, values.minute || 0, values.second || 0);
-          var processedValue = proposedValue;
-          onChange(processedValue, false);
-        }
+      var formElementsWithoutSelect = formElements.slice(0, -1);
+
+      var values = {};
+      formElements.forEach(function (formElement) {
+        values[formElement.name] = formElement.value;
+      });
+
+      if (formElementsWithoutSelect.every(function (formElement) {
+        return !formElement.value;
+      })) {
+        onChange(null);
+      } else if (formElements.every(function (formElement) {
+        return formElement.value && formElement.checkValidity();
+      })) {
+        var hour = values.hour24 || (0, _dates.convert12to24)(values.hour12, values.amPm);
+        var proposedValue = new Date(values.year, (values.month || 1) - 1, values.day || 1, hour, values.minute || 0, values.second || 0);
+        var processedValue = proposedValue;
+        onChange(processedValue);
       }
@@ -529,3 +572,3 @@ }, _temp), _possibleConstructorReturn(_this, _ret);
 
-      return removeUnwantedCharacters((0, _dateFormatter.formatTime)(date, locale)).replace('21', 'hour-24').replace('9', 'hour-12').replace('13', 'minute').replace('14', 'second').replace(/AM|PM/, this.timeDivider + 'ampm');
+      return removeUnwantedCharacters((0, _dateFormatter.formatTime)(date, locale)).replace('21', 'hour-24').replace('9', 'hour-12').replace('13', 'minute').replace('14', 'second').replace(/AM|PM/i, this.timeDivider + 'ampm');
     }
@@ -532,0 +575,0 @@ }, {

dist/DateTimeInput/NativeInput.js

@@ -53,2 +53,3 @@ 'use strict';
     value: function render() {
+      var step = this.step;
       var _props = this.props,
@@ -73,2 +74,3 @@ disabled = _props.disabled,
         required: required,
+        step: step,
         style: {
@@ -83,2 +85,19 @@ visibility: 'hidden',
     }
+  }, {
+    key: 'step',
+    get: function get() {
+      var valueType = this.props.valueType;
+
+
+      switch (valueType) {
+        case 'hour':
+          return 3600;
+        case 'minute':
+          return 60;
+        case 'second':
+          return 1;
+        default:
+          throw new Error('Invalid valueType.');
+      }
+    }
   }]);
@@ -99,3 +118,4 @@
   required: _propTypes2.default.bool,
-  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.instanceOf(Date)])
+  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.instanceOf(Date)]),
+  valueType: _propTypes3.isValueType
 };

dist/shared/propTypes.js

@@ -20,2 +20,11 @@ 'use strict';
   }
+});
+
+var _propTypes2 = require('react-time-picker/dist/shared/propTypes');
+
+Object.defineProperty(exports, 'isValueType', {
+  enumerable: true,
+  get: function get() {
+    return _propTypes2.isValueType;
+  }
 });

package.json

 {
   "name": "react-datetime-picker",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A date range picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

src/__tests__/DateTimeInput.jsx

@@ -311,2 +311,85 @@ import React from 'react';
   });
+
+  it('triggers onChange correctly when changed custom input', () => {
+    const onChange = jest.fn();
+    const date = new Date(2017, 8, 30, 22, 17, 0);
+
+    const component = mount(
+      <DateTimeInput
+        onChange={onChange}
+        value={date}
+      />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+
+    customInputs.at(3).getDOMNode().value = '20';
+    customInputs.at(3).simulate('change');
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(new Date(2017, 8, 30, 20, 17, 0));
+  });
+
+  it('triggers onChange correctly when cleared custom inputs', () => {
+    const onChange = jest.fn();
+    const date = new Date(2017, 8, 30, 22, 17, 0);
+
+    const component = mount(
+      <DateTimeInput
+        maxDetail="second"
+        onChange={onChange}
+        value={date}
+      />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+
+    customInputs.forEach((customInput) => {
+      customInput.getDOMNode().value = ''; // eslint-disable-line no-param-reassign
+      customInput.simulate('change');
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
+
+  it('triggers onChange correctly when changed native input', () => {
+    const onChange = jest.fn();
+    const date = new Date(2017, 8, 30, 22, 17, 0);
+
+    const component = mount(
+      <DateTimeInput
+        onChange={onChange}
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="datetime-local"]');
+
+    nativeInput.getDOMNode().value = '2017-09-30T20:17:00';
+    nativeInput.simulate('change');
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(new Date(2017, 8, 30, 20, 17, 0));
+  });
+
+  it('triggers onChange correctly when cleared native input', () => {
+    const onChange = jest.fn();
+    const date = new Date(2017, 8, 30, 22, 17, 0);
+
+    const component = mount(
+      <DateTimeInput
+        onChange={onChange}
+        value={date}
+      />
+    );
+
+    const nativeInput = component.find('input[type="datetime-local"]');
+
+    nativeInput.getDOMNode().value = '';
+    nativeInput.simulate('change');
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(null);
+  });
 });

src/DateTimeInput.jsx

@@ -178,3 +178,3 @@ import React, { PureComponent } from 'react';
         .replace('14', 'second')
-        .replace(/AM|PM/, `${this.timeDivider}ampm`)
+        .replace(/AM|PM/i, `${this.timeDivider}ampm`)
     );
@@ -281,5 +281,27 @@ }
 
-    if (onChange) {
-      onChange(value);
+    if (!onChange) {
+      return;
     }
+
+    const processedValue = (() => {
+      if (!value) {
+        return null;
+      }
+
+      const [valueDate, valueTime] = value.split('T');
+
+      const [yearString, monthString, dayString] = valueDate.split('-');
+      const year = parseInt(yearString, 10);
+      const monthIndex = parseInt(monthString, 10) - 1 || 0;
+      const date = parseInt(dayString, 10) || 1;
+
+      const [hourString, minuteString, secondString] = valueTime.split(':');
+      const hour = parseInt(hourString, 10) || 0;
+      const minute = parseInt(minuteString, 10) || 0;
+      const second = parseInt(secondString, 10) || 0;
+
+      return new Date(year, monthIndex, date, hour, minute, second);
+    })();
+
+    onChange(processedValue);
   }
@@ -303,32 +325,40 @@
 
-    if (onChange) {
-      const formElements = [
-        this.dayInput,
-        this.monthInput,
-        this.yearInput,
-        this.hour12Input,
-        this.hour24Input,
-        this.minuteInput,
-        this.secondInput,
-        this.amPmInput,
-      ].filter(Boolean);
+    if (!onChange) {
+      return;
+    }
 
-      const values = {};
-      formElements.forEach((formElement) => {
-        values[formElement.name] = formElement.value;
-      });
+    const formElements = [
+      this.dayInput,
+      this.monthInput,
+      this.yearInput,
+      this.hour12Input,
+      this.hour24Input,
+      this.minuteInput,
+      this.secondInput,
+      this.amPmInput,
+    ].filter(Boolean);
 
-      if (formElements.every(formElement => formElement.value && formElement.checkValidity())) {
-        const hour = values.hour24 || convert12to24(values.hour12, values.amPm);
-        const proposedValue = new Date(
-          values.year,
-          (values.month || 1) - 1,
-          values.day || 1,
-          hour,
-          values.minute || 0,
-          values.second || 0,
-        );
-        const processedValue = proposedValue;
-        onChange(processedValue, false);
-      }
+    const formElementsWithoutSelect = formElements.slice(0, -1);
+
+    const values = {};
+    formElements.forEach((formElement) => {
+      values[formElement.name] = formElement.value;
+    });
+
+    if (formElementsWithoutSelect.every(formElement => !formElement.value)) {
+      onChange(null);
+    } else if (
+      formElements.every(formElement => formElement.value && formElement.checkValidity())
+    ) {
+      const hour = values.hour24 || convert12to24(values.hour12, values.amPm);
+      const proposedValue = new Date(
+        values.year,
+        (values.month || 1) - 1,
+        values.day || 1,
+        hour,
+        values.minute || 0,
+        values.second || 0,
+      );
+      const processedValue = proposedValue;
+      onChange(processedValue);
     }
@@ -335,0 +365,0 @@ }

src/DateTimeInput/NativeInput.jsx

@@ -5,3 +5,3 @@ import React, { PureComponent } from 'react';
 import { getISOLocalDateTime } from '../shared/dates';
-import { isMaxDate, isMinDate } from '../shared/propTypes';
+import { isMaxDate, isMinDate, isValueType } from '../shared/propTypes';
 
@@ -11,5 +11,21 @@ const nativeValueParser = getISOLocalDateTime;
 export default class NativeInput extends PureComponent {
+  get step() {
+    const { valueType } = this.props;
+
+    switch (valueType) {
+      case 'hour':
+        return 3600;
+      case 'minute':
+        return 60;
+      case 'second':
+        return 1;
+      default:
+        throw new Error('Invalid valueType.');
+    }
+  }
+
   stopPropagation = event => event.stopPropagation();
 
   render() {
+    const { step } = this;
     const {
@@ -29,2 +45,3 @@ disabled, maxDate, minDate, name, onChange, required, value,
         required={required}
+        step={step}
         style={{
@@ -53,2 +70,3 @@ visibility: 'hidden',
   ]),
+  valueType: isValueType,
 };

src/shared/propTypes.js

@@ -5,1 +5,5 @@ export {
 } from 'react-calendar/dist/shared/propTypes';
+
+export {
+  isValueType,
+} from 'react-time-picker/dist/shared/propTypes';

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

115012

increased by5.15%

Lines of code

2831

increased by6.07%

No dependency changes