@uppy/dashboard
Version:
Universal UI plugin for Uppy.
64 lines (63 loc) • 4.27 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import classNames from 'classnames';
// biome-ignore lint/style/useImportType: h is not a type
import { Component, h } from 'preact';
import { shallowEqualObjects } from 'shallow-equal';
import Buttons from './Buttons/index.js';
import FileInfo from './FileInfo/index.js';
import FilePreviewAndLink from './FilePreviewAndLink/index.js';
import FileProgress from './FileProgress/index.js';
export default class FileItem extends Component {
componentDidMount() {
const { file } = this.props;
if (!file.preview) {
this.props.handleRequestThumbnail(file);
}
}
shouldComponentUpdate(nextProps) {
return !shallowEqualObjects(this.props, nextProps);
}
// VirtualList mounts FileItems again and they emit `thumbnail:request`
// Otherwise thumbnails are broken or missing after Golden Retriever restores files
componentDidUpdate() {
const { file } = this.props;
if (!file.preview) {
this.props.handleRequestThumbnail(file);
}
}
componentWillUnmount() {
const { file } = this.props;
if (!file.preview) {
this.props.handleCancelThumbnail(file);
}
}
render() {
const { file } = this.props;
const isProcessing = file.progress.preprocess || file.progress.postprocess;
const isUploaded = !!file.progress.uploadComplete && !isProcessing && !file.error;
const uploadInProgressOrComplete = !!file.progress.uploadStarted || !!isProcessing;
const uploadInProgress = (file.progress.uploadStarted && !file.progress.uploadComplete) ||
isProcessing;
const error = file.error || false;
// File that Golden Retriever was able to partly restore (only meta, not blob),
// users still need to re-add it, so it’s a ghost
const { isGhost } = file;
let showRemoveButton = this.props.individualCancellation
? !isUploaded
: !uploadInProgress && !isUploaded;
if (isUploaded && this.props.showRemoveButtonAfterComplete) {
showRemoveButton = true;
}
const dashboardItemClass = classNames({
'uppy-Dashboard-Item': true,
'is-inprogress': uploadInProgress && !this.props.recoveredState,
'is-processing': isProcessing,
'is-complete': isUploaded,
'is-error': !!error,
'is-resumable': this.props.resumableUploads,
'is-noIndividualCancellation': !this.props.individualCancellation,
'is-ghost': isGhost,
});
return (_jsxs("div", { className: dashboardItemClass, id: `uppy_${file.id}`, role: this.props.role, children: [_jsxs("div", { className: "uppy-Dashboard-Item-preview", children: [_jsx(FilePreviewAndLink, { file: file, showLinkToFileUploadResult: this.props.showLinkToFileUploadResult, i18n: this.props.i18n, toggleFileCard: this.props.toggleFileCard, metaFields: this.props.metaFields }), _jsx(FileProgress, { uppy: this.props.uppy, file: file, error: error, isUploaded: isUploaded, hideRetryButton: this.props.hideRetryButton, hideCancelButton: this.props.hideCancelButton, hidePauseResumeButton: this.props.hidePauseResumeButton, recoveredState: this.props.recoveredState, resumableUploads: this.props.resumableUploads, individualCancellation: this.props.individualCancellation, i18n: this.props.i18n })] }), _jsxs("div", { className: "uppy-Dashboard-Item-fileInfoAndButtons", children: [_jsx(FileInfo, { file: file, containerWidth: this.props.containerWidth, containerHeight: this.props.containerHeight, i18n: this.props.i18n, toggleAddFilesPanel: this.props.toggleAddFilesPanel, toggleFileCard: this.props.toggleFileCard, metaFields: this.props.metaFields, isSingleFile: this.props.isSingleFile }), _jsx(Buttons, { file: file, metaFields: this.props.metaFields, showLinkToFileUploadResult: this.props.showLinkToFileUploadResult, showRemoveButton: showRemoveButton, canEditFile: this.props.canEditFile, uploadInProgressOrComplete: uploadInProgressOrComplete, toggleFileCard: this.props.toggleFileCard, openFileEditor: this.props.openFileEditor, uppy: this.props.uppy, i18n: this.props.i18n })] })] }));
}
}