react-time-picker - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

dist/TimeInput.js

@@ -98,4 +98,4 @@ 'use strict';
 
-var TimeInput = function (_Component) {
-  _inherits(TimeInput, _Component);
+var TimeInput = function (_PureComponent) {
+  _inherits(TimeInput, _PureComponent);
 
@@ -175,26 +175,8 @@ function TimeInput() {
   _createClass(TimeInput, [{
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.updateValues();
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextValue = nextProps.value;
-      var value = this.props.value;
+    key: 'getProcessedValue',
 
 
-      if (
-      // Toggling clock visibility resets values
-      nextProps.isClockOpen !== this.props.isClockOpen || hoursAreDifferent(nextValue, value)) {
-        this.updateValues(nextProps);
-      }
-    }
-
     /**
      * Gets current value in a desired format.
      */
-
-  }, {
-    key: 'getProcessedValue',
     value: function getProcessedValue(value) {
@@ -212,31 +194,2 @@ var nativeValueParser = this.nativeValueParser;
   }, {
-    key: 'updateValues',
-    value: function updateValues() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-      var value = props.value;
-
-
-      this.setState({
-        hour: value ? (0, _dates.getHours)(value) : null,
-        minute: value ? (0, _dates.getMinutes)(value) : null,
-        second: value ? (0, _dates.getSeconds)(value) : null
-      });
-    }
-
-    /**
-     * Called when non-native date input is changed.
-     */
-
-
-    /**
-     * Called when native date input is changed.
-     */
-
-
-    /**
-     * Called after internal onChange. Checks input validity. If all fields are valid,
-     * calls props.onChange.
-     */
-
-  }, {
     key: 'renderHour',
@@ -354,5 +307,3 @@ value: function renderHour() {
     get: function get() {
-      var maxDetail = this.props.maxDetail;
-
-      return maxDetail;
+      return this.props.maxDetail;
     }
@@ -418,6 +369,59 @@ }, {
     }
+
+    /**
+     * Called when non-native date input is changed.
+     */
+
+
+    /**
+     * Called when native date input is changed.
+     */
+
+
+    /**
+     * Called after internal onChange. Checks input validity. If all fields are valid,
+     * calls props.onChange.
+     */
+
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      var nextState = {};
+
+      /**
+       * If isClockOpen flag has changed, we have to update it.
+       * It's saved in state purely for use in getDerivedStateFromProps.
+       */
+      if (nextProps.isClockOpen !== prevState.isClockOpen) {
+        nextState.isClockOpen = nextProps.isClockOpen;
+      }
+
+      /**
+       * If the next value is different from the current one  (with an exception of situation in
+       * which values provided are limited by minDate and maxDate so that the dates are the same),
+       * get a new one.
+       */
+      var nextValue = nextProps.value;
+      if (
+      // Toggling calendar visibility resets values
+      nextState.isClockOpen || // Flag was toggled
+      hoursAreDifferent(nextValue, prevState.value)) {
+        if (nextValue) {
+          nextState.hour = (0, _dates.getHours)(nextValue);
+          nextState.minute = (0, _dates.getMinutes)(nextValue);
+          nextState.second = (0, _dates.getSeconds)(nextValue);
+        } else {
+          nextState.hour = null;
+          nextState.minute = null;
+          nextState.second = null;
+        }
+        nextState.value = nextValue;
+      }
+
+      return nextState;
+    }
   }]);
 
   return TimeInput;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -424,0 +428,0 @@ exports.default = TimeInput;

dist/TimePicker.js

@@ -63,5 +63,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isOpen: _this.props.isOpen
-    }, _this.onClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = TimePicker.__proto__ || Object.getPrototypeOf(TimePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onClick = function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
@@ -91,2 +89,6 @@ _this.closeClock();
     }, _this.onFocus = function () {
+      // Internet Explorer still fires onFocus on disabled elements
+      if (_this.props.disabled) {
+        return;
+      }
       _this.openClock();
@@ -111,12 +113,2 @@ }, _this.stopPropagation = function (event) {
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var props = this.props;
-
-
-      if (nextProps.isOpen !== props.isOpen) {
-        this.setState({ isOpen: nextProps.isOpen });
-      }
-    }
-  }, {
     key: 'renderInputs',
@@ -234,2 +226,14 @@ value: function renderInputs() {
     }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(nextProps, prevState) {
+      if (nextProps.isOpen !== prevState.propsIsOpen) {
+        return {
+          isOpen: nextProps.isOpen,
+          propsIsOpen: nextProps.isOpen
+        };
+      }
+
+      return null;
+    }
   }]);
@@ -236,0 +240,0 @@

