@git-temporal/git-temporal-react
Version:
<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
72 lines (71 loc) • 3.52 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const styles_1 = require("app/styles");
const Popup_1 = require("app/components/Popup");
const DateTime_1 = require("app/components/DateTime");
const CommitCard_1 = require("app/components/CommitCard");
exports.TIMEPLOT_POPUP_WIDTH = 350;
const defaultPopupStyle = {
_extends: 'normalText',
position: 'absolute',
bottom: 130,
width: exports.TIMEPLOT_POPUP_WIDTH,
right: 'initial',
border: 'solid 4px @colors.selectable',
padding: 0,
zIndex: 10,
};
const headerStyle = {
_extends: 'altPanel',
marginRight: 0,
};
const footerStyle = {
_extends: ['altPanel', 'smallerText', 'flexColumn'],
marginRight: 0,
};
const commitListStyle = {
_extends: 'panel',
maxHeight: 300,
minHeight: 50,
overflow: 'scroll',
marginRight: 0,
};
exports.TimeplotPopup = (props) => {
const { commits, startDate, endDate, isOpen, onClose, onMouseEnter, onMouseLeave, onCommitSelected, } = props;
const popupStyle = {
left: props.left,
};
if (!(commits && startDate && endDate)) {
return null;
}
const commitsText = commits.length === 1 ? 'was one commit' : `were ${commits.length} commits`;
const handleClick = (evt, commit) => {
onCommitSelected(evt, commit, false);
};
const handleDoubleClick = (evt, commit) => {
onCommitSelected(evt, commit, true);
};
return (react_1.default.createElement(Popup_1.Popup, { style: styles_1.style(defaultPopupStyle, popupStyle), isOpen: isOpen, onClose: onClose, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, noBackdrop: true },
react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: styles_1.style(headerStyle) },
react_1.default.createElement("div", { style: styles_1.style('largerText') },
"There ",
commitsText,
" between"),
react_1.default.createElement(DateTime_1.DateTime, { value: startDate }),
" and ",
react_1.default.createElement(DateTime_1.DateTime, { value: endDate })),
react_1.default.createElement("div", { style: styles_1.style(commitListStyle) }, commits.map((commit, index) => (react_1.default.createElement(CommitCard_1.CommitCard, { key: index, commit: commit, onClick: handleClick, onDoubleClick: handleDoubleClick, hideCommitBody: true, hideFiles: true })))),
react_1.default.createElement("div", { style: styles_1.style(footerStyle) },
react_1.default.createElement("div", { style: styles_1.style('flexRow') },
react_1.default.createElement("div", null, "Click to select left revision"),
react_1.default.createElement("div", { style: { flexGrow: 1, textAlign: 'right' } }, "Shift+click to select range"),
' '),
react_1.default.createElement("div", { style: styles_1.style('flexRow', { marginTop: 5 }) },
react_1.default.createElement("div", null, " Click twice to select a single commit"),
react_1.default.createElement("div", { style: { flexGrow: 1, textAlign: 'right' } }, "...or click and drag below"))))));
};