65 lines
1.8 KiB
TypeScript
65 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import classNames from 'classnames';
|
|
|
|
import { Image } from './Image';
|
|
|
|
import { AttachmentType, isImageAttachment } from '../../types/Attachment';
|
|
import { LocalizerType } from '../../types/Util';
|
|
|
|
interface Props {
|
|
isLoaded: boolean;
|
|
title: string;
|
|
domain: string;
|
|
image?: AttachmentType;
|
|
|
|
i18n: LocalizerType;
|
|
onClose?: () => void;
|
|
}
|
|
|
|
export class StagedLinkPreview extends React.Component<Props> {
|
|
public render() {
|
|
const { isLoaded, onClose, i18n, title, image, domain } = this.props;
|
|
|
|
const isImage = image && isImageAttachment(image);
|
|
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
'module-staged-link-preview',
|
|
!isLoaded ? 'module-staged-link-preview--is-loading' : null
|
|
)}
|
|
>
|
|
{!isLoaded ? (
|
|
<div className="module-staged-link-preview__loading">
|
|
{i18n('loadingPreview')}
|
|
</div>
|
|
) : null}
|
|
{isLoaded && image && isImage ? (
|
|
<div className="module-staged-link-preview__icon-container">
|
|
<Image
|
|
alt={i18n('stagedPreviewThumbnail', [domain])}
|
|
softCorners={true}
|
|
height={72}
|
|
width={72}
|
|
url={image.url}
|
|
attachment={image}
|
|
i18n={i18n}
|
|
/>
|
|
</div>
|
|
) : null}
|
|
{isLoaded ? (
|
|
<div className="module-staged-link-preview__content">
|
|
<div className="module-staged-link-preview__title">{title}</div>
|
|
<div className="module-staged-link-preview__location">{domain}</div>
|
|
</div>
|
|
) : null}
|
|
<div
|
|
role="button"
|
|
className="module-staged-link-preview__close-button"
|
|
onClick={onClose}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|