@jupyterlab/git
Version:
A JupyterLab extension for version control using git
30 lines (29 loc) • 2.31 kB
JavaScript
import { caretDownIcon } from '@jupyterlab/ui-components';
import * as React from 'react';
import { classes } from 'typestyle';
import { FixedSizeList } from 'react-window';
import { changeStageButtonStyle, sectionAreaStyle, sectionFileContainerStyle, sectionHeaderActionsStyle, sectionHeaderSizeStyle } from '../style/GitStageStyle';
import { stopPropagation } from '../utils';
const HEADER_HEIGHT = 34;
const ITEM_HEIGHT = 25;
export const GitStage = (props) => {
var _a;
const [showFiles, setShowFiles] = React.useState(true);
const nFiles = props.files.length;
const canToggle = ((_a = props.collapsible) !== null && _a !== void 0 ? _a : false) && nFiles > 0;
const onToggle = () => {
if (canToggle) {
setShowFiles(!showFiles);
}
};
return (React.createElement("div", { className: sectionFileContainerStyle },
React.createElement("div", { className: classes('jp-AccordionPanel-title', showFiles && nFiles > 0 ? 'lm-mod-expanded' : null, sectionAreaStyle), onClick: onToggle },
props.selectAllButton && (React.createElement("span", { style: { display: 'contents' }, onClick: stopPropagation }, props.selectAllButton)),
props.collapsible && (React.createElement("button", { type: "button", className: classes('lm-AccordionPanel-titleCollapser', changeStageButtonStyle), "aria-expanded": canToggle ? showFiles : undefined, "aria-label": props.heading, disabled: !canToggle },
React.createElement(caretDownIcon.react, { tag: "span" }))),
React.createElement("span", { className: "lm-AccordionPanel-titleLabel" }, props.heading),
(nFiles > 0 || props.actions) && (React.createElement("div", { className: classes('jp-AccordionPanel-toolbar', sectionHeaderActionsStyle), onClick: stopPropagation },
props.actions,
nFiles > 0 && (React.createElement("span", { className: sectionHeaderSizeStyle }, nFiles))))),
showFiles && nFiles > 0 && (React.createElement(FixedSizeList, { height: Math.max(Math.min(props.height - HEADER_HEIGHT, nFiles * ITEM_HEIGHT), ITEM_HEIGHT), itemCount: nFiles, itemData: props.files, itemKey: (index, data) => data[index].to, itemSize: ITEM_HEIGHT, style: { overflowX: 'hidden' }, width: 'auto' }, props.rowRenderer))));
};