All files / app GitTemporal.tsx

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98                                1x 6x 6x 6x 6x   6x                         1x           1x                 4x 4x 4x               2x 1x 1x         6x   6x                                                        
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { debug } from 'app/utilities/logger';
 
import { GitTemporalProps, DispatchProps, StateProps } from 'app/interfaces';
import { selectPath } from 'app/actions';
import { handleVscodeMessages } from 'app/actions/vscode';
import { getGitTemporalContainerState } from 'app/selectors';
import { style, getStyleVar } from 'app/styles';
 
import { Header } from 'app/containers/Header';
import { DifferenceViewer } from 'app/containers/DifferenceViewer';
import Timeplot from 'app/containers/Timeplot';
 
import { SidePanel } from './containers/SidePanel';
 
const pageStyle = () => {
  const pageMarginTop = getStyleVar('margins', 'pageTop');
  const pageMarginLeft = getStyleVar('margins', 'pageLeft');
  const pageMarginBottom = getStyleVar('margins', 'pageBottom');
  const pageMarginRight = 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',
};
 
export class GitTemporal extends Component<
  GitTemporalProps & DispatchProps & StateProps
> {
  componentDidMount() {
    const { path, dispatch } = this.props;
    dispatch(selectPath(path));
    handleVscodeMessages(dispatch);
  }
 
  componentWillUnmount() {
    debug('unmounting GitTemporal');
  }
 
  componentWillReceiveProps(nextProps) {
    if (nextProps.path !== this.props.path) {
      const { dispatch, path } = nextProps;
      dispatch(selectPath(path));
    }
  }
 
  render() {
    debug('rendering GitTemporal');
 
    return (
      <div style={style(pageStyle())}>
        <div style={style('flexColumn', mainContainerStyle)}>
          <Header />
          <div
            style={style('flexRow', 'flexGrow', {
              overflow: 'hidden',
              height: '100%',
            })}
          >
            <SidePanel />
            <div
              style={style('flexColumn', 'flexGrow', {
                transition: `all .5 ease`,
                overflow: 'hidden',
              })}
            >
              <DifferenceViewer />
              <Timeplot />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
 
export default connect(getGitTemporalContainerState)(GitTemporal);