react-pulsable - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";var y=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var E=(e,a)=>{for(var r in a)y(e,r,{get:a[r],enumerable:!0})},A=(e,a,r,p)=>{if(a&&typeof a=="object"||typeof a=="function")for(let o of z(a))!C.call(e,o)&&o!==r&&y(e,o,{get:()=>a[o],enumerable:!(p=N(a,o))||p.enumerable});return e};var I=e=>A(y({},"__esModule",{value:!0}),e);var M={};E(M,{default:()=>S});module.exports=I(M);var v=require("react");var R=`
+"use strict";var w=Object.defineProperty;var N=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var E=(e,l)=>{for(var r in l)w(e,r,{get:l[r],enumerable:!0})},A=(e,l,r,p)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of z(l))!C.call(e,o)&&o!==r&&w(e,o,{get:()=>l[o],enumerable:!(p=N(l,o))||p.enumerable});return e};var R=e=>A(w({},"__esModule",{value:!0}),e);var M={};E(M,{default:()=>S});module.exports=R(M);var y=require("react");var I=`
   <svg
@@ -17,2 +17,2 @@ xmlns="http://www.w3.org/2000/svg"
   </svg>
-`,V={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function q(e){var a=window.getComputedStyle(e,null),r=parseInt(a.getPropertyValue("height"),10),p=parseInt(a.getPropertyValue("font-size"),10),o=parseInt(a.getPropertyValue("line-height"),10),g=a.getPropertyValue("box-sizing");if(Number.isNaN(o)&&(o=p*1.2),g==="border-box"){var b=parseInt(a.getPropertyValue("padding-top"),10),d=parseInt(a.getPropertyValue("padding-bottom"),10),u=parseInt(a.getPropertyValue("border-top-width"),10),m=parseInt(a.getPropertyValue("border-bottom-width"),10);r=r-b-d-u-m}var s=Math.ceil(r/o);return{lines:s,font_size:p,height:r}}var w=({rootElement:e,config:a,loading:r=!0})=>{let{animation:p="wave",bgColors:o,noRadius:g=!1,noPadding:b=!1}=a||{},d=t=>{t?e.classList.add("pl-calc"):e.classList.remove("pl-calc")},u=t=>{t?e.classList.add("pl-css"):e.classList.remove("pl-css")},m=()=>{if(typeof window>"u")return null;let t=document.createElement("div"),i=t.cloneNode(!0);i.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),t.style.setProperty("--color-transparent-medium",o?.medium||"rgba(130, 130, 130, 0.3)"),t.style.setProperty("--color-transparent-light",o?.light||"rgba(130, 130, 130, 0.2)"),t.classList.add(V[p]);let l=t.cloneNode(!0);l.classList.add("pl-child-para"),t.classList.add("pl-child");let n=t.cloneNode(!0);n.classList.add("pl-child-circle"),g&&(t.classList.add("pl-no-rounded"),l.classList.add("pl-no-rounded"));let c=t.cloneNode(!0);c.classList.add("pl-child-hidden");let f=t.cloneNode(!0);f.classList.add("pl-child-rect");let h=t.cloneNode(!0);return h.classList.add("pl-child-rect-full"),{pCircle:()=>n.cloneNode(!0),pPara:()=>l.cloneNode(!0),pHidden:()=>c.cloneNode(!0),pRect:()=>f.cloneNode(!0),pRectFull:()=>h.cloneNode(!0),pParaCont:()=>i.cloneNode(!0)}};var s=null;requestAnimationFrame(()=>{if(!e){d(!1);return}if(e.classList.contains("pl-cont")||e.classList.add("pl-cont"),r){if(d(!0),u(!0),s||(s=m()),!s){d(!1),u(!1);return}let t=document.createElement("div");t.classList.add("pl-svg-cont"),t.innerHTML=R,e.querySelectorAll(".pulsable").forEach(i=>{if(i.classList.add("pl-element"),i.hasAttribute("disabled")||(i.classList.add("pl-has-disabled-attr"),i.setAttribute("disabled","true")),i.childNodes.forEach(n=>{n.classList&&!n.classList.contains("pl-child")&&(n.classList.add("pl-child-element"),n?.hasAttribute("disabled")||(n.classList.add("pl-has-disabled-attr"),n.setAttribute("disabled","true")))}),!i.querySelector(".pl-child")){var l;let n=i.classList;if(!s)return;if(n.contains("pulsable-circle"))l=s.pCircle();else if(n.contains("pulsable-hidden"))l=s.pHidden();else if(n.contains("pulsable-para")){l=s.pParaCont();let c=q(i),f=(c.height-c.font_size*c.lines)/(c.lines+2),h=`${Math.max(f,8)}px`;l.style.setProperty("padding-top",h),l.style.setProperty("padding-bottom",h);let k=s.pPara();k.style.setProperty("height",`${c.font_size*80/100}px`);for(let x=0;x<c.lines;x++)l.appendChild(k.cloneNode(!0))}else b?l=s.pRectFull():l=s.pRect();n.contains("pulsable-img")&&l.appendChild(t),i.parentNode?.appendChild(l),i.appendChild(l)}}),d(!1)}else e.querySelectorAll(".pl-child").forEach(t=>{t.parentNode?.removeChild(t)}),e.querySelectorAll(".pl-element").forEach(t=>{t.classList&&t.classList.remove("pl-element")}),e.querySelectorAll(".pl-has-disabled-attr").forEach(t=>{t.removeAttribute("disabled"),t.classList.remove("pl-has-disabled-attr")}),e.querySelectorAll(".pl-child-element").forEach(t=>{t.classList.remove("pl-child-element")}),u(!1)})};(typeof global<"u"||typeof globalThis<"u")&&(typeof global<"u"&&(global.setPulsing=w),typeof globalThis<"u"&&(globalThis.setPulsing=w));var L=w;var P=require("react/jsx-runtime"),H=({children:e,isLoading:a,className:r,config:p,...o})=>{let{animation:g="wave",bgColors:b,noRadius:d=!1,noPadding:u=!1}=p||{},m=(0,v.useRef)(null);return(0,v.useEffect)(()=>{m.current&&L({rootElement:m.current,config:{animation:g,bgColors:b,noRadius:d,noPadding:u},loading:a})},[a,m.current]),(0,P.jsx)("div",{ref:m,className:r,...o,children:e})},S=H;
+`,V={pulse:"pl-animate",wave:"pl-animate-wave","wave-reverse":"pl-animate-wave-r",none:"pl-animate-none"};function q(e){var l=window.getComputedStyle(e,null),r=parseInt(l.getPropertyValue("height"),10),p=parseInt(l.getPropertyValue("font-size"),10),o=parseInt(l.getPropertyValue("line-height"),10),c=l.getPropertyValue("box-sizing");if(Number.isNaN(o)&&(o=p*1.2),c==="border-box"){var g=parseInt(l.getPropertyValue("padding-top"),10),u=parseInt(l.getPropertyValue("padding-bottom"),10),b=parseInt(l.getPropertyValue("border-top-width"),10),m=parseInt(l.getPropertyValue("border-bottom-width"),10);r=r-g-u-b-m}var i=Math.ceil(r/o);return{lines:i,font_size:p,height:r}}var k=({rootElement:e,config:l,loading:r=!0})=>{let{animation:p="wave",bgColors:o,noRounded:c=!1,noPadding:g=!1}=l||{},u=t=>{t?e.classList.add("pl-calc"):e.classList.remove("pl-calc")},b=t=>{t?e.classList.add("pl-css"):e.classList.remove("pl-css")},m=()=>{if(typeof window>"u")return null;let t=document.createElement("div"),s=t.cloneNode(!0);s.classList.add("pl-child-para-cont","pl-no-rounded","pl-child"),t.style.setProperty("--color-transparent-medium",o?.medium||"rgba(130, 130, 130, 0.3)"),t.style.setProperty("--color-transparent-light",o?.light||"rgba(130, 130, 130, 0.2)"),t.classList.add(V[p]);let n=t.cloneNode(!0);n.classList.add("pl-child-para"),t.classList.add("pl-child");let a=t.cloneNode(!0);a.classList.add("pl-child-circle"),c&&(t.classList.add("pl-no-rounded"),n.classList.add("pl-no-rounded"));let d=t.cloneNode(!0);d.classList.add("pl-child-hidden");let f=t.cloneNode(!0);f.classList.add("pl-child-rect");let h=t.cloneNode(!0);return h.classList.add("pl-child-rect-full"),{pCircle:()=>a.cloneNode(!0),pPara:()=>n.cloneNode(!0),pHidden:()=>d.cloneNode(!0),pRect:()=>f.cloneNode(!0),pRectFull:()=>h.cloneNode(!0),pParaCont:()=>s.cloneNode(!0)}};var i=null;requestAnimationFrame(()=>{if(!e){u(!1);return}if(e.classList.contains("pl-cont")||e.classList.add("pl-cont"),r){if(u(!0),b(!0),i||(i=m()),!i){u(!1),b(!1);return}let t=document.createElement("div");t.classList.add("pl-svg-cont"),t.innerHTML=I,e.querySelectorAll(".pulsable").forEach(s=>{if(s.classList.add("pl-element"),s.hasAttribute("disabled")||(s.classList.add("pl-has-disabled-attr"),s.setAttribute("disabled","true")),s.childNodes.forEach(a=>{a.classList&&!a.classList.contains("pl-child")&&(a.classList.add("pl-child-element"),a?.hasAttribute("disabled")||(a.classList.add("pl-has-disabled-attr"),a.setAttribute("disabled","true")))}),!s.querySelector(".pl-child")){var n;let a=s.classList;if(!i)return;if(a.contains("pulsable-circle"))n=i.pCircle();else if(a.contains("pulsable-hidden"))n=i.pHidden();else if(a.contains("pulsable-para")){n=i.pParaCont();let d=q(s),f=(d.height-d.font_size*d.lines)/(d.lines+2),h=`${Math.max(f,8)}px`;n.style.setProperty("padding-top",h),n.style.setProperty("padding-bottom",h);let v=i.pPara();c&&a.contains("pulsable-rounded")?v.classList.remove("pl-no-rounded"):!c&&a.contains("pulsable-no-rounded")&&v.classList.add("pl-no-rounded"),v.style.setProperty("height",`${d.font_size*80/100}px`);for(let L=0;L<d.lines;L++)n.appendChild(v.cloneNode(!0))}else g?a.contains("pulsable-padding")?n=i.pRect():n=i.pRectFull():a.contains("pulsable-no-padding")?n=i.pRectFull():n=i.pRect();a.contains("pulsable-img")&&n.appendChild(t),c&&a.contains("pulsable-rounded")?n.classList.remove("pl-no-rounded"):!c&&a.contains("pulsable-no-rounded")&&n.classList.add("pl-no-rounded"),s.parentNode?.appendChild(n),s.appendChild(n)}}),u(!1)}else e.querySelectorAll(".pl-child").forEach(t=>{t.parentNode?.removeChild(t)}),e.querySelectorAll(".pl-element").forEach(t=>{t.classList&&t.classList.remove("pl-element")}),e.querySelectorAll(".pl-has-disabled-attr").forEach(t=>{t.removeAttribute("disabled"),t.classList.remove("pl-has-disabled-attr")}),e.querySelectorAll(".pl-child-element").forEach(t=>{t.classList.remove("pl-child-element")}),b(!1)})};(typeof global<"u"||typeof globalThis<"u")&&(typeof global<"u"&&(global.setPulsing=k),typeof globalThis<"u"&&(globalThis.setPulsing=k));var x=k;var P=require("react/jsx-runtime"),H=({children:e,isLoading:l,className:r,config:p,...o})=>{let{animation:c="wave",bgColors:g,noRadius:u=!1,noPadding:b=!1}=p||{},m=(0,y.useRef)(null);return(0,y.useEffect)(()=>{m.current&&x({rootElement:m.current,config:{animation:c,bgColors:g,noRadius:u,noPadding:b},loading:l})},[l,m.current]),(0,P.jsx)("div",{ref:m,className:r,...o,children:e})},S=H;

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "This is a simple and customizable react component library to add a pulsing/skeleton loading effect to your existing component.",
@@ -59,3 +59,3 @@ "private": false,
   "dependencies": {
-    "pulsable": "^0.0.15"
+    "pulsable": "^0.0.16"
   },
@@ -62,0 +62,0 @@ "peerDependencies": {

README.md

@@ -126,2 +126,3 @@ # React Pulsable
 - for the paragraph use classname `pulsable-para`
+- while applying base config to all elements, you may need some exceptions. for that you can use `pulsable-no-radius`, `pulsable-no-padding`, `pulsable-radius` and `pulsable-padding`. by using these classes you can override some specific elements.
 
@@ -128,0 +129,0 @@ - As Shown in example, for better performance you can use `flex` and  `align-items: flex-start` in parentNode to avoid the pulsing effect from stretching the component. you can also add these styles conditionally wihile loading, if it's affecting your design.

No alert changes

Improved metrics

Total package byte prevSize

22525

increased by4.67%

Lines of code

94

increased by4.44%

Number of lines in readme file

135

increased by0.75%

Dependency changes

• + Addedpulsable@0.0.16(transitive)

• - Removedpulsable@0.0.15(transitive)

• Updatedpulsable@^0.0.16