@jupyterlab/git
Version:
A JupyterLab extension for version control using git
56 lines (55 loc) • 3.41 kB
JavaScript
import { fileIcon } from '@jupyterlab/ui-components';
import * as React from 'react';
import { FixedSizeList } from 'react-window';
import { classes } from 'typestyle';
import { getDiffProvider } from '../model';
import { deletionsMadeIcon, diffIcon, insertionsMadeIcon } from '../style/icons';
import { commitClass, commitDetailClass, commitDetailFileClass, commitDetailHeaderClass, commitOverviewNumbersClass, deletionsIconClass, fileListClass, iconClass, insertionsIconClass } from '../style/SinglePastCommitInfo';
import { ActionButton } from './ActionButton';
import { FilePath } from './FilePath';
/**
* File list item height
*/
const ITEM_HEIGHT = 24;
/**
* Maximal number of file display at once
*/
const MAX_VISIBLE_FILES = 5;
/**
* Display differences between two commits
*/
export class CommitDiff extends React.PureComponent {
constructor() {
super(...arguments);
this._renderFile = (props) => {
const { data, index, style } = props;
const file = data[index];
const path = file.modified_file_path;
const previous = file.previous_file_path;
const flg = !!getDiffProvider(path) || !file.is_binary;
return (React.createElement("li", { className: commitDetailFileClass, onClick: this.props.onOpenDiff(path, flg, previous), style: style, title: path },
React.createElement(FilePath, { filepath: path, filetype: file.type }),
flg ? (React.createElement(ActionButton, { icon: diffIcon, title: this.props.trans.__('View file changes') })) : null));
};
}
render() {
var _a;
return (React.createElement("div", { className: this.props.className },
React.createElement("div", { className: commitClass },
React.createElement("div", { className: commitOverviewNumbersClass },
React.createElement("span", { title: this.props.trans.__('# Files Changed') },
React.createElement(fileIcon.react, { className: iconClass, tag: "span" }),
this.props.numFiles),
React.createElement("span", { title: this.props.trans.__('# Insertions') },
React.createElement(insertionsMadeIcon.react, { className: classes(iconClass, insertionsIconClass), tag: "span" }),
this.props.insertions),
React.createElement("span", { title: this.props.trans.__('# Deletions') },
React.createElement(deletionsMadeIcon.react, { className: classes(iconClass, deletionsIconClass), tag: "span" }),
this.props.deletions))),
React.createElement("div", { className: commitDetailClass },
React.createElement("div", { className: commitDetailHeaderClass },
this.props.trans.__('Changed'), (_a = this.props.actions) !== null && _a !== void 0 ? _a : null),
this.props.files.length > 0 && (React.createElement(FixedSizeList, { className: fileListClass, height: Math.min(MAX_VISIBLE_FILES, this.props.files.length) *
ITEM_HEIGHT, innerElementType: "ul", itemCount: this.props.files.length, itemData: this.props.files, itemKey: (index, data) => data[index].modified_file_path, itemSize: ITEM_HEIGHT, style: { overflowX: 'hidden' }, width: 'auto' }, this._renderFile)))));
}
}