@i-novus/ui-core
Version:
Базовые UI компоненты
84 lines (83 loc) • 4.67 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useCallback, useState, useMemo } from 'react';
import classNames from 'classnames';
import { Button } from '../../../general/Button';
import { Spin } from '../../../feedback/Spin';
import { useConfigProvider } from '../../../core';
import { Divider } from '../../../layout/Divider';
import { Icon } from '../../Icon';
import { formatFileSize, isSameOrigin } from '../utils';
const CAN_OPEN_FILES = ['png', 'jpg', 'pdf'];
let abortController = new AbortController();
export const UploadSuccess = ({ file, prefix, onRemove, readOnly }) => {
const { getPrefix } = useConfigProvider();
const prefixCls = getPrefix(prefix);
const [disabledDownload, setDisabledDownload] = useState(false);
const onRemoveFile = useCallback(() => {
if (onRemove) {
onRemove(file);
}
}, [file, onRemove]);
const sendRequest = useCallback((operationType) => {
abortController = new AbortController();
setDisabledDownload(true);
fetch(file.url, {
signal: abortController.signal,
}).then(response => response.blob()).then((blob) => {
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
switch (operationType) {
case "open" /* FileOperation.open */:
window.open(url);
break;
case "download" /* FileOperation.download */:
default:
link.download = file.name;
link.href = url;
link.click();
break;
}
}).catch((error) => {
console.error(error);
})
.finally(() => {
setDisabledDownload(false);
});
}, [file]);
const onDownloadFile = useCallback(() => {
if (isSameOrigin(file.url, window.location.toString())) {
const link = document.createElement('a');
link.download = `${file.name}.${file.type}`;
link.href = file.url;
link.click();
}
else {
sendRequest("download" /* FileOperation.download */);
}
}, [file, sendRequest]);
const onAbortDownloadFile = useCallback(() => {
abortController.abort();
}, []);
const onOpenFile = useCallback(() => {
sendRequest("open" /* FileOperation.open */);
}, [sendRequest]);
const formatIcon = useMemo(() => {
switch (file.type) {
case 'docx': {
return 'format-doc';
}
case 'xlsx': {
return 'format-xls';
}
case 'pptx': {
return 'format-ppt';
}
default: {
return `format-${file.type}`;
}
}
}, [file.type]);
return (_jsxs("div", { className: `${prefixCls}-file-list-item_wrapper`, children: [_jsxs("div", { className: `${prefixCls}-file-list-item`, children: [_jsx(Icon, { className: classNames(`${prefixCls}-file-list-item_icon`, `${prefixCls}-file-list-item_icon__success`), icon: formatIcon }), _jsx("span", { className: `${prefixCls}-file-list-item`, children: file.name }), _jsx(Divider, { variant: "vertical" }), _jsx("span", { className: `${prefixCls}-file-list-item_size`, children: formatFileSize(file.size) }), file.date && _jsx("span", { className: `${prefixCls}-file-list-item_date`, children: file.date }), !readOnly &&
(_jsx(Button, { className: classNames(`${prefixCls}-file-list-item_button`, `${prefixCls}-file-list-item_action`), variant: "link-delete", onClick: onRemoveFile, children: "\u0423\u0434\u0430\u043B\u0438\u0442\u044C" }))] }), _jsxs("div", { className: `${prefixCls}-file-list-item_actions`, children: [CAN_OPEN_FILES.includes(file.type) &&
(_jsx(Button, { variant: "link", className: `${prefixCls}-file-list-item_button`, onClick: onOpenFile, children: "\u0421\u043C\u043E\u0442\u0440\u0435\u0442\u044C" })), _jsx(Button, { variant: "link", className: `${prefixCls}-file-list-item_button`, onClick: onDownloadFile, disabled: disabledDownload, children: "\u0421\u043A\u0430\u0447\u0430\u0442\u044C" }), disabledDownload && (_jsxs("div", { className: `${prefixCls}-file-list-item_button`, children: [_jsx(Spin, { className: `${prefixCls}-file-list-item_spin` }), _jsx(Button, { variant: "link", className: `${prefixCls}-file-list-item_button`, onClick: onAbortDownloadFile, children: _jsx(Icon, { icon: "common-close", className: `${prefixCls}-file-list-item_icon__error` }) })] }))] })] }));
};