react-cool-portal - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

dist/index.esm.js

@@ -1,1 +0,1 @@
-import{useState as n,useEffect as t,useRef as e,useCallback as r,useMemo as o}from"react";import{createPortal as i}from"react-dom";function u(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){if(!(Symbol.iterator in Object(n)||"[object Arguments]"===Object.prototype.toString.call(n)))return;var e=[],r=!0,o=!1,i=void 0;try{for(var u,c=n[Symbol.iterator]();!(r=(u=c.next()).done)&&(e.push(u.value),!t||e.length!==t);r=!0);}catch(n){o=!0,i=n}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return e}(n,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var c=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,e=setTimeout((function(){clearTimeout(e),n()}),t)},a=function(e,r,o,a){return function(d){var f=d.children,l=u(n(null),2),v=l[0],m=l[1];return t((function(){return m(document.getElementById(e)||function(n){var t=document.createElement("div");return t.setAttribute("id",n),document.body.appendChild(t),t}(e)),function(){v&&c((function(){""===v.innerHTML&&v.remove()}))}}),[v]),t((function(){if(o&&a&&r&&v){var n=function(n){v.contains(n.target)||o(n)},t=function(n){27===n.keyCode&&a(n)};return o&&document.addEventListener("click",n),a&&document.addEventListener("keydown",t),function(){o&&document.removeEventListener("click",n),a&&document.removeEventListener("keydown",t)}}}),[v]),r&&v&&i(f,v)}};export default function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},d=i.containerId,f=void 0===d?"react-cool-portal":d,l=i.defaultShow,v=void 0===l||l,m=i.onShow,s=i.onHide,y=i.clickOutsideToHide,h=void 0===y||y,p=i.escToHide,g=void 0===p||p,w=n(v),b=u(w,2),E=b[0],k=b[1],S=e(null),T=e(null),L=e(!1);t((function(){m&&(S.current=m)}),[m]),t((function(){s&&(T.current=s)}),[s]);var A=r((function(){h&&E&&(L.current=!0,c((function(){L.current=!1})))}),[h,E]),H=r((function(n){A(),E||(k(!0),m&&m(n))}),[A,E,m]),j=r((function(n){A(),E&&(k(!1),s&&s(n))}),[A,E,s]),I=r((function(n){A(),k(!E),m&&!E&&m(n),s&&E&&s(n)}),[A,E,m,s]),O=r((function(n){L.current||j(n)}),[j]),x=o((function(){return a(f,E,h&&O,g&&O)}),[f,E,h,g,O]);return{isShow:E,show:H,hide:j,toggle:I,Portal:x}}
+import{useState as n,useEffect as t,useRef as e,useCallback as r,useMemo as o}from"react";import{createPortal as i}from"react-dom";function u(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){if(!(Symbol.iterator in Object(n)||"[object Arguments]"===Object.prototype.toString.call(n)))return;var e=[],r=!0,o=!1,i=void 0;try{for(var u,c=n[Symbol.iterator]();!(r=(u=c.next()).done)&&(e.push(u.value),!t||e.length!==t);r=!0);}catch(n){o=!0,i=n}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return e}(n,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var c=function(n){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,e=setTimeout((function(){clearTimeout(e),n()}),t)},a=function(e,r,o,a){return function(d){var f=d.children,l=u(n(null),2),v=l[0],m=l[1];return t((function(){return m(document.getElementById(e)||function(n){var t=document.createElement("div");return t.setAttribute("id",n),document.body.appendChild(t),t}(e)),function(){v&&c((function(){""===v.innerHTML&&v.remove()}))}}),[v]),t((function(){if(o&&a&&r&&v){var n=function(n){v.contains(n.target)||o(n)},t=function(n){27===n.keyCode&&a(n)};return o&&document.addEventListener("click",n),a&&document.addEventListener("keydown",t),function(){o&&document.removeEventListener("click",n),a&&document.removeEventListener("keydown",t)}}}),[v]),r&&v&&i(f,v)}};export default function(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},d=i.containerId,f=void 0===d?"react-cool-portal":d,l=i.defaultShow,v=void 0===l||l,m=i.onShow,s=i.onHide,y=i.clickOutsideToHide,h=void 0===y||y,p=i.escToHide,g=void 0===p||p,w=n(v),b=u(w,2),E=b[0],k=b[1],S=e(!1),T=e(null),L=e(null);t((function(){m&&(T.current=m)}),[m]),t((function(){s&&(L.current=s)}),[s]);var A=r((function(){h&&E&&(S.current=!0,c((function(){S.current=!1})))}),[h,E]),H=r((function(n){A(),E||(k(!0),m&&m(n))}),[A,E,m]),j=r((function(n){A(),E&&(k(!1),s&&s(n))}),[A,E,s]),I=r((function(n){E?j(n):H(n)}),[E,j,H]),O=r((function(n){S.current||j(n)}),[j]),x=o((function(){return a(f,E,h&&O,g&&O)}),[f,E,h,g,O]);return{Portal:x,isShow:E,show:H,hide:j,toggle:I}}

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom");function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,o=!1,u=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw u}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var r=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,n=setTimeout((function(){clearTimeout(n),e()}),t)},o=function(o,u,c,i){return function(a){var l=a.children,f=n(e.useState(null),2),d=f[0],s=f[1];return e.useEffect((function(){return s(document.getElementById(o)||function(e){var t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t}(o)),function(){d&&r((function(){""===d.innerHTML&&d.remove()}))}}),[d]),e.useEffect((function(){if(c&&i&&u&&d){var e=function(e){d.contains(e.target)||c(e)},t=function(e){27===e.keyCode&&i(e)};return c&&document.addEventListener("click",e),i&&document.addEventListener("keydown",t),function(){c&&document.removeEventListener("click",e),i&&document.removeEventListener("keydown",t)}}}),[d]),u&&d&&t.createPortal(l,d)}};exports.default=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},u=t.containerId,c=void 0===u?"react-cool-portal":u,i=t.defaultShow,a=void 0===i||i,l=t.onShow,f=t.onHide,d=t.clickOutsideToHide,s=void 0===d||d,v=t.escToHide,m=void 0===v||v,y=e.useState(a),b=n(y,2),h=b[0],k=b[1],p=e.useRef(null),E=e.useRef(null),g=e.useRef(!1);e.useEffect((function(){l&&(p.current=l)}),[l]),e.useEffect((function(){f&&(E.current=f)}),[f]);var w=e.useCallback((function(){s&&h&&(g.current=!0,r((function(){g.current=!1})))}),[s,h]),S=e.useCallback((function(e){w(),h||(k(!0),l&&l(e))}),[w,h,l]),C=e.useCallback((function(e){w(),h&&(k(!1),f&&f(e))}),[w,h,f]),T=e.useCallback((function(e){w(),k(!h),l&&!h&&l(e),f&&h&&f(e)}),[w,h,l,f]),L=e.useCallback((function(e){g.current||C(e)}),[C]),j=e.useMemo((function(){return o(c,h,s&&L,m&&L)}),[c,h,s,m,L]);return{isShow:h,show:S,hide:C,toggle:T,Portal:j}};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("react-dom");function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,o=!1,u=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw u}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var r=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,n=setTimeout((function(){clearTimeout(n),e()}),t)},o=function(o,u,c,i){return function(a){var l=a.children,f=n(e.useState(null),2),d=f[0],s=f[1];return e.useEffect((function(){return s(document.getElementById(o)||function(e){var t=document.createElement("div");return t.setAttribute("id",e),document.body.appendChild(t),t}(o)),function(){d&&r((function(){""===d.innerHTML&&d.remove()}))}}),[d]),e.useEffect((function(){if(c&&i&&u&&d){var e=function(e){d.contains(e.target)||c(e)},t=function(e){27===e.keyCode&&i(e)};return c&&document.addEventListener("click",e),i&&document.addEventListener("keydown",t),function(){c&&document.removeEventListener("click",e),i&&document.removeEventListener("keydown",t)}}}),[d]),u&&d&&t.createPortal(l,d)}};exports.default=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},u=t.containerId,c=void 0===u?"react-cool-portal":u,i=t.defaultShow,a=void 0===i||i,l=t.onShow,f=t.onHide,d=t.clickOutsideToHide,s=void 0===d||d,v=t.escToHide,m=void 0===v||v,y=e.useState(a),b=n(y,2),h=b[0],k=b[1],p=e.useRef(!1),E=e.useRef(null),g=e.useRef(null);e.useEffect((function(){l&&(E.current=l)}),[l]),e.useEffect((function(){f&&(g.current=f)}),[f]);var w=e.useCallback((function(){s&&h&&(p.current=!0,r((function(){p.current=!1})))}),[s,h]),S=e.useCallback((function(e){w(),h||(k(!0),l&&l(e))}),[w,h,l]),C=e.useCallback((function(e){w(),h&&(k(!1),f&&f(e))}),[w,h,f]),T=e.useCallback((function(e){h?C(e):S(e)}),[h,C,S]),L=e.useCallback((function(e){p.current||C(e)}),[C]),j=e.useMemo((function(){return o(c,h,s&&L,m&&L)}),[c,h,s,m,L]);return{Portal:j,isShow:h,show:S,hide:C,toggle:T}};