package.json

 {
   "name": "react-time-picker",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "A time picker for your React app.",
@@ -8,5 +8,5 @@ "main": "dist/entry.js",
   "scripts": {
-    "build": "npm run build-js && npm run build-styles && npm run copy-styles",
+    "build": "npm run build-js && npm run copy-styles && npm run build-styles",
     "build-js": "babel src -d dist --ignore **/__tests__",
-    "build-styles": "lessc ./src/TimePicker.less ./src/TimePicker.css",
+    "build-styles": "lessc ./dist/TimePicker.less ./dist/TimePicker.css",
     "copy-styles": "node ./copy-styles.js",
@@ -44,3 +44,4 @@ "prepublishOnly": "npm run build",
     "prop-types": "^15.6.0",
-    "react-clock": "^2.2.1"
+    "react-clock": "^2.2.1",
+    "react-lifecycles-compat": "^1.1.0"
   },
@@ -68,5 +69,4 @@ "devDependencies": {
     "less": "^2.7.3",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-test-renderer": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
   },
@@ -73,0 +73,0 @@ "peerDependencies": {

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.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-time-picker.svg
+![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
@@ -3,0 +3,0 @@ ) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)

src/__tests__/TimeInput.jsx

@@ -88,2 +88,23 @@ import React from 'react';
 
+  it('clears the value correctly', () => {
+    const date = '22:17:00';
+
+    const component = mount(
+      <TimeInput
+        maxDetail="second"
+        value={date}
+      />
+    );
+
+    component.setProps({ value: null });
+
+    const nativeInput = component.find('input[type="time"]');
+    const customInputs = component.find('input[type="number"]');
+
+    expect(nativeInput.getDOMNode().value).toBe('');
+    expect(customInputs.at(0).getDOMNode().value).toBe('');
+    expect(customInputs.at(1).getDOMNode().value).toBe('');
+    expect(customInputs.at(2).getDOMNode().value).toBe('');
+  });
+
   it('renders custom inputs in a proper order', () => {
@@ -90,0 +111,0 @@ const component = mount(

src/__tests__/TimePicker.jsx

@@ -0,0 +0,0 @@ import React from 'react';

src/TimeInput.jsx

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
@@ -63,26 +63,46 @@
 
-export default class TimeInput extends Component {
-  state = {
-    hour: null,
-    minute: null,
-    second: null,
-  }
+export default class TimeInput extends PureComponent {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const nextState = {};
 
-  componentWillMount() {
-    this.updateValues();
-  }
+    /**
+     * If isClockOpen flag has changed, we have to update it.
+     * It's saved in state purely for use in getDerivedStateFromProps.
+     */
+    if (nextProps.isClockOpen !== prevState.isClockOpen) {
+      nextState.isClockOpen = nextProps.isClockOpen;
+    }
 
-  componentWillReceiveProps(nextProps) {
-    const { value: nextValue } = nextProps;
-    const { value } = this.props;
-
+    /**
+     * If the next value is different from the current one  (with an exception of situation in
+     * which values provided are limited by minDate and maxDate so that the dates are the same),
+     * get a new one.
+     */
+    const nextValue = nextProps.value;
     if (
-      // Toggling clock visibility resets values
-      (nextProps.isClockOpen !== this.props.isClockOpen) ||
-      hoursAreDifferent(nextValue, value)
+      // Toggling calendar visibility resets values
+      nextState.isClockOpen || // Flag was toggled
+      hoursAreDifferent(nextValue, prevState.value)
     ) {
-      this.updateValues(nextProps);
+      if (nextValue) {
+        nextState.hour = getHours(nextValue);
+        nextState.minute = getMinutes(nextValue);
+        nextState.second = getSeconds(nextValue);
+      } else {
+        nextState.hour = null;
+        nextState.minute = null;
+        nextState.second = null;
+      }
+      nextState.value = nextValue;
     }
+
+    return nextState;
   }
 
+  state = {
+    hour: null,
+    minute: null,
+    second: null,
+  };
+
   /**
@@ -101,4 +121,3 @@ * Gets current value in a desired format.
   get valueType() {
-    const { maxDetail } = this.props;
-    return maxDetail;
+    return this.props.maxDetail;
   }
@@ -163,12 +182,2 @@
 
-  updateValues(props = this.props) {
-    const { value } = props;
-
-    this.setState({
-      hour: value ? getHours(value) : null,
-      minute: value ? getMinutes(value) : null,
-      second: value ? getSeconds(value) : null,
-    });
-  }
-
   onKeyDown = (event) => {
@@ -175,0 +184,0 @@ switch (event.key) {

src/TimeInput/NativeInput.jsx

@@ -23,3 +23,3 @@ import React, { PureComponent } from 'react';
 
-  stopPropagation = event => event.stopPropagation()
+  stopPropagation = event => event.stopPropagation();
 
@@ -26,0 +26,0 @@ render() {

src/TimePicker.jsx

@@ -15,6 +15,15 @@ import React, { PureComponent } from 'react';
 export default class TimePicker extends PureComponent {
-  state = {
-    isOpen: this.props.isOpen,
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isOpen !== prevState.propsIsOpen) {
+      return {
+        isOpen: nextProps.isOpen,
+        propsIsOpen: nextProps.isOpen,
+      };
+    }
+
+    return null;
   }
 
+  state = {};
+
   componentDidMount() {
@@ -28,10 +37,2 @@ document.addEventListener('mousedown', this.onClick);
 
-  componentWillReceiveProps(nextProps) {
-    const { props } = this;
-
-    if (nextProps.isOpen !== props.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
-    }
-  }
-
   onClick = (event) => {
@@ -67,6 +68,10 @@ if (this.wrapper && !this.wrapper.contains(event.target)) {
   onFocus = () => {
+    // Internet Explorer still fires onFocus on disabled elements
+    if (this.props.disabled) {
+      return;
+    }
     this.openClock();
   }
 
-  stopPropagation = event => event.stopPropagation()
+  stopPropagation = event => event.stopPropagation();
 
@@ -73,0 +78,0 @@ clear = () => this.onChange(null);

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

Dev dependency count

22

decreased by-4.35%

Worsened metrics

Total package byte prevSize

102923

decreased by-0.64%

Dependency count

8

increased by14.29%

Number of package files

38

decreased by-2.56%

Lines of code

2444

decreased by-1.85%

Dependency changes

• + Addedreact-lifecycles-compat@^1.1.0

• + Addedreact-lifecycles-compat@1.1.4(transitive)