@gravity-ui/uikit
Version:
Gravity UI base styling and components
62 lines (61 loc) • 3.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilePreview = FilePreview;
const tslib_1 = require("tslib");
const jsx_runtime_1 = require("react/jsx-runtime");
const React = tslib_1.__importStar(require("react"));
const icons_1 = require("@gravity-ui/icons");
const hooks_1 = require("../../hooks/index.js");
const Icon_1 = require("../Icon/index.js");
const Text_1 = require("../Text/index.js");
const mobile_1 = require("../mobile/index.js");
const cn_1 = require("../utils/cn.js");
const FilePreviewActions_1 = require("./FilePreviewActions/FilePreviewActions.js");
const utils_1 = require("./utils.js");
require("./FilePreview.css");
const cn = (0, cn_1.block)('file-preview');
const FILE_ICON = {
default: icons_1.FileQuestion,
image: icons_1.Picture,
video: icons_1.Filmstrip,
code: icons_1.Code,
archive: icons_1.FileZipper,
audio: icons_1.MusicNote,
music: icons_1.MusicNote,
text: icons_1.TextAlignLeft,
pdf: icons_1.LogoAcrobat,
table: icons_1.LayoutHeaderCellsLarge,
};
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 = (0, utils_1.getFileType)(file);
const mobile = (0, mobile_1.useMobile)();
const { onKeyDown } = (0, hooks_1.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 ((0, jsx_runtime_1.jsxs)("div", { className: cn({ mobile, view }, className), "data-qa": qa, children: [(0, jsx_runtime_1.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 ? ((0, jsx_runtime_1.jsx)("div", { className: cn('image-container'), children: (0, jsx_runtime_1.jsx)("img", { className: cn('image'), src: previewSrc, alt: file.name }) })) : ((0, jsx_runtime_1.jsx)("div", { className: cn('icon-container'), children: (0, jsx_runtime_1.jsx)("div", { className: cn('icon', { type }), children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: cn('icon-svg'), data: FILE_ICON[type], size: 20 }) }) })), !compact && ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { className: cn('name'), color: "secondary", ellipsis: true, title: file.name, children: file.name }), Boolean(description) && ((0, jsx_runtime_1.jsx)(Text_1.Text, { className: cn('description'), color: "secondary", ellipsis: true, title: description, children: description }))] }))] }), actions?.length && ((0, jsx_runtime_1.jsx)(FilePreviewActions_1.FilePreviewActions, { hoverabelPanelClassName: cn('actions-panel'), fileName: file.name, isCustomImage: isPreviewString, actions: actions }))] }));
}
FilePreview.displayName = 'FilePreview';
//# sourceMappingURL=FilePreview.js.map