All files / app/components CommitBody.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                  6x         6x           6x                   6x         6x 11x             6x 1x     6x 1x       6x 1x     1x 1x 1x   1x               6x  
import React from 'react';
import { style } from 'app/styles';
 
export interface CommitBodyProps {
  text: string;
  style?: object;
  isExpanded?: boolean;
}
 
const containerStyle = {
  _extends: ['normalText', 'block'],
  position: 'relative',
  marginLeft: 10,
};
const constrainedStyle = {
  maxHeight: 70,
  overflow: 'hidden',
  marginBottom: 10,
  boxShadow: 'rgba(245, 245, 245, 0.5) 0px -34px 11px -18px inset',
};
const constrainedIndicatorStyle = {
  position: 'absolute',
  bottom: 0,
  display: 'block',
  height: 20,
  width: '100%',
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  background: 'linear-gradient(#ffffff00, white)',
};
 
const breakLineStyle = {
  display: 'block',
  marginBottom: 5,
};
 
const renderBreakLine = (line, index) => {
  return (
    <div key={index} style={style(breakLineStyle)}>
      {line}
    </div>
  );
};
 
const renderBrText = text => {
  return text.split(/\<br\>/gi).map(renderBreakLine);
};
 
const renderContstrainedIndicator = isExpanded => {
  return isExpanded ? null : <div style={style(constrainedIndicatorStyle)} />;
};
 
// numbers for humans have commas
export const CommitBody = (props: CommitBodyProps): JSX.Element => {
  Iif (!props.text || props.text.replace(/\s/g, '') === '') {
    return null;
  }
  const styles = [containerStyle, props.style];
  Eif (!props.isExpanded) {
    styles.push(constrainedStyle);
  }
  return (
    <div style={style(styles)}>
      {renderBrText(props.text)}
      {renderContstrainedIndicator(props.isExpanded)}
    </div>
  );
};
 
CommitBody.displayName = 'CommitBody';