Merge pull request #41 from tuanngocptn/main

Add 'speed' of counter and 'delay' for each colums.
almond-bongbong · Jun 16, 2024 · 50c55cc · 50c55cc
2 parents 22945db + 357eef1
commit 50c55cc
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 8 deletions.
diff --git a/.github/workflows/contribute-list.yml b/.github/workflows/contribute-list.yml
@@ -0,0 +1,19 @@
+name: Contributors readme action
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  contrib-readme-job:
+    runs-on: ubuntu-latest
+    name: Automate contrib in readme
+    permissions:
+      contents: write
+      pull-requests: write
+    steps:
+      - name: Contribute List
+        uses: akhilmhdh/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/README.md b/README.md
@@ -79,6 +79,8 @@ Detailed props for customizing SlotCounter to fit your UI needs:
 | startValue              | `number` \| `string` \| `string[]` \| `JSX.Element[]`   |                                                      | The initial value to be displayed before the animation starts. It sets the beginning of the slot machine animation.                                                                                                                                                                  |
 | startValueOnce          | `boolean`                                               | `false`                                              | If set to true, the animation starts from the `startValue` only for the first render. For subsequent animations, it starts from the last value.                                                                                                                                      |
 | duration                | `number`                                                | `0.7`                                                | The duration of the animation in seconds.                                                                                                                                                                                                                                            |
+| speed                   | `number`                                                | `1.4`                                                | The speed of counter when running.                                                                                                                                                                                                                                                |
+| delay                   | `number`                                                |                                                      | The delay time of each columns                                                                                                                                                                                                                                                       |
 | dummyCharacters         | `string[]` \| `JSX.Element[]`                           | Defaults to random numbers from 0 to 9               | An array of dummy characters to be used in the animation.                                                                                                                                                                                                                            |
 | dummyCharacterCount     | `number`                                                | `6`                                                  | The number of dummy characters to be displayed in the animation before reaching the target character.                                                                                                                                                                                |
 | autoAnimationStart      | `boolean`                                               | `true`                                               | Determines whether the animation should start automatically when the component is first mounted.                                                                                                                                                                                     |
@@ -152,6 +154,47 @@ Check out our [CHANGELOG.md](./CHANGELOG.md) for the latest updates.
 
 Your contributions are welcome! Let's make this project even better together.
 
+## ✨ Contributors
+
+Thanks go to these wonderful people:
+
+<!-- readme: collaborators,contributors -start -->
+<table>
+	<tbody>
+		<tr>
+            <td align="center">
+                <a href="https://github.com/tuanngocptn">
+                    <img src="https://avatars.githubusercontent.com/u/22292704?v=4" width="100;" alt="tuanngocptn"/>
+                    <br />
+                    <sub><b>Nick - Ngoc Pham</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/baronha">
+                    <img src="https://avatars.githubusercontent.com/u/23580920?v=4" width="100;" alt="baronha"/>
+                    <br />
+                    <sub><b>Bảo Hà.</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/almond-bongbong">
+                    <img src="https://avatars.githubusercontent.com/u/42146674?v=4" width="100;" alt="almond-bongbong"/>
+                    <br />
+                    <sub><b>Max</b></sub>
+                </a>
+            </td>
+            <td align="center">
+                <a href="https://github.com/larsjuvik">
+                    <img src="https://avatars.githubusercontent.com/u/77640590?v=4" width="100;" alt="larsjuvik"/>
+                    <br />
+                    <sub><b>larsjuvik</b></sub>
+                </a>
+            </td>
+		</tr>
+	<tbody>
+</table>
+<!-- readme: collaborators,contributors -end -->
+
 ## ❤️ Like Our Work?
 
 Support us with a star ⭐ on GitHub!

