|
1 | 1 | import React from 'react'; |
| 2 | +import clsx from 'clsx'; |
| 3 | +import { sanitizeUrl } from '@braintree/sanitize-url'; |
2 | 4 |
|
3 | | -import { DownloadIcon } from '../icons'; |
4 | | -import { SafeAnchor } from '../../SafeAnchor'; |
| 5 | +import { useTranslationContext } from '../../../context'; |
| 6 | +import { IconDownload } from '../../Icons'; |
5 | 7 |
|
6 | | -type DownloadButtonProps = { |
| 8 | +export type DownloadButtonProps = { |
| 9 | + /** Attachment asset URL (e.g. `asset_url`). */ |
7 | 10 | assetUrl?: string; |
| 11 | + className?: string; |
| 12 | + /** Suggested filename for the `download` attribute (not the HTML `title` tooltip). */ |
| 13 | + suggestedFileName?: string; |
| 14 | + /** Native browser tooltip; defaults to translated “Download Attachment”. */ |
| 15 | + tooltipTitle?: string; |
8 | 16 | }; |
9 | 17 |
|
10 | | -export const DownloadButton = ({ assetUrl }: DownloadButtonProps) => ( |
11 | | - <SafeAnchor |
12 | | - className='str-chat__message-attachment-file--item-download' |
13 | | - download |
14 | | - href={assetUrl} |
15 | | - target='_blank' |
16 | | - > |
17 | | - <DownloadIcon className='str-chat__message-attachment-download-icon' /> |
18 | | - </SafeAnchor> |
19 | | -); |
| 18 | +/** |
| 19 | + * Icon download control for {@link Audio} and {@link FileAttachment} rows. |
| 20 | + * (BaseImage defines its own small download link when `showDownloadButtonOnError` is used.) |
| 21 | + */ |
| 22 | +export const DownloadButton = ({ |
| 23 | + assetUrl, |
| 24 | + className, |
| 25 | + suggestedFileName, |
| 26 | + tooltipTitle, |
| 27 | +}: DownloadButtonProps) => { |
| 28 | + const { t } = useTranslationContext(); |
| 29 | + if (!assetUrl) return null; |
| 30 | + const href = sanitizeUrl(assetUrl); |
| 31 | + if (!href) return null; |
| 32 | + |
| 33 | + return ( |
| 34 | + <a |
| 35 | + aria-label={t('aria/Download attachment')} |
| 36 | + className={clsx( |
| 37 | + 'str-chat__button', |
| 38 | + 'str-chat__button--secondary', |
| 39 | + 'str-chat__button--outline', |
| 40 | + 'str-chat__button--circular', |
| 41 | + 'str-chat__button--size-sm', |
| 42 | + 'str-chat__audio-attachment-download-button', |
| 43 | + className, |
| 44 | + )} |
| 45 | + download={suggestedFileName ?? ''} |
| 46 | + href={href} |
| 47 | + rel='noopener noreferrer' |
| 48 | + target='_blank' |
| 49 | + title={tooltipTitle ?? t('Download Attachment')} |
| 50 | + > |
| 51 | + <div className='str-chat__button__content'> |
| 52 | + <IconDownload className='str-chat__icon str-chat__audio-attachment-download-button__icon' /> |
| 53 | + </div> |
| 54 | + </a> |
| 55 | + ); |
| 56 | +}; |
0 commit comments