diff --git a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js index 6cf04ff7fe..c784bd2acd 100644 --- a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js +++ b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.js @@ -3,33 +3,44 @@ const copyToClipboard = require('../../../utils/copyToClipboard') const { iconPencil, iconCross, iconCopyLink } = require('../../icons') -const renderEditButton = (props) => ( - !props.uploadInProgressOrComplete && - props.metaFields && - props.metaFields.length > 0 && - -) +function EditButton ({ + file, + uploadInProgressOrComplete, + metaFields, + i18n, + onClick +}) { + if (!uploadInProgressOrComplete && + metaFields && + metaFields.length > 0) { + return ( + + ) + } + return null +} -const renderRemoveButton = (props) => ( - props.showRemoveButton && +function RemoveButton ({ i18n, onClick }) { + return ( -) + ) +} const copyLinkToClipboard = (event, props) => copyToClipboard(props.file.uploadURL, props.i18n('copyLinkToClipboardFallback')) @@ -41,9 +52,8 @@ const copyLinkToClipboard = (event, props) => // avoid losing focus .then(() => event.target.focus({ preventScroll: true })) -const renderCopyLinkButton = (props) => ( - props.showLinkToFileUploadResult && - props.file.uploadURL && +function CopyLinkButton (props) { + return ( -) + ) +} module.exports = function Buttons (props) { + const { + file, + uploadInProgressOrComplete, + metaFields, + showLinkToFileUploadResult, + showRemoveButton, + i18n, + removeFile, + toggleFileCard + } = props + return (
- {renderEditButton(props)} - {renderCopyLinkButton(props)} - {renderRemoveButton(props)} + toggleFileCard(file.id)} + /> + {showLinkToFileUploadResult && file.uploadURL ? ( + + ) : null} + {showRemoveButton ? ( + removeFile(file.id)} + /> + ) : null}
) }