react-datetime-picker - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

dist/DateTimePicker.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _makeEventProps = require('make-event-props');
+
+var _makeEventProps2 = _interopRequireDefault(_makeEventProps);
+
 var _mergeClassNames = require('merge-class-names');
@@ -107,6 +111,12 @@
     }, _this.onFocus = function (event) {
-      var disabled = _this.props.disabled;
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          onFocus = _this$props.onFocus;
 
+
+      if (onFocus) {
+        onFocus(event);
+      }
+
       // Internet Explorer still fires onFocus on disabled elements
-
       if (disabled) {
@@ -135,7 +145,2 @@ return;
       });
-    }, _this.closeWidgets = function () {
-      _this.setState({
-        isCalendarOpen: false,
-        isClockOpen: false
-      });
     }, _this.openCalendar = function () {
@@ -146,4 +151,2 @@ _this.setState({
       });
-    }, _this.closeCalendar = function () {
-      _this.setState({ isCalendarOpen: false });
     }, _this.toggleCalendar = function () {
@@ -156,2 +159,13 @@ _this.setState(function (prevState) {
       });
+    }, _this.closeWidgets = function () {
+      _this.setState(function (prevState) {
+        if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
+          return null;
+        }
+
+        return {
+          isCalendarOpen: false,
+          isClockOpen: false
+        };
+      });
     }, _this.stopPropagation = function (event) {
@@ -345,4 +359,5 @@ return event.stopPropagation();
         'div',
-        {
-          className: (0, _mergeClassNames2.default)(baseClassName, baseClassName + '--' + (isCalendarOpen || isClockOpen ? 'open' : 'closed'), baseClassName + '--' + (disabled ? 'disabled' : 'enabled'), className),
+        _extends({
+          className: (0, _mergeClassNames2.default)(baseClassName, baseClassName + '--' + (isCalendarOpen || isClockOpen ? 'open' : 'closed'), baseClassName + '--' + (disabled ? 'disabled' : 'enabled'), className)
+        }, this.eventProps, {
           onFocus: this.onFocus,
@@ -352,3 +367,3 @@ ref: function ref(_ref4) {
           }
-        },
+        }),
         this.renderInputs(),
@@ -359,2 +374,7 @@ this.renderCalendar(),
     }
+  }, {
+    key: 'eventProps',
+    get: function get() {
+      return (0, _makeEventProps2.default)(this.props);
+    }
   }], [{
@@ -361,0 +381,0 @@ key: 'getDerivedStateFromProps',

package.json

 {
   "name": "react-datetime-picker",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "A date range picker for your React app.",
@@ -47,9 +47,10 @@ "main": "dist/entry.js",
     "get-user-locale": "^1.1.1",
+    "make-event-props": "^1.1.0",
     "merge-class-names": "^1.1.1",
     "prop-types": "^15.6.0",
-    "react-calendar": "^2.17.3",
+    "react-calendar": "^2.17.4",
     "react-clock": "^2.3.0",
-    "react-date-picker": "^6.12.1",
+    "react-date-picker": "^6.13.0",
     "react-lifecycles-compat": "^3.0.4",
-    "react-time-picker": "^2.7.2"
+    "react-time-picker": "^2.8.0"
   },
@@ -56,0 +57,0 @@ "devDependencies": {

README.md

@@ -92,5 +92,5 @@ ![downloads](https://img.shields.io/npm/dt/react-datetime-picker.svg) ![build](https://img.shields.io/travis/wojtekmaj/react-datetime-picker/master.svg) ![dependencies](https://img.shields.io/david/wojtekmaj/react-datetime-picker.svg
 |clockClassName|Defines class name(s) that will be added along with "react-clock" to the main React-Calendar `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|calendarIcon|Defines the content of the calendar button.|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
+|calendarIcon|Defines the content of the calendar button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Calendar"`</li><li>React element: `<CalendarIcon />`</li></ul>|
 |className|Defines class name(s) that will be added along with "react-datetime-picker" to the main React-DateTime-Picker `<div>` element.|<ul><li>String: `"class1 class2"`</li><li>Array of strings: `["class1", "class2 class3"]`</li></ul>|
-|clearIcon|Defines the content of the clear button.|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
+|clearIcon|Defines the content of the clear button. Setting the value explicitly to `null` will hide the icon.|<ul><li>String: `"Clear"`</li><li>React element: `<ClearIcon />`</li></ul>|
 |disabled|Defines whether the date picker should be disabled. Defaults to false.|`true`|
@@ -97,0 +97,0 @@ |disableClock|Defines whether the clock should be disabled. Defaults to false.|`true`|

src/__tests__/DateTimePicker.jsx

@@ -25,3 +25,13 @@ import React from 'react';
 describe('DateTimePicker', () => {
-  it('passes name to DateTimeInput', () => {
+  it('passes default name to DateTimeInput', () => {
+    const component = mount(
+      <DateTimePicker />
+    );
+
+    const dateTimeInput = component.find('DateTimeInput');
+
+    expect(dateTimeInput.prop('name')).toBe('datetime');
+  });
+
+  it('passes custom name to DateTimeInput', () => {
     const name = 'testName';
@@ -28,0 +38,0 @@

src/DateTimePicker.jsx

 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { polyfill } from 'react-lifecycles-compat';
+import makeEventProps from 'make-event-props';
 import mergeClassNames from 'merge-class-names';
@@ -35,2 +36,6 @@ import detectElementOverflow from 'detect-element-overflow';
 
+  get eventProps() {
+    return makeEventProps(this.props);
+  }
+
   componentDidMount() {
@@ -85,4 +90,8 @@ document.addEventListener('mousedown', this.onClick);
   onFocus = (event) => {
-    const { disabled } = this.props;
+    const { disabled, onFocus } = this.props;
 
+    if (onFocus) {
+      onFocus(event);
+    }
+
     // Internet Explorer still fires onFocus on disabled elements
@@ -116,9 +125,2 @@ if (disabled) {
 
-  closeWidgets = () => {
-    this.setState({
-      isCalendarOpen: false,
-      isClockOpen: false,
-    });
-  }
-
   openCalendar = () => {
@@ -131,6 +133,2 @@ this.setState({
 
-  closeCalendar = () => {
-    this.setState({ isCalendarOpen: false });
-  }
-
   toggleCalendar = () => {
@@ -143,2 +141,15 @@ this.setState(prevState => ({
 
+  closeWidgets = () => {
+    this.setState((prevState) => {
+      if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
+        return null;
+      }
+
+      return {
+        isCalendarOpen: false,
+        isClockOpen: false,
+      };
+    });
+  }
+
   stopPropagation = event => event.stopPropagation();
@@ -320,2 +331,3 @@
         )}
+        {...this.eventProps}
         onFocus={this.onFocus}
@@ -322,0 +334,0 @@ ref={(ref) => { this.wrapper = ref; }}

No alert changes

Improved metrics

Total package byte prevSize

126075

increased by0.82%

Lines of code

3185

increased by1.05%

Worsened metrics

Dependency count

12

increased by9.09%

Dependency changes

• + Addedmake-event-props@^1.1.0

• Updatedreact-calendar@^2.17.4

• Updatedreact-date-picker@^6.13.0

• Updatedreact-time-picker@^2.8.0