react-pulsable - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/@types/index.d.ts

@@ -1,9 +0,1 @@
-import { ReactNode } from 'react';
-import './css/index.scss';
-export interface Props {
-    children: ReactNode;
-    isLoading: boolean;
-    backgroundColor?: string;
-}
-declare const Pulsable: ({ children, isLoading, backgroundColor }: Props) => import("react/jsx-runtime").JSX.Element;
-export default Pulsable;
+export {};

dist/index.js

@@ -1,2 +0,20 @@
-"use strict";var v=Object.create;var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var S=Object.getPrototypeOf,A=Object.prototype.hasOwnProperty;var E=(s,t)=>()=>(t||s((t={exports:{}}).exports,t),t.exports),C=(s,t)=>{for(var i in t)u(s,i,{get:t[i],enumerable:!0})},f=(s,t,i,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of L(t))!A.call(s,r)&&r!==i&&u(s,r,{get:()=>t[r],enumerable:!(n=y(t,r))||n.enumerable});return s};var N=(s,t,i)=>(i=s!=null?v(S(s)):{},f(t||!s||!s.__esModule?u(i,"default",{value:s,enumerable:!0}):i,s)),g=s=>f(u({},"__esModule",{value:!0}),s);var m=E((j,d)=>{(function(){"use strict";var s={}.hasOwnProperty,t="[native code]";function i(){for(var n=[],r=0;r<arguments.length;r++){var l=arguments[r];if(l){var c=typeof l;if(c==="string"||c==="number")n.push(l);else if(Array.isArray(l)){if(l.length){var a=i.apply(null,l);a&&n.push(a)}}else if(c==="object"){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){n.push(l.toString());continue}for(var p in l)s.call(l,p)&&l[p]&&n.push(p)}}}return n.join(" ")}typeof d<"u"&&d.exports?(i.default=i,d.exports=i):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return i}):window.classNames=i})()});var q={};C(q,{default:()=>x});module.exports=g(q);var o=require("react"),h=N(m());var b=require("react/jsx-runtime"),w=({children:s,isLoading:t,backgroundColor:i})=>{let n=(0,o.useRef)(null),[r,l]=(0,o.useState)(!0);return(0,o.useEffect)(()=>{if(l(!0),t){if(!n.current)return;n.current.querySelectorAll(".pulsable").forEach(a=>{if(a.classList.add("pulse-element"),a.childNodes.forEach(e=>{e.classList&&!e.classList.contains("pulse-child")&&(e.classList.add("pulse-child-element"),e?.hasAttribute("disabled")||(e.classList.add("pulse-has-disabled-attr"),e.setAttribute("disabled","true")))}),!a.querySelector(".pulse-child")){let e=document.createElement("div");e.style.backgroundColor=i||"#bebebe82",a.classList.contains("pulsable-circle")?e.classList.add("pulse-child","pulse-animate","pulse-child-circle"):e.classList.add("pulse-child","pulse-animate","pulse-child-rect"),a.parentNode?.appendChild(e),a.appendChild(e)}}),l(!1)}else{if(!n.current)return;n.current.querySelectorAll(".pulse-child").forEach(e=>{e.parentNode?.removeChild(e)}),n.current.querySelectorAll(".pulse-element").forEach(e=>{e.classList&&e.classList.remove("pulse-element")}),n.current.querySelectorAll(".pulse-child-element").forEach(e=>{e.classList.remove("pulse-child-element"),e.classList.contains("pulse-has-disabled-attr")&&(e.removeAttribute("disabled"),e.classList.remove("pulse-has-disabled-attr"))}),l(!1)}},[t,n.current]),(0,b.jsx)("div",{ref:n,className:(0,h.default)("pulse-container",{"pulse-calculating pulse-container-css":t&&r,"pulse-container-css":t}),children:s})},x=w;
+"use strict";var w=Object.create;var u=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var x=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var L=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),S=(e,t)=>{for(var a in t)u(e,a,{get:t[a],enumerable:!0})},f=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of g(t))!k.call(e,s)&&s!==a&&u(e,s,{get:()=>t[s],enumerable:!(o=y(t,s))||o.enumerable});return e};var E=(e,t,a)=>(a=e!=null?w(x(e)):{},f(t||!e||!e.__esModule?u(a,"default",{value:e,enumerable:!0}):a,e)),A=e=>f(u({},"__esModule",{value:!0}),e);var m=L((P,d)=>{(function(){"use strict";var e={}.hasOwnProperty,t="[native code]";function a(){for(var o=[],s=0;s<arguments.length;s++){var l=arguments[s];if(l){var c=typeof l;if(c==="string"||c==="number")o.push(l);else if(Array.isArray(l)){if(l.length){var i=a.apply(null,l);i&&o.push(i)}}else if(c==="object"){if(l.toString!==Object.prototype.toString&&!l.toString.toString().includes("[native code]")){o.push(l.toString());continue}for(var n in l)e.call(l,n)&&l[n]&&o.push(n)}}}return o.join(" ")}typeof d<"u"&&d.exports?(a.default=a,d.exports=a):typeof define=="function"&&typeof define.amd=="object"&&define.amd?define("classnames",[],function(){return a}):window.classNames=a})()});var N={};S(N,{default:()=>C});module.exports=A(N);var p=require("react"),b=E(m());var h=`
+  <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"
+        fill="#fff"
+      />
+      <circle cx="58.217" cy="108.555" r="11.773" opacity=".675" fill="#fff" />
+      <path fill="none" d="M26.111 77.634h152.614v116.099H26.111z" />
+    </g>
+  </svg>
+`;var v=require("react/jsx-runtime"),z=({children:e,isLoading:t,backgroundColor:a,noRadius:o=!1})=>{let s=(0,p.useRef)(null),[l,c]=(0,p.useState)(!0);return(0,p.useEffect)(()=>{if(c(!0),t){if(!s.current)return;let i=document.createElement("div");i.classList.add("pulse-svg-cont"),i.innerHTML=h,s.current.querySelectorAll(".pulsable").forEach(n=>{if(n.classList.add("pulse-element"),n.hasAttribute("disabled")||(n.classList.add("pulse-has-disabled-attr"),n.setAttribute("disabled","true")),n.childNodes.forEach(r=>{r.classList&&!r.classList.contains("pulse-child")&&(r.classList.add("pulse-child-element"),r?.hasAttribute("disabled")||(r.classList.add("pulse-has-disabled-attr"),r.setAttribute("disabled","true")))}),!n.querySelector(".pulse-child")){let r=document.createElement("div");r.style.backgroundColor=a||"#bebebe82",n.classList.contains("pulsable-circle")?r.classList.add("pulse-child","pulse-animate","pulse-child-circle"):n.classList.contains("pulsable-hidden")?r.classList.add("pulse-child","pulse-animate","pulse-child-hidden"):o?r.classList.add("pulse-child","pulse-animate","pulse-child-rect-sharp"):r.classList.add("pulse-child","pulse-animate","pulse-child-rect"),n.classList.contains("pulsable-img")&&r.appendChild(i),n.parentNode?.appendChild(r),n.appendChild(r)}}),c(!1)}else{if(!s.current)return;s.current.querySelectorAll(".pulse-child").forEach(i=>{i.parentNode?.removeChild(i)}),s.current.querySelectorAll(".pulse-element").forEach(i=>{i.classList&&i.classList.remove("pulse-element")}),s.current.querySelectorAll(".pulse-has-disabled-attr").forEach(i=>{i.removeAttribute("disabled"),i.classList.remove("pulse-has-disabled-attr")}),s.current.querySelectorAll(".pulse-child-element").forEach(i=>{i.classList.remove("pulse-child-element")}),c(!1)}},[t,s.current]),(0,v.jsx)("div",{ref:s,className:(0,b.default)("pulse-container",{"pulse-calculating pulse-container-css":t&&l,"pulse-container-css":t}),children:e})},C=z;
 /*! Bundled license information:
@@ -3,0 +21,0 @@

package.json

@@ -5,3 +5,3 @@ {
   "license": "MIT",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "This is a simple react component that can be used to wrap other components and add a pulsing/skeleton effect to them.",
@@ -53,2 +53,3 @@ "private": false,
   "scripts": {
+    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
     "build": "npm run clean && npm run build:css && node build.js && npm run tsc",
@@ -68,3 +69,4 @@ "pack": "npm pack --pack-destination ./out",
   "devDependencies": {
-    "@types/react": "^18.2.22",
+    "@types/react": "^18.2.25",
+    "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.4.1",
@@ -87,6 +89,20 @@ "@typescript-eslint/parser": "^6.4.1",
     "prettier": "^2.8.8",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
     "rimraf": "^5.0.1",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.2.2"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }

README.md

@@ -101,3 +101,5 @@ # React Pulsable
 - `backgroundColor`: a string that indicates the background color of the pulsing effect. It can be any valid css color value.
+- `noRadius`: a boolean that indicates whether the pulsing effect should have rounded corners or not. By default it has rounded corners.
 
+
 ### Conditions:
@@ -109,2 +111,4 @@
 - if your component is a self closing tag like `<img />` you should have to wrap it with div and add pulsable class to that. 
+- if you want to hide some components while loading add class name "pulsable-hidden"
+- if you want to add image icon in skeleton add class name "pulsable-img"
 
@@ -111,0 +115,0 @@ #### Example 2

No alert changes

Improved metrics

Total package byte prevSize

19034

increased by35.93%

Number of package files

10

increased by42.86%

Lines of code

104

increased by100%

Number of lines in readme file

123

increased by3.36%

Worsened metrics

Dev dependency count

24

increased by14.29%

Number of downloads

62

decreased by-61.73%

No dependency changes