overleaf/services/web/frontend/js/features/binary-file/components/binary-file.js
Chrystal Maria Griffiths 3dfcb95802 Merge pull request #3960 from overleaf/cmg-binary-file
[BinaryFile] Reopening of Binary file React migration

GitOrigin-RevId: 050e66e3321bd6579d44932b669fc0a31df06d18
2021-04-29 02:09:38 +00:00

114 lines
2.5 KiB
JavaScript

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import BinaryFileHeader from './binary-file-header'
import BinaryFileImage from './binary-file-image'
import BinaryFileText from './binary-file-text'
import Icon from '../../../shared/components/icon'
import { useTranslation } from 'react-i18next'
const imageExtensions = ['png', 'jpg', 'jpeg', 'gif']
const textExtensions = [
'tex',
'latex',
'sty',
'cls',
'bst',
'bib',
'bibtex',
'txt',
'tikz',
'mtx',
'rtex',
'md',
'asy',
'latexmkrc',
'lbx',
'bbx',
'cbx',
'm',
'lco',
'dtx',
'ins',
'ist',
'def',
'clo',
'ldf',
'rmd',
'lua',
'gv',
]
export default function BinaryFile({ file, storeReferencesKeys }) {
const extension = file.name.split('.').pop().toLowerCase()
const [contentLoading, setContentLoading] = useState(true)
const [hasError, setHasError] = useState(false)
const { t } = useTranslation()
const isUnpreviewableFile =
!imageExtensions.includes(extension) && !textExtensions.includes(extension)
function handleLoading() {
if (contentLoading) {
setContentLoading(false)
}
}
function handleError() {
if (!hasError) {
setContentLoading(false)
setHasError(true)
}
}
const content = (
<>
<BinaryFileHeader file={file} storeReferencesKeys={storeReferencesKeys} />
{imageExtensions.includes(extension) && (
<BinaryFileImage
fileName={file.name}
fileId={file.id}
onLoad={handleLoading}
onError={handleError}
/>
)}
{textExtensions.includes(extension) && (
<BinaryFileText
file={file}
onLoad={handleLoading}
onError={handleError}
/>
)}
</>
)
return (
<div className="binary-file full-size">
{!hasError && content}
{!isUnpreviewableFile && contentLoading && <BinaryFileLoadingIndicator />}
{(isUnpreviewableFile || hasError) && (
<p className="no-preview">{t('no_preview_available')}</p>
)}
</div>
)
}
function BinaryFileLoadingIndicator() {
const { t } = useTranslation()
return (
<div className="loading-panel loading-panel-binary-files">
<span>
<Icon type="refresh" modifier="spin" />
&nbsp;&nbsp;{t('loading')}
</span>
</div>
)
}
BinaryFile.propTypes = {
file: PropTypes.shape({
id: PropTypes.string,
name: PropTypes.string,
}).isRequired,
storeReferencesKeys: PropTypes.func.isRequired,
}