react-tiny-popover - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.d.ts

@@ -17,3 +17,2 @@ import * as React from 'react';
     position?: Position | Position[];
-    arrow?: boolean;
 }
@@ -20,0 +19,0 @@

dist/index.js

@@ -89,2 +89,3 @@ (function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap
     DEFAULT_PADDING: 6,
+    FADE_TRANSITION_MS: 300,
 };
@@ -149,5 +150,7 @@
                 if (isOpen) {
-                    if (!this.popoverDiv) {
+                    if (!this.popoverDiv || !this.popoverDiv.parentNode) {
                         window.addEventListener('resize', this.onResize);
-                        this.popoverDiv = this.createNonVisibleContainer();
+                        this.popoverDiv = this.createContainer();
+                        this.popoverDiv.style.opacity = '0';
+                        this.popoverDiv.style.transition = "opacity " + util_1.Constants.FADE_TRANSITION_MS / 1000 + "s";
                         window.document.body.appendChild(this.popoverDiv);
@@ -181,3 +184,5 @@ }
                 _this.popoverDiv.style.top = top_1.toFixed() + "px";
-                _this.popoverDiv.style.visibility = 'visible';
+                if (_this.popoverDiv.style.opacity !== '1') {
+                    _this.popoverDiv.style.opacity = '1';
+                }
                 _this.startTargetPositionListener(10);
@@ -228,8 +233,13 @@ }
     Popover.prototype.hidePopover = function () {
+        var _this = this;
         if (this.popoverDiv) {
-            window.clearInterval(this.targetPositionIntervalHandler);
-            window.removeEventListener('resize', this.onResize);
-            this.targetPositionIntervalHandler = null;
-            this.popoverDiv.remove();
-            this.popoverDiv = null;
+            this.popoverDiv.style.opacity = '0';
+            window.setTimeout(function () {
+                if (!_this.props.isOpen || !_this.popoverDiv.parentNode) {
+                    window.clearInterval(_this.targetPositionIntervalHandler);
+                    window.removeEventListener('resize', _this.onResize);
+                    _this.targetPositionIntervalHandler = null;
+                    _this.popoverDiv.remove();
+                }
+            }, util_1.Constants.FADE_TRANSITION_MS);
         }
@@ -253,3 +263,3 @@ };
     };
-    Popover.prototype.createNonVisibleContainer = function () {
+    Popover.prototype.createContainer = function () {
         var container = window.document.createElement('div');
@@ -260,3 +270,2 @@ container.className = util_1.Constants.POPOVER_CLASS_NAME;
         container.style.left = '0';
-        container.style.visibility = 'hidden';
         return container;
@@ -300,3 +309,2 @@ };
         position: [util_1.Position.Top, util_1.Position.Right, util_1.Position.Left, util_1.Position.Bottom],
-        arrow: true,
     };
@@ -303,0 +311,0 @@ return Popover;

package.json

 {
   "name": "react-tiny-popover",
-  "version": "1.0.0",
+  "version": "1.0.1",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alexkatz/react-tiny-popover.git"
+  },
   "main": "dist/index.js",
@@ -5,0 +9,0 @@ "types": "dist/index.d.ts",

Fixed alerts

No README

Quality

Package does not have a README. This may indicate a failed publish or a low quality package.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49353

increased by17.54%

Number of package files

6

increased by20%

Lines of code

388

increased by1.84%

Number of medium quality alerts

0

decreased by-100%

Number of lines in readme file

106

increased byInfinity%

Number of low supply chain risk alerts

0

decreased by-100%

No dependency changes