@jupyterlab/git
Version:
A JupyterLab extension for version control using git
76 lines (75 loc) • 5.16 kB
JavaScript
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import ListItem from '@mui/material/ListItem';
import ClearIcon from '@mui/icons-material/Clear';
import React from 'react';
import { FixedSizeList } from 'react-window';
import { classes } from 'typestyle';
import { branchIcon } from '../style/icons';
import { actionsWrapperClass, activeListItemClass, branchDialogClass, buttonClass, cancelButtonClass, closeButtonClass, contentWrapperClass, createButtonClass, filterClass, filterClearClass, filterInputClass, filterWrapperClass, listItemClass, listItemContentClass, listItemIconClass, listItemTitleClass, listWrapperClass, titleClass, titleWrapperClass } from '../style/NewBranchDialog';
const ITEM_HEIGHT = 27.5; // HTML element height for a single branch
const HEIGHT = 200; // HTML element height for the branches list
/**
* BranchPicker React component
*
* @param props Component properties
* @returns React element
*/
export function BranchPicker(props) {
const [filter, setFilter] = React.useState('');
const [selectedBranch, setSelectedBranch] = React.useState(null);
const branches = props.branches.filter(branch => !filter || branch.name.includes(filter));
const { action, trans } = props;
const act = action !== null && action !== void 0 ? action : 'merge';
function renderItem(props) {
const { data, index, style } = props;
const branch = data[index];
const isSelected = branch.name === selectedBranch;
return (React.createElement(ListItem, { button: true, title: act === 'merge'
? trans.__('Merge branch %1', branch.name)
: trans.__('Rebase branch %1', branch.name), className: classes(listItemClass, isSelected ? activeListItemClass : null), onClick: () => {
setSelectedBranch(branch.name);
}, style: style },
React.createElement(branchIcon.react, { className: listItemIconClass, tag: "span" }),
React.createElement("div", { className: listItemContentClass },
React.createElement("p", { className: listItemTitleClass }, branch.name))));
}
return (React.createElement(Dialog, { classes: {
paper: branchDialogClass
}, open: true, onClose: () => {
props.onClose();
} },
React.createElement("div", { className: titleWrapperClass },
React.createElement("p", { className: titleClass }, act === 'merge'
? trans.__('Merge Branch')
: trans.__('Rebase Branch')),
React.createElement("button", { className: closeButtonClass },
React.createElement(ClearIcon, { titleAccess: trans.__('Close this dialog'), fontSize: "small", onClick: () => {
props.onClose();
} }))),
React.createElement("div", { className: contentWrapperClass },
React.createElement("p", null, act === 'merge'
? trans.__('Select the branch to merge in %1', props.currentBranch)
: trans.__('Select the branch to rebase %1 onto', props.currentBranch)),
React.createElement("div", { className: filterWrapperClass },
React.createElement("div", { className: filterClass },
React.createElement("input", { className: filterInputClass, type: "text", onChange: event => {
setFilter(event.target.value);
}, value: filter, placeholder: trans.__('Filter'), title: trans.__('Filter branch list') }),
filter ? (React.createElement("button", { className: filterClearClass },
React.createElement(ClearIcon, { titleAccess: trans.__('Clear the current filter'), fontSize: "small", onClick: () => {
setFilter('');
} }))) : null)),
React.createElement(FixedSizeList, { className: listWrapperClass, height: HEIGHT, itemSize: ITEM_HEIGHT, itemCount: branches.length, itemData: branches, itemKey: (index, data) => data[index].name, style: { overflowX: 'hidden' }, width: 'auto' }, renderItem)),
React.createElement(DialogActions, { className: actionsWrapperClass },
React.createElement("input", { className: classes(buttonClass, cancelButtonClass), type: "button", title: act === 'merge'
? trans.__('Close this dialog without merging a branch')
: trans.__('Close this dialog without rebasing the branch'), value: trans.__('Cancel'), onClick: () => {
props.onClose();
} }),
React.createElement("input", { className: classes(buttonClass, createButtonClass), type: "button", title: act === 'merge'
? trans.__('Merge branch')
: trans.__('Rebase branch'), value: act === 'merge' ? trans.__('Merge') : trans.__('Rebase'), onClick: () => {
props.onClose(selectedBranch !== null && selectedBranch !== void 0 ? selectedBranch : undefined);
}, disabled: selectedBranch === null }))));
}