@git-temporal/git-temporal-react/lib/app/GitTemporal.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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
    result["default"] = mod;
    return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_redux_1 = require("react-redux");
const logger_1 = require("app/utilities/logger");
const actions_1 = require("app/actions");
const vscode_1 = require("app/actions/vscode");
const selectors_1 = require("app/selectors");
const styles_1 = require("app/styles");
const Header_1 = require("app/containers/Header");
const DifferenceViewer_1 = require("app/containers/DifferenceViewer");
const Timeplot_1 = __importDefault(require("app/containers/Timeplot"));
const SidePanel_1 = require("./containers/SidePanel");
const pageStyle = () => {
    const pageMarginTop = styles_1.getStyleVar('margins', 'pageTop');
    const pageMarginLeft = styles_1.getStyleVar('margins', 'pageLeft');
    const pageMarginBottom = styles_1.getStyleVar('margins', 'pageBottom');
    const pageMarginRight = styles_1.getStyleVar('margins', 'pageRight');
    return {
        paddingTop: `${pageMarginTop}px`,
        paddingLeft: `${pageMarginLeft}px`,
        paddingBottom: `${pageMarginBottom}px`,
        paddingRight: `${pageMarginRight}px`,
        width: `calc(100% - ${pageMarginLeft + pageMarginRight}px)`,
        height: `calc(100% - ${pageMarginTop + pageMarginBottom}px)`,
        position: 'absolute',
        backgroundColor: '@colors.background',
    };
};
const transitionStyle = {
    _extends: 'flexColumn',
    flexGrow: 1,
    overflow: 'hidden',
};
const mainContainerStyle = {
    height: '100%',
    overflow: 'hidden',
};
class GitTemporal extends react_1.Component {
    componentDidMount() {
        const { path, dispatch } = this.props;
        dispatch(actions_1.selectPath(path));
        vscode_1.handleVscodeMessages(dispatch);
    }
    componentWillUnmount() {
        logger_1.debug('unmounting GitTemporal');
    }
    componentDidUpdate(prevProps) {
        const { dispatch, path } = this.props;
        if (prevProps.path !== path) {
            dispatch(actions_1.selectPath(path));
        }
    }
    render() {
        logger_1.debug('rendering GitTemporal');
        return (react_1.default.createElement("div", { style: styles_1.style(pageStyle()) },
            react_1.default.createElement("div", { style: styles_1.style('flexColumn', mainContainerStyle) },
                react_1.default.createElement(Header_1.Header, null),
                react_1.default.createElement("div", { style: styles_1.style('flexRow', 'flexGrow', {
                        overflow: 'hidden',
                        height: '100%',
                    }) },
                    react_1.default.createElement(SidePanel_1.SidePanel, null),
                    react_1.default.createElement("div", { style: styles_1.style('flexColumn', 'flexGrow', {
                            transition: `all .5 ease`,
                            overflow: 'hidden',
                        }) },
                        react_1.default.createElement(DifferenceViewer_1.DifferenceViewer, null),
                        react_1.default.createElement(Timeplot_1.default, null))))));
    }
}
exports.GitTemporal = GitTemporal;
exports.default = react_redux_1.connect(selectors_1.getGitTemporalContainerState)(GitTemporal);