33 lines
1.4 KiB
TypeScript
33 lines
1.4 KiB
TypeScript
import { formatSize } from '@/lib/format';
|
|
import { useShareSession } from '@/store/shareSession';
|
|
import { Button } from '@/ui/Button';
|
|
import { titleOf } from '@/features/item/summary';
|
|
import { Tile } from '@/features/item/Tile';
|
|
import styles from './DraftRow.module.css';
|
|
|
|
/** 草稿里的一行:可以移除。只在草稿阶段存在 */
|
|
export function DraftRow({ id }: { id: string }) {
|
|
const item = useShareSession((s) => s.byId[id]);
|
|
const removeItem = useShareSession((s) => s.removeItem);
|
|
if (!item) return null;
|
|
|
|
const receiving = item.state.kind === 'receiving' ? item.state.progress : null;
|
|
const size = item.kind === 'file' ? item.size : new Blob([item.text]).size;
|
|
|
|
return (
|
|
<li className={styles.row}>
|
|
<Tile item={item} />
|
|
<span className={styles.text}>
|
|
<span className={styles.title}>{titleOf(item)}</span>
|
|
<span className={styles.sub}>{formatSize(size)}{receiving !== null ? ` · 传输中 ${Math.round(receiving * 100)}%` : ''}</span>
|
|
{receiving !== null ? (
|
|
<span className={styles.bar} role="progressbar" aria-valuenow={Math.round(receiving * 100)}>
|
|
<span className={styles.fill} style={{ width: `${Math.round(receiving * 100)}%` }} />
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
<Button variant="ghost" icon="close" label="移除" onClick={() => void removeItem(id)} />
|
|
</li>
|
|
);
|
|
}
|