react-marquee-master - npm Package Compare versions

Comparing version 1.3.0 to 1.4.0

dist/index.esm.js

@@ -1,3 +0,21 @@
-import React__default, { createElement, cloneElement, useRef as useRef$2, useState as useState$1 } from 'react';
+function ___$insertStyle(css) {
+  if (!css) {
+    return;
+  }
+  if (typeof window === 'undefined') {
+    return;
+  }
 
+  var style = document.createElement('style');
+
+  style.setAttribute('type', 'text/css');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+  return css;
+}
+
+import React__default, { createElement, useRef as useRef$2, useState as useState$1 } from 'react';
+
+___$insertStyle(".marquee-container {\n  overflow: hidden;\n  position: relative;\n}\n.marquee-container .marquee {\n  position: absolute;\n}\n.marquee-container::before, .marquee-container::after {\n  content: \" \";\n  position: absolute;\n  z-index: 1;\n}\n.marquee-container:not(.horizontal)::before, .marquee-container:not(.horizontal)::after {\n  height: 10%;\n  width: 100%;\n}\n.marquee-container:not(.horizontal)::before {\n  background: white;\n  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  top: 0;\n}\n.marquee-container:not(.horizontal)::after {\n  background: white;\n  background: linear-gradient(360deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  bottom: 0;\n}\n.marquee-container.horizontal::before, .marquee-container.horizontal::after {\n  height: 100%;\n  width: 5%;\n}\n.marquee-container.horizontal::before {\n  background: white;\n  background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  left: 0;\n}\n.marquee-container.horizontal::after {\n  background: white;\n  background: linear-gradient(270deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  right: 0;\n}\n.marquee-container.horizontal .marquee {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  white-space: nowrap;\n}");
+
 function _defineProperty(obj, key, value) {
@@ -165,4 +183,6 @@ if (key in obj) {
   return {
+    bottom: 0,
+    left: 0,
     marqueeItems: props.inverseMarqueeItems ? marqueeItems.reverse() : marqueeItems,
-    bottom: 0,
+    right: 0,
     top: 0
@@ -183,3 +203,5 @@ };
       marqueeItems = state.marqueeItems,
-      top = state.top;
+      top = state.top,
+      left = state.left,
+      right = state.right;
   var height = props.height,
@@ -192,7 +214,4 @@ marqueeClassName = props.marqueeClassName,
   var direction = props.direction || marqueeDefaults.direction;
-  var marqueeContainerStyle = {
-    overflow: 'hidden',
-    minHeight: '150px',
-    position: 'relative'
-  };
+  var isHorizontal = direction === 'left' || direction === 'right';
+  var marqueeContainerStyle = {};
 
@@ -207,13 +226,15 @@ if (height) {
 
-  var marqueeStyle = {
-    position: 'absolute'
-  };
+  var marqueeStyle = {};
 
-  if (direction === 'down') {
+  if (direction === 'up') {
+    marqueeStyle.top = "".concat(top, "px");
+  } else if (direction === 'right') {
+    marqueeStyle.right = "".concat(right, "px");
+  } else if (direction === 'down') {
     marqueeStyle.bottom = "".concat(bottom, "px");
-  } else {
-    marqueeStyle.top = "".concat(top, "px");
+  } else if (direction === 'left') {
+    marqueeStyle.left = "".concat(left, "px");
   }
 
-  var getFirstMarqueeItemHeight = function getFirstMarqueeItemHeight() {
+  var getFirstMarqueeItemSize = function getFirstMarqueeItemSize() {
     var _marqueeRef$current;
@@ -224,2 +245,6 @@
     if (childNode instanceof HTMLDivElement) {
+      if (isHorizontal) {
+        return childNode.offsetWidth;
+      }
+
       return childNode.offsetHeight;
@@ -231,3 +256,3 @@ }
 
-  var getLastMarqueeItemHeight = function getLastMarqueeItemHeight() {
+  var getLastMarqueeItemSize = function getLastMarqueeItemSize() {
     var _marqueeRef$current2;
@@ -238,2 +263,6 @@
     if (childNode instanceof HTMLDivElement) {
+      if (isHorizontal) {
+        return childNode.offsetWidth;
+      }
+
       return childNode.offsetHeight;
@@ -248,47 +277,56 @@ }
 
-    var nextTop = top;
-    var nextBottom = bottom;
+    var nextProp;
 
-    if (direction === 'up') {
-      nextTop = nextTop - 1;
-      var firstMarqueeItemHeight = getFirstMarqueeItemHeight();
-      var firstMarqueeItemPassed = (firstMarqueeItemHeight ? Math.floor(Math.abs(nextTop) / firstMarqueeItemHeight) : 0) > 0;
+    switch (direction) {
+      case 'up':
+        nextProp = 'top';
+        break;
 
-      if (firstMarqueeItemPassed) {
+      case 'right':
+        nextProp = 'right';
+        break;
+
+      case 'down':
+        nextProp = 'bottom';
+        break;
+
+      case 'left':
+        nextProp = 'left';
+        break;
+
+      default:
+        nextProp = 'top';
+        break;
+    }
+
+    var nextPropValue = state[nextProp]; // Next tic value
+
+    nextPropValue -= 1;
+    var marqueeItemSize = direction === 'up' || direction === 'left' ? getFirstMarqueeItemSize() : getLastMarqueeItemSize();
+    var marqueeItemPassed = (marqueeItemSize ? Math.floor(Math.abs(nextPropValue) / marqueeItemSize) : 0) > 0;
+
+    if (marqueeItemPassed) {
+      if (direction === 'up' || direction === 'left') {
         nextMarqueeItems.push(nextMarqueeItems.shift());
-        nextTop = nextTop + firstMarqueeItemHeight;
+      } else {
+        nextMarqueeItems.unshift(nextMarqueeItems.pop());
       }
-    } else {
-      nextBottom = nextBottom - 1;
-      var lastMarqueeItemHeight = getLastMarqueeItemHeight();
-      var lastMarqueeItemPassed = (lastMarqueeItemHeight ? Math.floor(Math.abs(nextBottom) / lastMarqueeItemHeight) : 0) > 0;
 
-      if (lastMarqueeItemPassed) {
-        nextMarqueeItems.unshift(nextMarqueeItems.pop());
-        nextBottom = nextBottom + lastMarqueeItemHeight;
-      }
+      nextPropValue = nextPropValue + marqueeItemSize;
     }
 
     setState(function (s) {
-      return _objectSpread2(_objectSpread2({}, s), {}, {
-        marqueeItems: nextMarqueeItems,
-        top: nextTop,
-        bottom: nextBottom
-      });
+      var _objectSpread2$1;
+
+      return _objectSpread2(_objectSpread2({}, s), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, nextProp, nextPropValue), _defineProperty(_objectSpread2$1, "marqueeItems", nextMarqueeItems), _objectSpread2$1));
     });
   }, delay);
   var marqueeItemElms = marqueeItems.map(function (marqueeItem, i) {
-    if (typeof marqueeItem === 'string') {
-      return /*#__PURE__*/createElement("div", {
-        className: "marquee-item".concat(marqueeItemClassName ? " ".concat(marqueeItemClassName) : ''),
-        key: i
-      }, marqueeItem);
-    }
-
-    return /*#__PURE__*/cloneElement(marqueeItem, {
+    return /*#__PURE__*/createElement("div", {
+      className: "marquee-item".concat(marqueeItemClassName ? " ".concat(marqueeItemClassName) : ''),
       key: i
-    });
+    }, marqueeItem);
   });
   return /*#__PURE__*/createElement("div", {
-    className: "marquee-container".concat(marqueeContainerClassName ? " ".concat(marqueeContainerClassName) : ''),
+    className: "marquee-container".concat(isHorizontal ? ' horizontal' : '').concat(marqueeContainerClassName ? " ".concat(marqueeContainerClassName) : ''),
     ref: marqueeContainerRef,
@@ -295,0 +333,0 @@ style: marqueeContainerStyle

dist/index.js

 'use strict';
 
+
+
+function ___$insertStyle(css) {
+  if (!css) {
+    return;
+  }
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  var style = document.createElement('style');
+
+  style.setAttribute('type', 'text/css');
+  style.innerHTML = css;
+  document.head.appendChild(style);
+  return css;
+}
+
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
@@ -8,2 +26,4 @@
 
+___$insertStyle(".marquee-container {\n  overflow: hidden;\n  position: relative;\n}\n.marquee-container .marquee {\n  position: absolute;\n}\n.marquee-container::before, .marquee-container::after {\n  content: \" \";\n  position: absolute;\n  z-index: 1;\n}\n.marquee-container:not(.horizontal)::before, .marquee-container:not(.horizontal)::after {\n  height: 10%;\n  width: 100%;\n}\n.marquee-container:not(.horizontal)::before {\n  background: white;\n  background: linear-gradient(180deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  top: 0;\n}\n.marquee-container:not(.horizontal)::after {\n  background: white;\n  background: linear-gradient(360deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  bottom: 0;\n}\n.marquee-container.horizontal::before, .marquee-container.horizontal::after {\n  height: 100%;\n  width: 5%;\n}\n.marquee-container.horizontal::before {\n  background: white;\n  background: linear-gradient(90deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  left: 0;\n}\n.marquee-container.horizontal::after {\n  background: white;\n  background: linear-gradient(270deg, white 0%, rgba(255, 255, 255, 0.6) 80%, rgba(255, 255, 255, 0) 100%);\n  right: 0;\n}\n.marquee-container.horizontal .marquee {\n  align-items: center;\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  white-space: nowrap;\n}");
+
 function _defineProperty(obj, key, value) {
@@ -171,4 +191,6 @@ if (key in obj) {
   return {
+    bottom: 0,
+    left: 0,
     marqueeItems: props.inverseMarqueeItems ? marqueeItems.reverse() : marqueeItems,
-    bottom: 0,
+    right: 0,
     top: 0
@@ -189,3 +211,5 @@ };
       marqueeItems = state.marqueeItems,
-      top = state.top;
+      top = state.top,
+      left = state.left,
+      right = state.right;
   var height = props.height,
@@ -198,7 +222,4 @@ marqueeClassName = props.marqueeClassName,
   var direction = props.direction || marqueeDefaults.direction;
-  var marqueeContainerStyle = {
-    overflow: 'hidden',
-    minHeight: '150px',
-    position: 'relative'
-  };
+  var isHorizontal = direction === 'left' || direction === 'right';
+  var marqueeContainerStyle = {};
 
@@ -213,13 +234,15 @@ if (height) {
 
-  var marqueeStyle = {
-    position: 'absolute'
-  };
+  var marqueeStyle = {};
 
-  if (direction === 'down') {
+  if (direction === 'up') {
+    marqueeStyle.top = "".concat(top, "px");
+  } else if (direction === 'right') {
+    marqueeStyle.right = "".concat(right, "px");
+  } else if (direction === 'down') {
     marqueeStyle.bottom = "".concat(bottom, "px");
-  } else {
-    marqueeStyle.top = "".concat(top, "px");
+  } else if (direction === 'left') {
+    marqueeStyle.left = "".concat(left, "px");
   }
 
-  var getFirstMarqueeItemHeight = function getFirstMarqueeItemHeight() {
+  var getFirstMarqueeItemSize = function getFirstMarqueeItemSize() {
     var _marqueeRef$current;
@@ -230,2 +253,6 @@
     if (childNode instanceof HTMLDivElement) {
+      if (isHorizontal) {
+        return childNode.offsetWidth;
+      }
+
       return childNode.offsetHeight;
@@ -237,3 +264,3 @@ }
 
-  var getLastMarqueeItemHeight = function getLastMarqueeItemHeight() {
+  var getLastMarqueeItemSize = function getLastMarqueeItemSize() {
     var _marqueeRef$current2;
@@ -244,2 +271,6 @@
     if (childNode instanceof HTMLDivElement) {
+      if (isHorizontal) {
+        return childNode.offsetWidth;
+      }
+
       return childNode.offsetHeight;
@@ -254,47 +285,56 @@ }
 
-    var nextTop = top;
-    var nextBottom = bottom;
+    var nextProp;
 
-    if (direction === 'up') {
-      nextTop = nextTop - 1;
-      var firstMarqueeItemHeight = getFirstMarqueeItemHeight();
-      var firstMarqueeItemPassed = (firstMarqueeItemHeight ? Math.floor(Math.abs(nextTop) / firstMarqueeItemHeight) : 0) > 0;
+    switch (direction) {
+      case 'up':
+        nextProp = 'top';
+        break;
 
-      if (firstMarqueeItemPassed) {
+      case 'right':
+        nextProp = 'right';
+        break;
+
+      case 'down':
+        nextProp = 'bottom';
+        break;
+
+      case 'left':
+        nextProp = 'left';
+        break;
+
+      default:
+        nextProp = 'top';
+        break;
+    }
+
+    var nextPropValue = state[nextProp]; // Next tic value
+
+    nextPropValue -= 1;
+    var marqueeItemSize = direction === 'up' || direction === 'left' ? getFirstMarqueeItemSize() : getLastMarqueeItemSize();
+    var marqueeItemPassed = (marqueeItemSize ? Math.floor(Math.abs(nextPropValue) / marqueeItemSize) : 0) > 0;
+
+    if (marqueeItemPassed) {
+      if (direction === 'up' || direction === 'left') {
         nextMarqueeItems.push(nextMarqueeItems.shift());
-        nextTop = nextTop + firstMarqueeItemHeight;
+      } else {
+        nextMarqueeItems.unshift(nextMarqueeItems.pop());
       }
-    } else {
-      nextBottom = nextBottom - 1;
-      var lastMarqueeItemHeight = getLastMarqueeItemHeight();
-      var lastMarqueeItemPassed = (lastMarqueeItemHeight ? Math.floor(Math.abs(nextBottom) / lastMarqueeItemHeight) : 0) > 0;
 
-      if (lastMarqueeItemPassed) {
-        nextMarqueeItems.unshift(nextMarqueeItems.pop());
-        nextBottom = nextBottom + lastMarqueeItemHeight;
-      }
+      nextPropValue = nextPropValue + marqueeItemSize;
     }
 
     setState(function (s) {
-      return _objectSpread2(_objectSpread2({}, s), {}, {
-        marqueeItems: nextMarqueeItems,
-        top: nextTop,
-        bottom: nextBottom
-      });
+      var _objectSpread2$1;
+
+      return _objectSpread2(_objectSpread2({}, s), {}, (_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, nextProp, nextPropValue), _defineProperty(_objectSpread2$1, "marqueeItems", nextMarqueeItems), _objectSpread2$1));
     });
   }, delay);
   var marqueeItemElms = marqueeItems.map(function (marqueeItem, i) {
-    if (typeof marqueeItem === 'string') {
-      return /*#__PURE__*/React.createElement("div", {
-        className: "marquee-item".concat(marqueeItemClassName ? " ".concat(marqueeItemClassName) : ''),
-        key: i
-      }, marqueeItem);
-    }
-
-    return /*#__PURE__*/React.cloneElement(marqueeItem, {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "marquee-item".concat(marqueeItemClassName ? " ".concat(marqueeItemClassName) : ''),
       key: i
-    });
+    }, marqueeItem);
   });
   return /*#__PURE__*/React.createElement("div", {
-    className: "marquee-container".concat(marqueeContainerClassName ? " ".concat(marqueeContainerClassName) : ''),
+    className: "marquee-container".concat(isHorizontal ? ' horizontal' : '').concat(marqueeContainerClassName ? " ".concat(marqueeContainerClassName) : ''),
     ref: marqueeContainerRef,
@@ -301,0 +341,0 @@ style: marqueeContainerStyle

package.json

 {
   "name": "react-marquee-master",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "React component to allow you to create a vertically scrolling marquee",
@@ -51,2 +51,3 @@ "scripts": {
     "@rollup/plugin-node-resolve": "8.0.1",
+    "@svgr/rollup": "^5.4.0",
     "@types/react": "^16.9.37",
@@ -65,2 +66,5 @@ "@types/react-dom": "^16.9.5",
     "eslint-plugin-react-hooks": "^4.0.4",
+    "node-sass": "^4.14.1",
+    "postcss-nested": "^4.2.1",
+    "postcss-simple-vars": "^5.0.2",
     "prettier": "^2.0.5",
@@ -72,2 +76,6 @@ "react": "^16.12.0",
     "rollup-plugin-peer-deps-external": "^2.2.2",
+    "rollup-plugin-postcss": "^3.1.2",
+    "rollup-plugin-sass": "^1.2.2",
+    "rollup-plugin-stylelint": "^1.0.0",
+    "rollup-plugin-url": "^3.0.1",
     "stylelint": "^13.6.1",
@@ -82,3 +90,24 @@ "stylelint-config-prettier": "^8.0.1",
       "react-app"
-    ]
+    ],
+    "ignorePatterns": [
+      "*.scss",
+      "build/",
+      "node_modules/"
+    ],
+    "rules": {
+      "no-console": [
+        "warn",
+        {
+          "allow": [
+            "dir",
+            "error",
+            "group",
+            "groupEnd",
+            "info",
+            "trace",
+            "warn"
+          ]
+        }
+      ]
+    }
   },
@@ -85,0 +114,0 @@ "author": "Amir Karamuja",

README.md

@@ -10,3 +10,2 @@ # react-marquee-master
 [![npm download][download-image]][download-url]
-[![Build Status](https://travis-ci.org/wwayne/react-marquee-master.svg?branch=master)](https://travis-ci.org/wwayne/react-marquee-master)
 [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
@@ -29,4 +28,11 @@
 <img src="/docs/images/sample-2.gif" width="300">
+
 <!-- markdownlint-enable MD033 -->
 
+Or horizontal!
+
+<!-- markdownlint-disable MD033 -->
+<img src="/docs/images/sample-3.gif" width="300">
+<!-- markdownlint-enable MD033 -->
+
 ## Maintainers
@@ -82,14 +88,14 @@
 
-| Prop                      | Type                       | Values   | Default | Description                                                    |
-| ------------------------- | -------------------------- | -------- | ------- | -------------------------------------------------------------- |
-| delay                     | number                     | 0-99999  | 40      | Delay of the animation. Lower number speeds up the scroll.     |
-| direction                 | string                     | up, down | up      | Direction of the scroll.                                       |
-| height                    | number                     | 0-99999  |         | The fixed height of the marquee                                |
-| inverseMarqueeItems       | boolean                    | true     | false   | Reverse the marquee array. Useful when scrolling down.         |
-| marqueeClassName          | string                     |          |         | Class to apply to marquee element.                             |
-| marqueeContainerClassName | string                     |          |         | Class to apply to marquee container element.                   |
-| marqueeItemClassName      | string                     |          |         | Class to apply to each marquee element.                        |
-| marqueeItemClassName      | string                     |          |         | Class to apply to each marquee element.                        |
-| marqueeItems              | Array<string\|JSX.Element> | []       | []      | The text / Components to display.                              |
-| minHeight                 | number                     | 0-99999  |         | More dynamic sizing option with a minimum size that will grow. |
+| Prop                      | Type                       | Values                | Default | Description                                                    |
+| ------------------------- | -------------------------- | --------------------- | ------- | -------------------------------------------------------------- |
+| delay                     | number                     | 0-99999               | 40      | Delay of the animation. Lower number speeds up the scroll.     |
+| direction                 | string                     | up, right, down, left | up      | Direction of the scroll.                                       |
+| height                    | number                     | 0-99999               |         | The fixed height of the marquee                                |
+| inverseMarqueeItems       | boolean                    | true                  | false   | Reverse the marquee array. Useful when scrolling down.         |
+| marqueeClassName          | string                     |                       |         | Class to apply to marquee element.                             |
+| marqueeContainerClassName | string                     |                       |         | Class to apply to marquee container element.                   |
+| marqueeItemClassName      | string                     |                       |         | Class to apply to each marquee element.                        |
+| marqueeItemClassName      | string                     |                       |         | Class to apply to each marquee element.                        |
+| marqueeItems              | Array<string\|JSX.Element> | []                    | []      | The text / Components to display.                              |
+| minHeight                 | number                     | 0-99999               |         | More dynamic sizing option with a minimum size that will grow. |
 
@@ -103,3 +109,3 @@ ### To test locally in a separate app that imports this library
 5. Now in YOUR_APP_NAME you can import this module
-   (`import { Marquee } from 'react-marquee-master';`)
+   (`import Marquee, { IMarqueeProps } from 'react-marquee-master';`)
 6. `npm start` (rollup to update react-marquee-master)
@@ -106,0 +112,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55397

increased by13.69%

Lines of code

570

increased by11.76%

Number of lines in readme file

120

increased by5.26%

Worsened metrics

Dev dependency count

43

increased by22.86%

Number of low supply chain risk alerts

2

increased byInfinity%

No dependency changes