All files / app/components TimeplotPopup.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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128                                            3x   3x                       3x         3x           3x               3x                   3x 3x     3x 2x     1x   1x       1x       1x                               5x                                                        
import React from 'react';
import { style } from 'app/styles';
 
import { ICommit } from 'app/interfaces';
import { Popup } from 'app/components/Popup';
import { DateTime } from 'app/components/DateTime';
import { CommitCard } from 'app/components/CommitCard';
 
export interface TimeplotPopupProps {
  // This is the text or JSX that gets wrapped in a Toggle Button
  commits: ICommit[];
  startDate: Date;
  endDate: Date;
  left: number;
  isOpen: boolean;
  onClose: () => void;
  onCommitSelected: (evt: object, commit: ICommit, single: boolean) => void;
  onMouseEnter?: (evt: object) => void;
  onMouseLeave?: (evt: object) => void;
  style?: string | object;
}
 
export const TIMEPLOT_POPUP_WIDTH = 350;
 
const defaultPopupStyle = {
  _extends: 'normalText',
  position: 'absolute',
  bottom: 130,
  width: TIMEPLOT_POPUP_WIDTH,
  right: 'initial',
  border: 'solid 4px @colors.selectable',
  padding: 0,
  // at least 9 is required to get above monaco mini diff map
  zIndex: 10,
};
 
const headerStyle = {
  _extends: 'altPanel',
  marginRight: 0,
  // compensate for padding of panel to move this to the top, left & right edges
};
const footerStyle = {
  _extends: ['altPanel', 'smallerText', 'flexColumn'],
  marginRight: 0,
  // compensate for padding of panel to move this to the bottom, left & right edges
};
 
const commitListStyle = {
  _extends: 'panel',
  maxHeight: 300,
  minHeight: 50,
  overflow: 'scroll',
  marginRight: 0,
};
 
export const TimeplotPopup = (props: TimeplotPopupProps): JSX.Element => {
  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 (
    <Popup
      style={style(defaultPopupStyle, popupStyle)}
      isOpen={isOpen}
      onClose={onClose}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      noBackdrop
    >
      <>
        <div style={style(headerStyle)}>
          <div style={style('largerText')}>There {commitsText} between</div>
          <DateTime value={startDate} /> and <DateTime value={endDate} />
        </div>
        <div style={style(commitListStyle)}>
          {commits.map((commit, index) => (
            <CommitCard
              key={index}
              commit={commit}
              onClick={handleClick}
              onDoubleClick={handleDoubleClick}
              hideCommitBody
              hideFiles
            />
          ))}
        </div>
        <div style={style(footerStyle)}>
          <div style={style('flexRow')}>
            <div>Click to select left revision</div>
            <div style={{ flexGrow: 1, textAlign: 'right' }}>
              Shift+click to select range
            </div>{' '}
          </div>
          <div style={style('flexRow', { marginTop: 5 })}>
            <div> Click twice to select a single commit</div>
            <div style={{ flexGrow: 1, textAlign: 'right' }}>
              ...or click and drag below
            </div>
          </div>
        </div>
      </>
    </Popup>
  );
};