You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
1.9 KiB
TypeScript
88 lines
1.9 KiB
TypeScript
7 years ago
|
/**
|
||
|
* @prettier
|
||
|
*/
|
||
7 years ago
|
import React from 'react';
|
||
|
|
||
|
import moment from 'moment';
|
||
|
import formatFileSize from 'filesize';
|
||
|
|
||
|
// import { LoadingIndicator } from './LoadingIndicator';
|
||
|
|
||
|
interface Props {
|
||
7 years ago
|
fileName?: string;
|
||
7 years ago
|
fileSize?: number;
|
||
|
i18n: (key: string, values?: Array<string>) => string;
|
||
|
timestamp: number;
|
||
|
}
|
||
|
|
||
|
const styles = {
|
||
|
container: {
|
||
|
width: '100%',
|
||
|
height: 72,
|
||
|
borderBottomWidth: 1,
|
||
|
borderBottomColor: '#ccc',
|
||
|
borderBottomStyle: 'solid',
|
||
|
},
|
||
|
itemContainer: {
|
||
|
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,
|
||
|
},
|
||
|
itemFileSize: {
|
||
|
display: 'inline-block',
|
||
|
marginTop: 8,
|
||
|
fontSize: '80%',
|
||
|
},
|
||
|
};
|
||
|
|
||
7 years ago
|
export class DocumentListItem extends React.Component<Props, {}> {
|
||
7 years ago
|
public renderContent() {
|
||
|
const { fileName, fileSize, timestamp } = this.props;
|
||
|
|
||
|
// if (!attachment.data) {
|
||
|
// return <LoadingIndicator />;
|
||
|
// }
|
||
|
|
||
|
return (
|
||
7 years ago
|
<div style={styles.itemContainer}>
|
||
7 years ago
|
<img
|
||
|
src="images/file.svg"
|
||
|
width="48"
|
||
|
height="48"
|
||
|
style={styles.itemIcon}
|
||
|
/>
|
||
7 years ago
|
<div style={styles.itemMetadata}>
|
||
7 years ago
|
<strong>{fileName}</strong>
|
||
7 years ago
|
<span style={styles.itemFileSize}>
|
||
7 years ago
|
{typeof fileSize === 'number' ? formatFileSize(fileSize) : ''}
|
||
|
</span>
|
||
|
</div>
|
||
7 years ago
|
<div style={styles.itemDate}>
|
||
7 years ago
|
{moment(timestamp).format('ddd, MMM D, Y')}
|
||
7 years ago
|
</div>
|
||
|
</div>
|
||
|
);
|
||
|
}
|
||
|
|
||
|
public render() {
|
||
7 years ago
|
return <div style={styles.container}>{this.renderContent()}</div>;
|
||
7 years ago
|
}
|
||
|
}
|