2018-02-19 14:23:47 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
*
|
|
|
|
* FileIcon
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import cn from 'classnames';
|
|
|
|
|
2018-02-23 14:57:15 +01:00
|
|
|
import ext from './extensions.json';
|
|
|
|
|
2018-02-19 14:23:47 +01:00
|
|
|
import styles from './styles.scss';
|
|
|
|
|
|
|
|
function FileIcon({ fileType }) {
|
2018-02-22 12:55:13 +01:00
|
|
|
const iconType = (() => {
|
2018-02-23 14:57:15 +01:00
|
|
|
switch (true) {
|
|
|
|
case ext.archive.includes(fileType):
|
|
|
|
return 'file-archive-o';
|
|
|
|
case ext.code.includes(fileType):
|
|
|
|
return 'file-code-o';
|
|
|
|
case ext.img.includes(fileType):
|
|
|
|
return 'file-image-o';
|
|
|
|
case ext.pdf.includes(fileType):
|
|
|
|
return 'file-pdf-o';
|
|
|
|
case ext.powerpoint.includes(fileType):
|
|
|
|
return 'file-powerpoint-o';
|
|
|
|
case ext.video.includes(fileType):
|
|
|
|
return 'file-video-o';
|
|
|
|
case ext.word.includes(fileType):
|
|
|
|
return 'file-word-o';
|
2018-02-22 12:55:13 +01:00
|
|
|
default:
|
2018-02-23 14:57:15 +01:00
|
|
|
return 'file';
|
2018-02-22 14:01:24 +01:00
|
|
|
}
|
2018-02-22 12:55:13 +01:00
|
|
|
})();
|
2018-02-19 14:23:47 +01:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className={(cn(
|
|
|
|
styles.fileIconContainer,
|
2018-02-23 14:57:15 +01:00
|
|
|
iconType === 'file-pdf-o' && styles.pdf,
|
|
|
|
iconType === 'file-zip-o' && styles.zip,
|
|
|
|
iconType === 'file-image-o' && styles.image,
|
|
|
|
iconType === 'file-video-o' && styles.video,
|
|
|
|
iconType === 'file-code-o' && styles.code,
|
2018-02-19 14:23:47 +01:00
|
|
|
))}
|
|
|
|
>
|
2018-02-23 14:57:15 +01:00
|
|
|
<i className={`fa fa-${iconType}`} />
|
2018-02-19 14:23:47 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
FileIcon.defaultProps = {
|
|
|
|
fileType: 'zip',
|
|
|
|
};
|
|
|
|
|
|
|
|
FileIcon.propTypes = {
|
|
|
|
fileType: PropTypes.string,
|
|
|
|
};
|
|
|
|
|
|
|
|
export default FileIcon;
|