react-time-picker - npm Package Compare versions

Comparing version 3.2.0 to 3.3.0

dist/TimePicker.js

@@ -18,3 +18,3 @@ "use strict";
 
-var _detectElementOverflow = _interopRequireDefault(require("detect-element-overflow"));
+var _reactFit = _interopRequireDefault(require("react-fit"));
 
@@ -217,4 +217,2 @@ var _entry = _interopRequireDefault(require("react-clock/dist/entry.nostyle"));
     value: function renderClock() {
-      var _this2 = this;
-
       var disableClock = this.props.disableClock;
@@ -236,21 +234,4 @@ var isOpen = this.state.isOpen;
       var maxDetailIndex = allViews.indexOf(maxDetail);
-      return _react.default.createElement("div", {
-        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed')),
-        ref: function ref(_ref) {
-          if (!_ref || !isOpen) {
-            return;
-          }
-
-          _ref.classList.remove("".concat(className, "--above-label"));
-
-          var collisions = (0, _detectElementOverflow.default)(_ref, document.body);
-
-          if (collisions.collidedBottom) {
-            var overflowTopAfterChange = collisions.overflowTop + _ref.clientHeight + _this2.wrapper.clientHeight; // If it's going to make situation any better, display the calendar above the input
-
-            if (overflowTopAfterChange < collisions.overflowBottom) {
-              _ref.classList.add("".concat(className, "--above-label"));
-            }
-          }
-        }
+      return _react.default.createElement(_reactFit.default, null, _react.default.createElement("div", {
+        className: (0, _mergeClassNames.default)(className, "".concat(className, "--").concat(isOpen ? 'open' : 'closed'))
       }, _react.default.createElement(_entry.default, _extends({
@@ -260,3 +241,3 @@ className: clockClassName,
         renderSecondHand: maxDetailIndex > 1
-      }, clockProps)));
+      }, clockProps))));
     }
@@ -266,3 +247,3 @@ }, {
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
@@ -277,8 +258,8 @@ var _this$props4 = this.props,
         onFocus: this.onFocus,
-        ref: function ref(_ref2) {
-          if (!_ref2) {
+        ref: function ref(_ref) {
+          if (!_ref) {
             return;
           }
 
-          _this3.wrapper = _ref2;
+          _this2.wrapper = _ref;
         }
@@ -285,0 +266,0 @@ }), this.renderInputs(), this.renderClock());

package.json

 {
   "name": "react-time-picker",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "A time picker for your React app.",
@@ -15,3 +15,3 @@ "main": "dist/entry.js",
     "test": "yarn run test-eslint && yarn run test-jest",
-    "test-eslint": "eslint src/ test/ --ext .jsx,.js",
+    "test-eslint": "eslint sample/ src/ test/ --ext .jsx,.js",
     "test-jest": "jest",
@@ -41,3 +41,2 @@ "test-jest-coverage": "jest --coverage"
   "dependencies": {
-    "detect-element-overflow": "^1.1.1",
     "get-user-locale": "^1.1.1",
@@ -48,2 +47,3 @@ "make-event-props": "^1.1.0",
     "react-clock": "^2.3.0",
+    "react-fit": "^1.0.3",
     "react-lifecycles-compat": "^3.0.4"
@@ -57,5 +57,4 @@ },
     "@babel/preset-react": "^7.0.0",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^24.0.0",
     "enzyme": "^3.8.0",
@@ -68,4 +67,3 @@ "enzyme-adapter-react-16": "^1.7.1",
     "eslint-plugin-react": "^7.11.1",
-    "jest": "^23.6.0",
-    "jest-cli": "^23.6.0",
+    "jest": "^24.0.0",
     "less": "^3.8.1",
@@ -72,0 +70,0 @@ "react": "^16.7.0",

src/TimePicker.jsx

@@ -6,3 +6,3 @@ import React, { PureComponent } from 'react';
 import mergeClassNames from 'merge-class-names';
-import detectElementOverflow from 'detect-element-overflow';
+import Fit from 'react-fit';
 
@@ -181,35 +181,12 @@ import Clock from 'react-clock/dist/entry.nostyle';
     return (
-      <div
-        className={mergeClassNames(
-          className,
-          `${className}--${isOpen ? 'open' : 'closed'}`,
-        )}
-        ref={(ref) => {
-          if (!ref || !isOpen) {
-            return;
-          }
-
-          ref.classList.remove(`${className}--above-label`);
-
-          const collisions = detectElementOverflow(ref, document.body);
-
-          if (collisions.collidedBottom) {
-            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`);
-            }
-          }
-        }}
-      >
-        <Clock
-          className={clockClassName}
-          renderMinuteHand={maxDetailIndex > 0}
-          renderSecondHand={maxDetailIndex > 1}
-          {...clockProps}
-        />
-      </div>
+      <Fit>
+        <div className={mergeClassNames(className, `${className}--${isOpen ? 'open' : 'closed'}`)}>
+          <Clock
+            className={clockClassName}
+            renderMinuteHand={maxDetailIndex > 0}
+            renderSecondHand={maxDetailIndex > 1}
+            {...clockProps}
+          />
+        </div>
+      </Fit>
     );
@@ -216,0 +193,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

Dev dependency count

20

decreased by-9.09%

Worsened metrics

Total package byte prevSize

173386

decreased by-0.95%

Lines of code

4344

decreased by-0.84%

Dependency changes

• + Addedreact-fit@^1.0.3

• + Addedreact-fit@1.7.1(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• - Removeddetect-element-overflow@^1.1.1