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';
|