feat: add a new hook useSimulateProgress

Author: mintsweet

README.md

@@ -38,6 +38,7 @@ import { useRequest } from '@mints/hooks';
 - [useDebounce](./docs/use-debounce.md)
 - [useToggle](./docs/use-toggle.md)
 - [useLocalStorage](./docs/use-localstorage.md)
+- [useSimulateProgress](./docs/use-simulate-progress.md)
 
 ## 🌐 LICENSE
 

__test__/use-simulate-progress.test.ts

@@ -0,0 +1,88 @@
+import { renderHook, act } from '@testing-library/react';
+
+import { useSimulateProgress } from '../src';
+
+// Mock timers
+jest.useFakeTimers();
+
+describe('useSimulateProgress', () => {
+  it('should update progress periodically and reach 100%', () => {
+    const mockCallback = jest.fn();
+    const { result } = renderHook(() =>
+      useSimulateProgress(1000, mockCallback),
+    );
+
+    // Initial progress should be 0
+    expect(result.current).toBe(0);
+
+    // Fast-forward the timer, simulating time passing
+    act(() => {
+      jest.advanceTimersByTime(250);
+    });
+
+    // Progress should update to 25%
+    expect(result.current).toBe(25);
+
+    act(() => {
+      jest.advanceTimersByTime(500); // Fast-forward another 500ms
+    });
+
+    // Progress should update to 75%
+    expect(result.current).toBe(75);
+
+    act(() => {
+      jest.advanceTimersByTime(250); // Finish the remaining time
+    });
+
+    // Progress should be 100%, and callback should be called
+    expect(result.current).toBe(100);
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('should not call callback if progress is less than 100%', () => {
+    const mockCallback = jest.fn();
+    const { result } = renderHook(() =>
+      useSimulateProgress(1000, mockCallback),
+    );
+
+    // Fast-forward the timer to 50%
+    act(() => {
+      jest.advanceTimersByTime(500); // Fast-forward 500ms
+    });
+
+    // Progress should be 50%
+    expect(result.current).toBe(50);
+
+    // Callback should not be called
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  test('should clear interval when unmounted', () => {
+    const mockCallback = jest.fn();
+    const { result, unmount } = renderHook(() =>
+      useSimulateProgress(1000, mockCallback),
+    );
+
+    // Fast-forward the timer halfway
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    // Progress should be 50%
+    expect(result.current).toBe(50);
+
+    // Unmount the component
+    unmount();
+
+    // Clear the timer, ensuring no further updates
+    act(() => {
+      jest.advanceTimersByTime(500); // Finish the remaining time
+    });
+
+    // Progress should not update further
+    expect(result.current).toBe(50);
+
+    // Callback should not be called
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+});

docs/use-simulate-progress.md

@@ -0,0 +1,43 @@
+# useSimulateProgress
+
+> A hook for simulate progress.
+
+## Usage
+
+```javascript
+import { useSimulateProgress } from '@mints/hooks';
+
+const Example = () => {
+  const progress = useSimulateProgress(duration, () => {
+    console.log('Progress complete!');
+  });
+
+  return (
+    <div
+      className="progress-bar"
+      style={{ width: '100%', background: '#e0e0e0', height: '30px' }}
+    >
+      <div
+        style={{
+          width: `${progress}%`,
+          background: 'green',
+          color: '#fff',
+          textAlign: 'center',
+          height: '100%',
+        }}
+      >
+        {progress}%
+      </div>
+    </div>
+  );
+};
+```
+
+## API
+
+```typescript
+useSimulateProgress = (
+  duration: number,
+  onComplete: () => void,
+): number
+```

src/index.ts

@@ -3,4 +3,5 @@ export * from './use-debounce';
 export * from './use-localstorage';
 export * from './use-outside-click';
 export * from './use-request';
+export * from './use-simulate-progress';
 export * from './use-toggle';

src/use-simulate-progress.ts

@@ -0,0 +1,25 @@
+import { useState, useEffect } from 'react';
+
+export const useSimulateProgress = (
+  duration: number,
+  onComplete: () => void,
+) => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    let progressValue = 0;
+    const interval = setInterval(() => {
+      progressValue += 5;
+      setProgress(progressValue);
+
+      if (progressValue >= 100) {
+        clearInterval(interval);
+        onComplete();
+      }
+    }, duration / 20);
+
+    return () => clearInterval(interval);
+  }, [duration, onComplete]);
+
+  return progress;
+};