@git-temporal/git-temporal-react/lib/app/containers/DifferenceViewerHeader.js

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

"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 styles_1 = require("app/styles");
const stateVars_1 = require("app/selectors/stateVars");
const commits_1 = require("app/selectors/commits");
const setDates_1 = require("app/actions/setDates");
const RevSelector_1 = require("app/components/RevSelector");
const EpochDateTime_1 = require("app/components/EpochDateTime");
const outerStyle = {
    _extends: ['flexRow'],
    flexGrow: 0,
    flexShrink: 0,
    background: '@colors.altBackground',
    color: '@colors.altForeground',
};
const revChildrenStyle = {
    _extends: 'flexColumn',
    alignItems: 'center',
    minWidth: 160,
};
const revSelectorStyle = {
    flexGrow: 1,
    textAlign: 'center',
};
exports.DifferenceViewerHeader = () => {
    const selectedPath = react_redux_1.useSelector(stateVars_1.getSelectedPath);
    const startDate = react_redux_1.useSelector(stateVars_1.getStartDate);
    const endDate = react_redux_1.useSelector(stateVars_1.getEndDate);
    const leftCommit = react_redux_1.useSelector(stateVars_1.getDiffLeftCommit);
    const rightCommit = react_redux_1.useSelector(stateVars_1.getDiffRightCommit);
    const timeplotCommits = react_redux_1.useSelector(commits_1.getCommitsForTimeplot);
    const hasUncommittedChanges = react_redux_1.useSelector(stateVars_1.getHasUncommittedChanges);
    const dispatch = react_redux_1.useDispatch();
    return (react_1.default.createElement("div", { style: styles_1.style(outerStyle) },
        react_1.default.createElement(RevSelector_1.RevSelector, { style: styles_1.style(revSelectorStyle), disablePrevious: shouldDisablePrevious(leftCommit), disableNext: shouldDisableNext(leftCommit), onNextRevClick: onLeftRevNext, onPreviousRevClick: onLeftRevPrevious }, renderRevChildren('left', leftCommit)),
        react_1.default.createElement(RevSelector_1.RevSelector, { style: styles_1.style(revSelectorStyle), disablePrevious: shouldDisablePrevious(rightCommit), disableNext: shouldDisableNext(rightCommit), onNextRevClick: onRightRevNext, onPreviousRevClick: onRightRevPrevious }, renderRevChildren('right', rightCommit))));
    function renderRevChildren(which, _commit) {
        if (!timeplotCommits || timeplotCommits.length === 0) {
            return null;
        }
        const commit = which === 'left' && !_commit
            ? timeplotCommits[0]
            : which === 'right' && !_commit && !hasUncommittedChanges
                ? timeplotCommits[0]
                : _commit;
        return (react_1.default.createElement("div", { style: styles_1.style(revChildrenStyle) }, commit ? (react_1.default.createElement(react_1.default.Fragment, null,
            react_1.default.createElement("div", { style: styles_1.style('flexRow') },
                react_1.default.createElement(EpochDateTime_1.EpochDateTime, { value: commit.authorDate })),
            react_1.default.createElement("div", { style: styles_1.style('flexRow') },
                "(#",
                commit.hash,
                ")",
                commit.id === timeplotCommits[0].id && ' (Local HEAD)'))) : (react_1.default.createElement("div", { style: styles_1.style('flexRow') }, "Uncommitted Changes"))));
    }
    function shouldDisablePrevious(commit) {
        if (!timeplotCommits) {
            return true;
        }
        return ((commit && commit === timeplotCommits[timeplotCommits.length - 1]) ||
            (commit && commit === rightCommit && rightCommit === leftCommit));
    }
    function shouldDisableNext(commit) {
        if (!timeplotCommits || !commit) {
            return true;
        }
        return commit === null;
    }
    function onLeftRevPrevious() {
        setLeftRev(-1);
    }
    function onLeftRevNext() {
        setLeftRev(1);
    }
    function setLeftRev(relativeIndex) {
        if (!timeplotCommits || timeplotCommits.length === 0) {
            return;
        }
        let newLeftCommit = null;
        if (leftCommit) {
            const foundIndex = timeplotCommits.findIndex(commit => {
                return commit.id === leftCommit.id;
            });
            if (foundIndex !== -1) {
                newLeftCommit = timeplotCommits[foundIndex - relativeIndex];
            }
        }
        else if (relativeIndex < 0) {
            newLeftCommit = timeplotCommits[2];
        }
        if (newLeftCommit) {
            dispatch(setDates_1.setDates((newLeftCommit.authorDate + 1) * 1000, endDate * 1000));
        }
    }
    function onRightRevPrevious() {
        setRightRev(-1);
    }
    function onRightRevNext() {
        setRightRev(1);
    }
    function setRightRev(relativeIndex) {
        if (!timeplotCommits || timeplotCommits.length === 0) {
            return;
        }
        let newRightCommit = null;
        if (rightCommit) {
            const foundIndex = timeplotCommits.findIndex(commit => {
                return commit.id === rightCommit.id;
            });
            if (foundIndex !== -1) {
                newRightCommit = timeplotCommits[foundIndex - relativeIndex];
            }
        }
        else if (relativeIndex < 0) {
            newRightCommit = timeplotCommits[0];
        }
        if (newRightCommit) {
            dispatch(setDates_1.setDates(startDate * 1000, (newRightCommit.authorDate + 1) * 1000));
        }
    }
};