diff --git a/src/components/Slot.tsx b/src/components/Slot.tsx
@@ -26,6 +26,8 @@ interface Props {
   useMonospaceWidth: boolean;
   maxNumberWidth?: number;
   onFontHeightChange?: (fontHeight: number) => void;
+  speed: number;
+  duration: number;
 }
 
 function Slot({
@@ -36,6 +38,8 @@ function Slot({
   isChanged,
   effectiveDuration,
   delay,
+  duration,
+  speed,
   value,
   startValue,
   disableStartValue,
@@ -122,9 +126,18 @@ function Slot({
       () => setLocalValue(value),
       sequentialAnimationMode
         ? 0
-        : (effectiveDuration * 1000 * 1.3) / dummyList.length + delay * 1000,
+        : (effectiveDuration * speed * duration * 1000) / dummyList.length + delay * 1000,
     );
-  }, [localActive, value, effectiveDuration, delay, dummyList.length, sequentialAnimationMode]);
+  }, [
+    localActive,
+    value,
+    effectiveDuration,
+    delay,
+    dummyList.length,
+    sequentialAnimationMode,
+    speed,
+    duration,
+  ]);
 
   useEffect(() => {
     setDummyListState(hasSequentialDummyList ? dummyList : shuffle(dummyList));
@@ -173,9 +186,9 @@ function Slot({
           transform: reverse ? `translateY(-${slotNumbersHeight}px)` : `translateY(0px)`,
           ...(localActive &&
             isChanged && {
-              transform: reverse ? `translateY(0px)` : `translateY(-${slotNumbersHeight}px)`,
-              transition: `transform ${effectiveDuration}s ${delay}s ease-in-out`,
-            }),
+            transform: reverse ? `translateY(0px)` : `translateY(-${slotNumbersHeight}px)`,
+            transition: `transform ${effectiveDuration}s ${delay}s ease-in-out`,
+          }),
         }}
       >
         {didMount ? (

diff --git a/src/index.tsx b/src/index.tsx
@@ -42,6 +42,8 @@ interface Props {
   startValue?: Value;
   startValueOnce?: boolean;
   duration?: number;
+  speed?: number;
+  delay?: number;
   dummyCharacters?: string[] | JSX.Element[];
   dummyCharacterCount?: number;
   autoAnimationStart?: boolean;
@@ -66,6 +68,8 @@ function SlotCounter(
     startValue,
     startValueOnce = false,
     duration = 0.7,
+    speed = 1.4,
+    delay,
     dummyCharacters,
     dummyCharacterCount = 6,
     autoAnimationStart: _autoAnimationStart = true,
@@ -175,14 +179,14 @@ function SlotCounter(
    */
   useEffect(() => {
     setDummyList(
-      range(0, effectiveDummyCharacterCount - 1).map((i) => {
+      range(0, effectiveDummyCharacterCount * duration * speed - 1).map((i) => {
         if (!dummyCharacters) return random(0, 10);
 
         const index = i >= dummyCharacters.length ? random(0, dummyCharacters.length) : i;
         return dummyCharacters[index];
       }),
     );
-  }, [dummyCharacters, effectiveDummyCharacterCount]);
+  }, [dummyCharacters, effectiveDummyCharacterCount, speed, duration]);
 
   /**
    * Update valueRef and prevValueRef when value is changed
@@ -232,8 +236,11 @@ function SlotCounter(
    */
   const calculatedInterval = useMemo(() => {
     const MAX_INTERVAL = 0.1;
+    if (delay) {
+      return delay;
+    }
     return Math.min(MAX_INTERVAL, effectiveDuration / valueList.length);
-  }, [effectiveDuration, valueList.length]);
+  }, [effectiveDuration, valueList.length, delay]);
 
   /**
    * Start animation
@@ -492,6 +499,8 @@ function SlotCounter(
             sequentialAnimationMode={sequentialAnimationMode}
             useMonospaceWidth={useMonospaceWidth}
             onFontHeightChange={handleFontHeightChange}
+            speed={speed}
+            duration={duration}
           />
         );
       })}