react-date-picker - npm Package Compare versions

Comparing version 6.9.1 to 6.10.0

dist/DateInput.js

@@ -19,2 +19,6 @@ 'use strict';
 
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
+var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
+
 var _Divider = require('./Divider');
@@ -68,2 +72,43 @@
 
+/**
+ * Returns value type that can be returned with currently applied settings.
+ */
+var getValueType = function getValueType(maxDetail) {
+  return allValueTypes[allViews.indexOf(maxDetail)];
+};
+
+var getValueFrom = function getValueFrom(value, minDate, maxDate, maxDetail) {
+  if (!value) {
+    return null;
+  }
+
+  var rawValueFrom = value instanceof Array ? value[0] : value;
+  var valueFromDate = new Date(rawValueFrom);
+
+  if (isNaN(valueFromDate.getTime())) {
+    throw new Error('Invalid date: ' + value);
+  }
+
+  var valueFrom = (0, _dates.getBegin)(getValueType(maxDetail), valueFromDate);
+
+  return (0, _utils.between)(valueFrom, minDate, maxDate);
+};
+
+var getValueTo = function getValueTo(value, minDate, maxDate, maxDetail) {
+  if (!value) {
+    return null;
+  }
+
+  var rawValueTo = value instanceof Array ? value[1] : value;
+  var valueToDate = new Date(rawValueTo);
+
+  if (isNaN(valueToDate.getTime())) {
+    throw new Error('Invalid date: ' + value);
+  }
+
+  var valueTo = (0, _dates.getEnd)(getValueType(maxDetail), valueToDate);
+
+  return (0, _utils.between)(valueTo, minDate, maxDate);
+};
+
 var findPreviousInput = function findPreviousInput(element) {
@@ -104,4 +149,4 @@ var previousElement = element.previousElementSibling; // Divider between inputs
 
-var DateInput = function (_Component) {
-  _inherits(DateInput, _Component);
+var DateInput = function (_PureComponent) {
+  _inherits(DateInput, _PureComponent);
 
@@ -119,45 +164,3 @@ function DateInput() {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateInput.__proto__ || Object.getPrototypeOf(DateInput)).call.apply(_ref, [this].concat(args))), _this), _this.getValueFrom = function (value) {
-      if (!value) {
-        return null;
-      }
-
-      var _this$props = _this.props,
-          minDate = _this$props.minDate,
-          maxDate = _this$props.maxDate;
-
-      var rawValueFrom = value instanceof Array ? value[0] : value;
-      var valueFromDate = new Date(rawValueFrom);
-
-      if (isNaN(valueFromDate.getTime())) {
-        throw new Error('Invalid date: ' + value);
-      }
-
-      var valueFrom = (0, _dates.getBegin)(_this.valueType, valueFromDate);
-
-      return (0, _utils.between)(valueFrom, minDate, maxDate);
-    }, _this.getValueTo = function (value) {
-      if (!value) {
-        return null;
-      }
-
-      var _this$props2 = _this.props,
-          minDate = _this$props2.minDate,
-          maxDate = _this$props2.maxDate;
-
-      var rawValueTo = value instanceof Array ? value[1] : value;
-      var valueToDate = new Date(rawValueTo);
-
-      if (isNaN(valueToDate.getTime())) {
-        throw new Error('Invalid date: ' + value);
-      }
-
-      var valueTo = (0, _dates.getEnd)(_this.valueType, valueToDate);
-
-      return (0, _utils.between)(valueTo, minDate, maxDate);
-    }, _this.state = {
-      year: null,
-      month: null,
-      day: null
-    }, _this.onKeyDown = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateInput.__proto__ || Object.getPrototypeOf(DateInput)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onKeyDown = function (event) {
       switch (event.key) {
@@ -227,3 +230,7 @@ case 'ArrowLeft':
     value: function getProcessedValue(value) {
-      var returnValue = this.props.returnValue;
+      var _props = this.props,
+          minDate = _props.minDate,
+          maxDate = _props.maxDate,
+          maxDetail = _props.maxDetail,
+          returnValue = _props.returnValue;
 
@@ -233,5 +240,5 @@
         case 'start':
-          return this.getValueFrom(value);
+          return getValueFrom(value, minDate, maxDate, maxDetail);
         case 'end':
-          return this.getValueTo(value);
+          return getValueTo(value, minDate, maxDate, maxDetail);
         default:
@@ -241,60 +248,11 @@ throw new Error('Invalid returnValue.');
     }
-  }, {
-    key: 'componentWillMount',
-    value: function componentWillMount() {
-      this.updateValues();
-    }
-  }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var nextValue = nextProps.value;
-      var value = this.props.value;
 
+    // eslint-disable-next-line class-methods-use-this
 
-      if (
-      // Toggling calendar visibility resets values
-      nextProps.isCalendarOpen !== this.props.isCalendarOpen || datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueFrom))) || datesAreDifferent.apply(undefined, _toConsumableArray([nextValue, value].map(this.getValueTo)))) {
-        this.updateValues(nextProps);
-      }
-    }
-
-    /**
-     * Returns value type that can be returned with currently applied settings.
-     */
-
   }, {
-    key: 'updateValues',
-    value: function updateValues() {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
-
-      var value = this.getValueFrom(props.value);
-
-      this.setState({
-        year: value ? (0, _dates.getYear)(value) : null,
-        month: value ? (0, _dates.getMonth)(value) : null,
-        day: value ? (0, _dates.getDay)(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: 'renderDay',
     value: function renderDay() {
-      var _props = this.props,
-          maxDetail = _props.maxDetail,
-          showLeadingZeros = _props.showLeadingZeros;
+      var _props2 = this.props,
+          maxDetail = _props2.maxDetail,
+          showLeadingZeros = _props2.showLeadingZeros;
 
@@ -323,5 +281,5 @@ // Do not display if maxDetail is "year" or less
     value: function renderMonth() {
-      var _props2 = this.props,
-          maxDetail = _props2.maxDetail,
-          showLeadingZeros = _props2.showLeadingZeros;
+      var _props3 = this.props,
+          maxDetail = _props3.maxDetail,
+          showLeadingZeros = _props3.showLeadingZeros;
 
@@ -377,6 +335,4 @@ // Do not display if maxDetail is "decade" or less
         }
-      }).filter(Boolean).reduce(function (result, element, index, array) {
-        result.push(element);
-
-        if (index + 1 < array.length) {
+      }).filter(Boolean).reduce(function (result, element, index) {
+        if (index) {
           result.push(
@@ -391,2 +347,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+        result.push(element);
+
         return result;
@@ -421,12 +379,2 @@ }, []);
   }, {
-    key: 'valueType',
-    get: function get() {
-      var maxDetail = this.props.maxDetail;
-
-      return allValueTypes[allViews.indexOf(maxDetail)];
-    }
-
-    // eslint-disable-next-line class-methods-use-this
-
-  }, {
     key: 'divider',
@@ -473,6 +421,74 @@ get: function get() {
     }
+  }, {
+    key: 'valueType',
+    get: function get() {
+      return getValueType(this.props.maxDetail);
+    }
+
+    /**
+     * 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 minDate = nextProps.minDate,
+          maxDate = nextProps.maxDate,
+          maxDetail = nextProps.maxDetail;
+
+
+      var nextState = {};
+
+      /**
+       * If isCalendarOpen flag has changed, we have to update it.
+       * It's saved in state purely for use in getDerivedStateFromProps.
+       */
+      if (nextProps.isCalendarOpen !== prevState.isCalendarOpen) {
+        nextState.isCalendarOpen = nextProps.isCalendarOpen;
+      }
+
+      /**
+       * 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 = getValueFrom(nextProps.value, minDate, maxDate, maxDetail);
+      var values = [nextValue, prevState.value];
+      if (
+      // Toggling calendar visibility resets values
+      nextState.isCalendarOpen || // Flag was toggled
+      datesAreDifferent.apply(undefined, _toConsumableArray(values.map(function (value) {
+        return getValueFrom(value, minDate, maxDate, maxDetail);
+      }))) || datesAreDifferent.apply(undefined, _toConsumableArray(values.map(function (value) {
+        return getValueTo(value, minDate, maxDate, maxDetail);
+      })))) {
+        if (nextValue) {
+          nextState.year = (0, _dates.getYear)(nextValue);
+          nextState.month = (0, _dates.getMonth)(nextValue);
+          nextState.day = (0, _dates.getDay)(nextValue);
+        } else {
+          nextState.year = null;
+          nextState.month = null;
+          nextState.day = null;
+        }
+        nextState.value = nextValue;
+      }
+
+      return nextState;
+    }
   }]);
 
   return DateInput;
-}(_react.Component);
+}(_react.PureComponent);
 
@@ -501,2 +517,4 @@ exports.default = DateInput;
   value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.instanceOf(Date)])
-};
+};
+
+(0, _reactLifecyclesCompat2.default)(DateInput);

dist/DatePicker.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _reactLifecyclesCompat = require('react-lifecycles-compat');
+
+var _reactLifecyclesCompat2 = _interopRequireDefault(_reactLifecyclesCompat);
+
 var _mergeClassNames = require('merge-class-names');
@@ -62,5 +66,3 @@
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      isOpen: _this.props.isOpen
-    }, _this.onClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatePicker.__proto__ || Object.getPrototypeOf(DatePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onClick = function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
@@ -109,12 +111,2 @@ _this.closeCalendar();
   }, {
-    key: 'componentWillReceiveProps',
-    value: function componentWillReceiveProps(nextProps) {
-      var props = this.props;
-
-
-      if (nextProps.isOpen !== props.isOpen) {
-        this.setState({ isOpen: nextProps.isOpen });
-      }
-    }
-  }, {
     key: 'renderInputs',
@@ -245,2 +237,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;
+    }
   }]);
@@ -295,2 +299,4 @@
   showLeadingZeros: _propTypes2.default.bool
-});
+});
+
+(0, _reactLifecyclesCompat2.default)(DatePicker);

package.json

 {
   "name": "react-date-picker",
-  "version": "6.9.1",
+  "version": "6.10.0",
   "description": "A date picker for your React app.",
@@ -9,5 +9,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/DatePicker.less ./src/DatePicker.css",
+    "build-styles": "lessc ./dist/DatePicker.less ./dist/DatePicker.css",
     "copy-styles": "node ./copy-styles.js",
@@ -69,3 +69,4 @@ "prepublishOnly": "npm run build",
     "prop-types": "^15.6.0",
-    "react-calendar": "^2.13.4"
+    "react-calendar": "^2.14.0",
+    "react-lifecycles-compat": "^1.1.0"
   },
@@ -93,5 +94,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"
   },
@@ -98,0 +98,0 @@ "peerDependencies": {

README.md

@@ -1,2 +0,2 @@
-![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-date-picker.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg
+![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-date-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg
 ) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-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/DateInput.jsx

@@ -1,3 +0,4 @@
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import polyfill from 'react-lifecycles-compat';
 
@@ -31,2 +32,42 @@ import Divider from './Divider';
 
+/**
+ * Returns value type that can be returned with currently applied settings.
+ */
+const getValueType = maxDetail =>
+  allValueTypes[allViews.indexOf(maxDetail)];
+
+const getValueFrom = (value, minDate, maxDate, maxDetail) => {
+  if (!value) {
+    return null;
+  }
+
+  const rawValueFrom = value instanceof Array ? value[0] : value;
+  const valueFromDate = new Date(rawValueFrom);
+
+  if (isNaN(valueFromDate.getTime())) {
+    throw new Error(`Invalid date: ${value}`);
+  }
+
+  const valueFrom = getBegin(getValueType(maxDetail), valueFromDate);
+
+  return between(valueFrom, minDate, maxDate);
+};
+
+const getValueTo = (value, minDate, maxDate, maxDetail) => {
+  if (!value) {
+    return null;
+  }
+
+  const rawValueTo = value instanceof Array ? value[1] : value;
+  const valueToDate = new Date(rawValueTo);
+
+  if (isNaN(valueToDate.getTime())) {
+    throw new Error(`Invalid date: ${value}`);
+  }
+
+  const valueTo = getEnd(getValueType(maxDetail), valueToDate);
+
+  return between(valueTo, minDate, maxDate);
+};
+
 const findPreviousInput = (element) => {
@@ -66,39 +107,48 @@ const previousElement = element.previousElementSibling; // Divider between inputs
 
-export default class DateInput extends Component {
-  getValueFrom = (value) => {
-    if (!value) {
-      return null;
-    }
+export default class DateInput extends PureComponent {
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      minDate, maxDate, maxDetail,
+    } = nextProps;
 
-    const { minDate, maxDate } = this.props;
-    const rawValueFrom = value instanceof Array ? value[0] : value;
-    const valueFromDate = new Date(rawValueFrom);
+    const nextState = {};
 
-    if (isNaN(valueFromDate.getTime())) {
-      throw new Error(`Invalid date: ${value}`);
+    /**
+     * If isCalendarOpen flag has changed, we have to update it.
+     * It's saved in state purely for use in getDerivedStateFromProps.
+     */
+    if (nextProps.isCalendarOpen !== prevState.isCalendarOpen) {
+      nextState.isCalendarOpen = nextProps.isCalendarOpen;
     }
 
-    const valueFrom = getBegin(this.valueType, valueFromDate);
+    /**
+     * 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 = getValueFrom(nextProps.value, minDate, maxDate, maxDetail);
+    const values = [nextValue, prevState.value];
+    if (
+      // Toggling calendar visibility resets values
+      nextState.isCalendarOpen || // Flag was toggled
+      datesAreDifferent(...values.map(value => getValueFrom(value, minDate, maxDate, maxDetail))) ||
+      datesAreDifferent(...values.map(value => getValueTo(value, minDate, maxDate, maxDetail)))
+    ) {
+      if (nextValue) {
+        nextState.year = getYear(nextValue);
+        nextState.month = getMonth(nextValue);
+        nextState.day = getDay(nextValue);
+      } else {
+        nextState.year = null;
+        nextState.month = null;
+        nextState.day = null;
+      }
+      nextState.value = nextValue;
+    }
 
-    return between(valueFrom, minDate, maxDate);
+    return nextState;
   }
 
-  getValueTo = (value) => {
-    if (!value) {
-      return null;
-    }
+  state = {};
 
-    const { minDate, maxDate } = this.props;
-    const rawValueTo = value instanceof Array ? value[1] : value;
-    const valueToDate = new Date(rawValueTo);
-
-    if (isNaN(valueToDate.getTime())) {
-      throw new Error(`Invalid date: ${value}`);
-    }
-
-    const valueTo = getEnd(this.valueType, valueToDate);
-
-    return between(valueTo, minDate, maxDate);
-  }
-
   /**
@@ -108,9 +158,11 @@ * Gets current value in a desired format.
   getProcessedValue(value) {
-    const { returnValue } = this.props;
+    const {
+      minDate, maxDate, maxDetail, returnValue,
+    } = this.props;
 
     switch (returnValue) {
       case 'start':
-        return this.getValueFrom(value);
+        return getValueFrom(value, minDate, maxDate, maxDetail);
       case 'end':
-        return this.getValueTo(value);
+        return getValueTo(value, minDate, maxDate, maxDetail);
       default:
@@ -121,34 +173,2 @@ throw new Error('Invalid returnValue.');
 
-  state = {
-    year: null,
-    month: null,
-    day: null,
-  }
-
-  componentWillMount() {
-    this.updateValues();
-  }
-
-  componentWillReceiveProps(nextProps) {
-    const { value: nextValue } = nextProps;
-    const { value } = this.props;
-
-    if (
-      // Toggling calendar visibility resets values
-      (nextProps.isCalendarOpen !== this.props.isCalendarOpen) ||
-      datesAreDifferent(...[nextValue, value].map(this.getValueFrom)) ||
-      datesAreDifferent(...[nextValue, value].map(this.getValueTo))
-    ) {
-      this.updateValues(nextProps);
-    }
-  }
-
-  /**
-   * Returns value type that can be returned with currently applied settings.
-   */
-  get valueType() {
-    const { maxDetail } = this.props;
-    return allValueTypes[allViews.indexOf(maxDetail)];
-  }
-
   // eslint-disable-next-line class-methods-use-this
@@ -196,10 +216,4 @@ get divider() {
 
-  updateValues(props = this.props) {
-    const value = this.getValueFrom(props.value);
-
-    this.setState({
-      year: value ? getYear(value) : null,
-      month: value ? getMonth(value) : null,
-      day: value ? getDay(value) : null,
-    });
+  get valueType() {
+    return getValueType(this.props.maxDetail);
   }
@@ -349,6 +363,4 @@
         .filter(Boolean)
-        .reduce((result, element, index, array) => {
-          result.push(element);
-
-          if (index + 1 < array.length) {
+        .reduce((result, element, index) => {
+          if (index) {
             result.push(
@@ -362,2 +374,4 @@ // eslint-disable-next-line react/no-array-index-key
 
+          result.push(element);
+
           return result;
@@ -417,1 +431,3 @@ }, [])
 };
+
+polyfill(DateInput);

src/DatePicker.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import polyfill from 'react-lifecycles-compat';
 import mergeClassNames from 'merge-class-names';
@@ -11,6 +12,15 @@ import detectElementOverflow from 'detect-element-overflow';
 export default class DatePicker 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() {
@@ -24,10 +34,2 @@ document.addEventListener('mousedown', this.onClick);
 
-  componentWillReceiveProps(nextProps) {
-    const { props } = this;
-
-    if (nextProps.isOpen !== props.isOpen) {
-      this.setState({ isOpen: nextProps.isOpen });
-    }
-  }
-
   onClick = (event) => {
@@ -239,1 +241,3 @@ if (this.wrapper && !this.wrapper.contains(event.target)) {
 };
+
+polyfill(DatePicker);

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

109813

decreased by-0.1%

Dependency count

8

increased by14.29%

Number of package files

38

decreased by-2.56%

Lines of code

2574

decreased by-1.91%

Dependency changes

• + Addedreact-lifecycles-compat@^1.1.0

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

• Updatedreact-calendar@^2.14.0