34 lines
1.5 KiB
TypeScript
34 lines
1.5 KiB
TypeScript
import type { ReactElement } from 'react'
|
|
import type { ChangeStop } from './diffView'
|
|
import { usePinnedHeight } from './useScrollPosition'
|
|
|
|
const CHANGE_NAMES = { add: '新增', mod: '修改', del: '删除' } as const
|
|
|
|
/**
|
|
* 预览右边缘的总览条：从筛选栏下面贴到底，每处改动（见 ChangeStop）按它在文件里的行画一段刻度，新增绿、修改蓝、删除红（删掉的块一条细线），
|
|
* 点刻度跳过去。lineCount 是新文件一共几行。
|
|
*/
|
|
export function OverviewRuler({ stops, lineCount, onPick }: { stops: readonly ChangeStop[], lineCount: number, onPick: (stop: ChangeStop) => void }): ReactElement {
|
|
const top = usePinnedHeight()
|
|
const total = Math.max(lineCount, 1)
|
|
const percent = (line: number): string => `${(Math.min(Math.max(line, 0), total) / total) * 100}%`
|
|
return (
|
|
<nav className="cr-ruler" style={{ top }} aria-label="改动总览">
|
|
<div className="cr-ruler-track">
|
|
{stops.map(stop => (
|
|
<button
|
|
key={stop.id}
|
|
type="button"
|
|
className="cr-ruler-tick"
|
|
data-change={stop.change}
|
|
style={{ top: percent(stop.from), ...(stop.change !== 'del' && { height: percent(stop.to - stop.from + 1) }) }}
|
|
data-tooltip={`${CHANGE_NAMES[stop.change]} · 第 ${stop.from + 1} 行`}
|
|
aria-label={`${CHANGE_NAMES[stop.change]}，第 ${stop.from + 1} 行`}
|
|
onClick={() => onPick(stop)}
|
|
/>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|