@gravity-ui/uikit
Version:
Gravity UI base styling and components
58 lines (57 loc) • 3.4 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { FileZipper as ArchiveIcon, Code as CodeIcon, FileQuestion as DefaultIcon, Picture as ImageIcon, MusicNote as MusicIcon, LogoAcrobat as PdfIcon, LayoutHeaderCellsLarge as TableIcon, TextAlignLeft as TextIcon, Filmstrip as VideoIcon, } from '@gravity-ui/icons';
import { useActionHandlers } from "../../hooks/index.js";
import { Icon } from "../Icon/index.js";
import { Text } from "../Text/index.js";
import { useMobile } from "../mobile/index.js";
import { block } from "../utils/cn.js";
import { FilePreviewActions } from "./FilePreviewActions/FilePreviewActions.js";
import { getFileType } from "./utils.js";
import "./FilePreview.css";
const cn = block('file-preview');
const FILE_ICON = {
default: DefaultIcon,
image: ImageIcon,
video: VideoIcon,
code: CodeIcon,
archive: ArchiveIcon,
audio: MusicIcon,
music: MusicIcon,
text: TextIcon,
pdf: PdfIcon,
table: TableIcon,
};
export function FilePreview(props) {
const { className, qa, file, imageSrc, description, onClick, view = 'default', selected } = props;
const actions = view === 'default' && 'actions' in props ? props.actions : undefined;
const [previewSrc, setPreviewSrc] = React.useState(imageSrc);
const type = getFileType(file);
const mobile = useMobile();
const { onKeyDown } = useActionHandlers(onClick);
React.useEffect(() => {
if (imageSrc || type !== 'image')
return undefined;
try {
const createdUrl = URL.createObjectURL(file);
setPreviewSrc(createdUrl);
return () => {
URL.revokeObjectURL(createdUrl);
};
}
catch {
return undefined;
}
}, [file, imageSrc, type]);
const clickable = Boolean(onClick);
const withActions = Boolean(actions?.length);
const isPreviewString = typeof previewSrc === 'string';
const compact = view === 'compact';
return (_jsxs("div", { className: cn({ mobile, view }, className), "data-qa": qa, children: [_jsxs("div", { className: cn('card', {
clickable,
hoverable: !selected && (clickable || withActions),
selected,
}), role: clickable ? 'button' : undefined, onKeyDown: clickable ? onKeyDown : undefined, tabIndex: clickable ? 0 : undefined, onClick: onClick, children: [isPreviewString ? (_jsx("div", { className: cn('image-container'), children: _jsx("img", { className: cn('image'), src: previewSrc, alt: file.name }) })) : (_jsx("div", { className: cn('icon-container'), children: _jsx("div", { className: cn('icon', { type }), children: _jsx(Icon, { className: cn('icon-svg'), data: FILE_ICON[type], size: 20 }) }) })), !compact && (_jsxs(React.Fragment, { children: [_jsx(Text, { className: cn('name'), color: "secondary", ellipsis: true, title: file.name, children: file.name }), Boolean(description) && (_jsx(Text, { className: cn('description'), color: "secondary", ellipsis: true, title: description, children: description }))] }))] }), actions?.length && (_jsx(FilePreviewActions, { hoverabelPanelClassName: cn('actions-panel'), fileName: file.name, isCustomImage: isPreviewString, actions: actions }))] }));
}
FilePreview.displayName = 'FilePreview';
//# sourceMappingURL=FilePreview.js.map