@uppy/dashboard
Advanced tools
Comparing version 3.3.2 to 3.4.0
# @uppy/dashboard | ||
## 3.4.0 | ||
Released: 2023-04-18 | ||
Included in: Uppy v3.8.0 | ||
- @uppy/dashboard: Single File Mode: fix layout and make optional (Artur Paikin / #4374) | ||
## 3.3.1 | ||
@@ -4,0 +11,0 @@ |
@@ -19,7 +19,11 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
const WIDTH_MD = 576; | ||
const HEIGHT_MD = 400; | ||
const HEIGHT_MD = 330; // We might want to enable this in the future | ||
// const HEIGHT_LG = 400 | ||
// const HEIGHT_XL = 460 | ||
export default function Dashboard(props) { | ||
const noFiles = props.totalFileCount === 0; | ||
const singleFile = props.totalFileCount === 1; | ||
const isNoFiles = props.totalFileCount === 0; | ||
const isSingleFile = props.totalFileCount === 1; | ||
const isSizeMD = props.containerWidth > WIDTH_MD; | ||
const isSizeHeightMD = props.containerHeight > HEIGHT_MD; | ||
const dashboardClassName = classNames({ | ||
@@ -36,5 +40,9 @@ 'uppy-Dashboard': true, | ||
'uppy-size--height-md': props.containerHeight > HEIGHT_MD, | ||
// We might want to enable this in the future | ||
// 'uppy-size--height-lg': props.containerHeight > HEIGHT_LG, | ||
// 'uppy-size--height-xl': props.containerHeight > HEIGHT_XL, | ||
'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel, | ||
'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible, | ||
'uppy-Dashboard--singleFile': singleFile | ||
// Only enable “centered single file” mode when Dashboard is tall enough | ||
'uppy-Dashboard--singleFile': props.singleFileFullScreen && isSingleFile && isSizeHeightMD | ||
}); // Important: keep these in sync with the percent width values in `src/components/FileItem/index.scss`. | ||
@@ -52,3 +60,3 @@ | ||
const showFileList = props.showSelectedFiles && !noFiles; | ||
const showFileList = props.showSelectedFiles && !isNoFiles; | ||
const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null; | ||
@@ -132,7 +140,28 @@ const numberOfGhosts = props.files ? Object.keys(props.files).filter(fileID => props.files[fileID].isGhost).length : null; | ||
className: "uppy-Dashboard-serviceMsg-text" | ||
}, renderRestoredText())), showFileList ? h(FileList // eslint-disable-next-line react/jsx-props-no-spreading | ||
, _extends({}, props, { | ||
singleFile: singleFile, | ||
}, renderRestoredText())), showFileList ? h(FileList, { | ||
id: props.id, | ||
error: props.error, | ||
i18n: props.i18n, | ||
uppy: props.uppy, | ||
files: props.files, | ||
acquirers: props.acquirers, | ||
resumableUploads: props.resumableUploads, | ||
hideRetryButton: props.hideRetryButton, | ||
hidePauseResumeButton: props.hidePauseResumeButton, | ||
hideCancelButton: props.hideCancelButton, | ||
showLinkToFileUploadResult: props.showLinkToFileUploadResult, | ||
showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete, | ||
isWide: props.isWide, | ||
metaFields: props.metaFields, | ||
toggleFileCard: props.toggleFileCard, | ||
handleRequestThumbnail: props.handleRequestThumbnail, | ||
handleCancelThumbnail: props.handleCancelThumbnail, | ||
recoveredState: props.recoveredState, | ||
individualCancellation: props.individualCancellation, | ||
openFileEditor: props.openFileEditor, | ||
canEditFile: props.canEditFile, | ||
toggleAddFilesPanel: props.toggleAddFilesPanel, | ||
isSingleFile: isSingleFile, | ||
itemsPerRow: itemsPerRow | ||
})) : // eslint-disable-next-line react/jsx-props-no-spreading | ||
}) : // eslint-disable-next-line react/jsx-props-no-spreading | ||
h(AddFiles, _extends({}, props, { | ||
@@ -139,0 +168,0 @@ isSizeMD: isSizeMD |
@@ -13,4 +13,4 @@ import { h, Fragment } from 'preact'; | ||
function getMaxNameLength() { | ||
if (props.singleFile) { | ||
return 200; | ||
if (props.isSingleFile && props.containerHeight >= 350) { | ||
return 90; | ||
} | ||
@@ -17,0 +17,0 @@ |
@@ -6,23 +6,32 @@ import { h } from 'preact'; | ||
export default function FilePreviewAndLink(props) { | ||
const { | ||
file, | ||
i18n, | ||
toggleFileCard, | ||
metaFields, | ||
showLinkToFileUploadResult | ||
} = props; | ||
const white = 'rgba(255, 255, 255, 0.5)'; | ||
const previewBackgroundColor = file.preview ? white : getFileTypeIcon(props.file.type).color; | ||
return h("div", { | ||
className: "uppy-Dashboard-Item-previewInnerWrap", | ||
style: { | ||
backgroundColor: getFileTypeIcon(props.file.type).color | ||
backgroundColor: previewBackgroundColor | ||
} | ||
}, props.showLinkToFileUploadResult && props.file.uploadURL && h("a", { | ||
}, showLinkToFileUploadResult && file.uploadURL && h("a", { | ||
className: "uppy-Dashboard-Item-previewLink", | ||
href: props.file.uploadURL, | ||
href: file.uploadURL, | ||
rel: "noreferrer noopener", | ||
target: "_blank", | ||
"aria-label": props.file.meta.name | ||
"aria-label": file.meta.name | ||
}, h("span", { | ||
hidden: true | ||
}, props.file.meta.name)), h(FilePreview, { | ||
file: props.file | ||
}, file.meta.name)), h(FilePreview, { | ||
file: file | ||
}), h(MetaErrorMessage, { | ||
file: props.file, | ||
i18n: props.i18n, | ||
toggleFileCard: props.toggleFileCard, | ||
metaFields: props.metaFields | ||
file: file, | ||
i18n: i18n, | ||
toggleFileCard: toggleFileCard, | ||
metaFields: metaFields | ||
})); | ||
} |
@@ -107,2 +107,3 @@ import { h, Component } from 'preact'; | ||
containerWidth: this.props.containerWidth, | ||
containerHeight: this.props.containerHeight, | ||
i18n: this.props.i18n, | ||
@@ -112,3 +113,3 @@ toggleAddFilesPanel: this.props.toggleAddFilesPanel, | ||
metaFields: this.props.metaFields, | ||
singleFile: this.props.singleFile | ||
isSingleFile: this.props.isSingleFile | ||
}), h(Buttons, { | ||
@@ -115,0 +116,0 @@ file: file, |
@@ -1,4 +0,3 @@ | ||
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } | ||
import { h } from 'preact'; | ||
import { useMemo } from 'preact/hooks'; | ||
import FileItem from "./FileItem/index.js"; | ||
@@ -22,44 +21,45 @@ import VirtualList from "./VirtualList.js"; | ||
export default (props => { | ||
export default (_ref => { | ||
let { | ||
id, | ||
error, | ||
i18n, | ||
uppy, | ||
files, | ||
acquirers, | ||
resumableUploads, | ||
hideRetryButton, | ||
hidePauseResumeButton, | ||
hideCancelButton, | ||
showLinkToFileUploadResult, | ||
showRemoveButtonAfterComplete, | ||
isWide, | ||
metaFields, | ||
isSingleFile, | ||
toggleFileCard, | ||
handleRequestThumbnail, | ||
handleCancelThumbnail, | ||
recoveredState, | ||
individualCancellation, | ||
itemsPerRow, | ||
openFileEditor, | ||
canEditFile, | ||
toggleAddFilesPanel, | ||
containerWidth, | ||
containerHeight | ||
} = _ref; | ||
// It's not great that this is hardcoded! | ||
// It's ESPECIALLY not great that this is checking against `itemsPerRow`! | ||
const rowHeight = props.itemsPerRow === 1 // Mobile | ||
const rowHeight = itemsPerRow === 1 // Mobile | ||
? 71 // 190px height + 2 * 5px margin | ||
: 200; | ||
const fileProps = { | ||
// FIXME This is confusing, it's actually the Dashboard's plugin ID | ||
id: props.id, | ||
error: props.error, | ||
// TODO move this to context | ||
i18n: props.i18n, | ||
uppy: props.uppy, | ||
// features | ||
acquirers: props.acquirers, | ||
resumableUploads: props.resumableUploads, | ||
individualCancellation: props.individualCancellation, | ||
// visual options | ||
hideRetryButton: props.hideRetryButton, | ||
hidePauseResumeButton: props.hidePauseResumeButton, | ||
hideCancelButton: props.hideCancelButton, | ||
showLinkToFileUploadResult: props.showLinkToFileUploadResult, | ||
showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete, | ||
isWide: props.isWide, | ||
metaFields: props.metaFields, | ||
recoveredState: props.recoveredState, | ||
singleFile: props.singleFile, | ||
// callbacks | ||
toggleFileCard: props.toggleFileCard, | ||
handleRequestThumbnail: props.handleRequestThumbnail, | ||
handleCancelThumbnail: props.handleCancelThumbnail | ||
}; | ||
: 200; // Sort files by file.isGhost, ghost files first, only if recoveredState is present | ||
const sortByGhostComesFirst = (file1, file2) => { | ||
return props.files[file2].isGhost - props.files[file1].isGhost; | ||
}; // Sort files by file.isGhost, ghost files first, only if recoveredState is present | ||
const rows = useMemo(() => { | ||
const sortByGhostComesFirst = (file1, file2) => files[file2].isGhost - files[file1].isGhost; | ||
const fileIds = Object.keys(files); | ||
if (recoveredState) fileIds.sort(sortByGhostComesFirst); | ||
return chunks(fileIds, itemsPerRow); | ||
}, [files, itemsPerRow, recoveredState]); | ||
const files = Object.keys(props.files); | ||
if (props.recoveredState) files.sort(sortByGhostComesFirst); | ||
const rows = chunks(files, props.itemsPerRow); | ||
const renderRow = row => // The `role="presentation` attribute ensures that the list items are properly | ||
@@ -72,15 +72,38 @@ // associated with the `VirtualList` element. | ||
key: row[0] | ||
}, row.map(fileID => h(FileItem, _extends({ | ||
}, row.map(fileID => h(FileItem, { | ||
key: fileID, | ||
uppy: props.uppy | ||
}, fileProps, { | ||
// eslint-disable-line react/jsx-props-no-spreading | ||
uppy: uppy // FIXME This is confusing, it's actually the Dashboard's plugin ID | ||
, | ||
id: id, | ||
error: error // TODO move this to context | ||
, | ||
i18n: i18n // features | ||
, | ||
acquirers: acquirers, | ||
resumableUploads: resumableUploads, | ||
individualCancellation: individualCancellation // visual options | ||
, | ||
hideRetryButton: hideRetryButton, | ||
hidePauseResumeButton: hidePauseResumeButton, | ||
hideCancelButton: hideCancelButton, | ||
showLinkToFileUploadResult: showLinkToFileUploadResult, | ||
showRemoveButtonAfterComplete: showRemoveButtonAfterComplete, | ||
isWide: isWide, | ||
metaFields: metaFields, | ||
recoveredState: recoveredState, | ||
isSingleFile: isSingleFile, | ||
containerWidth: containerWidth, | ||
containerHeight: containerHeight // callbacks | ||
, | ||
toggleFileCard: toggleFileCard, | ||
handleRequestThumbnail: handleRequestThumbnail, | ||
handleCancelThumbnail: handleCancelThumbnail, | ||
role: "listitem", | ||
openFileEditor: props.openFileEditor, | ||
canEditFile: props.canEditFile, | ||
toggleAddFilesPanel: props.toggleAddFilesPanel, | ||
file: props.files[fileID] | ||
})))); | ||
openFileEditor: openFileEditor, | ||
canEditFile: canEditFile, | ||
toggleAddFilesPanel: toggleAddFilesPanel, | ||
file: files[fileID] | ||
}))); | ||
if (props.singleFile) { | ||
if (isSingleFile) { | ||
return h("div", { | ||
@@ -87,0 +110,0 @@ class: "uppy-Dashboard-files" |
@@ -21,3 +21,3 @@ function _classPrivateFieldLooseBase(receiver, privateKey) { if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) { throw new TypeError("attempted to use private field on non-instance"); } return receiver; } | ||
const packageJson = { | ||
"version": "3.3.2" | ||
"version": "3.4.0" | ||
}; | ||
@@ -405,3 +405,4 @@ import locale from './locale.js'; | ||
if ( // if ResizeObserver hasn't yet fired, | ||
if ( // We might want to enable this in the future | ||
// if ResizeObserver hasn't yet fired, | ||
!pluginState.areInsidesReadyToBeVisible // and it's not due to the modal being closed | ||
@@ -630,4 +631,5 @@ && !isModalAndClosed) { | ||
} | ||
}; // Add all dropped files | ||
}; | ||
this.uppy.log('[Dashboard] Processing dropped files'); // Add all dropped files | ||
@@ -991,2 +993,3 @@ const files = await getDroppedFiles(event.dataTransfer, { | ||
nativeCameraFacingMode: this.opts.nativeCameraFacingMode, | ||
singleFileFullScreen: this.opts.singleFileFullScreen, | ||
handleCancelRestore: this.handleCancelRestore, | ||
@@ -1172,2 +1175,3 @@ handleRequestThumbnail: this.handleRequestThumbnail, | ||
closeAfterFinish: false, | ||
singleFileFullScreen: true, | ||
disableStatusBar: false, | ||
@@ -1174,0 +1178,0 @@ disableInformer: false, |
{ | ||
"name": "@uppy/dashboard", | ||
"description": "Universal UI plugin for Uppy.", | ||
"version": "3.3.2", | ||
"version": "3.4.0", | ||
"license": "MIT", | ||
@@ -27,7 +27,7 @@ "main": "lib/index.js", | ||
"@transloadit/prettier-bytes": "0.0.7", | ||
"@uppy/informer": "^3.0.1", | ||
"@uppy/provider-views": "^3.2.0", | ||
"@uppy/status-bar": "^3.1.0", | ||
"@uppy/thumbnail-generator": "^3.0.2", | ||
"@uppy/utils": "^5.2.0", | ||
"@uppy/informer": "^3.0.2", | ||
"@uppy/provider-views": "^3.3.0", | ||
"@uppy/status-bar": "^3.1.1", | ||
"@uppy/thumbnail-generator": "^3.0.3", | ||
"@uppy/utils": "^5.3.0", | ||
"classnames": "^2.2.6", | ||
@@ -42,9 +42,9 @@ "is-shallow-equal": "^1.0.1", | ||
"@jest/globals": "^29.0.0", | ||
"@uppy/google-drive": "^3.1.0", | ||
"@uppy/status-bar": "^3.1.0", | ||
"@uppy/google-drive": "^3.1.1", | ||
"@uppy/status-bar": "^3.1.1", | ||
"resize-observer-polyfill": "^1.5.0" | ||
}, | ||
"peerDependencies": { | ||
"@uppy/core": "^3.1.2" | ||
"@uppy/core": "^3.2.0" | ||
} | ||
} |
# @uppy/dashboard | ||
<img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="120" alt="Uppy logo: a superman puppy in a pink suit" align="right"> | ||
<img src="https://uppy.io/img/logo.svg" width="120" alt="Uppy logo: a smiling puppy above a pink upwards arrow" align="right"> | ||
@@ -5,0 +5,0 @@ [![npm version](https://img.shields.io/npm/v/@uppy/dashboard.svg?style=flat-square)](https://www.npmjs.com/package/@uppy/dashboard) |
@@ -19,9 +19,13 @@ import { h } from 'preact' | ||
const WIDTH_MD = 576 | ||
const HEIGHT_MD = 400 | ||
const HEIGHT_MD = 330 | ||
// We might want to enable this in the future | ||
// const HEIGHT_LG = 400 | ||
// const HEIGHT_XL = 460 | ||
export default function Dashboard (props) { | ||
const noFiles = props.totalFileCount === 0 | ||
const singleFile = props.totalFileCount === 1 | ||
const isNoFiles = props.totalFileCount === 0 | ||
const isSingleFile = props.totalFileCount === 1 | ||
const isSizeMD = props.containerWidth > WIDTH_MD | ||
const isSizeHeightMD = props.containerHeight > HEIGHT_MD | ||
@@ -39,5 +43,9 @@ const dashboardClassName = classNames({ | ||
'uppy-size--height-md': props.containerHeight > HEIGHT_MD, | ||
// We might want to enable this in the future | ||
// 'uppy-size--height-lg': props.containerHeight > HEIGHT_LG, | ||
// 'uppy-size--height-xl': props.containerHeight > HEIGHT_XL, | ||
'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel, | ||
'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible, | ||
'uppy-Dashboard--singleFile': singleFile, | ||
// Only enable “centered single file” mode when Dashboard is tall enough | ||
'uppy-Dashboard--singleFile': props.singleFileFullScreen && isSingleFile && isSizeHeightMD, | ||
}) | ||
@@ -55,3 +63,3 @@ | ||
const showFileList = props.showSelectedFiles && !noFiles | ||
const showFileList = props.showSelectedFiles && !isNoFiles | ||
@@ -142,5 +150,25 @@ const numberOfFilesForRecovery = props.recoveredState ? Object.keys(props.recoveredState.files).length : null | ||
<FileList | ||
// eslint-disable-next-line react/jsx-props-no-spreading | ||
{...props} | ||
singleFile={singleFile} | ||
id={props.id} | ||
error={props.error} | ||
i18n={props.i18n} | ||
uppy={props.uppy} | ||
files={props.files} | ||
acquirers={props.acquirers} | ||
resumableUploads={props.resumableUploads} | ||
hideRetryButton={props.hideRetryButton} | ||
hidePauseResumeButton={props.hidePauseResumeButton} | ||
hideCancelButton={props.hideCancelButton} | ||
showLinkToFileUploadResult={props.showLinkToFileUploadResult} | ||
showRemoveButtonAfterComplete={props.showRemoveButtonAfterComplete} | ||
isWide={props.isWide} | ||
metaFields={props.metaFields} | ||
toggleFileCard={props.toggleFileCard} | ||
handleRequestThumbnail={props.handleRequestThumbnail} | ||
handleCancelThumbnail={props.handleCancelThumbnail} | ||
recoveredState={props.recoveredState} | ||
individualCancellation={props.individualCancellation} | ||
openFileEditor={props.openFileEditor} | ||
canEditFile={props.canEditFile} | ||
toggleAddFilesPanel={props.toggleAddFilesPanel} | ||
isSingleFile={isSingleFile} | ||
itemsPerRow={itemsPerRow} | ||
@@ -147,0 +175,0 @@ /> |
@@ -10,4 +10,4 @@ import { h, Fragment } from 'preact' | ||
function getMaxNameLength () { | ||
if (props.singleFile) { | ||
return 200 | ||
if (props.isSingleFile && props.containerHeight >= 350) { | ||
return 90 | ||
} | ||
@@ -14,0 +14,0 @@ if (props.containerWidth <= 352) { |
@@ -7,28 +7,31 @@ import { h } from 'preact' | ||
export default function FilePreviewAndLink (props) { | ||
const { file, i18n, toggleFileCard, metaFields, showLinkToFileUploadResult } = props | ||
const white = 'rgba(255, 255, 255, 0.5)' | ||
const previewBackgroundColor = file.preview ? white : getFileTypeIcon(props.file.type).color | ||
return ( | ||
<div | ||
className="uppy-Dashboard-Item-previewInnerWrap" | ||
style={{ backgroundColor: getFileTypeIcon(props.file.type).color }} | ||
style={{ backgroundColor: previewBackgroundColor }} | ||
> | ||
{ | ||
props.showLinkToFileUploadResult | ||
&& props.file.uploadURL | ||
showLinkToFileUploadResult && file.uploadURL | ||
&& ( | ||
<a | ||
className="uppy-Dashboard-Item-previewLink" | ||
href={props.file.uploadURL} | ||
href={file.uploadURL} | ||
rel="noreferrer noopener" | ||
target="_blank" | ||
aria-label={props.file.meta.name} | ||
aria-label={file.meta.name} | ||
> | ||
<span hidden>{props.file.meta.name}</span> | ||
<span hidden>{file.meta.name}</span> | ||
</a> | ||
) | ||
} | ||
<FilePreview file={props.file} /> | ||
<FilePreview file={file} /> | ||
<MetaErrorMessage | ||
file={props.file} | ||
i18n={props.i18n} | ||
toggleFileCard={props.toggleFileCard} | ||
metaFields={props.metaFields} | ||
file={file} | ||
i18n={i18n} | ||
toggleFileCard={toggleFileCard} | ||
metaFields={metaFields} | ||
/> | ||
@@ -35,0 +38,0 @@ </div> |
@@ -105,2 +105,3 @@ import { h, Component } from 'preact' | ||
containerWidth={this.props.containerWidth} | ||
containerHeight={this.props.containerHeight} | ||
i18n={this.props.i18n} | ||
@@ -110,3 +111,3 @@ toggleAddFilesPanel={this.props.toggleAddFilesPanel} | ||
metaFields={this.props.metaFields} | ||
singleFile={this.props.singleFile} | ||
isSingleFile={this.props.isSingleFile} | ||
/> | ||
@@ -113,0 +114,0 @@ <Buttons |
import { h } from 'preact' | ||
import { useMemo } from 'preact/hooks' | ||
import FileItem from './FileItem/index.jsx' | ||
@@ -20,6 +21,11 @@ import VirtualList from './VirtualList.jsx' | ||
export default (props) => { | ||
export default ({ | ||
id, error, i18n, uppy, files, acquirers, resumableUploads, hideRetryButton, hidePauseResumeButton, hideCancelButton, | ||
showLinkToFileUploadResult, showRemoveButtonAfterComplete, isWide, metaFields, isSingleFile, toggleFileCard, | ||
handleRequestThumbnail, handleCancelThumbnail, recoveredState, individualCancellation, itemsPerRow, openFileEditor, | ||
canEditFile, toggleAddFilesPanel, containerWidth, containerHeight, | ||
}) => { | ||
// It's not great that this is hardcoded! | ||
// It's ESPECIALLY not great that this is checking against `itemsPerRow`! | ||
const rowHeight = props.itemsPerRow === 1 | ||
const rowHeight = itemsPerRow === 1 | ||
// Mobile | ||
@@ -30,38 +36,11 @@ ? 71 | ||
const fileProps = { | ||
// FIXME This is confusing, it's actually the Dashboard's plugin ID | ||
id: props.id, | ||
error: props.error, | ||
// TODO move this to context | ||
i18n: props.i18n, | ||
uppy: props.uppy, | ||
// features | ||
acquirers: props.acquirers, | ||
resumableUploads: props.resumableUploads, | ||
individualCancellation: props.individualCancellation, | ||
// visual options | ||
hideRetryButton: props.hideRetryButton, | ||
hidePauseResumeButton: props.hidePauseResumeButton, | ||
hideCancelButton: props.hideCancelButton, | ||
showLinkToFileUploadResult: props.showLinkToFileUploadResult, | ||
showRemoveButtonAfterComplete: props.showRemoveButtonAfterComplete, | ||
isWide: props.isWide, | ||
metaFields: props.metaFields, | ||
recoveredState: props.recoveredState, | ||
singleFile: props.singleFile, | ||
// callbacks | ||
toggleFileCard: props.toggleFileCard, | ||
handleRequestThumbnail: props.handleRequestThumbnail, | ||
handleCancelThumbnail: props.handleCancelThumbnail, | ||
} | ||
// Sort files by file.isGhost, ghost files first, only if recoveredState is present | ||
const rows = useMemo(() => { | ||
const sortByGhostComesFirst = (file1, file2) => files[file2].isGhost - files[file1].isGhost | ||
const sortByGhostComesFirst = (file1, file2) => { | ||
return props.files[file2].isGhost - props.files[file1].isGhost | ||
} | ||
const fileIds = Object.keys(files) | ||
if (recoveredState) fileIds.sort(sortByGhostComesFirst) | ||
return chunks(fileIds, itemsPerRow) | ||
}, [files, itemsPerRow, recoveredState]) | ||
// Sort files by file.isGhost, ghost files first, only if recoveredState is present | ||
const files = Object.keys(props.files) | ||
if (props.recoveredState) files.sort(sortByGhostComesFirst) | ||
const rows = chunks(files, props.itemsPerRow) | ||
const renderRow = (row) => ( | ||
@@ -75,9 +54,33 @@ // The `role="presentation` attribute ensures that the list items are properly | ||
key={fileID} | ||
uppy={props.uppy} | ||
{...fileProps} // eslint-disable-line react/jsx-props-no-spreading | ||
uppy={uppy} | ||
// FIXME This is confusing, it's actually the Dashboard's plugin ID | ||
id={id} | ||
error={error} | ||
// TODO move this to context | ||
i18n={i18n} | ||
// features | ||
acquirers={acquirers} | ||
resumableUploads={resumableUploads} | ||
individualCancellation={individualCancellation} | ||
// visual options | ||
hideRetryButton={hideRetryButton} | ||
hidePauseResumeButton={hidePauseResumeButton} | ||
hideCancelButton={hideCancelButton} | ||
showLinkToFileUploadResult={showLinkToFileUploadResult} | ||
showRemoveButtonAfterComplete={showRemoveButtonAfterComplete} | ||
isWide={isWide} | ||
metaFields={metaFields} | ||
recoveredState={recoveredState} | ||
isSingleFile={isSingleFile} | ||
containerWidth={containerWidth} | ||
containerHeight={containerHeight} | ||
// callbacks | ||
toggleFileCard={toggleFileCard} | ||
handleRequestThumbnail={handleRequestThumbnail} | ||
handleCancelThumbnail={handleCancelThumbnail} | ||
role="listitem" | ||
openFileEditor={props.openFileEditor} | ||
canEditFile={props.canEditFile} | ||
toggleAddFilesPanel={props.toggleAddFilesPanel} | ||
file={props.files[fileID]} | ||
openFileEditor={openFileEditor} | ||
canEditFile={canEditFile} | ||
toggleAddFilesPanel={toggleAddFilesPanel} | ||
file={files[fileID]} | ||
/> | ||
@@ -88,3 +91,3 @@ ))} | ||
if (props.singleFile) { | ||
if (isSingleFile) { | ||
return ( | ||
@@ -91,0 +94,0 @@ <div class="uppy-Dashboard-files"> |
@@ -83,2 +83,3 @@ import { h } from 'preact' | ||
closeAfterFinish: false, | ||
singleFileFullScreen: true, | ||
disableStatusBar: false, | ||
@@ -426,3 +427,4 @@ disableInformer: false, | ||
const isModalAndClosed = !this.opts.inline && pluginState.isHidden | ||
if ( | ||
if (// We might want to enable this in the future | ||
// if ResizeObserver hasn't yet fired, | ||
@@ -658,2 +660,4 @@ !pluginState.areInsidesReadyToBeVisible | ||
this.uppy.log('[Dashboard] Processing dropped files') | ||
// Add all dropped files | ||
@@ -1010,2 +1014,3 @@ const files = await getDroppedFiles(event.dataTransfer, { logDropError }) | ||
nativeCameraFacingMode: this.opts.nativeCameraFacingMode, | ||
singleFileFullScreen: this.opts.singleFileFullScreen, | ||
handleCancelRestore: this.handleCancelRestore, | ||
@@ -1012,0 +1017,0 @@ handleRequestThumbnail: this.handleRequestThumbnail, |
@@ -29,2 +29,3 @@ import type { PluginOptions, UIPlugin, PluginTarget, UppyFile, IndexedObject } from '@uppy/core' | ||
closeAfterFinish?: boolean | ||
centerSingleFile?: boolean | ||
closeModalOnClickOutside?: boolean | ||
@@ -31,0 +32,0 @@ disableInformer?: boolean |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
687113
9868
Updated@uppy/informer@^3.0.2
Updated@uppy/provider-views@^3.3.0
Updated@uppy/status-bar@^3.1.1
Updated@uppy/utils@^5.3.0