@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 -->
132 lines (131 loc) • 6.06 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 react_redux_1 = require("react-redux");
const logger_1 = require("app/utilities/logger");
const commits_1 = require("app/selectors/commits");
const stateVars_1 = require("app/selectors/stateVars");
const dates_1 = require("app/selectors/dates");
const styles_1 = require("app/styles");
const actions_1 = require("app/actions");
const setDates_1 = require("app/actions/setDates");
const ExplodingDateRange_1 = require("app/components/ExplodingDateRange");
const ResetLink_1 = require("app/components/ResetLink");
const ExplodeOnChange_1 = require("app/components/ExplodeOnChange");
const EpochDateTime_1 = require("app/components/EpochDateTime");
const styles = {
outer: {
_extends: ['flexColumn'],
flexShrink: 0,
},
appName: {
_extends: ['inlineBlock', 'h1Text'],
marginBottom: 10,
},
date: {
_extends: 'largerText',
},
dateSelected: {
_extends: 'bigText',
color: '@colors.selected',
},
dateRange: {
_extends: ['flexGrow', 'flexColumn'],
alignItems: 'flex-end',
paddingTop: '@margins.small+px',
paddingRight: '@margins.large+px',
},
topRow: {
_extends: 'flexRow',
},
path: {
_extends: ['inlineBlock', 'flexColumn'],
marginBottom: 10,
flexGrow: 1,
minHeight: 30,
},
resetLink: {
position: 'relative',
top: '-5px',
},
pathPart: {
extends: 'smallerText',
margin: '0px 2px',
},
pathSeparator: {
color: '@colors.linkText',
wordBreak: 'break-all ',
},
};
exports.Header = () => {
const selectedPath = react_redux_1.useSelector(stateVars_1.getSelectedPath);
const startDate = react_redux_1.useSelector(dates_1.getDefaultedStartDate);
const endDate = react_redux_1.useSelector(dates_1.getDefaultedEndDate);
const areCommitsFiltered = react_redux_1.useSelector(commits_1.getAreCommitsFiltered);
const filteredCommits = react_redux_1.useSelector(commits_1.getFilteredCommits);
const gitRoot = react_redux_1.useSelector(stateVars_1.getGitRoot);
const dispatch = react_redux_1.useDispatch();
const dateStyle = styles_1.style([
styles.date,
areCommitsFiltered && styles.dateSelected,
]);
const singleCommit = areCommitsFiltered && filteredCommits.length === 1 && filteredCommits[0];
return (react_1.default.createElement("div", { style: styles_1.style(styles.outer) },
react_1.default.createElement("div", { style: styles_1.style(styles.topRow) },
react_1.default.createElement("div", { style: styles_1.style(styles.appName) }, "Git Temporal "),
react_1.default.createElement("div", { style: styles_1.style(styles.dateRange) }, filteredCommits.length === 0 ? (react_1.default.createElement("div", null)) : singleCommit ? (react_1.default.createElement(ExplodeOnChange_1.ExplodeOnChange, { value: singleCommit.authorDate, style: dateStyle, initialExplosion: true },
"Single commit (#",
singleCommit.hash,
") on",
' ',
react_1.default.createElement(EpochDateTime_1.EpochDateTime, { value: singleCommit.authorDate, style: dateStyle }))) : (react_1.default.createElement(ExplodingDateRange_1.ExplodingDateRange, { startDate: startDate, endDate: endDate, style: dateStyle })))),
react_1.default.createElement("div", { style: styles_1.style('flexRow') },
react_1.default.createElement("div", { style: styles_1.style(styles.path) },
react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: styles_1.style('h4Text', { marginBottom: 10 }) }, renderPathLinks()))),
areCommitsFiltered && (react_1.default.createElement(ResetLink_1.ResetLink, { style: styles_1.style(styles.resetLink), onClick: onResetDatesClick }, "Reset Date Range")))));
function renderLinkPart(part, index, fullPath, lastIndex) {
const partStyles = [styles.pathPart];
let onClick = undefined;
if (index !== lastIndex) {
partStyles.push('link');
onClick = () => onLinkPartClick(fullPath);
}
const sep = index > 1 ? '/' : index > 0 ? ' : ' : '';
return (react_1.default.createElement("span", { key: index },
react_1.default.createElement("span", { style: styles_1.style(styles.pathSeparator) }, sep),
react_1.default.createElement("span", { style: styles_1.style(partStyles), onClick: onClick, "data-testid": "pathPath" }, part)));
}
function renderPathLinks() {
logger_1.debug('renderPathLinks', { selectedPath, gitRoot });
if (!gitRoot || gitRoot.length === 0) {
return null;
}
let parts = ['(repository root)'];
logger_1.debug('renderPathLinks', { selectedPath, gitRoot });
if (selectedPath && selectedPath.trim().length > 0) {
const relativePath = selectedPath.startsWith(gitRoot)
? selectedPath.slice(gitRoot.length + 1)
: selectedPath;
parts = parts.concat(relativePath.trim().split(/[/\\]/));
}
const lastIndex = parts.length - 1;
let fullPathSoFar = gitRoot || '';
return parts.map((part, index) => {
if (index > 0) {
fullPathSoFar += fullPathSoFar.length > 0 ? `/${part}` : part;
}
return renderLinkPart(part, index, fullPathSoFar, lastIndex);
});
}
function onLinkPartClick(fullPath) {
dispatch(actions_1.selectPath(fullPath));
}
function onResetDatesClick() {
dispatch(setDates_1.setDates(null, null));
dispatch(actions_1.setSearch(null));
}
};