@wojtekmaj/react-datetimerange-picker - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

dist/DateTimeRangePicker.js

@@ -74,3 +74,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateTimeRangePicker.__proto__ || Object.getPrototypeOf(DateTimeRangePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateTimeRangePicker.__proto__ || Object.getPrototypeOf(DateTimeRangePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onOutsideAction = function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
@@ -215,3 +215,4 @@ _this.closeWidgets();
     value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onClick);
+      document.addEventListener('mousedown', this.onOutsideAction);
+      document.addEventListener('focusin', this.onOutsideAction);
     }
@@ -221,3 +222,4 @@ }, {
     value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onClick);
+      document.removeEventListener('mousedown', this.onOutsideAction);
+      document.removeEventListener('focusin', this.onOutsideAction);
     }
@@ -432,2 +434,6 @@ }, {
           ref: function ref(_ref6) {
+            if (!_ref6) {
+              return;
+            }
+
             _this4.wrapper = _ref6;
@@ -434,0 +440,0 @@ }

package.json

 {
   "name": "@wojtekmaj/react-datetimerange-picker",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A datetime range picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

src/__tests__/DateTimeRangePicker.jsx

@@ -8,18 +8,2 @@ import React from 'react';
 
-const mockDocumentListeners = () => {
-  const eventMap = {};
-  document.addEventListener = jest.fn((method, cb) => {
-    if (!eventMap[method]) {
-      eventMap[method] = [];
-    }
-    eventMap[method].push(cb);
-  });
-
-  return {
-    simulate: (method, args) => {
-      eventMap[method].forEach(cb => cb(args));
-    },
-  };
-};
-
 describe('DateTimeRangePicker', () => {
@@ -148,3 +132,2 @@ it('passes default name to DateTimeInput', () => {
 
-
   it('does not render Clock component when given disableClock & isClockOpen flags', () => {
@@ -250,31 +233,101 @@ const component = mount(
 
-  it('closes Calendar and Clock component when clicked outside', () => {
-    const { simulate } = mockDocumentListeners();
+  it('closes Calendar component when clicked outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
 
     const component = mount(
-      <DateTimeRangePicker isCalendarOpen isClockOpen />
+      <DateTimeRangePicker isCalendarOpen />,
+      { attachTo: root }
     );
 
-    simulate('mousedown', {
-      target: document,
-    });
+    const event = document.createEvent('MouseEvent');
+    event.initEvent('mousedown', true, true);
+    document.body.dispatchEvent(event);
     component.update();
 
     expect(component.state('isCalendarOpen')).toBe(false);
+  });
+
+  it('closes Calendar component when focused outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const component = mount(
+      <DateTimeRangePicker isCalendarOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('FocusEvent');
+    event.initEvent('focusin', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
+    expect(component.state('isCalendarOpen')).toBe(false);
+  });
+
+  it('closes Clock component when clicked outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
+
+    const component = mount(
+      <DateTimeRangePicker isClockOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('MouseEvent');
+    event.initEvent('mousedown', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
     expect(component.state('isClockOpen')).toBe(false);
   });
 
-  it('does not close Calendar and Clock component when clicked inside', () => {
-    const { simulate } = mockDocumentListeners();
+  it('closes Clock component when focused outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
 
     const component = mount(
-      <DateTimeRangePicker isCalendarOpen isClockOpen />
+      <DateTimeRangePicker isClockOpen />,
+      { attachTo: root }
     );
 
-    simulate('mousedown', {
-      target: component.getDOMNode(),
-    });
+    const event = document.createEvent('FocusEvent');
+    event.initEvent('focusin', true, true);
+    document.body.dispatchEvent(event);
     component.update();
 
+    expect(component.state('isClockOpen')).toBe(false);
+  });
+
+  it('does not close Calendar component when focused within date inputs', () => {
+    const component = mount(
+      <DateTimeRangePicker isCalendarOpen />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+    const dayInput = customInputs.at(0);
+    const monthInput = customInputs.at(1);
+
+    dayInput.simulate('blur');
+    monthInput.simulate('focus');
+    component.update();
+
     expect(component.state('isCalendarOpen')).toBe(true);
+    expect(component.state('isClockOpen')).toBe(false);
+  });
+
+  it('does not close Clock component when focused within time inputs', () => {
+    const component = mount(
+      <DateTimeRangePicker isClockOpen />
+    );
+
+    const customInputs = component.find('input[type="number"]');
+    const hourInput = customInputs.at(3);
+    const minuteInput = customInputs.at(4);
+
+    hourInput.simulate('blur');
+    minuteInput.simulate('focus');
+    component.update();
+
+    expect(component.state('isCalendarOpen')).toBe(false);
     expect(component.state('isClockOpen')).toBe(true);
@@ -281,0 +334,0 @@ });

src/DateTimeRangePicker.jsx

@@ -39,10 +39,12 @@ import React, { PureComponent } from 'react';
   componentDidMount() {
-    document.addEventListener('mousedown', this.onClick);
+    document.addEventListener('mousedown', this.onOutsideAction);
+    document.addEventListener('focusin', this.onOutsideAction);
   }
 
   componentWillUnmount() {
-    document.removeEventListener('mousedown', this.onClick);
+    document.removeEventListener('mousedown', this.onOutsideAction);
+    document.removeEventListener('focusin', this.onOutsideAction);
   }
 
-  onClick = (event) => {
+  onOutsideAction = (event) => {
     if (this.wrapper && !this.wrapper.contains(event.target)) {
@@ -388,3 +390,9 @@ this.closeWidgets();
         onFocus={this.onFocus}
-        ref={(ref) => { this.wrapper = ref; }}
+        ref={(ref) => {
+          if (!ref) {
+            return;
+          }
+
+          this.wrapper = ref;
+        }}
       >
@@ -391,0 +399,0 @@ {this.renderInputs()}

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

63499

increased by3.64%

Lines of code

1294

increased by4.19%

No dependency changes