react-pulsable/dist/index.js

This is a simple and customizable react component library to add a pulsing/skeleton loading effect to your existing component.

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