react-infinite-logo-slider - npm Package Compare versions

Comparing version 1.0.13 to 1.1.0

build/index.js

@@ -1,1 +0,113 @@
-(()=>{"use strict";var e={n:t=>{var r=t&&t.__esModule?()=>t.default:()=>t;return e.d(r,{a:r}),r},d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{default:()=>c});const r=require("react");var n=e.n(r),o=["children","width"];function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(this,arguments)}function l(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var i=function(e){var t,o,a=e.children,i=e.width,c=void 0===i?"200px":i,d=e.duration,u=void 0===d?40:d,s=e.toRight,f=void 0!==s&&s,m=e.pauseOnHover,y=void 0!==m&&m,p=e.blurBorders,g=void 0!==p&&p,v=e.blurBoderColor,h=void 0===v?"#fff":v,b=(t=(0,r.useState)(""),o=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a,l,i=[],c=!0,d=!1;try{if(a=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=a.call(r)).done)&&(i.push(n.value),i.length!==t);c=!0);}catch(e){d=!0,o=e}finally{try{if(!c&&null!=r.return&&(l=r.return(),Object(l)!==l))return}finally{if(d)throw o}}return i}}(t,o)||function(e,t){if(e){if("string"==typeof e)return l(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?l(e,t):void 0}}(t,o)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),E=b[0],w=b[1];return(0,r.useEffect)((function(){w(function(){for(var e="",t="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",r=0;r<10;r++)e+=t.charAt(Math.floor(Math.random()*t.length));return e}())}),[]),(0,r.useEffect)((function(){var e=document.createElement("style");e.type="text/css",e.innerHTML="        @-webkit-keyframes slider_logo_slider {            0% {                transform: translateX(0);            }            100% {                transform: translateX(A_DYNAMIC_VALUE);            }        }        @-moz-keyframes slider_logo_slider {            0% {                transform: translateX(0);            }            100% {                transform: translateX(A_DYNAMIC_VALUE);            }        }".replace(/A_DYNAMIC_VALUE/g,"calc(".concat(f?"":"-").concat(c," * ").concat(null==a?void 0:a.length,")")),document.getElementsByTagName("head")[0].appendChild(e)}),[f,c,a]),n().createElement("div",{style:{position:"relative"}},n().createElement("div",{style:{width:"100%",height:"auto",margin:"auto",top:0,overflow:"hidden"},onMouseEnter:function(){return y&&void(document.getElementById("slider_".concat(E)).style.animationPlayState="paused")},onMouseLeave:function(){return y&&void(document.getElementById("slider_".concat(E)).style.animationPlayState="running")},id:"slider_wrapper_".concat(E)},n().createElement("div",{style:{display:"flex",animation:"slider_logo_slider ".concat(u,"s linear infinite"),width:"calc(".concat(c," * ").concat(3*(null==a?void 0:a.length),")"),top:0},id:"slider_".concat(E)},null==a?void 0:a.map((function(e,t){return n().createElement(n().Fragment,{key:t},n().cloneElement(e,{width:c}))})),null==a?void 0:a.map((function(e,t){return n().createElement(n().Fragment,{key:t},n().cloneElement(e,{width:c}))})),null==a?void 0:a.map((function(e,t){return n().createElement(n().Fragment,{key:t},n().cloneElement(e,{width:c}))})))),g&&n().createElement(n().Fragment,null,n().createElement("div",{style:{position:"absolute",right:0,top:"0px",width:"180px",transform:"rotate(180deg)",zIndex:10,height:"105%",background:"linear-gradient(90deg, ".concat(h," 10%, rgba(255, 255, 255, 0) 80%)")}}),n().createElement("div",{style:{position:"absolute",left:0,top:"0px",width:"180px",zIndex:10,height:"120%",background:"linear-gradient(90deg, ".concat(h," 10%, rgba(255, 255, 255, 0) 80%)")}})))};i.Slide=function(e){var t=e.children,r=e.width,l=void 0===r?"200px":r,i=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(e,o);return n().createElement("div",a({style:{width:l,alignItems:"center",display:"flex"}},i),t)};const c=i;module.exports=t})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useEffect, useState } from "react";
+var Slider = function (_a) {
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? "200px" : _b, _c = _a.duration, duration = _c === void 0 ? 40 : _c, _d = _a.toRight, toRight = _d === void 0 ? false : _d, _e = _a.pauseOnHover, pauseOnHover = _e === void 0 ? false : _e, _f = _a.blurBorders, blurBorders = _f === void 0 ? false : _f, _g = _a.blurBoderColor, blurBoderColor = _g === void 0 ? "#fff" : _g;
+    var _h = useState(""), idNanoid = _h[0], setIdNanoid = _h[1];
+    // Generate a random string ID for keyframes
+    var generarCadenaAleatoria = function () {
+        var cadena = "";
+        var caracteres = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+        for (var i = 0; i < 10; i++) {
+            cadena += caracteres.charAt(Math.floor(Math.random() * caracteres.length));
+        }
+        return cadena;
+    };
+    useEffect(function () {
+        setIdNanoid(generarCadenaAleatoria());
+    }, []);
+    useEffect(function () {
+        if (!children.length)
+            return;
+        // Calculate the total translation value based on children length and width
+        var totalTranslateX = "calc(".concat(toRight ? "" : "-").concat(width, " * ").concat(children.length, ")");
+        // Dynamically create the CSS keyframes for the animation
+        var style = document.createElement("style");
+        style.type = "text/css";
+        var keyFrames = "\n      @keyframes slider_logo_slider_".concat(idNanoid, " {\n        0% {\n          transform: translateX(0);\n        }\n        100% {\n          transform: translateX(").concat(totalTranslateX, ");\n        }\n      }");
+        style.innerHTML = keyFrames;
+        document.getElementsByTagName("head")[0].appendChild(style);
+        // Cleanup the created styles on component unmount
+        return function () {
+            document.getElementsByTagName("head")[0].removeChild(style);
+        };
+    }, [toRight, width, children, idNanoid]);
+    var handleMouseEnter = function () {
+        var sliderElement = document.getElementById("slider_".concat(idNanoid));
+        if (sliderElement)
+            sliderElement.style.animationPlayState = "paused";
+    };
+    var handleMouseLeave = function () {
+        var sliderElement = document.getElementById("slider_".concat(idNanoid));
+        if (sliderElement)
+            sliderElement.style.animationPlayState = "running";
+    };
+    return (React.createElement("div", { style: { position: "relative" } },
+        React.createElement("div", { style: {
+                width: "100%",
+                height: "auto",
+                margin: "auto",
+                overflow: "hidden",
+                position: "relative",
+            }, onMouseEnter: function () { return pauseOnHover && handleMouseEnter(); }, onMouseLeave: function () { return pauseOnHover && handleMouseLeave(); }, id: "slider_wrapper_".concat(idNanoid) },
+            React.createElement("div", { style: {
+                    display: "flex",
+                    animation: "slider_logo_slider_".concat(idNanoid, " ").concat(duration, "s linear infinite"),
+                    width: "calc(".concat(width, " * ").concat(children.length * 3, ")"),
+                }, id: "slider_".concat(idNanoid) },
+                children.map(function (child, i) { return (React.createElement(React.Fragment, { key: i }, React.cloneElement(child, { width: width }))); }),
+                children.map(function (child, i) { return (React.createElement(React.Fragment, { key: i }, React.cloneElement(child, { width: width }))); }),
+                children.map(function (child, i) { return (React.createElement(React.Fragment, { key: i }, React.cloneElement(child, { width: width }))); }))),
+        blurBorders && (React.createElement(React.Fragment, null,
+            React.createElement("div", { style: {
+                    position: "absolute",
+                    right: 0,
+                    top: 0,
+                    width: "180px",
+                    transform: "rotate(180deg)",
+                    zIndex: 10,
+                    height: "105%",
+                    background: "linear-gradient(90deg, ".concat(blurBoderColor, " 10%, rgba(255, 255, 255, 0) 80%)"),
+                } }),
+            React.createElement("div", { style: {
+                    position: "absolute",
+                    left: 0,
+                    top: 0,
+                    width: "180px",
+                    zIndex: 10,
+                    height: "120%",
+                    background: "linear-gradient(90deg, ".concat(blurBoderColor, " 10%, rgba(255, 255, 255, 0) 80%)"),
+                } })))));
+};
+// Slide component definition with TypeScript
+var Slide = function (_a) {
+    var children = _a.children, _b = _a.width, width = _b === void 0 ? "200px" : _b, props = __rest(_a, ["children", "width"]);
+    return (React.createElement("div", __assign({ style: {
+            width: width,
+            alignItems: "center",
+            display: "flex",
+        } }, props), children));
+};
+// Assign the Slide component to Slider.Slide
+Slider.Slide = Slide;
+export default Slider;

