react-datetime-picker - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

dist/DateTimePicker.js

@@ -59,11 +59,13 @@ "use strict";
     _defineProperty(_assertThisInitialized(_this), "wrapper", /*#__PURE__*/(0, _react.createRef)());
-    _defineProperty(_assertThisInitialized(_this), "widgetWrapper", /*#__PURE__*/(0, _react.createRef)());
+    _defineProperty(_assertThisInitialized(_this), "calendarWrapper", /*#__PURE__*/(0, _react.createRef)());
+    _defineProperty(_assertThisInitialized(_this), "clockWrapper", /*#__PURE__*/(0, _react.createRef)());
     _defineProperty(_assertThisInitialized(_this), "onOutsideAction", function (event) {
       var _assertThisInitialize = _assertThisInitialized(_this),
         wrapper = _assertThisInitialize.wrapper,
-        widgetWrapper = _assertThisInitialize.widgetWrapper;
+        calendarWrapper = _assertThisInitialize.calendarWrapper,
+        clockWrapper = _assertThisInitialize.clockWrapper;
 
       // Try event.composedPath first to handle clicks inside a Shadow DOM.
       var target = 'composedPath' in event ? event.composedPath()[0] : event.target;
-      if (wrapper.current && !wrapper.current.contains(target) && (!widgetWrapper.current || !widgetWrapper.current.contains(target))) {
+      if (wrapper.current && !wrapper.current.contains(target) && (!calendarWrapper.current || !calendarWrapper.current.contains(target)) && (!clockWrapper.current || !clockWrapper.current.contains(target))) {
         _this.closeWidgets();
@@ -131,11 +133,21 @@ }
     _defineProperty(_assertThisInitialized(_this), "openClock", function () {
-      _this.setState({
-        isCalendarOpen: false,
-        isClockOpen: true
+      _this.setState(function (prevState) {
+        var nextState = {
+          isClockOpen: true
+        };
+        if (prevState.isCalendarOpen) {
+          nextState.isCalendarOpen = false;
+        }
+        return nextState;
       });
     });
     _defineProperty(_assertThisInitialized(_this), "openCalendar", function () {
-      _this.setState({
-        isCalendarOpen: true,
-        isClockOpen: false
+      _this.setState(function (prevState) {
+        var nextState = {
+          isCalendarOpen: true
+        };
+        if (prevState.isClockOpen) {
+          nextState.isClockOpen = false;
+        }
+        return nextState;
       });
@@ -145,6 +157,9 @@ });
       _this.setState(function (prevState) {
-        return {
-          isCalendarOpen: !prevState.isCalendarOpen,
-          isClockOpen: false
+        var nextState = {
+          isCalendarOpen: !prevState.isCalendarOpen
         };
+        if (prevState.isClockOpen) {
+          nextState.isClockOpen = false;
+        }
+        return nextState;
       });
@@ -154,9 +169,10 @@ });
       _this.setState(function (prevState) {
-        if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
-          return null;
+        var nextState = {};
+        if (prevState.isCalendarOpen) {
+          nextState.isCalendarOpen = false;
         }
-        return {
-          isCalendarOpen: false,
-          isClockOpen: false
-        };
+        if (prevState.isClockOpen) {
+          nextState.isClockOpen = false;
+        }
+        return nextState;
       });
@@ -348,3 +364,3 @@ });
       return portalContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement("div", {
-        ref: this.widgetWrapper,
+        ref: this.calendarWrapper,
         className: classNames
@@ -389,3 +405,3 @@ }, calendar), portalContainer) : /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {
       return portalContainer ? /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/_react["default"].createElement("div", {
-        ref: this.widgetWrapper,
+        ref: this.clockWrapper,
         className: classNames
@@ -392,0 +408,0 @@ }, clock), portalContainer) : /*#__PURE__*/_react["default"].createElement(_reactFit["default"], null, /*#__PURE__*/_react["default"].createElement("div", {

package.json

 {
   "name": "react-datetime-picker",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "A date range picker for your React app.",
@@ -5,0 +5,0 @@ "main": "dist/entry.js",

src/DateTimePicker.jsx

@@ -40,4 +40,6 @@ import React, { createRef, PureComponent } from 'react';
 
-  widgetWrapper = createRef();
+  calendarWrapper = createRef();
 
+  clockWrapper = createRef();
+
   componentDidMount() {
@@ -78,3 +80,3 @@ this.handleOutsideActionListeners();
   onOutsideAction = (event) => {
-    const { wrapper, widgetWrapper } = this;
+    const { wrapper, calendarWrapper, clockWrapper } = this;
 
@@ -87,3 +89,4 @@ // Try event.composedPath first to handle clicks inside a Shadow DOM.
       !wrapper.current.contains(target) &&
-      (!widgetWrapper.current || !widgetWrapper.current.contains(target))
+      (!calendarWrapper.current || !calendarWrapper.current.contains(target)) &&
+      (!clockWrapper.current || !clockWrapper.current.contains(target))
     ) {
@@ -165,5 +168,10 @@ this.closeWidgets();
   openClock = () => {
-    this.setState({
-      isCalendarOpen: false,
-      isClockOpen: true,
+    this.setState((prevState) => {
+      const nextState = { isClockOpen: true };
+
+      if (prevState.isCalendarOpen) {
+        nextState.isCalendarOpen = false;
+      }
+
+      return nextState;
     });
@@ -173,5 +181,10 @@ };
   openCalendar = () => {
-    this.setState({
-      isCalendarOpen: true,
-      isClockOpen: false,
+    this.setState((prevState) => {
+      const nextState = { isCalendarOpen: true };
+
+      if (prevState.isClockOpen) {
+        nextState.isClockOpen = false;
+      }
+
+      return nextState;
     });
@@ -181,6 +194,11 @@ };
   toggleCalendar = () => {
-    this.setState((prevState) => ({
-      isCalendarOpen: !prevState.isCalendarOpen,
-      isClockOpen: false,
-    }));
+    this.setState((prevState) => {
+      const nextState = { isCalendarOpen: !prevState.isCalendarOpen };
+
+      if (prevState.isClockOpen) {
+        nextState.isClockOpen = false;
+      }
+
+      return nextState;
+    });
   };
@@ -190,10 +208,13 @@
     this.setState((prevState) => {
-      if (!prevState.isCalendarOpen && !prevState.isClockOpen) {
-        return null;
+      const nextState = {};
+
+      if (prevState.isCalendarOpen) {
+        nextState.isCalendarOpen = false;
       }
 
-      return {
-        isCalendarOpen: false,
-        isClockOpen: false,
-      };
+      if (prevState.isClockOpen) {
+        nextState.isClockOpen = false;
+      }
+
+      return nextState;
     });
@@ -357,3 +378,3 @@ };
       createPortal(
-        <div ref={this.widgetWrapper} className={classNames}>
+        <div ref={this.calendarWrapper} className={classNames}>
           {calendar}
@@ -416,3 +437,3 @@ </div>,
       createPortal(
-        <div ref={this.widgetWrapper} className={classNames}>
+        <div ref={this.clockWrapper} className={classNames}>
           {clock}
@@ -419,0 +440,0 @@ </div>,

src/DateTimePicker.spec.jsx

 import React, { createRef } from 'react';
-import { fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, fireEvent, render, waitForElementToBeRemoved } from '@testing-library/react';
 
@@ -524,5 +524,7 @@ import DateTimePicker from './DateTimePicker';
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date());
+    act(() => {
+      onChangeInternal(new Date());
+    });
 
@@ -539,5 +541,7 @@ waitForElementToBeRemoved(() => container.querySelector('.react-calendar'));
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date());
+    act(() => {
+      onChangeInternal(new Date());
+    });
 
@@ -554,5 +558,7 @@ const calendar = container.querySelector('.react-calendar');
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date(), false);
+    act(() => {
+      onChangeInternal(new Date(), false);
+    });
 
@@ -569,5 +575,7 @@ const calendar = container.querySelector('.react-calendar');
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date());
+    act(() => {
+      onChangeInternal(new Date());
+    });
 
@@ -584,5 +592,7 @@ waitForElementToBeRemoved(() => container.querySelector('.react-clock'));
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date());
+    act(() => {
+      onChangeInternal(new Date());
+    });
 
@@ -599,5 +609,7 @@ const clock = container.querySelector('.react-clock');
 
-    const { onChange } = instance.current;
+    const { onChange: onChangeInternal } = instance.current;
 
-    onChange(new Date(), false);
+    act(() => {
+      onChangeInternal(new Date(), false);
+    });
 
@@ -618,3 +630,5 @@ const clock = container.querySelector('.react-clock');
 
-    onChangeInternal(nextValue);
+    act(() => {
+      onChangeInternal(nextValue);
+    });
 
@@ -642,5 +656,7 @@ expect(onChange).toHaveBeenCalledWith(nextValue);
 
-    const { onDateChange } = instance.current;
+    const { onDateChange: onDateChangeInternal } = instance.current;
 
-    onDateChange(nextValue);
+    act(() => {
+      onDateChangeInternal(nextValue);
+    });
 
@@ -647,0 +663,0 @@ expect(onChange).toHaveBeenCalledWith(new Date(2019, 0, 1, hours, minutes, seconds, ms));

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

225634

increased by0.71%

Lines of code

4542

increased by0.98%

No dependency changes