package.json

 {
   "name": "react-cool-portal",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.",
@@ -201,3 +201,3 @@ "license": "MIT",
     "@rollup/plugin-url": "^4.0.2",
-    "@testing-library/react": "^9.4.1",
+    "@testing-library/react": "^10.0.1",
     "@testing-library/react-hooks": "^3.2.1",
@@ -204,0 +204,0 @@ "@types/jest": "^25.1.3",

README.md

@@ -8,2 +8,3 @@ > ⚠️ This library is in-progress, API might changed rapidly. I don't recommend to use it now. If you'd like to give it a try, please follow the [release note](https://github.com/wellyshen/react-cool-portal/releases) for any change. Here's the [milestone](#milestone).
 [![build status](https://img.shields.io/travis/wellyshen/react-cool-portal/master?style=flat-square)](https://travis-ci.org/wellyshen/react-cool-portal)
+[![coverage status](https://img.shields.io/coveralls/github/wellyshen/react-cool-portal?style=flat-square)](https://coveralls.io/github/wellyshen/react-cool-portal?branch=master)
 [![npm version](https://img.shields.io/npm/v/react-cool-portal?style=flat-square)](https://www.npmjs.com/package/react-cool-portal)
@@ -18,3 +19,3 @@ [![npm downloads](https://img.shields.io/npm/dm/react-cool-portal?style=flat-square)](https://www.npmtrends.com/react-cool-portal)
 
-![portal](https://user-images.githubusercontent.com/21308003/75579375-9e942e80-5aa0-11ea-9e66-7b7bd5c0518d.gif)
+![portal_modal](https://user-images.githubusercontent.com/21308003/76686161-6ff78580-6654-11ea-916b-117c85862711.gif)
 
@@ -30,3 +31,2 @@ ⚡️ Try yourself: https://react-cool-portal.netlify.com
 - [x] Support clickOutsideToHide and escToHide interactions
-- [ ] Delay hide portal for animation (maybe...)
 - [ ] Server-side rendering compatibility
@@ -59,3 +59,3 @@ - [ ] Unit testing
     onHide: e => {
-      // Triggered on show portal.
+      // Triggered on hide portal.
       // The event object will be: MouseEvent, KeyboardEvent, Your custom event.
@@ -70,5 +70,5 @@ }
       <button onClick={toggle}>Toggle Modal</button>
+      <p>Modal is {isShow ? 'opened' : 'closed'}</p>
       <Portal>
-        {/* The "isShow" can be used to control CSS transition, animation */}
-        <div class={`modal ${isShow ? 'fade-in' : 'fade-out'}`} role="dialog">
+        <div class="modal" role="dialog">
           <div class="modal-header">
@@ -75,0 +75,0 @@ <h5 class="modal-title">Modal title</h5>

No alert changes

Improved metrics

Total package byte prevSize

18750

increased by0.15%

Worsened metrics

Lines of code

54

decreased by-1.82%

No dependency changes