All files / app/components AuthorCard.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                                                3x             3x         3x       3x       3x 15x 15x   15x                                                                                              
import React from 'react';
import { style } from 'app/styles';
 
import { AuthorGravatarImage } from 'app/components/AuthorGravatarImage';
import { AddedDeleted } from 'app/components/AddedDeleted';
import { PercentBar } from 'app/components/PercentBar';
import { EpochSpan } from 'app/components/EpochSpan';
import { Selectable } from 'app/components/Selectable';
 
import { IAuthorStats } from 'app/interfaces';
 
export interface AuthorCardProps {
  author: IAuthorStats;
  totalLinesAdded: number;
  totalLinesDeleted: number;
  totalCommits: number;
  maxImpact: number;
  maxCommits: number;
  onClick: (evt, commit: IAuthorStats, index: number) => void;
  isHighlighted?: boolean;
  index?: number;
  style?: string | object;
}
 
const menuItemStyle = {
  fontSize: 'initial',
  display: 'flex',
  padding: 10,
  width: '100%',
};
 
const identifiersStyle = {
  _extends: 'flexColumn',
  width: '100%',
  marginLeft: 10,
};
const authorNameStyle = {
  marginBottom: 5,
};
 
const addedDeletedStyle = {
  float: 'none',
};
 
export const AuthorCard = (props: AuthorCardProps): JSX.Element => {
  const { author, maxImpact, maxCommits, index, isHighlighted } = props;
  const addStyles = isHighlighted ? 'selected' : {};
 
  return (
    <div style={style('flexRow', props.style)}>
      <Selectable
        style={style(menuItemStyle, addStyles)}
        onClick={evt => props.onClick(evt, author, index)}
      >
        <AuthorGravatarImage emails={author.authorEmails} />
        <div style={style(identifiersStyle)}>
          <div
            title={author.authorEmails.join(', ')}
            style={style(authorNameStyle)}
          >
            {author.authorName}
          </div>
 
          <div style={style('smallerText')}>
            <div>
              {author.commits.length}
              <span> commits spanning </span>
              <EpochSpan
                firstEpochTime={author.firstCommitOn}
                secondEpochTime={author.lastCommitOn}
              />
            </div>
          </div>
 
          <div style={style('smallerText')}>
            <span>Last commit </span>
            <EpochSpan
              firstEpochTime={author.lastCommitOn}
              secondEpochTime={Date.now() / 1000}
            />
            <span> ago</span>
          </div>
          <div style={style('smallerText')}>
            <AddedDeleted
              linesAdded={author.linesAdded}
              linesDeleted={author.linesDeleted}
              style={style(addedDeletedStyle)}
            />
            <span> lines changed </span>
          </div>
        </div>
      </Selectable>
    </div>
  );
};