/
FileList.tsx
36 lines (33 loc) · 1004 Bytes
/
FileList.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import React from "react";
import { FilePair } from "./CodeDiff";
import { filePairDisplayName } from "./utils";
export interface Props {
filePairs: FilePair[];
selectedIndex: number;
fileChangeHandler: (newIndex: number) => void;
}
/**
* A list of all the files. Clicking a non-selected file selects it.
* This view is simpler and generally preferable for short lists of files.
*/
export function FileList(props: Props) {
const { filePairs, selectedIndex, fileChangeHandler } = props;
const lis = filePairs.map((filePair, idx) => {
const displayName = filePairDisplayName(filePair);
const content =
idx !== selectedIndex ? (
<a onClick={() => fileChangeHandler(idx)} href="#">
{displayName}
</a>
) : (
<b>{displayName}</b>
);
return (
<li key={idx}>
<span title={filePair.type} className={`diff ${filePair.type}`} />
{content}
</li>
);
});
return <ul className="file-list">{lis}</ul>;
}