react-date-picker - npm Package Compare versions

Comparing version 8.1.1 to 8.2.0

dist/DatePicker.js

@@ -116,3 +116,4 @@ "use strict";
           disabled = _this$props.disabled,
-          onFocus = _this$props.onFocus;
+          onFocus = _this$props.onFocus,
+          openCalendarOnFocus = _this$props.openCalendarOnFocus;
 
@@ -128,3 +129,5 @@ if (onFocus) {
 
-      _this.openCalendar();
+      if (openCalendarOnFocus) {
+        _this.openCalendar();
+      }
     });
@@ -404,2 +407,3 @@
   isOpen: null,
+  openCalendarOnFocus: true,
   returnValue: 'start'
@@ -437,2 +441,3 @@ };
   onFocus: _propTypes["default"].func,
+  openCalendarOnFocus: _propTypes["default"].bool,
   required: _propTypes["default"].bool,
@@ -439,0 +444,0 @@ returnValue: _propTypes["default"].oneOf(['start', 'end', 'range']),

index.d.ts

@@ -24,2 +24,3 @@ import { CalendarProps } from "react-calendar";
     onCalendarOpen?: () => void;
+    openCalendarOnFocus?: boolean;
     required?: boolean;
@@ -26,0 +27,0 @@ showLeadingZeros?: boolean;

package.json

 {
   "name": "react-date-picker",
-  "version": "8.1.1",
+  "version": "8.2.0",
   "description": "A date picker for your React app.",
@@ -71,2 +71,6 @@ "main": "dist/entry.js",
       "email": "[e-mail]"
+    },
+    {
+      "name": "Matt Gandley",
+      "email": "[e-mail]"
     }
@@ -73,0 +77,0 @@ ],

README.md

@@ -111,2 +111,3 @@ [![npm](https://img.shields.io/npm/v/react-date-picker.svg)](https://www.npmjs.com/package/react-date-picker) ![downloads](https://img.shields.io/npm/dt/react-date-picker.svg) [![CI](https://github.com/wojtekmaj/react-date-picker/workflows/CI/badge.svg)](https://github.com/wojtekmaj/react-date-picker/actions) ![dependencies](https://img.shields.io/david/wojtekmaj/react-date-picker.svg) ![dev dependencies](https://img.shields.io/david/dev/wojtekmaj/react-date-picker.svg) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
 |onChange|Function called when the user clicks an item on the most detailed view available.|n/a|`(value) => alert('New date is: ', value)`|
+|openCalendarOnFocus|Whether to open the calendar on input focus.|`true`|`false`|
 |required|Whether date input should be required.|`false`|`true`|
@@ -113,0 +114,0 @@ |returnValue|Which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be `"start"`, `"end"` or `"range"`. The latter will cause an array with start and end values to be passed.|`"start"`|`"range"`|

src/DatePicker.jsx

@@ -73,3 +73,3 @@ import React, { PureComponent } from 'react';
   onFocus = (event) => {
-    const { disabled, onFocus } = this.props;
+    const { disabled, onFocus, openCalendarOnFocus } = this.props;
 
@@ -85,3 +85,5 @@ if (onFocus) {
 
-    this.openCalendar();
+    if (openCalendarOnFocus) {
+      this.openCalendar();
+    }
   }
@@ -309,2 +311,3 @@
   isOpen: null,
+  openCalendarOnFocus: true,
   returnValue: 'start',
@@ -351,2 +354,3 @@ };
   onFocus: PropTypes.func,
+  openCalendarOnFocus: PropTypes.bool,
   required: PropTypes.bool,
@@ -353,0 +357,0 @@ returnValue: PropTypes.oneOf(['start', 'end', 'range']),

src/DatePicker.spec.jsx

@@ -249,18 +249,56 @@ import React from 'react';
 
-  it('opens Calendar component when focusing on an input inside', () => {
-    const component = mount(
-      <DatePicker />,
-    );
+  describe('handles opening Calendar component when focusing on an input inside properly', () => {
+    it('opens Calendar component when focusing on an input inside by default', () => {
+      const component = mount(
+        <DatePicker />,
+      );
 
-    const calendar = component.find('Calendar');
-    const input = component.find('input[name="day"]');
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
 
-    expect(calendar).toHaveLength(0);
+      expect(calendar).toHaveLength(0);
 
-    input.simulate('focus');
-    component.update();
+      input.simulate('focus');
+      component.update();
 
-    const calendar2 = component.find('Calendar');
+      const calendar2 = component.find('Calendar');
 
-    expect(calendar2).toHaveLength(1);
+      expect(calendar2).toHaveLength(1);
+    });
+
+    it('opens Calendar component when focusing on an input inside given openCalendarOnFocus = true', () => {
+      const component = mount(
+        <DatePicker openCalendarOnFocus />,
+      );
+
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
+
+      expect(calendar).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const calendar2 = component.find('Calendar');
+
+      expect(calendar2).toHaveLength(1);
+    });
+
+    it('does not open Calendar component when focusing on an input inside given openCalendarOnFocus = false', () => {
+      const component = mount(
+        <DatePicker openCalendarOnFocus={false} />,
+      );
+
+      const calendar = component.find('Calendar');
+      const input = component.find('input[name="day"]');
+
+      expect(calendar).toHaveLength(0);
+
+      input.simulate('focus');
+      component.update();
+
+      const calendar2 = component.find('Calendar');
+
+      expect(calendar2).toHaveLength(0);
+    });
   });
@@ -267,0 +305,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

212097

increased by0.8%

Lines of code

5327

increased by0.68%

Number of lines in readme file

161

increased by0.63%

No dependency changes