react-slot-counter - npm Package Compare versions

Comparing version 1.4.3 to 1.5.0

lib/components/Slot.d.ts

@@ -15,5 +15,6 @@ import React, { RefObject } from 'react';
     valueClassName?: string;
+    reverse?: boolean;
 }
-declare function Slot({ charClassName, fontHeight, numbersRef, active, isChanged, slotNumbersHeight, effectiveDuration, delay, value, dummyList, hasInfiniteList, valueClassName }: Props): JSX.Element;
+declare function Slot({ charClassName, fontHeight, numbersRef, active, isChanged, slotNumbersHeight, effectiveDuration, delay, value, dummyList, hasInfiniteList, valueClassName, reverse, }: Props): JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Slot>;
 export default _default;

lib/index.esm.js

@@ -66,2 +66,10 @@ import React, { memo, useState, useRef, useEffect, forwardRef, useMemo, useCallback, useImperativeHandle } from 'react';
 };
+var toNumeric = function (value) {
+  if (typeof value === 'number') return value;
+  var str = Array.isArray(value) ? value.join('') : value;
+  return str.replace(/[,.]/g, '');
+};
+var isNumeric = function (value) {
+  return !Number.isNaN(toNumeric(value));
+};
 
@@ -113,3 +121,4 @@ var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
     hasInfiniteList = _a.hasInfiniteList,
-    valueClassName = _a.valueClassName;
+    valueClassName = _a.valueClassName,
+    reverse = _a.reverse;
   var _b = useState(false),
@@ -164,5 +173,6 @@ localActive = _b[0],
     style: __assign({
-      transition: 'none'
+      transition: 'none',
+      transform: reverse ? "translateY(-".concat(slotNumbersHeight, "px)") : "translateY(0px)"
     }, localActive && isChanged && {
-      transform: "translateY(-".concat(slotNumbersHeight, "px)"),
+      transform: reverse ? "translateY(0px)" : "translateY(-".concat(slotNumbersHeight, "px)"),
       transition: "transform ".concat(effectiveDuration, "s ").concat(delay, "s ease-in-out")
@@ -280,2 +290,4 @@ })
     var slotNumbersHeight = fontHeight * (dummyList.length + 1);
+    var prevValue = prevValueRef.current;
+    var reverseAnimation = value != null && prevValue != null && isNumeric(value) ? toNumeric(value) < toNumeric(prevValue) : false;
     if (SEPARATOR.includes(v)) {
@@ -300,3 +312,4 @@ return React.createElement("div", {
       hasInfiniteList: hasInfiniteList,
-      valueClassName: valueClassName
+      valueClassName: valueClassName,
+      reverse: reverseAnimation
     });
@@ -303,0 +316,0 @@ }));

lib/index.js

@@ -68,2 +68,10 @@ 'use strict';
 };
+var toNumeric = function (value) {
+  if (typeof value === 'number') return value;
+  var str = Array.isArray(value) ? value.join('') : value;
+  return str.replace(/[,.]/g, '');
+};
+var isNumeric = function (value) {
+  return !Number.isNaN(toNumeric(value));
+};
 
@@ -115,3 +123,4 @@ var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
     hasInfiniteList = _a.hasInfiniteList,
-    valueClassName = _a.valueClassName;
+    valueClassName = _a.valueClassName,
+    reverse = _a.reverse;
   var _b = React.useState(false),
@@ -166,5 +175,6 @@ localActive = _b[0],
     style: __assign({
-      transition: 'none'
+      transition: 'none',
+      transform: reverse ? "translateY(-".concat(slotNumbersHeight, "px)") : "translateY(0px)"
     }, localActive && isChanged && {
-      transform: "translateY(-".concat(slotNumbersHeight, "px)"),
+      transform: reverse ? "translateY(0px)" : "translateY(-".concat(slotNumbersHeight, "px)"),
       transition: "transform ".concat(effectiveDuration, "s ").concat(delay, "s ease-in-out")
@@ -282,2 +292,4 @@ })
     var slotNumbersHeight = fontHeight * (dummyList.length + 1);
+    var prevValue = prevValueRef.current;
+    var reverseAnimation = value != null && prevValue != null && isNumeric(value) ? toNumeric(value) < toNumeric(prevValue) : false;
     if (SEPARATOR.includes(v)) {
@@ -302,3 +314,4 @@ return React.createElement("div", {
       hasInfiniteList: hasInfiniteList,
-      valueClassName: valueClassName
+      valueClassName: valueClassName,
+      reverse: reverseAnimation
     });
@@ -305,0 +318,0 @@ }));

lib/utils.d.ts

@@ -5,1 +5,3 @@ export declare const mergeClassNames: (...args: (string | null | undefined)[]) => string;
 export declare const shuffle: (arr: (number | string)[]) => (string | number)[];
+export declare const toNumeric: (value: string | string[] | number) => string | number;
+export declare const isNumeric: (value: string | string[] | number) => boolean;

package.json

 {
   "name": "react-slot-counter",
-  "version": "1.4.3",
-  "description": "React Slot Counter Component",
+  "version": "1.5.0",
+  "description": "A versatile and engaging component to display numbers in a captivating slot machine UI, perfect for enhancing user experience and grabbing attention in your web projects",
   "author": "almond-bongbong",
@@ -6,0 +6,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38321

increased by4.38%

Lines of code

653

increased by4.65%

No dependency changes