23 lines
1.0 KiB
TypeScript
23 lines
1.0 KiB
TypeScript
import { formatSize, formatTransferProgress, type TransferState } from '@/lib/format';
|
|
import styles from './TransferProgress.module.css';
|
|
|
|
interface Props {
|
|
state: TransferState & { sentBytes?: number; totalBytes?: number };
|
|
/** 排队中或上传中的文件可以取消 */
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
/** 文件上传的进度:一行状态文字,一条进度条,可取消 */
|
|
export function TransferProgress({ state, onCancel }: Props) {
|
|
const queued = state.phase === 'queued';
|
|
const detail = state.sentBytes !== undefined && state.totalBytes ? `${formatSize(state.sentBytes)} / ${formatSize(state.totalBytes)}` : '';
|
|
return <div className={styles.transfer} role="status">
|
|
<div className={styles.line}>
|
|
<span>{formatTransferProgress(state)}</span>
|
|
{detail && !queued ? <small>{detail}</small> : null}
|
|
{onCancel ? <button type="button" className={styles.cancel} onClick={onCancel}>取消</button> : null}
|
|
</div>
|
|
{queued ? null : <progress max={1} value={state.progress} aria-label="上传进度" />}
|
|
</div>;
|
|
}
|