41 lines
1.2 KiB
JavaScript
41 lines
1.2 KiB
JavaScript
'use client';
|
||
|
||
import { useEffect, useState } from "react";
|
||
import { RefreshIcon } from './Icons';
|
||
|
||
export default function RefreshButton({ refreshCycleStartRef, refreshMs, manualRefresh, refreshing, fundsLength }) {
|
||
|
||
// 刷新周期进度 0~1，用于环形进度条
|
||
const [refreshProgress, setRefreshProgress] = useState(0);
|
||
|
||
// 刷新进度条：每 100ms 更新一次进度
|
||
useEffect(() => {
|
||
if (fundsLength === 0 || refreshMs <= 0) return;
|
||
const t = setInterval(() => {
|
||
const elapsed = Date.now() - refreshCycleStartRef.current;
|
||
const p = Math.min(1, elapsed / refreshMs);
|
||
setRefreshProgress(p);
|
||
}, 100);
|
||
return () => clearInterval(t);
|
||
}, [fundsLength, refreshMs]);
|
||
|
||
return (
|
||
<div
|
||
className="refresh-btn-wrap"
|
||
style={{ '--progress': refreshProgress }}
|
||
title={`刷新周期 ${Math.round(refreshMs / 1000)} 秒`}
|
||
>
|
||
<button
|
||
className="icon-button"
|
||
aria-label="立即刷新"
|
||
onClick={manualRefresh}
|
||
disabled={refreshing || fundsLength === 0}
|
||
aria-busy={refreshing}
|
||
title="立即刷新"
|
||
>
|
||
<RefreshIcon className={refreshing ? 'spin' : ''} width="18" height="18" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|