All files / app/components CommitCard.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                                                5x           5x     5x       5x       5x             5x         5x                 1x 1x 1x                                                                                 5x  
import React from 'react';
import { style } from 'app/styles';
 
import { ICommit } from 'app/interfaces';
 
import { EpochDateTime } from 'app/components/EpochDateTime';
import { AddedDeleted } from 'app/components/AddedDeleted';
import { CommitBody } from 'app/components/CommitBody';
import { CommitCardFiles } from 'app/components/CommitCardFiles';
import { Selectable } from 'app/components/Selectable';
 
export interface CommitCardProps {
  commit: ICommit;
  index?: number;
  isExpanded?: boolean;
  isHighlighted?: boolean;
  hideFiles?: boolean;
  hideCommitBody?: boolean;
  onClick?: (evt, commit: ICommit, index: number) => void;
  onDoubleClick?: (evt, commit: ICommit, index: number) => void;
  onFileClick?: (evt, fileName: string) => void;
  style?: string | object;
}
 
const defaultCardStyle = {
  _extends: ['card', 'block'],
  marginRight: 0,
  padding: 0,
};
 
const dateLineStyle = {
  _extends: ['smallerText', 'block', 'flexRow'],
};
const messageStyle = {
  _extends: ['largerText', 'block'],
  marginLeft: 5,
};
const authorStyle = {
  _extends: ['normalText', 'block'],
  marginLeft: 5,
};
const filesStyle = {
  _extends: ['block', 'normalText'],
  marginLeft: 10,
  marginRight: 20,
  marginBottom: 10,
};
 
const dateDisplayOptions = {
  month: 'long',
  minute: 'numeric',
};
 
export const CommitCard = (props: CommitCardProps): JSX.Element => {
  const {
    commit,
    isExpanded,
    isHighlighted,
    onFileClick,
    onClick,
    onDoubleClick,
    index,
  } = props;
  const outerOverrideStyle = isHighlighted ? 'selected' : {};
  return (
    <div style={style(defaultCardStyle, props.style, outerOverrideStyle)}>
      <Selectable
        onClick={evt => onClick && onClick(evt, commit, index)}
        onDoubleClick={evt =>
          onDoubleClick && onDoubleClick(evt, commit, index)
        }
      >
        <div style={style(dateLineStyle)}>
          <EpochDateTime
            value={commit.authorDate}
            displayOptions={dateDisplayOptions}
          />
          <span style={{ flexGrow: 1, textAlign: 'center' }}>
            {commit.hash}
          </span>
          <AddedDeleted
            linesAdded={commit.linesAdded}
            linesDeleted={commit.linesDeleted}
          />
        </div>
        <div style={style(messageStyle)}>{commit.message}</div>
        {!props.hideCommitBody && (
          <CommitBody text={commit.body} isExpanded={isExpanded} />
        )}
        {!props.hideFiles && (
          <CommitCardFiles
            files={commit.files}
            isExpanded={isExpanded}
            style={filesStyle}
            onFileClick={onFileClick}
          />
        )}
        <div style={style(authorStyle)}>
          Authored by {commit.authorName} {commit.relativeDate}
        </div>
      </Selectable>
    </div>
  );
};
 
CommitCard.displayName = 'CommitCard';