Overleaf/services/web/frontend/js/features/preview/components/preview-download-button.js

import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, OverlayTrigger, Tooltip } from 'react-bootstrap'
import { useTranslation } from 'react-i18next'
import PreviewDownloadFileList from './preview-download-file-list'
import Icon from '../../../shared/components/icon'

function PreviewDownloadButton({
  isCompiling,
  outputFiles,
  pdfDownloadUrl,
  showText
}) {
  const { t } = useTranslation()

  let textStyle = {}
  if (!showText) {
    textStyle = {
      position: 'absolute',
      right: '-100vw'
    }
  }

  const buttonElement = (
    <a
      className="btn btn-xs btn-info"
      disabled={isCompiling || !pdfDownloadUrl}
      download
      href={pdfDownloadUrl || '#'}
    >
      <Icon type="download" modifier="fw" />
      <span className="toolbar-text" style={textStyle}>
        {t('download_pdf')}
      </span>
    </a>
  )

  return (
    <Dropdown
      id="download-dropdown"
      className="toolbar-item"
      disabled={isCompiling}
    >
      {showText ? (
        buttonElement
      ) : (
        <OverlayTrigger
          placement="bottom"
          overlay={
            <Tooltip id="tooltip-download-pdf">{t('download_pdf')}</Tooltip>
          }
        >
          {buttonElement}
        </OverlayTrigger>
      )}
      <Dropdown.Toggle
        className="btn btn-xs btn-info dropdown-toggle"
        aria-label={t('toggle_output_files_list')}
        bsStyle="info"
      />
      <Dropdown.Menu id="download-dropdown-list">
        <PreviewDownloadFileList fileList={outputFiles} />
      </Dropdown.Menu>
    </Dropdown>
  )
}

PreviewDownloadButton.propTypes = {
  isCompiling: PropTypes.bool.isRequired,
  outputFiles: PropTypes.array,
  pdfDownloadUrl: PropTypes.string,
  showText: PropTypes.bool.isRequired
}

export default PreviewDownloadButton