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

Comparing version 2.0.0 to 2.0.1

dist/DateRangePicker.js

@@ -69,3 +69,3 @@ 'use strict';
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateRangePicker.__proto__ || Object.getPrototypeOf(DateRangePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onClick = function (event) {
+    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DateRangePicker.__proto__ || Object.getPrototypeOf(DateRangePicker)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.onOutsideAction = function (event) {
       if (_this.wrapper && !_this.wrapper.contains(event.target)) {
@@ -144,3 +144,4 @@ _this.closeCalendar();
     value: function componentDidMount() {
-      document.addEventListener('mousedown', this.onClick);
+      document.addEventListener('mousedown', this.onOutsideAction);
+      document.addEventListener('focusin', this.onOutsideAction);
     }
@@ -150,3 +151,4 @@ }, {
     value: function componentWillUnmount() {
-      document.removeEventListener('mousedown', this.onClick);
+      document.removeEventListener('mousedown', this.onOutsideAction);
+      document.removeEventListener('focusin', this.onOutsideAction);
     }
@@ -231,2 +233,4 @@ }, {
     value: function renderCalendar() {
+      var _this2 = this;
+
       var isOpen = this.state.isOpen;
@@ -253,3 +257,3 @@
           ref: function ref(_ref2) {
-            if (!_ref2) {
+            if (!_ref2 || !isOpen) {
               return;
@@ -263,3 +267,8 @@ }
             if (collisions.collidedBottom) {
-              _ref2.classList.add(className + '--above-label');
+              var overflowTopAfterChange = collisions.overflowTop + _ref2.clientHeight + _this2.wrapper.clientHeight;
+
+              // If it's going to make situation any better, display the calendar above the input
+              if (overflowTopAfterChange < collisions.overflowBottom) {
+                _ref2.classList.add(className + '--above-label');
+              }
             }
@@ -279,3 +288,3 @@ }
     value: function render() {
-      var _this2 = this;
+      var _this3 = this;
 
@@ -295,3 +304,7 @@ var _props3 = this.props,
           ref: function ref(_ref3) {
-            _this2.wrapper = _ref3;
+            if (!_ref3) {
+              return;
+            }
+
+            _this3.wrapper = _ref3;
           }
@@ -298,0 +311,0 @@ }),

package.json

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

src/__tests__/DateRangePicker.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('DateRangePicker', () => {
@@ -173,12 +157,15 @@ it('passes default name to DateInput', () => {
 
+
   it('closes Calendar component when clicked outside', () => {
-    const { simulate } = mockDocumentListeners();
+    const root = document.createElement('div');
+    document.body.appendChild(root);
 
     const component = mount(
-      <DateRangePicker isOpen />
+      <DateRangePicker isOpen />,
+      { attachTo: root }
     );
 
-    simulate('mousedown', {
-      target: document,
-    });
+    const event = document.createEvent('MouseEvent');
+    event.initEvent('mousedown', true, true);
+    document.body.dispatchEvent(event);
     component.update();
@@ -189,12 +176,30 @@
 
-  it('does not close Calendar component when clicked inside', () => {
-    const { simulate } = mockDocumentListeners();
+  it('closes Calendar component when focused outside', () => {
+    const root = document.createElement('div');
+    document.body.appendChild(root);
 
     const component = mount(
+      <DateRangePicker isOpen />,
+      { attachTo: root }
+    );
+
+    const event = document.createEvent('FocusEvent');
+    event.initEvent('focusin', true, true);
+    document.body.dispatchEvent(event);
+    component.update();
+
+    expect(component.state('isOpen')).toBe(false);
+  });
+
+  it('does not close Calendar component when focused inside', () => {
+    const component = mount(
       <DateRangePicker isOpen />
     );
 
-    simulate('mousedown', {
-      target: component.getDOMNode(),
-    });
+    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();
@@ -201,0 +206,0 @@

src/DateRangePicker.jsx

@@ -32,10 +32,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)) {
@@ -204,3 +206,3 @@ this.closeCalendar();
         ref={(ref) => {
-          if (!ref) {
+          if (!ref || !isOpen) {
             return;
@@ -214,3 +216,10 @@ }
           if (collisions.collidedBottom) {
-            ref.classList.add(`${className}--above-label`);
+            const overflowTopAfterChange = (
+              collisions.overflowTop + ref.clientHeight + this.wrapper.clientHeight
+            );
+
+            // If it's going to make situation any better, display the calendar above the input
+            if (overflowTopAfterChange < collisions.overflowBottom) {
+              ref.classList.add(`${className}--above-label`);
+            }
           }
@@ -244,3 +253,9 @@ }}
         onFocus={this.onFocus}
-        ref={(ref) => { this.wrapper = ref; }}
+        ref={(ref) => {
+          if (!ref) {
+            return;
+          }
+
+          this.wrapper = ref;
+        }}
       >
@@ -247,0 +262,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

48551

increased by3.19%

Lines of code

934

increased by2.75%

No dependency changes