signal-desktop/ts/components/conversation/media-gallery/DocumentListItem.tsx

84 lines
1.9 KiB
TypeScript
Raw Normal View History

2018-04-12 16:23:26 -04:00
import React from 'react';
import moment from 'moment';
import formatFileSize from 'filesize';
interface Props {
2018-04-12 20:56:05 -04:00
fileName?: string;
2018-04-12 16:23:26 -04:00
fileSize?: number;
i18n: (key: string, values?: Array<string>) => string;
2018-04-15 02:16:39 -04:00
onClick?: () => void;
2018-04-12 16:23:26 -04:00
timestamp: number;
}
const styles = {
container: {
width: '100%',
height: 72,
borderBottomWidth: 1,
borderBottomColor: '#ccc',
borderBottomStyle: 'solid',
},
itemContainer: {
cursor: 'pointer',
2018-04-12 16:23:26 -04:00
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'center',
height: '100%',
} as React.CSSProperties,
itemMetadata: {
display: 'inline-flex',
flexDirection: 'column',
flexGrow: 1,
flexShrink: 0,
marginLeft: 8,
marginRight: 8,
} as React.CSSProperties,
itemDate: {
display: 'inline-block',
flexShrink: 0,
},
itemIcon: {
flexShrink: 0,
},
2018-04-24 12:41:32 -04:00
itemFileName: {
fontWeight: 'bold',
} as React.CSSProperties,
2018-04-12 16:23:26 -04:00
itemFileSize: {
display: 'inline-block',
marginTop: 8,
fontSize: '80%',
},
};
2018-04-14 21:11:40 -04:00
export class DocumentListItem extends React.Component<Props, {}> {
2018-04-12 16:23:26 -04:00
public renderContent() {
const { fileName, fileSize, timestamp } = this.props;
return (
2018-04-15 02:16:39 -04:00
<div style={styles.itemContainer} onClick={this.props.onClick}>
2018-04-12 16:23:26 -04:00
<img
src="images/file.svg"
width="48"
height="48"
style={styles.itemIcon}
/>
2018-04-13 16:25:52 -04:00
<div style={styles.itemMetadata}>
2018-04-24 12:41:32 -04:00
<span style={styles.itemFileName}>{fileName}</span>
2018-04-13 16:25:52 -04:00
<span style={styles.itemFileSize}>
2018-04-12 16:23:26 -04:00
{typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
</span>
</div>
2018-04-13 16:25:52 -04:00
<div style={styles.itemDate}>
2018-04-12 17:22:26 -04:00
{moment(timestamp).format('ddd, MMM D, Y')}
2018-04-12 16:23:26 -04:00
</div>
</div>
);
}
public render() {
2018-04-13 16:25:52 -04:00
return <div style={styles.container}>{this.renderContent()}</div>;
2018-04-12 16:23:26 -04:00
}
}