Function FileList

ts/FileList.tsx:15–52

(props: Props)

 * This view is simpler and generally preferable for short lists of files.
 */
export function FileList(props: Props) {
  const {filePairs, selectedIndex, fileChangeHandler} = props;

  const anyWithDiffstats = filePairs.some(fp => fp.num_add !== null || fp.num_delete !== null);
  const maxDelta = React.useMemo(() => {
    return Math.max(1, ...filePairs.map(fp => (fp.num_add ?? 0) + (fp.num_delete ?? 0)));
  }, [filePairs]);

  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}>
        {anyWithDiffstats ? (
          <SparkChart
            maxDelta={maxDelta}
            numAdd={filePair.num_add}
            numDelete={filePair.num_delete}
          />
        ) : null}
        <span title={filePair.type} className={`diff ${filePair.type}`} />
        {content}
      </li>
    );
  });
  return <ul className="file-list">{lis}</ul>;
}

interface SparkChartProps {
  maxDelta: number;