Merge pull request #24 from slatejack/feature/status-type

Feature/status-type
slatejack · Jul 17, 2024 · 4bd904d · 4bd904d
2 parents ada9a92 + 7b588e1
commit 4bd904d
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 17 deletions.
diff --git a/.idea/material_theme_project_new.xml b/.idea/material_theme_project_new.xml
diff --git a/src/bulletScreen.tsx b/src/bulletScreen.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import {defaultOptions, getContainer} from '@/utils/bulletHelper';
-import {BulletStyle, pushItem, screenElement, ScreenOpsTypes} from '@/interface/screen';
+import {AnimationPlayState, BulletStyle, pushItem, screenElement, ScreenOpsTypes} from '@/interface/screen';
 import {isPlainObject} from '@/utils/utils';
 import StyledBullet from './styleBullet';
+import {ANIMATION_PLAY_STATE, TRACK_STATUS} from '@/constants/common';
 
 
 type queueType = [pushItem, HTMLElement, (BulletStyle | undefined)];
@@ -39,7 +40,7 @@ class BulletScreen {
      */
     initBulletTrack(trackHeight: number) {
         const {height} = this.target.getBoundingClientRect();
-        this.tracks = new Array(Math.floor(height / trackHeight)).fill('idle'); // idle代表闲置状态的轨道
+        this.tracks = new Array(Math.floor(height / trackHeight)).fill(TRACK_STATUS.free);
         const {position} = getComputedStyle(this.target);
         if (position === 'static') {
             this.target.style.position = 'relative';
@@ -123,25 +124,25 @@ class BulletScreen {
         return <></>;
     }
 
-    _toggleAnimateStatus = (id: string | null, status = 'paused') => {
+    _toggleAnimateStatus = (id: string | null, status: AnimationPlayState = 'paused') => {
         const currItem = this.bullets.find(item => item.id == id);
         if (currItem) {
             currItem.style.animationPlayState = status;
             return;
         }
 
-        this.allPaused = status === 'paused';
+        this.allPaused = status === ANIMATION_PLAY_STATE.paused;
         this.bullets.forEach(item => {
             item.style.animationPlayState = status;
         });
     };
 
     pause(id: string | null = null) {
-        this._toggleAnimateStatus(id, 'paused');
+        this._toggleAnimateStatus(id, ANIMATION_PLAY_STATE.paused as AnimationPlayState);
     }
 
     resume(id: string | null = null) {
-        this._toggleAnimateStatus(id, 'running');
+        this._toggleAnimateStatus(id, ANIMATION_PLAY_STATE.running as AnimationPlayState);
     }
 
     hide() {
@@ -173,7 +174,7 @@ class BulletScreen {
             item.remove();
         });
         const {height} = this.target.getBoundingClientRect();
-        this.tracks = new Array(Math.floor(height / this.options.trackHeight)).fill('idle');
+        this.tracks = new Array(Math.floor(height / this.options.trackHeight)).fill(TRACK_STATUS.free);
         this.queues = [];
         this.bullets = [];
     }
@@ -196,7 +197,7 @@ class BulletScreen {
         let idx = -1;
         // 优先取空闲状态的
         this.tracks.forEach((status, index) => {
-            if (status === 'idle') {
+            if (status === TRACK_STATUS.free) {
                 readyIdxs.push(index);
             }
         });
@@ -206,7 +207,7 @@ class BulletScreen {
         if (idx === -1) {
             // 其次是可以接上状态的
             this.tracks.forEach((status, index) => {
-                if (status === 'feed') {
+                if (status === TRACK_STATUS.feed) {
                     readyIdxs.push(index);
                 }
             });
@@ -216,7 +217,7 @@ class BulletScreen {
         }
         // 如果此时状态值不等于-1，则说明该轨道在占用中
         if (idx !== -1) {
-            this.tracks[idx] = 'running';
+            this.tracks[idx] = TRACK_STATUS.occupied;
         }
         return idx;
     }
@@ -257,7 +258,7 @@ class BulletScreen {
                                 }
                             } else {
                                 if (typeof (trackIdx) !== 'undefined') {
-                                    this.tracks[trackIdx] = 'feed';
+                                    this.tracks[trackIdx] = TRACK_STATUS.feed;
                                 }
                             }
                         }

diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -0,0 +1,10 @@
+export const TRACK_STATUS = {
+    free: 'idle', // 空闲状态
+    feed: 'feed', // 占用结束状态
+    occupied: 'running', // 占用中
+};
+
+export const ANIMATION_PLAY_STATE = {
+    paused: 'paused',
+    running: 'running',
+};
diff --git a/src/interface/screen.ts b/src/interface/screen.ts
@@ -34,10 +34,15 @@ interface BulletStyle {
     bottom?: string;
 }
 
+type AnimationPlayState = 'running' | 'paused';
+type TrackStatus = 'idle' | 'feed' | 'running';
+
 export type {
     pushItem,
     screenElement,
     ScreenOpsTypes,
     pushItemObj,
     BulletStyle,
+    AnimationPlayState,
+    TrackStatus,
 };
diff --git a/typings/bulletScreen.d.ts b/typings/bulletScreen.d.ts
@@ -1,4 +1,4 @@
-import { BulletStyle, pushItem, screenElement, ScreenOpsTypes } from '@/interface/screen';
+import { AnimationPlayState, BulletStyle, pushItem, screenElement, ScreenOpsTypes } from '@/interface/screen';
 declare type queueType = [pushItem, HTMLElement, (BulletStyle | undefined)];
 declare class BulletScreen {
     target: HTMLElement;
@@ -30,7 +30,7 @@ declare class BulletScreen {
      * @param Item
      */
     getRenderDom(Item: pushItem): JSX.Element;
-    _toggleAnimateStatus: (id: string | null, status?: string) => void;
+    _toggleAnimateStatus: (id: string | null, status?: AnimationPlayState) => void;
     pause(id?: string | null): void;
     resume(id?: string | null): void;
     hide(): void;

diff --git a/typings/constants/common.d.ts b/typings/constants/common.d.ts
@@ -0,0 +1,9 @@
+export declare const TRACK_STATUS: {
+    free: string;
+    feed: string;
+    occupied: string;
+};
+export declare const ANIMATION_PLAY_STATE: {
+    paused: string;
+    running: string;
+};
diff --git a/typings/interface/screen.d.ts b/typings/interface/screen.d.ts
@@ -29,4 +29,6 @@ interface BulletStyle {
     top?: string;
     bottom?: string;
 }
-export type { pushItem, screenElement, ScreenOpsTypes, pushItemObj, BulletStyle, };
+declare type AnimationPlayState = 'running' | 'paused';
+declare type TrackStatus = 'idle' | 'feed' | 'running';
+export type { pushItem, screenElement, ScreenOpsTypes, pushItemObj, BulletStyle, AnimationPlayState, TrackStatus };
diff --git a/typings/src/bulletScreen.d.ts b/typings/src/bulletScreen.d.ts
@@ -1,4 +1,4 @@
-import { BulletStyle, pushItem, screenElement, ScreenOpsTypes } from '@/interface/screen';
+import { AnimationPlayState, BulletStyle, pushItem, screenElement, ScreenOpsTypes } from '@/interface/screen';
 declare type queueType = [pushItem, HTMLElement, (BulletStyle | undefined)];
 declare class BulletScreen {
     target: HTMLElement;
@@ -30,7 +30,7 @@ declare class BulletScreen {
      * @param Item
      */
     getRenderDom(Item: pushItem): JSX.Element;
-    _toggleAnimateStatus: (id: string | null, status?: string) => void;
+    _toggleAnimateStatus: (id: string | null, status?: AnimationPlayState) => void;
     pause(id?: string | null): void;
     resume(id?: string | null): void;
     hide(): void;

diff --git a/typings/src/constants/common.d.ts b/typings/src/constants/common.d.ts
@@ -0,0 +1,9 @@
+export declare const TRACK_STATUS: {
+    free: string;
+    feed: string;
+    occupied: string;
+};
+export declare const ANIMATION_PLAY_STATE: {
+    paused: string;
+    running: string;
+};
diff --git a/typings/src/interface/screen.d.ts b/typings/src/interface/screen.d.ts
@@ -29,4 +29,6 @@ interface BulletStyle {
     top?: string;
     bottom?: string;
 }
-export type { pushItem, screenElement, ScreenOpsTypes, pushItemObj, BulletStyle, };
+declare type AnimationPlayState = 'running' | 'paused';
+declare type TrackStatus = 'idle' | 'feed' | 'running';
+export type { pushItem, screenElement, ScreenOpsTypes, pushItemObj, BulletStyle, AnimationPlayState, TrackStatus };