package.json

 {
   "name": "react-infinite-logo-slider",
-  "version": "1.0.13",
+  "version": "1.1.0",
   "description": "A slider of logos or react components that scroll horizontally infinitely",
-  "main": "./build/index.js",
+  "main": "build/index.js",
+  "types": "build/index.d.ts",
   "scripts": {
-    "build": "webpack"
+    "build": "tsc"
   },
@@ -28,2 +29,4 @@ "author": "kreu",
     "@babel/preset-react": "^7.18.6",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "babel-loader": "^9.1.2",
@@ -35,2 +38,3 @@ "css-loader": "^6.7.3",
     "style-loader": "^3.3.2",
+    "typescript": "^5.6.3",
     "webpack": "^5.77.0",
@@ -42,3 +46,4 @@ "webpack-cli": "^5.0.1"
     "prop-types": "^15.8.1",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.3.1"
   },
@@ -45,0 +50,0 @@ "repository": {

Fixed alerts

Empty package

Supply chain risk

Package does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10820

increased by25.58%

Number of package files

5

increased by66.67%

Lines of code

147

increased byInfinity%

Number of low quality alerts

0

decreased by-100%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

14

increased by27.27%

Dependency changes

• + Addedreact-dom@^18.3.1

• + Addedreact-dom@18.3.1(transitive)

• + Addedscheduler@0.23.2(transitive)